تحدث CLS عندما يتحرك محتوى مرئي بعد أن رُسِم بالفعل، مزيحًا ما كان المستخدم ينظر إليه. والسبب دائمًا تقريبًا هو محتوى يُحمَّل دون مساحة محجوزة.
تحدث CLS عندما يتحرك محتوى مرئي بعد أن رُسِم بالفعل، مزيحًا ما كان المستخدم ينظر إليه. والسبب دائمًا تقريبًا هو محتوى يُحمَّل دون مساحة محجوزة.
top و height) بدلًا من transform.width/height (أو aspect-ratio) بحيث تُحجز المساحة قبل التحميل:<img src="/photo.jpg" width="1200" height="800" alt="..."> <!-- reserves the box -->
.hero { aspect-ratio: 16 / 9; } /* reserves ratio for responsive media */
font-display: optional أو swap إضافةً إلى size-adjust/preload لتقليل إعادة التدفق عند وصول خط الويب.position: absolute) أو ادفعه من الأسفل.transform/opacity — فهما مركّبان (composited) ولا يُطلقان تخطيطًا.CLS هي أكثر Core Web Vital قابليةً للإصلاح — فهي عادةً حفنة من الأبعاد المفقودة. يستخدمها القائمون على المقابلات لاختبار فهمك لخط أنابيب العرض: فحجز المساحة مسبقًا يعني ألا يضطر المتصفح لإعادة التدفق أبدًا، وهذا سبب تفوّق transform على تحريك top.
مكتبة من أسئلة مقابلات تقنية المعلومات مع إجابات مفصّلة — من المبتدئ إلى المتقدم.
تبرع