LCP במובייל — מה באמת מזיז את המחוג

כשעמוד נטען לאט במובייל, ההנחה הראשונה היא כמעט תמיד התמונות. אחר כך מכווצים אותן, מוסיפים טעינה מושהית, והמדד לא זז. זה קורה כי במקרים רבים התמונה לא הייתה הבעיה.

LCP מודד מתי האלמנט הגדול ביותר בחלק הנראה של העמוד מוצג. במובייל זה כמעט תמיד הכותרת הראשית או תמונת הגיבור. השאלה היא לא כמה הוא שוקל, אלא מה צריך לקרות לפני שהוא בכלל מופיע.

אנימציית החשיפה היא ה-LCP

הדבר הנפוץ ביותר שעוצר LCP הוא אפקט. כותרת שמתחילה שקופה ונחשפת בהדרגה היא כותרת שלא קיימת עד שה-JavaScript הגיע, רץ, והתחיל את האנימציה. הדפדפן לא יכול לדווח על אלמנט שאי אפשר לראות, ולכן המדד ממתין לכל השרשרת הזאת.

בסיפור בתמונה הגיבור נבנה בלי האפקט הזה בכלל: הוא נוצר בשרת, מגיע בתוך ה-HTML, ואין לו שלב של הסתרה והחשפה. הוא גם לא דורש JavaScript בצד הלקוח — לא כדי להיות אינטראקטיבי ולא כדי להיות נראה.

החלק האינטראקטיבי היחיד שם הוא הטקסט המתחלף בסוף המשפט, וזה רכיב קטן ונפרד. זו ההפרדה שמשנה: לא "העמוד הוא אינטראקטיבי" אלא "שני דברים בעמוד הם אינטראקטיביים, והשאר לא".

ואחר כך, כן, התמונות

אחרי שהגיבור מפסיק לחכות ל-JavaScript, התמונות באמת נהיות הגורם הבא. שם הבנייה הייתה ספציפית: הכנו מראש כל תמונה בארבעה רחבים (480, 900, 1400 ו-2000 פיקסלים) בפורמט WebP, והדפדפן בוחר את המתאים למסך שלו.

הסיבה שזה נעשה מראש ולא בזמן אמת היא עלות. שירותי אופטימיזציה אוטומטית מחייבים לפי תמונה, ובאתר שמשרת אזור גיאוגרפי אחד זה תשלום חודשי קבוע על עבודה שאפשר לעשות פעם אחת בזמן הבנייה. במקרה הזה החלטה של עלות תפעולית קבעה את הארכיטקטורה, וזה בסדר גמור, כל עוד זו החלטה ולא תאונה.

גופנים

גופן שנטען משרת חיצוני הוא בקשה לדומיין נוסף לפני שהטקסט מוצג. באתר הזה הגופנים מורדים בזמן הבנייה ומוגשים מאותו שרת כמו כל השאר, כך שאין בקשה לשירות הגופנים בכלל בזמן הטעינה.

פרט קטן באותו אזור: לאתר הזה יש מסך פתיחה, ומסך כזה יכול לייצר הבהוב אם ההחלטה אם להציג אותו מתקבלת אחרי הציור הראשון. ההחלטה מתקבלת לפני, וזו בדיוק אותה משפחה של בעיות — לא משקל, אלא סדר.

האילוצים של הפלטפורמה קובעים יותר ממה שנראה

דוגמה מאותו פרויקט, שלא נוגעת ישירות ב-LCP אבל מראה את אותו עקרון: שכבת ההרשאות שם נשארה בלי ספריית מסד הנתונים, כי היא נטענת בסביבה שלא מריצה אותה. זה לא היה בחירה סטייליסטית — זה מה שהסביבה אפשרה.

העיקרון זהה: הרבה מהביצועים נקבעים בהחלטות שנראות ארכיטקטוניות ולא ביצועיות. איפה הקוד רץ, מה דורש JavaScript, ומה נוצר מראש.

מה לבדוק, בסדר הזה

לפני שמכווצים משהו: מה האלמנט שנמדד, וכלי המדידה יגיד לכם; האם הוא מוסתר עד שאנימציה מתחילה; האם הוא דורש JavaScript כדי להופיע; ורק אחר כך, כמה הוא שוקל ובאיזה פורמט. בסדר הזה, לרוב עוצרים אחרי השאלה השנייה.

האנימציות הן גם עניין של נגישות, לא רק של ביצועים — מה בנינו כדי לעמוד בת"י 5568.

דף נחיתה שנבנה סביב המהירות שבה הוא נטען