يُعدّ مؤشر تغيير التخطيط التراكمي أحد الأداء الرئيسية للويب ، حيث يُقيّم مدى حفاظ الصفحة على اتساقها البصري. ويُحدد مستوى الاستقرار البصري من خلال عدد التغييرات غير المتوقعة في التخطيط دون تفاعل المستخدم مع الموقع. ففي كل مرة يتغير فيها محتوى الصفحة، يُعتبر التخطيط قد تغير، حتى لو لم يكن ذلك نتيجة النقر على رابط أو ما شابه.
يتم تحديد النتيجة الإجمالية لتغيير التخطيط التراكمي عن طريق جمع كل هذه التغييرات معًا.
ما هو تغيير التخطيط التراكمي؟
يُعدّ تأخر تحميل الصور أكثر المشاكل شيوعًا التي CLS . ومن المعتاد أن يتم تحميل النصوص قبل عناصر الوسائط. بالإضافة إلى ذلك، يتغير هيكل صفحة الويب بعد اكتمال تحميل جميع العناصر الرسومية. وتحدث هذه المشاكل سواءً كنت تتصفح أم لا.
بغض النظر عن حصول صفحة الويب على درجة CLS عالية، قد يصعب تحديد وقت اكتمال تحميلها. فتعقيد الموقع وكثرة محتواه الإعلامي يزيدان من احتمالية مواجهة المستخدمين لتغييرات في التصميم.
هل يمكن تقليل تغيير التخطيط التراكمي في ووردبريس؟
يُعد استخدام أداة تصحيح أخطاء CLS من Google Web Vitals الطريقة الأمثل لتحديد العناصر المسؤولة عن ارتفاع تقييم CLS لموقعك الإلكتروني. فهي تعرض لك صورة GIF توضح جميع العناصر المتغيرة على موقعك. غالبًا ما تُعزى التقييمات العالية لـ CLS إلى الإعلانات والوسائط المتعددة. ستحتاج إلى تحسين كل عنصر لرفع تقييم CLS الخاص بك.
ولهذا الغرض، إليك بعض الطرق التي يمكن استخدامها لتحسين درجة CLS لموقعك الإلكتروني:
1. أضف سمات الأبعاد إلى جميع ملفات الوسائط
نظرًا لأن متصفحك سيحتاج إلى تقييم حجم الصورة واتجاهها بعد تحميلها، فقد يزداد احتمال حدوث تغيير في التنسيق إذا قمت بتحميل ملفات وسائط ذات خصائص غير معروفة. الصور الكبيرة والملفات عالية الجودة أكثر عرضةً لهذه المشكلة من الصور الصغيرة. يمكنك تغيير حجم الصور في محرر الوسائط في ووردبريس.
2. تأكد من تحميل الخطوط محليًا
أثناء تحميل الخط، يجب أن يظل النص مرئيًا. لذا، فإن ضمان تحميل الخطوط محليًا بدلًا من استرجاعها من مواقع ويب تستضيفها جهات خارجية هو أول ما يجب فعله لتحقيق هذا الهدف.
3. تجنب FOIT و FOUT
وميض النص غير المرئي (FOIT) عندما لا يتم تحديد خط احتياطي. ونتيجة لذلك، سيرى المستخدمون مساحة فارغة مكان النص المعتاد بينما يحاول متصفح الويب تحميل الخط أو البحث عن بديل.
خلال فترة تُعرف باسم "وميض النص غير المنسق" (FOUT)، سيستخدم متصفحك خطه الافتراضي الاحتياطي إلى حين تحميل الخط الذي اخترته. ولحل هذه المشكلة، يمكنك إضافة الخاصية font-display: switch.
يمكنكم قراءة المزيد من المقالات المشابهة على مدونة Seahawk Media.
