LCP و FID و CLS در Web Vitals

Core Web Vitals در آپریل 2020 توسط گوگل معرفی شد و حاوی سه پارامتر برای اندازه گیری Performance یا کارایی صفحه وب، Responsiveness یا سرعت پاسخگویی صفحه و همچنین سرعت لود صفحه است. پارامتر های Core Web Vitals به نام های LCP و FID و CLS هستند و هر سه تاثیر مستقیم در تجربه کاربری یا UX و رنکینگ دارند و توصیه می شود که سئوکاران به آنها توجه ویژه ای داشته باشند. نحوه محاسبات Core Web Vitals چندین بار نغییر کرده است و گوگل همیشه قصد دارد که علاوه بر بالا بردن دقت محاسبات، راه های فریب الگوریتم ها را نیز شناسایی و خنثی کند.

نکته: LCP و FID و CLS به صورت جداگانه برای موبایل و دسکتاپ محاسبه می شوند.

LCP چیست؟

همیشه سرعت لود صفحه برای سئوکارها و دولوپرها از اهمیت بالایی برخوردار است.‎ یکی از پارامترهای مهمی که برای بررسی سرعت بارگذاری صفحه از آن استفاده می شود، LCP است که در Core Web Vitals بیشتر به آن پرداخته شده است. LCP مخفف Largest Contentful Paint است و به معنای مدت زمانی است که صرف می شود تا بزرگترین المان محتوا در صفحه، لود و رندر و در viewport به کاربر نمایش داده شود.

پارامترهای قدیمی تر مانند Load یا DOMContentLoaded الزاما به معنی اینکه یوزر در چه زمانی می تواند محتوای اصلی را به صورت رندر شده ببیند نبود و حتی FCP یا همان First Contentful Paint که قبلا توسط گوگل معرفی شده بود نیز به دلیل اینکه بیانگر اولین محتوایی بود که در صفحه لود می شد، مانند LCP نمی تواند اطلاعات ارزشمندی در مورد UX کاربر به ما بدهد.

چه مدت زمانی به عنوان LCP مطلوب در نظر گرفته می شود؟

طبق استانداردی که گوگل در Core Web Vitals تعریف کرده است، برای اینکه کاربر از تجربه کاربری خوبی در سایت بهره ببرد، باید Largest Contentful Paint یا همان بزرگترین المان محتوا در کمتر از 2.5 ثانیه از زمان شروع لود صفحه، در صفحه نمایش کاربر رندر شده باشد.

بنابراین در صورتیکه LCP کمتر از 2.5 ثانیه باشد، صفحه مد نظر شما از نظر LCP دارای وضعیت مطلوبی است و اگر بین 2.5 تا 4 ثانیه باشد، نیاز به اصلاحات وجود دارد و اگر LCP بیش از 4 ثانیه بود، صفحه در وضعیت نامطلوبی قرار گرفته و بهتر است که هر چه سریعتر، بررسی های لازم در خصوص Largest Contentful Paint انجام شود.

کدام المان ها در LCP مد نظر گرفته می شود؟

در حال حاضر المان های زیر توسط LCP در نظر گرفته می شوند:

• المان <img>
• المان <image> درون یک المان <svg>
• المان <video> (عکس پوستر ویدیو نیز در نظر گرفته می شود)
• المانی که بکگراند عکس آن از طریق فانکشن url() بارگذاری شده باشد. مانند
  url(https://www.webyooz.com/wp-content/uploads/2020/05/largest-contentful-paint.jpg)
• المان های Block Level در HTML که دارای متن هستند.

FID چیست؟

FID مخفف First Input Delay است و پارامتری است که برای اندازه گیری Load responsiveness است. از Load responsiveness برای اندازه گیری سرعت لود صفحه و اجرای جاوااسکریپت های لازم برای پاسخ گویی به تعامل کاربر استفاده می شود. هر چه کاربر بتواند سریعتر با صفحه تعامل داشته باشد، تجربه کاربری بهتری خواهد داشت.

به عبارت دیگر FID فاصله زمانی بین تعامل کاربر با صفحه (مانند کلیک روی یک لینک یا دکمه و یا tap کردن روی یک المان تعاملی) و زمانی است که مرورگر به تعامل کاربر پاسخ می دهد.

چه مدت زمانی به عنوان FID مطلوب در نظر گرفته می شود؟

همان طور که در تصویر بالا نیز مشاهده می کنید، در صورتی که FID صفحه کمتر از 100 میلی ثانیه باشد، صفحه از نظر First Input Delay در وضعیت مطلوبی است و اگر بین 100 تا 300 میلی ثانیه باشد، نیاز به انجام اصلاحات وجود دارد و در نهایت اگر FID بیشتر از 300 میلی ثانیه باشد، صفحه در وضعیت نامطلوبی قرار دارد و بهتر است که هر چه زودتر بررسی و اصلاح گردد.

CLS چیست؟

CLS مخفف عبارت Cumulative Layout Shift است و برای اندازه گیری Visual Stability استفاده می شود. برای درک بهتر، یک مثال می زنم. حتما برای شما پیش آمده که در حال خواندن یک صفحه هستید و قصد دارید روی یک لینک یا دکمه کلیک یا tap کنید و درست همان لحظه، متن یا یک لینک حرکت می کند و جابجا می شود و شما به اشتباه روی یک لینک دیگر کلیک می کنید. این جابجایی layout برای کاربر آزاردهنده است.

پارامتر CLS در حقیقت صفحه را از نظر جابجایی layout محتوای visible در viewport بررسی می کند که 500 میلی ثانیه پس از بارگذاری صفحه اتفاق بیفتد و امتیاز آن با توجه به میزان جابجایی layout و حجم محتوای جابجا شده محاسبه می شود. در حقیقت هر چقدر میزان جابجایی بیشتر باشد و هر چقدر اندازه محتوایی که جابجا می شود بزرگتر باشد، امتیاز CLS بزرگتر خواهد شد که معنی مثبتی ندارد.

ویدیو بالا یک نمونه از حرکت ناگهانی layout است که برای کاربر ناخوشایند است.

چه مدت زمانی به عنوان CLS مطلوب در نظر گرفته می شود؟

با توجه به تصویر بالا، در صورتی که امتیاز CLS کمتر از 0.1 باشد، وضعیت صفحه از نظر Cumulative Layout Shift مطلوب است و اگر بین 0.1 تا 0.25 بود، نیاز به اصلاح دارد و در صورتی که CLS بیشتر از 0.25 بود، وضعیت نامطلوب است و بهتر است که تلاش کنید که این امتیاز را کاهش دهید.

ابزارهای اندازه گیری LCP و FID و CLS در Web Vitals

هر سه پارامتر LCP و FID و CLS در Web vitals که در مورد آنها صحبت شد، توسط ابزار Lighthouse که به عنوان مثال در PageSpeed Insights وجود دارد قابل اندازه گیری هستند. اطلاعات LCP و FID و CLS توسط CrUX که مخفف Chrome UX Report است جمع آوری می شود. همچنین می توانید این پارامتر ها را در گزارش Core Web Vitals سرچ کنسول مشاهده کنید.

همچنین می توانید از اکستنشن گوگل کروم Web Vitals نیز برای اندازه گیری سه پارامتر مذکور استفاده کنید.

جمع بندی در مورد Core Web Vitals

سه پارامتری که در Core Web Vitals اندازه گیری می شوند در راستای بهبود تجربه کاربری هستند و دولوپرها و سئوکاران نیاز است که در جهت سئوی حرفه ای نگاه ویژه ای به آنها داشته باشند و تلاش کنند که دست کم 75 درصد از بازدیدهایی که دارند از نظر LCP و FID و CLS در وضعیت مطلوب باشند.

پرسش های متداول در مورد LCP و FID و CLS در Web Vitals

🔗 منبع: Web Vitals essential metrics for a healthy site