لماذا أكتب هذا

أقوم الآن بتشغيل عدد قليل من مواقع الويب، ومنذ أن بدأت العمل كان أدائي يرتفع وينخفض للغاية. لقد وجدت أنه مزعج بصراحة في بعض الأحيان. يبدو أن كل شيء يعمل بشكل جيد بالنسبة لي محليًا، ولكن بعد ذلك قمت بالتحقق من تحليلات الخادم الخاص بي وأستطيع أن أرى أن سرعتي كانت فظيعة في بعض البلدان.

لقد بدا دائما أن الأمر كذلكسي إل إسأوLCPلقد كانت هذه هي المشكلة بالنسبة لي. لذلك فكرت في أن أشارك تجربتي وأحاول مساعدة الآخرين على اكتشاف ذلك، خاصة إذا كنت تمر بنفس الشيء. أو ربما واجهت مشكلة في هذا الأمر ولديك منظور أو حل فريد؟ أحب أن أسمع عن ذلك.

وفقمجلة محرك البحث، فإن تحسين هذين المقياسين يمكن أن يؤدي إلى تحسين مستوى رؤية موقعك ورضا المستخدم بشكل كبير. بدا ذلك رائعًا من الناحية النظرية، لكن إصلاحها في الواقع كان قصة مختلفة. اسمحوا لي أن أطلعكم على ما تعلمته.

ما هي CLS وLCP، بالضبط؟

قبل أن أخوض في صراعاتي الخاصة، اسمحوا لي أن أشرح ما هي هذه الاختصارات في الواقع، لأنه عندما رأيت هذه الاختصارات لأول مرة في Google Search Console، لم يكن لدي أي فكرة عما تعنيه.

إزاحة التخطيط التراكمي (CLS)يقيس مدى انتقال تخطيط صفحتك أثناء تحميله. هل تعرف عندما تكون على وشك النقر على زر وتتغير الصفحة بأكملها، لذا تنقر على الشيء الخطأ؟ هذه مشكلة CLS. إنه أمر محبط للغاية كمستخدم، وتبين أن محركات البحث تعاقبك على ذلك أيضًا.

أكبر طلاء محتوى (LCP)يقيس المدة التي يستغرقها تحميل أكبر عنصر مرئي على صفحتك. عادةً ما تكون هذه صورة بطل أو كتلة نصية كبيرة. إذا كان LCP الخاص بك بطيئًا، فإن زوار موقعك يحدقون في صفحة نصف محملة، وسيغادر الكثيرون.

كلاهما يقع ضمن نطاق Googleمؤشرات الويب الأساسية، والتي تؤثر بشكل مباشر على تصنيفات البحث الخاصة بك. لذلك، حتى لو كان المحتوى الخاص بك رائعًا، فإن نتائج CLS وLCP الضعيفة يمكن أن تعيقك.

تحسين موقع الويب الخاص بك لـ CLS وLCP

🖼️

ضبط أبعاد الصورة
تحديد العرض والارتفاع للصور

📢

استخدم الإعلانات بمسؤولية
تجنب تغيير حجم الإعلان بشكل غير متوقع

⚡

التحميل المسبق للموارد الهامة
تأكد من تحميل المحتوى المهم بسرعة

🔄

تصغير المحتوى الديناميكي
الحد من المحتوى الذي يتغير أثناء التحميل

📊

مراقبة الأداء بانتظام
استخدم الأدوات لتتبع نتائج CLS وLCP

كابوس CLS الخاص بي

كانت CLS هي المشكلة الأولى التي واجهتها. بدت صفحاتي جيدة بالنسبة لي، لكن درجاتي كانت فظيعة. وبعد الكثير من البحث، وجدت الجناة الرئيسيين:

صور بدون أبعاد:لم أقم بتعيين العرض والارتفاع على صوري. لم يكن لدى المتصفح أي فكرة عن مقدار المساحة التي يجب حجزها، لذلك تغير كل شيء بمجرد تحميل الصور.
تحميل الخطوط في وقت متأخر:تم تحميل خطوطي المخصصة بعد عرض الصفحة، مما تسبب في قفز النص بالكامل حيث حل الخط الجديد محل الخط الاحتياطي. كان هذا دقيقًا لكنه أضاف.
المحتوى الديناميكي:كان لدي بعض المكونات التي أدخلت محتوى بعد تحميل الصفحة، مما أدى إلى دفع كل شيء أسفلها إلى الأسفل.

كان إصلاح معظم مشكلات CLS الخاصة بي بسيطًا بشكل مدهش. لقد بدأت في تحديد أبعاد واضحة لجميع الصور والوسائط. لقد أضفت تبديل عرض الخط إلى تحميل الخط الخاص بي حتى يتم عرض النسخة الاحتياطية على الفور. وقمت بحجز مساحة باستخدام CSS لأي محتوى يتم تحميله ديناميكيًا.

أدوات مثلجوجل PageSpeed رؤىكانت مساعدة كبيرة هنا. فهي تظهر لك بالضبط العناصر التي تسبب تغيرات في التخطيط، لذلك لا يمكنك التخمين.

ثم جاءت مشكلة LCP

فقط عندما اعتقدت أن الأمور قد رتبت، ياعشرات LCPبدأت في وضع العلامات. كان الجزء المحبط هو أن موقعي يتم تحميله بسرعة بالنسبة لي في المملكة المتحدة، لكن تحليلاتي أظهرت سرعات رهيبة في بلدان أخرى. هذا هو ما يتعلق بـ LCP - فهو يعتمد بشكل كبير على مكان تواجد المستخدمين ومدى بعدهم عن خادمك.

القضايا الرئيسية التي وجدتها هي:

الصور الكبيرة غير المحسنة:كانت صور بطلي كبيرة جدًا. كنت أقوم بتحميل صور كاملة الدقة دون ضغطها.
وقت استجابة الخادم:بدون CDN، كان المستخدمون البعيدون عن الخادم الخاص بي ينتظرون الاستجابة الأولى منذ فترة طويلة.
جافا سكريبت لحظر العرض:لقد تم تحميل البرامج النصية في الرأس والتي كانت تمنع الصفحة من العرض حتى تنتهي.

مثلدراسة باك لينكوالعروض، فإن المواقع ذات درجات LCP الجيدة تتمتع بمشاركة أفضل بشكل ملحوظ ومعدلات ارتداد أقل. بمجرد أن بدأت في إصلاح هذه المشكلات، تمكنت من رؤية الفرق في تحليلاتي الخاصة.

ما الذي ساعد فعليًا LCP الخاص بي

لقد بدأت في ضغط جميع الصور الخاصة بي واستخدام تنسيق WebP حيثما أمكن ذلك. لقد قمت أيضًا بنقل البرامج النصية غير الأساسية للتحميل بشكل غير متزامن أو تأجيلها بالكامل. تتم استضافة مواقعي على Vercel، الذي يتعامل مع الكثير من عناصر الشبكة المتطورة بالنسبة لي، ولكن إذا كنت تستخدم استضافة تقليدية، فقم بإعدادCDNيمكن أن يحدث فرقًا كبيرًا في حركة المرور الدولية.

تقوم شبكة CDN بتخزين نسخ من موقعك في مواقع حول العالم، بحيث يتم تقديم الخدمة للزوار من مكان أقرب إليهم بدلاً من خادمك الأصلي الوحيد. إذا كنت ترى سرعات سيئة في مناطق معينة، فهذا هو أحد الأشياء الأولى التي تستحق النظر فيها.

الجزء المزعج - لم يتم "إصلاحه" أبدًا

هذا ما لا يخبرك به أحدCLS وLCP. لا يمكنك إصلاحها مرة واحدة والمضي قدمًا. في كل مرة أقوم فيها بإضافة ميزة جديدة، أو صورة جديدة، أو تغيير التخطيط الخاص بي، يمكن أن تتغير النتائج مرة أخرى. إنه أمر مستمر.

لقد أمضيت أسابيع حيث كان كل شيء باللون الأخضر في Google Search Console، ثم قمت بإضافة مكون جديد وفجأة تم وضع علامة على CLS الخاص بي مرة أخرى. إنه أمر مزعج تمامًا، لكنني تعلمت التحقق من مؤشرات الويب الأساسية الخاصة بي بعد كل تغيير مهم الآن.

تأثير CLS وLCP على تجربة المستخدم

0.1 ثانية

التسامح المستخدم

32%

زيادة معدل الارتداد

انخفاض معدل التحويل

مؤشرات الويب الأساسية

أهمية تصنيف SEO

تقرير بقلمالعلامة التجارية الماليةيسلط الضوء على كيف يمكن أن تؤدي مواقع الويب البطيئة بشكل مباشر إلى خسارة الإيرادات. وهذا هو الدافع الكافي لمواصلة العمل، حتى عندما يبدو الأمر مملاً.

الأدوات التي ساعدتني أكثر

إذا كنت تتعامل مع نفس المشكلات، فإليك الأدوات التي أستخدمها بالفعل وأجدها مفيدة:

وحدة تحكم بحث جوجل:هذا هو المكان الذي لاحظت فيه مشاكلي لأول مرة. فهو يعرض نتائج مؤشرات أداء الويب الأساسية مقسمة حسب الصفحة ويخبرك بالضبط بما يحتاج إلى الاهتمام.
رؤى سرعة الصفحة:أقوم بتشغيل كل صفحة من خلال هذا بعد إجراء التغييرات. فهو يقدم توصيات محددة وقابلة للتنفيذ بدلاً من النصائح الغامضة.دليل أداء الويب الخاص بـ Shopifyيعد أيضًا مصدرًا مصاحبًا رائعًا.
ملحق مؤشرات الويب الحيوية:يعرض ملحق Chrome هذا CLS وLCP والمقاييس الأخرى في الوقت الفعلي أثناء تصفح موقعك. أبقيه باستمرار أثناء التطوير.

بمجرد تحديد مشكلات الأداء لديك، استخدمأداة تصنيف الذكاء الاصطناعي لبحث Googleللتحقق مما إذا كانت تحسيناتك تُترجم فعليًا إلى رؤية أفضل للبحث. لا فائدة من تثبيت النتائج إذا لم يكن ذلك مفيدًا في تصنيفاتك.

نصيحتي إذا كنت تمر بهذا

إذا كان أدائك صعودًا وهبوطًا مثل أدائي، فإليك ما أقترحه:

لا تُصب بالذعر.تعد مشكلات CLS وLCP شائعة بشكل لا يصدق. أنت لا تفعل كل شيء بشكل خاطئ، فهذه المقاييس حساسة فقط.
تحقق من تحليلاتك حسب البلد.قد يكون موقعك سريعًا بالنسبة لك ولكنه بطيء بالنسبة للزائرين في أماكن أخرى. يمكن لـ CDN حل هذه المشكلة بسرعة.
إصلاح الصور أولا.في تجربتي، الصور غير المحسنة والأبعاد المفقودة هي السبب في معظم مشاكل CLS وLCP.
اختبار بعد كل تغيير.اعتد على تشغيل PageSpeed Insights كلما قمت بإجراء تحديثات مهمة.
كن صبوراً.قد يستغرق تحديث بيانات Google Search Console أيامًا أو أسابيع. لا تفترض أن الإصلاحات التي قمت بها لا تعمل لمجرد أن لوحة المعلومات لم تتغير بعد.

ما زلت أتعلم وما زلت أتعامل مع هذا. لقد أصبحت درجاتي أفضل مما كانت عليه، لكنني لا أستطيع أن أسميها مثالية. إذا وجدت الحلول التي تناسبك، فأنا أريد حقًا أن أسمع عنها. يمكنك أيضًا تجربة تصور بيانات الأداء الخاصة بك من خلال موقعناصانع الرسم البياني المجاني على الإنترنتلتتبع التحسينات مع مرور الوقت.

خلاصة القول هي:CLS وLCPلن يذهبوا بعيدا. إنها مهمة لتحسين محركات البحث، كما أنها مهمة لتجربة المستخدم، وإذا كنت تدير مواقع ويب مثلي، فسوف تبقيك على أهبة الاستعداد. لكنها قابلة للإصلاح، وكل تحسين تقوم به يستحق العناء.