יוני הגיע, הקיץ התחיל ואיתו הגיע עדכון הליבה החדש של גוגל שנקרא עדכון "חוויית הדף" או Page Experience. מה העדכון הזה עושה בדיוק ואיך אנחנו יכולים לוודא שהאתר שלנו מוכן לעדכון משמעותי זה?
מהו עדכון Google Page Experience?
תרשו לנו לתאר לכם תרחיש, אתם עומדים בפני שתי חנויות במרכז הקניות האהוב עליכם, שתי החנויות מציעות את אותה סחורה של אותם מותגים באותם מחירים בדיוק. המוצרים בחנות הראשונה מסודרים למופת, יש שילוט שמוביל אתכם למוצר שרציתם ומשם לקופה.
החנות המקבילה? שם המוצרים נמצאים בסדר אקראי לחלוטין, בגבהים שונים על המדף, והקופות? הקופות נמצאות בקצה השני של החנות ליד המחסן ולא ליד היציאה.
איזו חנות לדעתכם תקבל יותר קונים? בדיוק, החנות המסודרת שבה קל לנווט, למצוא את המוצרים ולשלם.
אם ניקח את הדוגמא הזו לעולם הדיגיטלי שלנו, אנחנו נראה אתר אחד מהיר, מאובטח, עם היררכיית ניווט ברורה ופשוטה, אתר הניכר שהשקיעו בחוויית המשתמש שלו.
האתר השני לעומת זאת יהיה איטי, עם תקלות אבטחה רבות ועם חוויית משתמש שידעה ימים יפים יותר.
בסופו של דבר האתר שלא מעודכן ולא מוכן לעדכון החדש יחווה ככל הנראה ירידה דרסטית במיקומים, תנועה והכנסות.
מהם גורמי הדירוג בעדכון Page Experience
ישנם חמישה גורמים מרכזיים שמהם מורכב העדכון החדש והם:
- Core Web Vitals - סט של שלושה חוקים המכילים את ההנחיות החדשות, Largest Contentful Paint (LCP), First Input Delay (FIP), Cumulative Layout Shift (CLS), נסביר על כל אחד מהם בפירוט בהמשך.
- התאמה למובייל - האם האתר שלכם מותאם למובייל? הטקסט שנמצא בו קריא במכשירים ניידים? האם הוא נטען ללא גלילה לצדדים? האם הוא מציית להנחיות של גוגל בנוגע לעיצוב מותאם למובייל? אם עניתם "כן" על כל השאלות האלו אז אין לכם מה לחשוש מסעיף זה.
- גלישה מאובטחת - הסעיף הזה מסביר את עצמו, אם ישנו אתר המכיל וירוסים ונוזקות שונות או אם הוא מנצל את הגולשים שלו לטובת הנדסה חברתית (Social Engineering), הוא לא יופיע בעמוד תוצאות החיפוש בגוגל. זכרו לוודא שהאתר שלכם מאובטח ונקי מנוזקות וההשפעות של SEO שלילי.
- אבטחה באמצעות תעודת HTTPS - בימינו, רוב האתרים מוגנים לאחר שהטמיעו תעודת HTTPS, האם האתר שלכם עדין משתמש בפרוטוקול HTTP המיושן? אל תחכו ומהרו להתקין תעודת HTTPS בהקדם האפשרי.
- מודעות ביניים לא פולשניות - הכוונה בסעיף זה נוגעת בעיקר במודעות פופ-אפ אשר שימוש לא נכון בהן יכול לגרום להפרעה בגלישה. התוכן המוצג באתר שלכם חייב להיות נגיש וקל לקריאה.
עכשיו, לאחר שאתם יודעים מהם הגורמים המרכיבים את העדכון החדש, בואו נצלול לעומק ונסביר על כל אחד מהסעיפים הללו בפירוט.
Core Web Vitals
כפי שכתבנו בתחילת הכתבה, Core Web Vitals מורכבים משלושה חוקים שונים. לכל אחד מהם השפעה מהותית על האתר שלכם.
Largest Contentful Paint - LCP
מדד ה-LCP עובר על האתר שלכם ומודד את מהירות הטעינה וההצגה של הרכיב המשמעותי ביותר בעמוד, המרכיבים שעליהם מדד זה מסתכל הם:
- אלמנטים של תמונות <img>
- אלמנטים המרכיבים קבצי SVG או תגי <image>
- רכיבי וידאו <video>
- אלמנטים עם תמונות רקע הנטענים באמצעות פונקציית url, לדוגמא
url(https://www.example.com/image.png( - אלמנטים של טקסט כגון פסקאות <p> או תגי דיב <div> וכו'
עכשיו כשאנו יודעים מה ה-LCP מכיל, הגיע הזמן ללמוד איך לבצע בו אופטימיזציה נכונה. זהו תהליך שבו אנו מתמחים ומבצעים כבר במשך תקופה ארוכה. תדאגו לכווץ את התמונות לפני שאתם מעלים אותם לאתר, אם אתם משתמשים בסרטוני וידאו באתר אז תעלו אותם בפורמט מתאים לרשת (WebM) וכמובן וודאו שהטקסטים באתר מוקפים בתגים הנכונים.
על מנת למדוד את מדד ה-LCP באתר לא צריך להשתמש בכלים מיוחדים, כל מה שעליכם לעשות הוא להשתמש בכלי PageSpeed Insights הוותיק של גוגל ולהריץ בדיקה לאתר שלכם. התוכן המשמעותי ביותר צריך להופיע תוך פחות מ 2.5 שניות.
First Input Delay - FIP
מדד ה-FID הוא הזמן שלוקח מרגע שגולש ביצע אינטראקציה עם העמוד, לדוגמא לחיצה על קישור או כפתור ועד הזמן שבו הדפדפן מסוגל לעבד את הבקשה של הגולש.
קרה לכם שלחצתם על אלמנט כלשהו באתר ולא קיבלתם משוב כלשהו? האתר לא הגיב והרגשתם שהאתר לא מגיב? זוהי דוגמא קלאסית ל-FID לא תקין. יחד עם זאת חשוב להבין שה-FID מודד אך ורק את זמן בין הפעולה של הגולש ועד שהאתר מגיב לפעולה זו ולא כמה זמן לוקח לאתר לעבד את הבקשה של הגולש.
אז מהו זמן FID תקין? פחות מ 100 מילישניות. כן, זהו זמן קצר ביותר ולכן חשוב שציון ה-FID של האתר יעמוד בדרישות של גוגל, אבל איך עושים את זה? פשוט מאוד, אופטימיזציה.
יותר נכון אופטימיזציה של קבצי ה-CSS ו-JavaScript באתר, ישנם כלים רבים המאפשרים לכם לבצע אופטימיזציה לקבצים אלו. האם האתר שלכם משתמש במערכת WordPress? תוסף כגון WP-Rocket יאפשר לכם לבצע את האופטימיזציה הזו בלחיצת כפתור.
כלים אוטומטיים הם יעילים, הם עדיין כלים ופעולות אוטומטיות עלולות "לשבור" את האתר ולגרום לו להראות לא תקין, במקרים אלו תצטרכו לעבוד טיפה יותר קשה על מנת לאתר את הקבצים הגורמים לבעיות ולדאוג להחריג אותם מפעולת האופטימיזציה.
Cumulative Layout Shift - CLS
הנה תרחיש שאנו בטוחים שנתקלים בו בשלב זה או אחר: אתם מבקרים באתר כלשהו ומנסים ללחוץ על מאמר המעניין אתכם, ברגע האחרון מבנה האתר משתנה והנה לחצתם על המאמר הלא נכון או על מודעה מעצבנת שצצה לה משום מקום. זוהי דוגמא קלאסית ל-CLS לא תקין, אך מה גורם לזה?
- תמונה ללא הגדרת רוחב וגובה - תמונה בלי הגדרות אלו מתנהגת על פי הגודל שבה היא עלתה לאתר, לכן תמיד הגדירו רוחב וגובה לתמונות וסרטונים שאתם מציגים לגולשים, כך תוכלו לוודא שכל האלמנטים בעמוד זהים ונטענים בצורה תקינה.
- אלמנטים חיצונים ללא הגדרת רוחב וגובה - יש לכם פרסומות באתר? מה עם סרטוני וידאו מוטמעים מיוטיוב או רכיב Iframe? בדיוק כמו בסעיף הקודם, וודאו שיש להם הגדרת רוחב וגובה מתאימה.
- טעינה חיצונית של פונטים - האם אתם טוענים פונטים ממקור חיצוני דרך גוגל או כל שירות פונטים אחר? תעלו את הפונטים לאחסון האתר שלכם ותדאגו לטעון אותם בצורה ישירה. אחרת השינוי הפתאומי בפונטים, ברוחב שלהם או בהגדרות השונות יכול לגרום לכל האתר לזוז ולהשתנות.
במקרה של ה-CLS אין לנו מדד המבוסס על זמן אלא על ציון. לכן חשוב לוודא שהציון שהאתר שלכם מקבל הינו קטן מ 0.1 וכמובן שנמדוד אותו באמצעות כלי PageSpeed Insights של גוגל.
דוגמא לעיצוב CLS לא תקין כפי שמודגם על ידי האתר https://web.dev/cls
התאמה למובייל
האם האתר שלכם עובד בצורה תקינה בטלפונים? רק רגע, לא דיברנו על זה כבר? כן ולא. יש הבדל בין ה Core Web Vitals שעליהם כתבנו עד כה ועל התאמה למובייל, ההבדל הוא לא גדול אך חשוב לדעת עליו.
בעוד מדדי Web Core Vitals בודקים שחווית הגלישה של המשתמש תקינה, מבחן התאמה למובייל מוודא שהאתר בשלמותו תקין ועומד בסטנדרטים המודרניים לבניית אתרים. נוכל לבחון את האתר שלנו באמצעות כלי הבדיקה של גוגל, במידה ומשהו לא תקין באתר נתקל באחת מהשגיאות הבאות:
- Uses Incompatible Plugins - הודעת שגיאה זו הינה נדירה ותופיע בעיקר באתרים שעדין משתמש בטכנולוגיה מיושנת כגון Flash. ברוב המקרים בהם נתקל בהודעה זו באתרים ישנים כל כך שאין ברירה אלא לבנות אותם מחדש עם טכנולוגיה מודרנית.
- Viewport not set - לא מוגדר באתר ה Viewport שתפקידו "להגיד" לדפדפן לשנות את הצורה שבה האתר מוצג בהתאם לגודל המסך. מומלץ שבכל אתר יהיו מספר הגדרות Viewports כך שהאתר יתמוך במגוון גדול של תצוגות כגון מסכים רחבים, מסכים של לפטופים קטנים, טאבלטים וסמארטפונים.
- Viewport not set to “device-width” - ביקרתם פעם באתר דרך הנייד וראיתם אלמנטים כגון התפריט מופיעים בצד? זוהי דוגמא קלאסית לאתר שבו אין הגדרה זו. מה ניתן לעשות? וודאו תמיד שהאלמנטים באתר מוצגים כראוי ובנוגע לתפריטים? בשביל זה קיימים אלמנטים ייעודים כגון "תפריט המבורגר".
- Content wider than screen - נכנסתם לאתר ואתם צריכים לגלול אותו מצד לצד על מנת לקרוא את התוכן? תקלה זו מתרחשת לרוב אם בקובץ ה-CSS משתמשים בערכים אבסולוטיים (Absolute) ולא יחסים (Relative), או אם אין הגדרת רוחב וגובה מתאימה לתמונות.
- Text too small to read - אם באתר אין הגדרות לגודל הפונטים במכשירים ניידים אז נתקל בהודעה זו, בנוסף על כך נצטרך לבצע הגדלה והקטנה בלתי פוסקת של התוכן. וודאו שיש לכם הגדרה מתאימה של גודל הפונטים לכל סוגי המסכים.
- Clickable elements too close together - אין לכולנו את אותו גודל אצבע, חלקנו נולדנו עם אצבעות קטנות ורזות וחלקנו עם אצבעות גדולות ורחבות יותר, לכן חשוב לשמור על רווח מספיק בין אלמנטים שונים באתר כגון קישורים או כפתורים. לחיצה על קישור לא נכון עלולה לגרום לגולשים לוותר ולצאת מהאתר.
גלישה מאובטחת
האם אי פעם נכנסתם לאתר וקיבלתם הודעה אדומה ומאיימת שמודיעה שהאתר מכיל נוזקה או ניסיונות פישינג? אלו הסימנים המעידים כל כך שהאתר ככל הנראה נפרץ או מנסה לגנוב את הפרטים האישיים שלכם!
בעוד הדפדפנים המודרניים מגינים עלינו מפני ניסיונות אלו, חשוב לוודא שהאתר שלכם לא יחווה זאת מאחר ותקלה מסוג זה עלולה לגרום לגוגל להעניש את האתר שלכם ולהעלים אותו מתוצאות החיפוש. ניתן להתגונן בכמה דרכים פשוטות:
- בחרו שם משתמש וסיסמא מאובטחים - כשאתם בוחרים שם משתמש וסיסמא למערכת ניהול התוכן שלכם, חשוב שגם שם המשתמש והסיסמא יהיו קשים לניחוש. השתמשו במחולל סיסמאות אקראיות כך שהסיסמא תכיל אותיות קטנות, גדולות, מספרים וסימנים מיוחדים כגון סימני קריאה.
- ודאו שהאתר שלכם מאובטח - האם מערכת הניהול שלכם מאפשר להתקין תוספי אבטחה? אז מומלץ להתקין אחד. גם תוסף האבטחה הבסיסי ביותר יקשה על הפורץ
- גיבוי, גיבוי, גיבוי - ודאו שהאתר שלכם מגובה פעם ביום לפחות ואם האתר שלכם הוא חנות אז אפילו יותר! במידה והאתר שלכם נפרץ, עדיף להפסיד מספר שעות של מידע מאשר מספר ימים.
דוגמא להודעת שגיאה באתר המכיל נוזקה כפי שהיא מוצגת בדפדפן מסוג "כרום"
HTTPS
הכנסו לאתר שלכם, עכשיו תנו מבט בשורת הכתובת בדפדפן שלכם, אתם רואים את סימן המנעול הקטן? אם כן אז מצוין, האתר שלכם משתמש בפרוטוקול HTTPS ואין שום דבר נוסף שאתם צריכים לעשות.
לא רואים את המנעול? במקומו מופיעה הודעת "Not Secure"? אז הגיע הזמן ליצור קשר עם מנהל האתר שלכם או עם חברת האחסון ולבקש מהם להתקין תעודת HTTPS באתר, בדרך כלל מדובר בתהליך מהיר הלוקח כמה דקות בודדות.
התקנתם את התעודה? נהדר, עכשיו מה שנותר לכם הוא לוודא שכל הקישורים והתמונות באתר גם משתמשים בפרוטוקול זה ומתחילים עם HTTPS ולא HTTP, או יותר טוב, משתמשים בקישורים יחסים, לדוגמא:
זהו קישור ישיר - https://www.example.com/about/our-company/
וזהו קישור יחסי - /about/our-company
הודעת שגיאה "Not Secure" כפי שהיא מופיעה באתר http://httpforever.com
מודעות ביניים לא פולשניות
מה הכוונה שלנו ב"מודעות ביניים לא פולשניות"? ברוב המקרים אנו מדברים על פופ-אפים. אבל רגע, לא כל פופ-אפים הם זהים ואפשר להשתמש בהם גם לאחר העדכון הנוכחי אם משתמשים בהם בצורה נכונה. אבל איך נדע מהי הדרך הנכונה?
מודעות פולשניות
על פי גוגל ישנן כמה סוגים של מודעות פולשניות שיש להימנע משימוש בהן:
- מודעות פופ-אפ אשר מכסות את התוכן המרכזי ומופיעות מיד לאחר שהגולש נכנס לאתר או בזמן הגלישה.
- מודעות המכריחות את הגולש לסגור אותן כתנאי להצגת התוכן הראשי
- מודעות לא רספונסיביות או מודעות הקשות לסגירה
דוגמא למודעות פולשניות על פי גוגל
מודעות לא פולשניות
ישנן סוגים שונים של מודעות הנחשבות לא פולשניות וניתן להשתמש בהן באתר ללא חשש:
- מודעות המופיעות עקב הכרח משפטי, לדוגמא באנר של הסכמה לקבצי קוקי או וידוא גיל הגולש.
- טופס כניסה לאתר המוביל לתוכן שלא מוצג לציבור הרחב, כגון תוכן פרטי או תוכן הנמצא מאחורי חומת תשלום.
- באנר המשתמש בכמות הגיונית של המסך ומאפשר לגולש לסגור אותו בקלות.
דוגמא למודעות לא פולשניות על פי גוגל
לסיכום
עדכון זה משלב הנחיות ותיקות שכבר הכרנו עם הנחיות חדשות כדי לוודא שחווית הגלישה של כולנו תהיה טובה יותר. באתר שלנו, כשאנו מסתכלים על האתר שלנו, אנחנו צריכים לחשוב לפני הכל על חוויית הגלישה של הגולש הממוצע.
ודאו שהאתר שלכם מהיר, מאובטח, קריא ומותאם למובייל. ודאו שיש חווית גלישה נעימה באתר ותעברו את העדכון החדש בהצלחה.
