Bookmarking אתר מאמרים לפרסום, הפצה וקידום של מאמרים בחינם

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

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

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

מהי שינוי פריסה מצטבר?

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

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

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

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

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

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

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

כיצד למדוד את ציון ה-CLS של האתר שלך

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

ציון CLS = שבר מרחק x שבר השפעה

שבר ההשפעה מתאר עד כמה אלמנט לא יציב משפיע על השטח הנתפס בין שתי פריימים. שבר המרחק מתאר את הכמות שאלמנט הוסט בין מסגרות. ציון CLS של 0.10 ומטה (0.0 – 0.10) הוא מעולה. ציון CLS מעל 0.10 אך מתחת ל-0.25 (0.10 -0.25) הוא בינוני ודורש שיפור, בעוד שציון CLS מעל 0.25 (0.25 <) הוא גרוע.

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

נכון לעכשיו, הדרך הפופולרית ביותר למדוד את ה-CLS של דף האינטרנט שלך היא באמצעות PageSpeed ​​Insights של Google. זה מאפשר לך לברר את הנתונים הסטטיסטיים של חווית המשתמש באתר שלך הן עבור האיטרציות לנייד והן עבור שולחן העבודה.

כלי CLS אחרים כוללים:

• https://gtmetrix.com/
• https://webvitals.dev/cls
• https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma
• https://www.wpexplorer.com/lighthouse-audits-improve-speed/
• בדיקת דפי אינטרנט

מכיוון ש-PageSpeed ​​Insights של Google היא המוכרת ביותר, נשתמש בה כדוגמה שלנו.

כדי למדוד את ציון ה-CLS שלך, נווט לדף הבית של PageSpeed ​​Insight, הכנס את כתובת האתר של דף האינטרנט שלך בשדה הטקסט העליון ולאחר מכן לחץ על כפתור ניתוח . בהתאם לפופולריות של האתר שלך ולמהירות האינטרנט שלך, PageSpeed ​​Insights אמור לספק לך דוח תוך מספר שניות.

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

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

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

כיצד לבצע אופטימיזציה של CLS

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

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

לשם כך, הנה כמה שלבים לשיפור ציון ה-CLS של האתר שלך:

הוסף מאפייני מימד לכל קובצי המדיה

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

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

ודא שהגופנים נטענים באופן מקומי

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

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

הימנע מ-FOIT ו-FOUT

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

במהלך הבזק של טקסט לא מעוצב (FOUT), יוצג בפניך גופן ברירת המחדל של דפדפן האינטרנט עד שיוכל לטעון את הגופן שצוין. כדי לתקן זאת, אתה יכול להוסיף את המאפיין font-display: swap .

אם אי פעם הורדת גופנים מגוגל, תבחין שהיא מוסיפה את התג הזה לסוף כל כתובת אתר. הדרך הקלה ביותר להוסיף נכס זה בעצמך היא באמצעות תוסף Swap Google Fonts Display ב-WP.

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

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

טען גופנים מראש

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

• WP Rocket
• pre party browser hints
• perfmatters

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

השבת אופטימיזציה של מסירת CSS

אם אתה משתמש ב-WP Rocket כדי לייעל את אספקת CSS או לטעון CSS באופן אסינכרוני עם LiteSpeed ​​Cache, זה עלול לגרום להבזק של תוכן לא מעוצב (FOUC). אם אתה רוצה לשפר את ציון ה-CLS שלך, אנו ממליצים להשבית את האפשרויות הללו בתוספים המתאימים.

לחלופין, אתה יכול להגדיר מה שידוע כ-CSS קריטי fallback. זה כרוך ביצירת סקריפט חלופי קריטי באמצעות כלי כמו Critical Path CSS Generator .

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

 

השבת אנימציות

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

לחלופין, אתה יכול להשתמש בתוסף Happy Addons Elementor. זה מאפשר לך להנפיש אלמנטים מבלי לגרום לשינויים בפריסה.

---

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