CLS (التحوّل التراكمي للتخطيط)

التحوّل التراكمي للتخطيط (CLS) هو مؤشّر من مؤشّرات Core Web Vitals يقيس مدى الاستقرار البصري للصفحة أثناء تحميلها. فبدل تتبّع السرعة أو الاستجابة، يركّز CLS على ما إذا كان المحتوى المرئي يتحرّك بشكل غير متوقّع أثناء عملية التحميل وبعدها. ففي كلّ مرّة يتحرّك فيها عنصر دون تفاعل من المستخدم، يسجّل المتصفّح مسافة التحوّل وحجمه. وتُجمَّع نتائج التحوّلات المنفردة في نوافذ جلسات، وتصبح أكبر نافذة جلسة هي درجة CLS للصفحة. وتُعدّ الدرجة ٠٫١ أو أقلّ جيّدة، وما بين ٠٫١ و٠٫٢٥ تحتاج إلى تحسين، وأي قيمة أعلى من ٠٫٢٥ تُعدّ ضعيفة.

تُضرّ التحوّلات غير المتوقّعة في التخطيط بتجربة المستخدم مباشرة. فالقارئ الذي يمدّ يده إلى زرّ قد يضغط عنصراً خاطئاً بالخطأ حين يقفز المحتوى. والمشاهد الذي يتصفّح مستنداً قد يفقد موضعه تماماً. وتزيد هذه المضايقات من [معدّلات الارتداد](/glossary/bounce-rate) وتقلّل من زمن البقاء على الصفحة. وتستعمل Google CLS بوصفه أحد ثلاثة مؤشّرات أساسية في خوارزمية ترتيبها، ولذا تواجه الصفحات ذات الاستقرار البصري الضعيف عقوبات على صعيدَي التفاعل وتحسين محرّكات البحث معاً. وللناشرين الرقميين الذين يضمّنون محتوى تفاعلياً كالكتب التفاعلية، يكتسب ضبط CLS أهمّية خاصّة لأنّ التضمينات من جهات خارجية تُعدّ من أبرز مصادر تحوّلات التخطيط.

صُمّم عارض FlipLink ليُقلّل CLS إلى أدنى حدّ بتحديد أبعاد ثابتة لحاوية الكتاب التفاعلي قبل اكتمال تحميل محتوى الصفحة. فتُعرض الصور والعناصر التفاعلية ضمن مساحات محجوزة مسبقاً، فلا يتحوّل التخطيط مع وصول الموارد. ويُبدأ كلّ من مُحرِّك الكتب التفاعلية المعتمد على Three.js وعارض المستندات المعتمد على PDF.js بإطار مستقرّ، ما يمنع رسوم قلب الصفحة من إحداث قفزات في التخطيط. أمّا [رمز التضمين المتجاوب](/features/sharing-and-distribution) الذي يولّده FlipLink، فيستعمل حاويات بنسبة أبعاد ثابتة، تحجز القدر الصحيح من المساحة على الصفحة المضيفة فوراً. ويعود هذا التصميم بالفائدة على العارض المُضمَّن في موقعك وعلى المنشور المُستضاف على go.fliplink.me على السواء.

يُقاس CLS عبر مكوّنين لكلّ تحوّل: **حصّة التأثير** (نسبة منطقة العرض المتأثّرة) و**حصّة المسافة** (مقدار حركة العنصر نسبةً إلى منطقة العرض). وتساوي درجة تحوّل التخطيط لإطار واحد حاصلَ ضرب حصّة التأثير في حصّة المسافة. وتُستثنى التحوّلات التي تحدث خلال ٥٠٠ مللي ثانية من إدخال المستخدم (كالنقر أو اللمس) لأنّ المستخدم يتوقّع حركة استجابةً لفعله. وتُبلّغ كلّ من أدوات مطوّري Chrome وLighthouse وPageSpeed Insights ومكتبة Web Vitals بلغة JavaScript عن قيمة CLS. كما توفّر بيانات الميدان من تقرير Chrome User Experience Report (CrUX) درجات CLS واقعية مُجمَّعة من زوّار فعليين.

يعتمد CLS على نهج **نافذة الجلسة** لاحتساب الدرجة النهائية. ونافذة الجلسة مجموعة من تحوّلات التخطيط تقع كلّ منها في غضون ثانية واحدة من الأخرى، بمدّة قصوى للنافذة تبلغ خمس ثوانٍ. ودرجة CLS للصفحة هي أكبر نافذة جلسة منفردة، لا مجموع كلّ التحوّلات. وحُدّثت هذه المنهجية عام ٢٠٢١ لتعكس بصورة أفضل الصفحات طويلة العمر وتطبيقات الصفحة الواحدة التي يتحمّل فيها المحتوى تدريجياً. ومن الأسباب الشائعة لارتفاع CLS: الصور دون سمات العرض والارتفاع، والإعلانات أو اللافتات المُحقَنة ديناميكياً، وخطوط الويب التي تُحدث ومضة نصّ غير منسّق (FOUT)، والتضمينات من جهات خارجية التي تُحمَّل بشكل غير متزامن دون مساحة محجوزة.

**«CLS لا يهمّ إلّا أثناء تحميل الصفحة الأوّلي.»** يتعقّب CLS التحوّلات على امتداد دورة حياة الصفحة بأكملها، بما فيها تلك الناتجة عن صور بالتحميل المتأخّر، أو محتوى التمرير اللانهائي، أو عناصر تُدرَج ديناميكياً. وقد تتراكم درجة CLS في تطبيقات الصفحة الواحدة التي تستبدل المحتوى عند التنقّل إذا لم تُعالَج الانتقالات بعناية. **«درجة CLS تساوي ٠ هي الهدف.»** الصفر مثالي طبعاً، إلّا أنّ درجة ٠٫١ أو أقلّ تُعدّ جيّدة. والسعي إلى الصفر المطلق قد يقود إلى إفراط في الهندسة. والهدف العملي هو إبقاء التحوّلات غير ملحوظة للمستخدمين. **«CLS يقيس سرعة تحميل الصفحة.»** لا علاقة لـCLS بالسرعة. فقد تُحمَّل الصفحة في أقلّ من ثانية وتظلّ درجة CLS فيها سيّئة إذا تنقّلت العناصر أثناء العرض. والسرعة تُقاس بـ[LCP](/glossary/lcp) ومقاييس توقيت أخرى، لا بـCLS.