חוויית הדף הופכת לגורם חשוב בדירוג החיפוש של גוגל

בעלי אתרים, באופן טבעי שואפים לכך שהמבקרים באתר שלהם יזכו לביקור חלק ומוצלח, כזה אשר יפתה את המשתמשים לבצע פעולות באתר (כמו: קניה, הרשמה, מילוי טפסים) ולחזור לאתר לשימושים נוספים. בעניין זה, החל מחודש מאי 2021 תהיה סיבה טובה עוד יותר לשפר את חוויית הדף עבור המבקרים באתר: חוויית הדף תהפוך לגורם בדירוג החיפוש של גוגל. למרות שזה אולי נראה כמו משהו סובייקטיבי למדידה, ישנם למעשה כמה מדדים העוברים דרך ארוכה לצורך כימות חוויית דף. ברחבי האינטרנט, חוויית דף נחשבת לטובה כאשר הדף נטען במהירות, מגיב מהר לקלט של המשתמש ויציב מבחינה חזותית. היבטים אלו ניתנים למדידה באמצעות סדרת מדדים חדשים המכונים “מדידות אינטרנט חיוניות” – Core Web Vitals.

גוגל הגדירה מערך של שלוש מדידות אינטרנט חיוניות. מדידות אלו, כאשר הן מחושבות יחד, מספקות דרך לכמת את חוויית המשתמש ולהקצות לה ערך. ה- Vitals Web Core: מהירות הטעינה של התוכן (LPC – Largest Contentful Paint), עיכוב הקלט הראשון ושינוי הפריסה המצטברת – מודדים את חוויית הדף על ידי התמקדות בהיבטים של טעינה, אינטראקטיביות ויציבות חזותית.

LCP הוא מדד לביצועי הטעינה וזו המומחיות של LiteSpeed! באופן ספציפי יותר, LCP מודד כמה זמן לוקח לטעון את האלמנט הגדול ביותר בעמוד. הוא נחשב למדד ממוקד-משתמש מכיוון שהוא מעריך את מהירות העומס הניתנת למדידה. באופן כללי, כאשר האלמנט הגדול ביותר בעמוד הוצג, הדף יהיה מוכן לשימוש, גם אם עדיין יש פריטים קטנים יותר (ואולי פחות חשובים) שעדיין נטענים. קיימים בעיקר ארבעה דברים המשפיעים על LCP באתר: זמן תגובת השרת, JavaScript ו CSS, זמן טעינת משאבים והצגת התוכן בצד הלקוח. לשיפור זמן תגובת השרת מומלץ להתקין את מטמון LiteSpeed ולהפעיל אותו. אחסון במטמון העמודים הוא כלי מכריע למניעת זמני תגוב איטיים של שרת אחסון אתר. כאשר האתר נשמר במטמון, הוא עולה מהר יותר ותורם לחוויה טובה יותר עבור המבקרים באתר. לתפעול יעיל יותר של JavaScript ו- CSS מומלץ להשתמש בתוסף LSCache לצורך טעינת JS וטעינת CSS באופן אסינכרוני: אין צורך לטעון את כל ה- JavaScript או ה- CSS של האתר מראש. כאשר דוחים טעינת JS ו- CSS מיותרים עד מאוחר יותר, התוכן עשוי להופיע במהירות רבה יותר. לשם הקטנת זמן טעינת משאבים ניתן להירשם ל- QUIC.cloud CDN ו/או לבצע אופטימיזציה לתמונות שבאתר. CDN כגון QUIC.cloud עשוי לעזור מכיוון שהוא נועד למזער את המשאבים המרוחקים הדרושים להעברת המידע בין שרת אחסון האתר ללקוח, מה שבתורו גורם למשאבים להיטען מהר יותר. יש אמנם חשיבות למזעור המשאבים המרוחקים, אך יחד עם זאת ניתן להגדיל את ההשפעה על ידי הקטנת גודל המשאבים עצמם – אופטימיזציה של תמונות: LiteSpeed מציעה שירות אופטימיזציה של תמונות באמצעות QUIC.cloud הדוחס תמונות – מה שהופך אותן למהירות יותר להעברה ומהירות יותר לטעינה. השירות מאפשר גם את פורמט התמונה המודרני והיעיל יותר WebP.

עיכוב קלט ראשון (FID – First Input Delay): FID מודד את היענות האתר – כמה זמן לוקח לאתר לפעול כשלוחצים על כפתור? לחוויית עמוד טובה, האלמנטים האינטראקטיביים של האתר צריכים “להרגיש” ולהגיב באופן מיידי ולא באיטיות. ככל שה- FID נמוך יותר, חוויית המשתמש טובה יותר. JavaScript הוא בדרך כלל האשם כאשר ה- FID גבוה: פירוק משימות ארוכות, מעבר ללוגיקה בצד השרת, דחיית ביצוע JS ואופטימיזציות אחרות של JS שאולי יושמו כדי לסייע ל- LPC, יועילו גם לשיפור מדד עיכוב הקלט הראשון.

שינוי פריסה מצטברת (CLS – Cumulative Layout Shift): CLS מודד את היציבות החזותית של דף, כלומר כמה אלמנטים נעים בזמן שהעמוד נטען? CLS צריך להיות נמוך כדי למנוע אפשרות של קליקים מקריים, או איבוד המקום בזמן קריאה, דבר העלול להיות מתסכל עבור המשתמש. באופן כללי, CLS מושפע מהפריטים הבאים: היעדר תכונות גודל בתמונות ובסרטונים, הכנסת תוכן מעל לתוכן קיים ושימוש במאפייני אנימציה שמפעילים שינויים בפריסה. לשיפור CLS מומלץ:

1. לוודא כי לכל התמונות, הסרטונים וה- iframes יש מאפייני גודל. באופן כללי, הטקסט נטען תחילה בדף ואז התמונות והסרטונים מתחילים להתמלא בכל מקום אליו הם שייכים. אם מקום למשאבים אלו אינו שמור מבעוד מועד, הטקסט נע סביב כדי להתאים את המשאבים תוך כדי טעינתם. כדי להימנע מכך, לכל התמונות, הסרטונים וה- iframes בדף יש לציין במפורש את הגודל שלהם בקוד ה- HTML.
2. להשתמש בקונטיינרים בגודל סטטי סביב פריטים בגודל משתנה. סוגיה זו באה לידי ביטוי כאשר למשל מוצגות פרסומות באתר, במיוחד כאלו שבהן מאפשרים לשירות המודעות להחליט באיזה גודל תהיה המודעה. בהיעדר ציון גודל מבעוד מועד, כל תוכן שיופיע מתחת למודעה יידחק כלפי מטה כאשר המודעה תוצג.
3. שימוש במאפייני אנימציה שמפעילים שינויים בפריסה – מומלץ לעבור ל- transform אנימציות. מאפייני CSS מסוימים מפעילים פריסה מחודשת, מה שעלול לגרום למשאבי עמודים לנוע באופן בלתי רצוי. במקום להשתמש בטריגרים של CSS – ויש הרבה כאלו – מומלץ להשתמש ב- transform אשר אינו מפעיל שינויים בגיאומטריהשל הדף.

אמצעים נוספים לשיפור חווית הדף: תאימות מלאה לניידים – האם ניתן לקרוא את האתר ולתקשר איתו בנוחות במכשיר נייד? כיום, עם כל כך הרבה משתמשי אינטרנט שניגשים לתוכן תוך כדי תנועה, גוגל אימצה פילוסופיה של “נייד ראשון”. לכן, אם האתר הנייד לקוי בתפקוד, זה ללא ספק ישפיע על ציון חוויית הדף ועל דירוגו. גלישה בטוחה – מן הסתם מובן מאליו שהדף לא אמור להכיל תוכנות זדוניות, הנדסה חברתית או תוכן זדוני אחר ומטעה. חיבורים מאובטחים – שירות האתר דרך חיבור מאובטח עם HTTPS חשוב מאי פעם. גוגל מענישה אתרים חסרי אבטחה על ידי הרודה בדירוג העמודים. מומלץ להשתמש בשרת אחסון LiteSpeed אשר מגיע עם חיבורי HTTP/2 ו- HTTP/3 מאובטחים. מניעה מוחלטת של מודעות ביניים פולשניות – מודעות ביניים כוללות מודעות קופצות המכסות את התוכן, חומר פרסומי מוטבע בדף, או כל פרסום שאחרת יש לדחות או לגלול לפני שהמשתמש יוכל לגשת לתוכן של הדף.