كيفية تحسين تغيير التخطيط التراكمي (CLS) لووردبريس

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

في حالة تطوير الويب ، قد يواجه المستخدمون الذين يتنقلون من صفحة إلى أخرى على موقع ويب أحيانًا ما يُعرف باسم تغيير التخطيط التراكمي (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 الأخرى:

• جي تي متريكس
• Google Web Vitals CLS Debugger
• ملحق Google Chrome Web Vitals
• منارة جوجل
• اختبار صفحة الويب

نظرًا لأن PageSpeed ​​Insights من Google هي الأكثر شيوعًا ، فسنستخدمها على سبيل المثال.

لقياس درجة CLS الخاصة بك ، انتقل إلى الصفحة الرئيسية PageSpeed ​​Insight ، وأدخل عنوان URL لصفحة الويب الخاصة بك في حقل النص العلوي ، ثم انقر فوق الزر تحليل . اعتمادًا على شعبية موقع الويب الخاص بك وسرعة الإنترنت ، يجب أن تزودك PageSpeed ​​Insights بتقرير في غضون ثوانٍ قليلة.

للعثور على درجة CLS الخاصة بك ، قم بالتمرير لأسفل إلى قسم تقييم أساسيات الويب الأساسية.

إذا استخدمنا صفحة Amazon الرئيسية كمثال ، فسنجد على الأرجح درجة CLS أقل من 0.10. أثناء الاختبار ، وجدنا أن موقع الويب للجوال حصل على درجة CLS 0.01 ، بينما حصل إصدار سطح المكتب على 0.05.

لكن كيف يفعلون ذلك عندما يكون موقعهم ثقيل الموارد؟ لنلقِ نظرة على كيفية الحصول على درجة CLS مثل أمازون أيضًا.

كيفية تحسين CLS

أفضل طريقة لمعرفة العناصر التي تسبب نتيجة CLS العالية هي استخدام مصحح أخطاء Google Web Vitals CLS. يعرض لك صورة GIF لجميع الميزات المتغيرة على موقع الويب الخاص بك. الإعلانات وملفات الوسائط هي السبب الأكثر شيوعًا للحصول على درجات CLS العالية. قد تتضمن الأسباب الأخرى الخطوط و CSS غير المتزامن والرسوم المتحركة وإطارات Iframes. لتحسين درجة CLS الخاصة بك ، سيتعين عليك تحسين هذه العناصر.

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

لتحقيق هذه الغاية ، إليك بعض الخطوات لتحسين درجة CLS لموقعك:

أضف خصائص الأبعاد إلى جميع ملفات الوسائط

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

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

تأكد من تحميل الخطوط محليًا

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

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

تجنب FOIT و FOUT

يحدث وميض النص غير المرئي (FOIT) عندما تفشل في تحديد خط احتياطي. بينما يحاول متصفح الويب الخاص بك تحميل الخط الخاص بك أو إيجاد بديل ، سيتم تقديم مساحة فارغة للمستخدمين حيث يجب أن يكون النص.

أثناء وميض النص غير المصمم (FOUT) ، سيتم تقديمك بخط احتياطي افتراضي لمتصفح الويب حتى يتمكن من تحميل الخط المحدد. لإصلاح ذلك ، يمكنك إضافة خاصية عرض الخط: swap .

إذا سبق لك تنزيل خطوط من Google ، فستلاحظ أنها تضيف هذه العلامة إلى نهاية كل عنوان URL. أسهل طريقة لإضافة هذه الخاصية بنفسك هي استخدام البرنامج الإضافي Swap Google Fonts Display على WP.

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

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

الخطوط التحميل المسبق

للتأكد من أنك تستضيف الخطوط محليًا ، يمكنك بعد ذلك تحميل الخطوط مسبقًا باستخدام مكونات إضافية مثل:

• صاروخ الفسفور الابيض
• * تلميحات موارد الحفلة
• الثبات

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

تعطيل تحسين تسليم CSS

إذا كنت تستخدم WP Rocket لتحسين تسليم CSS أو تحميل CSS بشكل غير متزامن مع LiteSpeed ​​Cache ، فقد يتسبب ذلك في وميض محتوى غير منظم (FOUC). إذا كنت ترغب في تحسين درجة CLS الخاصة بك ، فإننا نوصي بتعطيل هذه الخيارات في المكونات الإضافية الخاصة بها.

بدلاً من ذلك ، يمكنك تعيين ما يُعرف باسم CSS الحرج الاحتياطي. يتضمن ذلك إنشاء برنامج نصي احتياطي مهم باستخدام أداة مثل Critical Path CSS Generator.

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

تعطيل الرسوم المتحركة

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

بدلاً من ذلك ، يمكنك استخدام المكون الإضافي Happy Addons Elementor. يسمح لك هذا بتحريك العناصر دون التسبب في تغييرات في التخطيط.

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