למה אני כותב את זה

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

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

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

מה הם CLS ו-LCP, בדיוק?

לפני שאכנס למאבקים שלי, הרשו לי להסביר מה הם בעצם, כי כשראיתי לראשונה את ראשי התיבות האלה ב-Google Search Console, לא היה לי מושג למה הם מתכוונים.

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

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

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

בצע אופטימיזציה של האתר שלך עבור CLS ו-LCP

🖼️

הגדר מידות תמונה
ציין רוחב וגובה עבור תמונות

📢

השתמש במודעות באחריות
הימנע משינוי גודל מודעה בלתי צפוי

⚡

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

🔄

מזעור תוכן דינמי
הגבל תוכן שמשתנה במהלך הטעינה

📊

עקוב אחר ביצועים באופן קבוע
השתמש בכלים כדי לעקוב אחר ציוני CLS ו-LCP

סיוט ה-CLS שלי

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

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

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

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

ואז הגיעה בעיית ה-LCP

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

הבעיות העיקריות שמצאתי היו:

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

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

מה בעצם עזר ל-LCP שלי

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

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

החלק המעצבן - זה אף פעם לא באמת "תוקן"

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

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

השפעת CLS ו-LCP על חווית המשתמש

0.1 שניות

סובלנות משתמש

32%

עלייה בשיעור היציאה

ירידה בשיעור ההמרה

חיוני ליבה לאינטרנט

חשיבות דירוג SEO

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

הכלים שהכי עזרו לי

אם אתה מתמודד עם אותן בעיות, הנה הכלים שבהם אני משתמש בפועל ונמצא מועיל:

Google Search Console:זה המקום שבו שמתי לב לראשונה לבעיות שלי. זה מראה את ציוני הליבה של חיוני האינטרנט שלך בחלוקה לפי עמוד ומספר לך בדיוק מה צריך תשומת לב.
Page Speed Insights:אני עובר על כל עמוד זה לאחר ביצוע שינויים. הוא נותן המלצות ספציפיות שניתן לפעול במקום עצות מעורפלות.מדריך ביצועי האינטרנט של Shopifyהוא גם משאב נלווה נהדר.
תוסף Web Vitals:תוסף Chrome זה מציג את ה-CLS, LCP ומדדים אחרים שלך בזמן אמת בזמן שאתה גולש באתר שלך. אני שומר את זה כל הזמן במהלך הפיתוח.

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

העצה שלי אם אתה עובר את זה

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

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

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

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