מהירות טעינת אתר היא כמה מהר עמוד מופיע ומוכן לשימוש אצל הגולש. כשמדברים עליה, כל כלי בדיקה וכל מדריך זורקים עשרות מונחים באנגלית. ריכזתי כאן את המונחים שבאמת חשובים, בהסבר של משפט או שניים, כדי שתוכלו להבין דוח בדיקה בלי לחפש כל מילה בנפרד.
אל תתנו למהירות לעכב אתכם. השאירו פרטים לשדרוג האתר.
למה מהירות טעינת אתר חשובה
גולש שמחכה מול מסך לבן עוזב, ולפעמים הוא עוזב לפני שראה מילה אחת מהתוכן. גוגל מודדת את המהירות אצל גולשים אמיתיים ומשתמשת בה כחלק מההערכה של חוויית הגולש בעמוד. לכן מהירות טעינת אתר משפיעה גם על הלקוחות וגם על הנראות בחיפוש.
המונחים למטה מחולקים לפי המקום שבו הבעיה נמצאת: המדדים שגוגל בודקת, השרת והרשת, הקוד של העמוד והתמונות. כשמבינים לאיזו קבוצה שייכת בעיה, הרבה יותר קל להבין מי צריך לטפל בה.
המדדים שגוגל בודקת
גוגל מודדת מהירות טעינת אתר בכמה מדדים, ומרכזת את החשובים שבהם תחת השם Core Web Vitals. שלושה מהם קובעים את ההערכה, והשאר עוזרים להבין מה קורה בדרך.
LCP
הזמן עד שהאלמנט הגדול בראש העמוד, בדרך כלל תמונה או כותרת, מוצג במלואו. זה המדד שהכי קרוב לתחושה שהעמוד נטען. היעד של גוגל הוא עד 2.5 שניות.
INP
כמה זמן לוקח לעמוד להגיב ללחיצה או להקלדה. עמוד שנראה מוכן אבל לא מגיב לכפתור נכשל במדד הזה. היעד הוא עד 0.2 שניות, ונמדד לאורך כל הביקור ולא רק בטעינה.
CLS
כמה העמוד קופץ בזמן הטעינה, למשל כשתמונה נטענת ודוחפת את הטקסט למטה. זה ציון בלי יחידות, לא זמן, והיעד הוא עד 0.1. הסברתי אותו עם שלוש דוגמאות אמיתיות במאמר על CLS.
FCP
הזמן עד שמשהו ראשון מופיע על המסך, טקסט, רקע או לוגו. הוא לא חלק מההערכה של גוגל, אבל הוא אומר לגולש שהעמוד בדרך, ולכן הוא משפיע על הסבלנות שלו.
TTFB
הזמן עד שהשרת מתחיל לשלוח את העמוד. אם הוא ארוך, כל השאר מתעכב אחריו. כאן משפיעים בעיקר האחסון והמטמון, ולא מה שיש בעמוד עצמו.
נתוני גולשים אמיתיים
גוגל אוספת מדפדפני Chrome את המדידות של גולשים אמיתיים, ומציגה אותן ב PageSpeed Insights לעמודים עם מספיק תנועה. אלה המספרים שקובעים, ולא הבדיקה במעבדה, שהיא רק הערכה.
שרת ורשת
כל מה שקורה עוד לפני שהדפדפן מתחיל לבנות את העמוד. בעיות כאן פוגעות בכל העמודים באתר בבת אחת.
מטמון
עותק מוכן של עמוד או קובץ שנשמר כדי לא לבנות אותו מחדש בכל כניסה. יש מטמון בשרת, בדפדפן של הגולש וברשת הפצה. פירטתי את ההבדלים במאמר על זיכרון מטמון.
CDN
רשת של שרתים בהרבה מקומות בעולם ששומרים עותקים של הקבצים של האתר ומגישים אותם מהשרת הקרוב לגולש. בעברית קוראים לזה רשת אספקת תוכן, והיא מורגשת בעיקר כשהשרת רחוק מהגולשים.
דחיסה
השרת מכווץ את הקבצים לפני שהוא שולח אותם, והדפדפן פותח אותם. יש שתי שיטות נפוצות, gzip וגם Brotli, והשנייה חוסכת קצת יותר. כמעט כל אחסון מודרני מפעיל דחיסה כברירת מחדל.
HTTP/2, HTTP/3
הגרסאות החדשות של הפרוטוקול שבו הדפדפן מדבר עם השרת. הן מאפשרות להוריד הרבה קבצים במקביל על חיבור אחד, ולכן הטריק הישן של איחוד כל הקבצים לקובץ אחד כבר פחות חשוב.
DNS
הספר טלפונים של האינטרנט: התרגום של שם הדומיין לכתובת של השרת. זה קורה בכל כניסה ראשונה, וספק DNS איטי מוסיף עיכוב קטן עוד לפני שהבקשה בכלל מגיעה לאתר.
הקוד של העמוד
המונחים האלה מתארים מה הדפדפן עושה עם הקבצים אחרי שהם הגיעו. כאן נמצאות רוב הבעיות באתרים שבנויים עם בוני עמודים ועם הרבה תוספים.
משאבים חוסמי רינדור
קובצי עיצוב וסקריפטים שהדפדפן חייב להוריד ולהריץ לפני שהוא מציג משהו. כל קובץ כזה בראש העמוד מעכב את ההופעה הראשונה, ולכן מעבירים סקריפטים לסוף העמוד או דוחים אותם.
Critical CSS
העיצוב שנחוץ רק לחלק העליון של העמוד, זה שרואים בלי לגלול. מכניסים אותו ישירות לקוד העמוד, ואת שאר העיצוב טוענים אחר כך, וכך העמוד מופיע מהר יותר.
דחיית סקריפטים
טעינה של סקריפטים רק אחרי שהעמוד הוצג, או רק כשהגולש מתחיל לגלול או לגעת. זו האופטימיזציה שהכי משפרת ציונים, וגם זו ששוברת הכי הרבה תפריטים, טפסים וסליידרים אם לא מחריגים את הנכונים.
DOM
המבנה שהדפדפן בונה מהעמוד, עץ של כל הכותרות, התמונות והכפתורים. ככל שיש בו יותר פריטים, הדפדפן עובד קשה יותר. בוני עמודים נוטים לבנות עץ גדול מאוד, וזה מאט בעיקר בטלפונים.
טעינת פונטים
פונט שנטען מאוחר יכול להשאיר טקסט בלתי נראה, או להחליף פונט גיבוי ולגרום לקפיצה. ההגדרה שקובעת מה קורה בזמן ההמתנה נקראת font-display, וטעינה מקומית של הפונט מהשרת של האתר חוסכת חיבור לשרת נוסף.
תמונות ומדיה
ברוב האתרים התמונות הן החלק הכבד ביותר בעמוד. ארבעה מונחים מכסים כמעט את כל מה שצריך לדעת עליהן.
WebP, AVIF
פורמטים מודרניים של תמונות ששוקלים הרבה פחות מ JPEG וגם מ PNG באותה איכות. בבדיקה שעשיתי, צילום של 93 קילובייט ירד ל-38 ב WebP. פירטתי את ההשוואה במאמר על WebP לתמונות.
טעינה עצלה
תמונות שמתחת לקו הגלילה לא נטענות עד שהגולש מתקרב אליהן. זה חוסך הרבה בטעינה הראשונה. את התמונה הראשית בראש העמוד לא טוענים בעצלות, כי היא בדיוק מה שהגולש מחכה לראות.
טעינה מוקדמת
הוראה לדפדפן להתחיל להוריד קובץ חשוב, כמו התמונה הראשית או פונט, עוד לפני שהוא מגלה אותו בקוד. היא מקצרת את הזמן עד שהתוכן הראשי מופיע, אבל שימוש מוגזם בה מאט את כל השאר.
מידות תמונה
רוחב וגובה שכתובים בקוד של כל תמונה. בזכותם הדפדפן שומר מקום לתמונה עוד לפני שהיא נטענת, והטקסט לא קופץ כשהיא מגיעה. תמונה בלי מידות היא הסיבה הנפוצה ביותר לקפיצות בעמוד.
שאלות ותשובות על המונחים
מה ההבדל בין זמן טעינה לציון PageSpeed?
זמן טעינה הוא מדידה של כמה מהר העמוד הופיע. ציון PageSpeed הוא מספר בין 0 ל-100 שמסכם כמה מדדים מבדיקה במעבדה, שהיא הערכה ולא מדידה אצל גולשים. אפשר לקבל ציון בינוני ועדיין לעמוד בכל הספים של גוגל אצל גולשים אמיתיים.
איזה מונח הכי חשוב להבין?
זמן הופעת התוכן הראשי, LCP. הוא הכי קרוב למה שהגולש מרגיש, והוא מושפע כמעט מכל השאר: השרת, התמונה הראשית, הפונטים והקוד. כשמשפרים אותו, בדרך כלל משתפרים גם מדדים אחרים בדרך.
האם צריך להבין את כל המונחים כדי לשפר את האתר?
לא. מספיק לדעת לאיזו קבוצה שייכת הבעיה שהבדיקה מראה, כדי להבין מי צריך לטפל בה: חברת האחסון, מי שבנה את האתר או תוסף שיפור מהירות. את השאר אפשר להשאיר למי שמבצע את העבודה.
הצעד הבא
אם קיבלתם דוח בדיקה ואתם לא בטוחים מה מתוכו באמת חשוב, שלחו לי את הכתובת. אתרגם את הדוח לעברית פשוטה, ואגיד לכם אילו שלושה דברים יעשו את ההבדל הגדול ביותר לאתר שלכם.
