تغییر چیدمان تجمعی – بررسی اجمالی از عامل رتبه بندی گوگل در سال 2021

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

تعریف Shift Layout Layout

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

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

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

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

طبق گفته های گوگل ، پنج دلیل وجود دارد که باعث تغییر حالت طرح بندی شده می شود:

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

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

تبلیغات

ادامه خواندن زیر

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

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

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

مقاله پیشنهادی  نحوه اجرای ممیزی فانوس دریایی خودکار بر روی تغییرات وردپرس

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

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

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

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

تبلیغات

ادامه خواندن زیر

محتوای پویا تزریق شده است

این محتوا است که به صفحه وب تزریق می شود. به عنوان مثال در WordPress می توانید به یک ویدیوی YouTube یا پیوند توییتر وصل شوید و وردپرس فیلم یا صدای جیر جیر را به عنوان یک شیء تعبیه شده نمایش می دهد.

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

فونتهای وب بارگیری شده می توانند باعث شوند آنچه به عنوان Flash از متن نامرئی (FOIT) و Flash of Unstyled (FOUT) شناخته می شود ، باشد.

مقاله پیشنهادی  چرا سایتی با URL های زشت در رده بالای من قرار دارد؟

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

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

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

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

به همین دلیل مفید است که اندازه گیری در آزمایشگاه یا این زمینه انجام شود.

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

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

کسر تأثیر

کسر تأثیر اندازه گیری میزان فضای یک عنصر ناپایدار در منظره است.

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

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

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

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

مقاله پیشنهادی  اپل سافاری ردیابی Google Analytics را مسدود نخواهد کرد

کسر فاصله

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

در مثال بالا عنصر صفحه 25٪ نقل مکان کرد.

تبلیغات

ادامه خواندن زیر

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

0.75 0.2 0.25 = 0.1875

برخی از مباحث ریاضی و ملاحظات دیگر در محاسبه وجود دارد. نکته مهم برای دور کردن این مسئله اینست که نمره یک روش برای اندازه گیری فاکتور مهم تجربه کاربر است.

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

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

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

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

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

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

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