מה זה אופטימיזציה לאתרים? ומה זה Core Web Vitals של גוגל?

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

מה הם Core Web Vitals(חיוני ליבה לאתרים)?

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

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

מדדי הליבה של Core Web מחולקים לשלוש חלקים -

Largest Contentful Paint (LCP)

בביצועי האתר, מודד באיזו מהירות ניתן לטעון ולהציג את האלמנט המשמעותי ביותר (כגון תמונה, סרטון או אנימציה) בדף.

Cumulative Layout Shift (CLS)

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

The First Input Delay (FID)

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

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

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

דפים עם ציון גבוה (ירוק) עבור כל שלושת מדדי Core Web Vitals יופיעו גבוה יותר בתוצאות החיפוש ויופיעו בקרוסלת "Top Stories" באפליקציית Google News, בין היתר.

טיפים לשיפור Core Web Vitals

יש לבצע ניתוח ביצועי אתרים במהירות כדי לקבוע עד כמה האתר שלך מתפקד בפונקציות אינטרנט קריטיות. אתה יכול להשיג זאת על ידי שימוש בכלים של Google כגון Search Console ו-Page Speed Insights וכלים של צד שלישי כגון GTmetrix.
הפעלת דוחות ביצועים עם כלים שונים והשוואת תוצאות היא דרך מצוינת להפוך את הדף שלך ליעיל יותר ולשפר את הביצועים הכוללים שלו.

יש ליישם טעינה עצלה

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

הפחת את כמות JavaScript (JS) המופעלת בטעינת העמוד

ציון FID נמוך מציין שהדף שלך מקיים אינטראקציה עם משתמשים במשך יותר מ-300 אלפיות השנייה. שקול לצמצם ולבצע אופטימיזציה של משך הזמן שה-JS שלך מבוצע. משמעות הדבר היא כי פרק הזמן בין ביצוע קוד JS בדפדפן שלך לבין הצגת העמוד מצטמצם.

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

כדי לבדוק אם האתר שלך מכיל JavaScript שאינו בשימוש, בצע את הפעולות הבאות:

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

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

אופטימיזציה ודחיסה של תמונה

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

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

נסה תמיד לשמור תמונות לרוחב בפורמט jpg וגרפיקה בפורמט png. אתה יכול גם להשתמש בפורמטים של הדור הבא כגון JPEG 2000, JPEG XR או WebP, מומלץ לעשות מחקר מקדים לפני.

בנוסף לדחיסת תמונות, השתמש ברשת להעברת תוכן (CDN) כדי להפיץ תמונות. רשת מסירת תוכן (CDN) היא אוסף של שרתים הממוקמים בכל רחבי העולם המאחסנים את התוכן שלך.
מכיוון שהשרתים ממוקמים במגוון מיקומים שונים, ניתן להגיש תמונות מהר יותר מהשרת הקרוב ביותר למשתמש.

שפר את זמן התגובה של השרת שלך(TTFB)

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

אתה יכול למדוד את זמן התגובה של השרת באמצעות המדד Time to First Byte (TTFB), המציין כמה זמן לוקח לבייט הראשון של תוכן הדף שלך להגיע לדפדפן האינטרנט של המשתמש.

אסוף מידע על הביצועים הנוכחיים של השרת שלך כדי לקבל תחושה עד כמה אתה מצליח. לאחר השלמת הדוח, ההצעות הבאות יהיו שימושיות:

• בדוק את התוספים שהתקנת. למה? הסיבה לכך היא שכל תוסף מוסיף משקל נוסף לדף שלך, מה שעלול לפגוע בביצועים הכוללים של האתר שלך. יש להשאיר רק את החיוניים ביותר.
• בדוק את התבנית איתה אתרך משתמש, תבנית בעלת קוד כבד יכולה להשפיע משמעותית לרעת ביצועי האתר שלך.
• בנה מבנה עמוד קליל ולא מורכב מדי והמנע ממשאבים חסומים, משאבים חסומים או אי הגדרת מטמון הם הסיבה העיקרית לTTFB ארוך.
• בדוק את המהירות של שירות אחסון האתרים שלך.
• השתמש ברשת אספקת תוכן (CDN) עבור האתר שלך.

גוגל ממליצה שזמן התגובה של השרת יהיה פחות מ-600 מילישניות כדי להיות יעיל. למרות ש-Core Web Vitals יוטמעו תוך פחות משלושה חודשים, עליך להתחיל לעבוד על שיפורם באופן מיידי. מכיוון שהדוחות על חיוניים זמינים כעת, נצל את הכלים להשוואת תוצאות האתר שלך לפני ואחרי תיקון השגיאות.

אם אתם מחפשים אחסון אתרים מהיר במיוחד? אנו במייהוסט מתמחים באחסון אתרי אינטרנט ואתרי וורדפרס בפרט, כולל אחסון וורדפרס מנוהל התומך HTTP/3, התוצאות מדברות בעד עצמם -

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

ודא שלתמונות והטמעות יש את הממדים הנכונים.

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

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

פתח את סרטון YouTube שברצונך להטביע באתר שלך. לאחר מכן אתר את כפתור השיתוף ובחר באפשרות <> Embed מהתפריט.

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

צבע התוכן הגדול ביותר (LCP)

ביצועי הטעינה של ה- Largest Contentful Paint נמדדים לפי המהירות שבה תוכן שמיש מוצג בדף?

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

היבטים כגון הבאים זכאים להתייחסות בניתוח הצבע התוכן הגדול ביותר -

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

דפים שמשלימים את ה-LCP בתוך 2.5 השניות הראשונות של טעינת העמוד נחשבים לאיכותיים (ירוק). דפים שלוקח יותר מ-4.0 שניות לטעון נחשבים לקויים (אדום).

כלים לניתוח הצבע המכיל הגדול ביותר

למרות ש-LCP הוא מדד Core Web Vital שהכי פשוט להבנה, לא תמיד ברור איזה אלמנט ייבחר לניתוח.

Chrome, Edge, Brave, Opera ו-Vivaldi הם כולם דפדפנים מבוססי Chromium, והחלונית DevTools Lighthouse זמינה בכולם. בחר Lighthouse מהתפריט הנפתח DevTools בתפריט הדפדפן - בדרך כלל נמצא ב-More Tools > Developer Tools או על ידי שימוש במקשי הקיצור Ctrl | Cmd + Shift + I או F12 - ולאחר מכן לחץ עליו (מהדורות ישנות יותר עשויות לקרוא לזה Audit).

צור דוח ביצועים לנייד ולאחר מכן בדוק את הקטע ביצועים בדוח.

אם אין לך גישה לדפדפן מבוסס Chromium, תוכל ליצור את אותו המידע באמצעות הכלים המקוונים של PageSpeed ​​Insights ו-web.dev Measure.

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

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

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

דוח חווית המשתמש של Chrome מאפשר לך לחפש נתונים סטטיסטיים של שימוש בזמן אמת עבור כתובת אתר ספציפית, כולל LCP במדינות, חיבורים והתקנים מרובים. בשל העובדה שזהו פרויקט נגיש לציבור ב-Google BigQuery, עליך ליצור חשבון Google Cloud Platform ולספק פרטי חיוב. שוב, הדוח יהיה שימושי רק אם כתובת האתר המדוברת מקבלת כמות משמעותית של תנועה.

ספריית web-vitals JavaScript היא סקריפט קטן של 1 kB שיכול לקבוע את LCP ומדדי Core Web Vital אחרים עבור משתמשים בפועל באתר החי שלך באמצעות נתונים מספריית web-vitals JavaScript.

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

שם: שם המדד (במקרה זה, "LCP") מצוין

ערך: הסכום שחושב

מזהה: מספר זיהוי חד פעמי המייצג את המדד הזה עבור הדף הנוכחי

דלתא: ההפרש בין הערך הנוכחי לערך שדווח בעבר

ערכים: מערך של ערכים המשמשים בחישוב הערך,

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

גורמים נפוצים לציוני LCP הגדולים ביותר

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

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

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

כיצד לשפר את ציוני LCP הגדולים ביותר

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

• שדרג את השרת ו/או שירות האירוח שלך לאחסון אתרים של MyHost.
• יש להפעיל דחיסת שרת ו-HTTP/2+.
• הפחת את כמות המאמץ שמשקיע השרת. השבת כל קוד שאינו בשימוש או תוספים של CMS לפני הפעלת מטמון יעיל.
• אשר שהדפדפן מסוגל לשמור קבצים במטמון ביעילות. הגדר את הגיבובים המתאימים של Expires, Last-Modified ו/או ETag בכותרות HTTP כדי למנוע בקשת קבצים מספר פעמים בעתיד.
• כדי להפיץ את העומס ואת נכסי האירוח בשרתים קרובים יותר למשתמשים מבחינה גיאוגרפית, יש להשתמש ברשת להעברת תוכן (CDN).
• בצע אופטימיזציה של איכות התמונות שלך. צמצם אותם לממדים הקטנים ביותר האפשריים ושמור אותם בפורמט מתאים כדי לשמור על גדלי קבצים קטנים ככל האפשר. לשמור על הבקשה המוקדמת ביותר האפשרית עבור כל תמונה בבלוק התוכן הגדול ביותר; טעינה מוקדמת יכולה להיות שימושית בהקשר זה.
• הוסף את התכונה טעינה עצלה לתמונות כדי לגרום להן להיטען לאט יותר. על ידי הכללת תכונות הרוחב והגובה, אתה יכול להבטיח שמספיק מקום בדף יישמר לפני שתסתיים טעינת התמונה.
• צמצם את מספר הבקשות של צד שלישי, והעבר נכסים לדומיין הראשי שלך כדי למנוע חיפושי DNS מיותרים.
• צמצם את המספר והגודל של הקבצים המבוקשים, במיוחד בתחילת ה-HTML שלך.
• אשר שרק גופני האינטרנט הנדרשים נטענים. בצע את המעבר לגופנים בטוחים באינטרנט לקבלת הביצועים הטובים ביותר האפשריים.
• הסר כל קובצי JavaScript ו-CSS שאינם בשימוש עוד.
• שרשרת וצמצום קובצי JavaScript ו-CSS במחשב שלך.
• הימנע משימוש בהצהרות CSS @import מכיוון שהן חוסמות רינדור וגורמות לטעינת סגנונות בסדרה.
• יש להימנע מקידוד Base64 מכיוון שהוא מגדיל את גודל הקבצים ומצריך עיבוד נוסף.
• אם ברצונך להפעיל סקריפטים מאוחר יותר, תוכל להשתמש ב-JavaScript אסינכרוני, דחוי או ES מודול. תהליכי JavaScript ארוכי טווח יכולים להתבצע על ידי עובד שירות.

השהיית קלט ראשון (FID)

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

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

דפים עם זמן FID של 100 מילישניות או פחות נחשבים לבעלי ביצועים טובים (ירוק). דפים שנטענים תוך יותר מ-300 מילישניות נחשבים לקויים (אדום).

כלי ניתוח עיכוב קלט ראשון

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

לא ניתן לחשב FID בחלונית DevTools Lighthouse או בכלי PageSpeed ​​Insights. עם זאת, הם יכולים לקבוע את משך הזמן הכולל שנחסם (TBT). השהיית קלט ראשון שווה בערך לערך זה, שהיא הערכה סבירה. הוא קובע את משך הזמן שחלף בין:

ה-First Contentful Paint (FCP), הידוע גם בתור הזמן שבו תוכן הדף מתחיל להופיע

הזמן לאינטראקטיבי (TTI), או משך הזמן שלוקח לדף להגיב לקלט המשתמש, נמדד בשניות. ההנחה היא שה-TTI בתוקף כאשר אין משימות ארוכות טווח פעילות ולא יותר משלוש בקשות HTTP הושלמו בהצלחה.

בנוסף, תוסף Web Vitals עבור Google Chrome יכול להציג מדד FID לאחר שמשתמשים מקיימים אינטראקציה עם דף על ידי גלילה או לחיצה עליו.

דוח חווית משתמש של Chrome (CURE) דומה ל-LCP. זה מאפשר לך לחפש נתונים סטטיסטיים של FID בזמן אמת שנאספו על פני מספר מדינות, חיבורים ומכשירים עבור כתובת אתר ספציפית.

ספריית JavaScript חיוניים באינטרנט יכולה גם לחשב מדדי FID עבור משתמשים אמיתיים בשידור חי שלך

אתר אינטרנט באמצעות ספריית JavaScript של web-vitals. הוספת הסקריפט ל-HTML שלךתאפשר

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

כיצד לשפר את ציוני השהיית קלט ראשון

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

ההצעות הבאות יסייעו לך להשיג ציון FID גבוה יותר:

1. צור כמה שיותר תוכן HTML סטטי בשרת ואחסן אותו במטמון.
2. עשה מאמץ לא להסתמך על מסגרות JavaScript בצד הלקוח כדי להציג את אותו HTML עבור כל המבקרים שלך.
3. ודא שהדפדפן יכול לשמור קבצים בצורה יעילה. הגדר את הגיבובים המתאימים לתפוגה, שינוי אחרון ו-ETag בכותרות HTTP כדי למנוע בקשת קבצים מספר פעמים.
4. השתמש בטכניקות שיפור מתקדם כדי להבטיח שהממשק יהיה שמיש ב-HTML ו-CSS לפני טעינת וביצוע JavaScript.
5. הסר כל קובצי JavaScript ו-CSS שאינם בשימוש עוד.
6. שרשרת וצמצום קובצי JavaScript ו-CSS במחשב שלך.
7. הימנע משימוש במאפייני CSS יקרים כמו קופסא-צל ומסנן עודף.
8. אתה יכול להשתמש ב-JavaScript אסינכרוני, דחוי או ES מודול אם אתה רוצה להפעיל סקריפטים מאוחר יותר.
9. צמצם את מספר בקשות JavaScript של צד שלישי לניתוחים, ווידג'טים של מדיה חברתית, פורומי דיונים ותכונות אחרות. אלה יכולים להוסיף במהירות עד כמה מגה-בתים של JavaScript במחשב בודד.
10. רכיבי JavaScript שנטענים בעצלתיים לפי דרישה, כגון ווידג'טים של צ'אט ונגני וידאו.
11. טעינת סקריפטים פחות קריטיים, כגון ניתוח, פרסומות וכלי מדיה חברתית, תתעכב כתוצאה מכך.
12. צמצם את הגודל של משימות JavaScript ארוכות טווח על ידי פירוקן למשימות קטנות יותר שמתבצעות לאחר בקשה קצרה של IdleCallback, setTimeout או requestAnimationFrame עיכוב.
13. שקול את האפשרות להפעיל תהליכי JavaScript ארוכי טווח ב-web worker, המשתמש בשרשור רקע כדי להשיג זאת.

Shift Layout מצטבר (CLS)

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

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

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

ציונים עבור הסטת פריסה מצטברת מחושבים על ידי הכפלת כל המדדים יחד:

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

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

כלים לניתוח משמרות פריסה מצטבר

חישובים עבור מדדי CLS נעשים בין היתר בחלונית DevTools Lighthouse, PageSpeed ​​Insights וכלי web.dev Measure. תוסף Web Vitals עבור Google Chrome מציג גם את מדד CLS. דוח חוויית המשתמש של Chrome, כמו ה-LCP וה-FID, מאפשר לך לחפש נתונים סטטיסטיים אמיתיים של CLS שנרשמו במדינות שונות, חיבורים וגאדג'טים עבור כתובת אתר ספציפית, בדומה ל-LCP וה-FID.

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

סיבות נפוצות לציוני שינוי פריסה מצטברים גרועים

טעינה איטית של נכסים ורכיבי DOM דינמיים או חסרי גודל הם הגורמים הנפוצים ביותר לציוני CLS נמוכים.

1. תמונות, iframes, פרסומות וכו' אינם תופסים אף אחד מהשטח הפנוי בעמוד.
2. תוכן מוזרק באופן דינמי לאחר בקשת רשת לפרסומות, ווידג'טים של מדיה חברתית וכו'.
3. Flash of Unstyled Text (FUT) או FOIT (Flash of Invisible Text) הוא אפקט בולט של טעינת גופני אינטרנט (FOUT).

כיצד לשפר את ציוני השינויים המצטברים בפריסה

לרוב, זה עניין של לוודא שיש מספיק מקום לתוכן לפני שהוא מוריד. למרות שההצעות לייעול השרת של Largest Contentful Paint יעזרו, עדיין יש מקום לשיפור:

1. שימוש במאפיין יחס הגובה-רוחב החדש של CSS או הוספת תכונות רוחב וגובה לתגי HTML ו-iframe> יבטיח שלדף יש מספיק מקום להורדת הנכסים לפני שהם יוצגו.
2. טעינת מודעות ווידג'טים עשויה להימשך זמן רב, לכן ודא שרכיבי המכולה שלך בגודל הנכון.
3. אם אפשר, טען מראש תמונות ונכסים אחרים המוצגים בצורה בולטת בראש העמוד.
4. יש להשתמש במשורה בגופני אינטרנט, ויש להשתמש בגופני מערכת ההפעלה בכל הזדמנות אפשרית.
5. הגדר את תצוגת הגופנים ב-CSS לאופציונלי או החלפה ולאחר מכן טען גופני אינטרנט. ודא שאתה משתמש בגופן חלופי בגודל זהה לגופן המקורי.
6. בחלק העליון של הדף אין אלמנטים כלשהם אלא אם הם בתגובה לפעולת משתמש.
7. ברגע שמתקבל טריגר קלט, כל אינטראקציות המשתמש אמורות להסתיים תוך 500 אלפיות שניות.
8. אנימציות שאינן דורשות פריסה מחדש יכולות להתייעל באמצעות מאפייני טרנספורמציה ואטימות של CSS.

סיכום

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

הצלחתם של אתרים אופטימליים ושמישים הנמנעים מדפוסים אפלים גוברת על הצלחתם של אתרים מנופחים וכבדי פופ-אפ עם ממשק משתמש נייד (UI) גרוע.

דרך מדידה להעריך את חווית המשתמש, Core Web Vitals יכולה לסייע לך לתעדף את השיפורים המשמעותיים ביותר שיש לבצע. המשתמשים שלך יהיו מאושרים ונאמנים יותר בגלל השינויים שאתה מבצע ב-Vitals שלך, גם אם ההכנסות שלך לא יגדלו.

אם אתם מחפשים אחסון מהיר במיוחד שיטיס את אתרכם קדימה:

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

שווה לקרוא