تغییر طرح بندی تجمعی – مروری بر عامل رتبه بندی Google 2021

Cumulative Layout Shift (CLS) یک معیار گوگل است که یک رویداد تجربه کاربر را اندازه گیری می کند و در سال 2021 به یک عامل رتبه بندی تبدیل شد.

این بدان معناست که درک CLS چیست و چگونه می توان برای آن بهینه سازی کرد.

تعریف تغییر چیدمان تجمعی

Cumulative Layout Shift چیست؟

CLS تغییر غیر منتظره عناصر صفحه وب در حالی است که صفحه هنوز در حال بارگیری است. انواع عناصری که باعث تغییر می شوند فونت ها ، تصاویر ، فیلم ها ، فرم های تماس ، دکمه ها و سایر محتواها هستند.

به حداقل رساندن CLS مهم است زیرا صفحاتی که به هم متصل می شوند می توانند تجربه کاربری ضعیفی را ایجاد کنند.

نمره CLS ضعیف نشان دهنده مسائل مربوط به کدگذاری است که قابل حل است.

چرا CLS اتفاق می افتد

به گفته گوگل ، پنج دلیل برای تغییر Cumulative Layout Shift وجود دارد:

1. تصاویر بدون ابعاد
2. تبلیغات ، جاسازی و iframes بدون ابعاد.
3. محتوای تزریق پویا.
4. فونت های وب باعث FOIT / FOUT می شوند.
5. اقدامات در انتظار پاسخ شبکه قبل از به روز رسانی DOM.

تصاویر و ویدئوها باید دارای ابعاد ارتفاع و عرض در HTML باشند. با توجه به تصاویر پاسخگو ، مطمئن شوید که اندازه تصاویر مختلف برای نمایهای مختلف از نسبت تصویر یکسانی استفاده می کنند.

Google استفاده از آن را توصیه می کند AspectRatioCalculator.com برای محاسبه نسبت ابعاد منبع خوبی است.

تبلیغات می توانند باعث CLS شوند

مقابله با این یکی کمی مشکل است. یکی از راه های مقابله با تبلیغاتی که باعث ایجاد CLS می شوند ، سبک بندی عنصری است که قرار است تبلیغ در آن نمایش داده شود.

به عنوان مثال ، اگر div را دارای ارتفاع و عرض خاصی قرار دهید ، تبلیغ محدود به آن خواهد شد.

در صورت کمبود موجودی و نمایش تبلیغات ، دو راه حل وجود دارد.

اگر عنصری حاوی یک آگهی تبلیغاتی را نشان نمی دهد ، می توانید آن را طوری تنظیم کنید که از یک بنر تبلیغاتی جایگزین یا یک تصویر مکان دار برای پر کردن فضا استفاده شود.

متناوباً ، برای برخی از طرح بندی ها که در آن یک آگهی یک ردیف کامل را در بالای یک ستون در ناودان سمت راست یا چپ یک صفحه وب پر می کند ، اگر صفحه نمایش داده نشود ، تغییری ایجاد نمی شود. روی موبایل یا رومیزی تفاوتی نخواهد کرد. اما این بستگی به طرح موضوع دارد.

اگر موجودی تبلیغات مشکلی دارد ، باید آن را آزمایش کنید.

محتوای تزریق پویا

این محتوایی است که به صفحه وب تزریق می شود.

به عنوان مثال ، در وردپرس ، می توانید به یک ویدیوی YouTube یا یک Tweet پیوند دهید و وردپرس ویدیو یا توییت را به عنوان یک شیء تعبیه شده نمایش می دهد.

فونت های مبتنی بر وب

فونت های وب بارگیری شده می توانند باعث ایجاد آنچه که به عنوان Flash of text invisible (FOIT) و Flash of Unstyled Text (FOUT) شناخته می شود ، شوند.

راهی برای جلوگیری از این امر استفاده از rel = ”preload” در پیوند برای بارگیری آن فونت وب است.

Lighthouse می تواند به شما در تشخیص علت CLS کمک کند.

CLS می تواند در حین توسعه دزدکی حرکت کند

تغییر طرح بندی تجمعی می تواند در طول مرحله توسعه از بین برود. آنچه می تواند اتفاق بیفتد این است که بسیاری از دارایی های مورد نیاز برای ارائه صفحه در حافظه پنهان مرورگر بارگذاری می شود.

دفعه بعد که توسعه دهنده یا ناشر از صفحه در حال توسعه بازدید می کند ، متوجه تغییر طرح نمی شود زیرا عناصر صفحه از قبل بارگیری شده اند.

به همین دلیل اندازه گیری در آزمایشگاه یا صحرایی مفید است.

نحوه تغییر چیدمان تجمعی چگونه محاسبه می شود

محاسبه شامل دو معیار/رویداد است. اولین مورد Impact Fraction نامیده می شود.

کسر ضربه

کسر ضربه ، اندازه گیری میزان فضا است که یک عنصر ناپایدار در نمای نما اشغال می کند.

نمای نمایش چیزی است که در صفحه تلفن همراه مشاهده می کنید.

هنگامی که یک عنصر بارگیری می شود و سپس تغییر می کند ، کل فضایی که عنصر اشغال کرده است ، از مکانی که برای اولین بار در نمای نمایش اشغال کرده بود تا مکان نهایی هنگام ارائه صفحه.

نمونه ای که گوگل استفاده می کند عنصری است که 50٪ از نمای نمایش را اشغال می کند و سپس 25٪ دیگر کاهش می یابد.

وقتی به هم اضافه شود ، مقدار 75٪ Impact Fraction نامیده می شود و به عنوان نمره 0.75 بیان می شود.

کسر فاصله

اندازه گیری دوم کسر فاصله نامیده می شود. کسر فاصله مقدار فضایی است که عنصر صفحه از موقعیت اصلی به موقعیت نهایی منتقل کرده است.

در مثال بالا ، عنصر صفحه 25 درصد جابجا شد.

بنابراین در حال حاضر امتیاز طرح بندی تجمعی با ضرب کسر ضربه در کسر فاصله محاسبه می شود:

0.75 0. 0.25 = 0.1875

برخی دیگر از ریاضیات و ملاحظات دیگر در محاسبه وجود دارد. آنچه مهم است که از آن صرف نظر کنیم این است که نمره یکی از روش های اندازه گیری عامل مهم تجربه کاربر است.

نحوه اندازه گیری CLS

دو روش برای اندازه گیری CLS وجود دارد. گوگل اولین راه را در آزمایشگاه فرا می خواند. راه دوم در فیلد نامیده می شود.

در آزمایشگاه به معنای شبیه سازی یک کاربر واقعی است که یک صفحه وب را بارگیری می کند. گوگل از a استفاده می کند Moto G4 را برای ایجاد نمره CLS شبیه سازی کرد در محیط آزمایشگاه

ابزارهای آزمایشگاهی برای درک چگونگی عملکرد یک طرح قبل از فشار دادن آن به کاربران بهتر است. به ناشران این فرصت را می دهد که طرح بندی را برای مسائل آزمایش کنیدبه

ابزارهای آزمایشگاهی شامل Chrome Dev Tools و فانوس دریاییبه

تغییر چیدمان تجمعی را درک کنید

درک Cumulative Layout Shift بسیار مهم است. لازم نیست بدانید چگونه محاسبات را خودتان انجام دهید.

اما درک معنی آن و نحوه عملکرد آن بسیار مهم است زیرا این امر اکنون به بخشی از رتبه بندی Core Web Vitals تبدیل شده است.

اعتبار تصویر ویژه: پائولو بابیتا