Web Vitals چیست

LCP و FID و CLS در Web Vitals

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

LCP چیست؟

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

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

Largest Contentful Paint
Largest Contentful Paint

چه امتیاز LCP خوب است؟

طبق استانداردی که گوگل در Web Vital تعریف کرده است، برای اینکه کاربر از تجربه کاربری خوبی در سایت بهره ببرد، باید 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 کردن روی یک المان تعاملی) و زمانی است که مرورگر به تعامل کاربر پاسخ می دهد.

First Input Delay
First Input Delay

چه امتیاز FID خوب است؟

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

CLS چیست؟

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

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

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

Cumulative Layout Shift
Cumulative Layout Shift

چه امتیاز 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 سرچ کنسول مشاهده کنید.

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

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

Web Vitals Chrome Extension
Web Vitals Chrome Extension

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

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

 

LCP و FID و CLS در Web Vitals
LCP و FID و CLS در Web Vitals

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

1- آیا سرعت هاست تاثیری در بهبود Largest Contentful Paint دارد؟

بله. هر چه سرعت هاست یا سرور بالاتر باشد و Response time سرور پایین تر باشد، امتیاز LCP بهتر خواهد بود.

2- آیا کمپرس کردن فایل های جاوااسکریپ تاثیری در بهبود پارامتر First Input Delay صفحه دارد؟

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

3- برای بهبود Cumulative Layout Shift چه نکاتی را در مورد عکس باید رعایت کنیم؟

همه عکس ها در HTML باید دارای ابعاد width و height باشند که مرورگر قبل از لود آنها، بداند که ابعاد عکسی که باید رندر کند چقدر است. اگر ابعاد عکس در HTML مشخص نشده باشد ممکن است کم منجر به تاثیر منفی در امتیاز CLS شود.

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

Rating: 5

3 نظر برای “LCP و FID و CLS در Web Vitals

  1. با عرض سلام و احترام خدمت استاد گرامی جناب آقای نیما جعفری
    باز هم بابت زحماتی که در زمینه سئوی حرفه ای می کشید ممنونم خواستم بدونم از بین سرورهای ایرانی به نظرتون کدوم سرور میتونه حداقل از بابت response time مشکلی نداشته باشه

    Rating: 5
    1. سلام و عرض ادب جناب آقای ربیعیان عزیز،
      تشکر، در بین سرویس دهنده های مجازی، شرکت هاست دی ال و پارس پک را تست کردم و سرویس قابل قبولی ارائه می دهند ولی دقت داشته باشید که برای بهتر شدن response time و مخصوصا LCP، نیاز است که مجموعه ای از عوامل مانند سخت افزار مناسب، نرم افزار مناسب با کانفیگ صحیح و پرفورمنس کد و کش و غیره تاثیر دارند.

  2. بسیار جامع و کاربردی. بابت این مطلب پر محتوا و عالی شما در مورد Web Vitals سپاسگزارم، گوگل دائما دارد پارامترهای مختلف را در حیطه کاری سئو معرفی میکنه که باید یک سئوکار همیشه آنها را فرا بگیرد و در پروژه هایش، آنها را بهبود دهد. پیروز باشید.

    Rating: 5

دیدگاه و سوالات خود را با ما در میان بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *