معیار های Web vitals فاکتورهایی هستند که با هدف بهبود تجربه کاربری در صفحات وب به وجود آمده‌اند و در امتیاز سئو سایت موثر هستند. گوگل سه معیار اصلی را در نظر دارد و از صاحبان وب سایت می‌خواهد تا آن‌ها را رعایت کنند و تجربه کاربری بهتری را ارائه دهند. این سه معیار عبارت هستند از:
- بزرگترین ترسیم محتوایی صفحه (LCP)
- تاخیر ورودی اول (FID)
- تغییر چیدمان تجمعی (CLS)
در ادامه به طور خلاصه هر یک از این معیار های Web vitals را بررسی می‌کنیم. با منتوریکس همراه باشید.
بیشتر بخوانید: core web vitals چیست؟
بزرگترین ترسیم محتوایی صفحه (LCP)
بزرگترین ترسیم محتوایی صفحه که با LCP نشان داده می‌شود یکی از معیارهای Web vitals است که در بهبود تجربه کاربری نقش به سزایی دارد. معیار بزرگترین ترسیم محتوایی صفحه بر اساس سرعت بارگذاری یک صفحه در وب به وجود آمده است. LCP را می‌توان به صورت زمان رندر بزرگترین تصویر یا بلوک متنی قابل مشاهده در یک نمایشگر نسبت به زمان شروع بارگذاری صفحه تعریف کرد.
المان‌های مختلفی می‌توانند به عنوان LCP در نظر گرفته شوند که عبارت هستند از:
- img المان‌ها
- image المان‌های داخل المان svg
- video المان‌ها (تصویر پوستر استفاده شده است)
- المانی که تصویر پس زمینه آن از طریق تابع url بارگذاری می‌شود (در مقابل گرادیان CSS)
- المان‌های Block-level شامل text nodes یا سایر زیرمجموعه‌های عناصر inline-level text
چه امتیازی برای LCP مناسب است؟
برای دستیابی به بهترین تجربه کاربری بر اساس این معیار، امتیاز یک صفحه وب باید 5/2 ثانیه یا کمتر باشد. آستانه‌ای که برای این منظور در نظر گرفته شده است، 75 درصد بارگذاری‌های صفحه بر روی گوشی‌های موبایل و دستگاه‌های دسکتاپ است.
اندازه‌ی یک المان چگونه تعیین می‌شود؟
اندازه‌ی گزارش شده برای معیار بزرگترین ترسیم محتوایی صفحه برای یک المان، اندازه‌ای است که در نمایشگر برای کاربر قابل رویت باشد. در صورتی که بخشی از المان به خارج از نمایشگر هل داده شود و یا بریده شود به طوری که برای کاربر قابل رویت نباشد، در محاسبه‌ی معیار LCP به حساب نمی‌‌آید.
برای المان‌های تصویری که از اندازه اصلی خود تغییر اندازه داده‌اند با توجه به این که کدام کوچک‌تر است، اندازه‌ای که گزارش می‌شود یا اندازه‌ی قابل رویت در نمایشگر و یا اندازه‌ی اصلی است، به عبارت دیگر، هر کدام که کوچک‌تر باشد در نظر گرفته می‌شود. به عنوان مثال، برای المانی که نسبت به اندازه‌ی اصلی خود کوچک‌تر شده است، اندازه‌ای که کاربر در نمایشگر می‌بیند در نظر گرفته می‌شود در حالی که برای المانی که نسبت به اندازه‌ی اصلی خود بزرگ‌تر شده باشد، اندازه‌ی اصلی و اولیه در نظر گرفته می‌شود.
چگونگی محاسبه‌ی LCP
LCP را می‌توان هم در شرایط آزمایشگاهی و هم در شرایط عملی اندازه‌گیری کرد. علاوه بر این، در ابزارهای زیر نیز در دسترس است:
ابزارهای میدانی (Field)
- Chrome User Experience Report
- PageSpeed Insights
- Search Console (Core Web Vitals report)
- web-vitals JavaScript library
ابزارهای آزمایشگاهی (LAB)
FID از معیارهای Web vitals چیست؟
بزرگترین ترسیم محتوایی صفحه به طور معمول تحت تاثیر 4 فاکتور قرار می‌گیرد:
- زمان پاسخ سرور کند
- مشکل Render-blocking در جاوا اسکریپت و CSS
- زمان بارگذاری منابع
- رندر کردن Client-side
با بهبود هر یک از این فاکتورها می‌توان معیار LCP را بهبود بخشید.
بیشتر بخوانید: چگونه LCP را بهینه کنیم؟
تاخیر ورودی اول (FID)
دومین معیار از معیارهای Web vitals، تاخیر ورودی اول نام دارد که به اختصار با FID نشان داده می‌شود. این معیار در وب اولین برداشت کاربر از یک صفحه و تبدیل شدن به یک کاربر وفادار و فردی که دیگر به آن وب سایت برنمی‌گردد را رقم می‌زند. سوال اینجا است که چه چیزی این تاثیر مثبت را بر کاربر می‌گذارد؟
در وب اولین برداشت انواع و اشکال مختلفی دارد. این برداشت می‌تواند از طراحی سایت، جذابیت بصری، سرعت بارگذاری و حتی پاسخگویی آن باشد. در حالی که سنجش میزان رضایتمندی کاربران از طراحی سایت با API کار دشواری است اما اندازه‌گیری سرعت و پاسخگویی آن کار سختی نیست!
اولین برداشت کاربران از میزان سرعت بارگذاری سایت شما توسط اولین ترسیم محتوایی (FCP) اندازه‌گیری می‌شود. اما این فقط بخشی از کل ماجرا است. وقتی کاربران با سایت شما در تعامل هستند، سرعت پاسخگویی اهمیت پیدا می‌کند.
معیار تاخیر ورودی اول (FID) به سنجش اولین برداشت کاربر از تعامل و پاسخگویی سایت شما کمک می‌کند.
تاخیر ورودی اول چیست؟
FID بازه‌ی زمانی از وقتی که کاربر برای اولین بار با صفحه‌ی شما تعامل می‌کند (از طریق کلیک کردن بر روی یک لینک، ضربه زدن بر روی یک دکمه یا استفاده از یک کنترل سفارشی) تا زمانی که مرورگر قادر به پردازش کنترل‌کننده‌های رخداد برای پاسخ به آن تعامل است را اندازه‌گیری می‌کند.
چه امتیازی برای FID مناسب است؟
برای دستیابی به یک تجربه‌ی کاربری خوب، تاخیر ورودی اول سایت‌ها باید 100 میلی ثانیه یا کمتر باشد. آستانه‌ای که برای این منظور در نظر گرفته شده است، 75 درصد بارگذاری‌های صفحه بر روی گوشی‌های موبایل و دستگاه‌های دسکتاپ است.
به طور کلی، تاخیر ورودی به این دلیل رخ می‌دهد که رشته‌ای اصلی مرورگر مشغول انجام کار دیگری است. از این رو، نمی‌تواند به تعامل کاربر به موقع پاسخ دهد. یکی از دلایل اصلی این تاخیر، مشغول بودن مرورگر به تجزیه و اجرای یک فایل حجیم جاوا اسکریپت است که توسط اپلیکیشن بارگذاری شده است. به عبارت دیگر، در حالی که این کار را انجام می‌دهد نمی‌تواند شنوندگان رویداد (event listeners) را اجرا کند.
چگونگی محاسبه‌ی تاخیر ورودی اول
تاخیر ورودی اول تنها معیاری در بین معیارهای Web vitals است که فقط به صورت میدانی قابل محاسبه است. زیرا برای تعامل با صفحه سایت به یک کاربر واقعی نیاز دارد. شما می‌توانید FID را با استفاده از ابزارهای زیر محاسبه کنید:
ابزارهای میدانی
- Chrome User Experience Report
- PageSpeed Insights
- Search Console (Core Web Vitals report)
- web-vitals JavaScript library
با توجه به واریانس مورد انتظار در مقادیر FID، نکته‌ی مهم این است که هنگام گزارش تاخیر ورودی اول به توزیع آن دقت کنید و بر روی صدک‌های بالاتر تمرکز کنید. همان‌طور که قبلا اشاره شد، آستانه‌ی انتخابی برای معیارهای Web vitals، 75 درصد انتخاب شده است. اما به طور خاص برای معیار FID این رقم بین 95-99 درصد توصیه می‌شود. زیرا این موارد اولین تجربه بد کاربری از یک وب سایت را نشان می‌دهند.
بیشتر بخوانید: تأخیر ورودی اول (FID) چیست؟
تغییر چیدمان تجمعی (CLS)
یکی دیگر از معیارهای Web vitals که کاربرد فراوانی دارد، معیار تغییر چیدمان تجمعی یا به اختصار CLS نام دارد. این معیار کاربر محور میزان پایداری بصری صفحات وب را می‌سنجد. به عبارت دیگر، به تعیین تعداد دفعاتی که کاربر تغییرات چیدمان غیر منتظره را تجربه می‌کند، کمک می‌کند. هر چه مقدار این معیار کمتر باشد یعنی صفحه از لحاظ بصری تجربه‌ی بهتری برای کاربر به همراه دارد.
برای این که بهتر با این معیار آشنا شوید ابتدا تعریفی از آن را ارائه می‌دهیم.
CLS از معیارهای Web vitals چیست؟
تغییر چیدمان تجمعی (CLS) چیست؟
آیا تا به حال این تجربه برای شما رخ داده است که در هنگام مطالعه‌ی یک صفحه در وب با یک تغییر ناگهانی و غیرمنتظره روبرو شوید؟ این تغییر موجب می‌شود که محل دقیق مطالعه‌ی خود را از دست دهید و زمانی را صرف پیدا کردن آن نمایید که اصلا خوشایند نیست.
معیار تغییر چیدمان تجمعی (CLS) به صاحبان وب سایت کمک می‌کند تا با سنجش و اندازه‌گیری تعداد دفعات تکرار این مشکل برای کاربران واقعی، آن را برطرف کنند.
CLS به صورت مجموعه تمام امتیازهای تغییر چیدمان برای هر تغییر چیدمان غیرمنتظره در کل عمر کاری یک صفحه تعریف می‌شود. تغییر چیدمان وقتی رخ می‌دهد که یک المان قابل رویت موقعیت مکانی خود را از یک فریم رندر شده به فریم دیگر تغییر دهد. به عبارت دیگر، در صفحه جابه‌جا شود.
چه امتیازی برای CLS مناسب است؟
به منظور فراهم کردن یک تجربه‌ی کاربری خوب، سایت‌ها باید سعی کنند تا امتیاز CLS 1/0 یا کمتر داشته باشند. آستانه‌ای که برای این منظور در نظر گرفته شده است، 75 درصد بارگذاری‌های صفحه بر روی گوشی‌های موبایل و دستگاه‌های دسکتاپ است.
نحوه محاسبه‌ی امتیاز تغییر چیدمان
برای محاسبه‌ی امتیاز تغییر چیدمان، اندازه‌ی نمایشگر و جابه‌جایی المان‌های ناپایدار بین دو فریم رندر شده‌ی مختلف در نظر گرفته می‌شود. این امتیاز از حاصلضرب دو فاکتور ضریب تاثیر و ضریب فاصله المان جابه‌جا شده به دست می‌آید.
امتیاز تغییر چیدمان = ضریب تاثیر × ضریب فاصله
در این فرمول، ضریب تاثیر چگونگی تاثیرگذاری المان‌های ناپایدار بر فضای نمایشگر بین دو فریم را اندازه‌گیری می‌کند.
فاکتور دیگر ضریب فاصله است که فاصله‌ای را اندازه می‌گیرد که المان‌های ناپایدار نسبت به نمایشگر حرکت کرده‌اند. ضریب فاصله از تقسیم بیشترین فاصله‌ای که هر المان ناپایدار در فریم حرکت کرده است بر بزرگترین ابعاد نمایشگر به دست می‌آید.
مثالی تصویری از CLS
چگونگی محاسبه‌ی CLS
همانند معیار اول از معیارهای Web vitals، تغییر چیدمان تجمعی یا CLS را نیز می‌توان هم در شرایط آزمایشگاهی و هم در شرایط عملی اندازه‌گیری کرد. علاوه بر این، در ابزارهای زیر نیز در دسترس است:
ابزارهای میدانی (Field)
- Chrome User Experience Report
- PageSpeed Insights
- Search Console (Core Web Vitals report)
- web-vitals JavaScript library
ابزارهای آزمایشگاهی (Lab)
نکته‌ی مهمی که باید به آن توجه کنید این است که هرگز محتوای جدید را در بالای محتوای موجود در صفحه قرار ندهید، مگر این که در پاسخ به تعامل کاربر باشد. این کار تضمین خواهد کرد که تغییر چیدمان المان‌های صفحه به صورت ناگهانی نبوده و طبق انتظار کاربر رخ می‌دهند. برای بررسی مباحث سرعت و تکنیکال وبسایت، می توانید از خدمات سئو سایت منتوریکس استفاده نمایید.
بیشتر بخوانید: تغییر چیدمان تجمعی (CLS) چیست؟
سخن پایانی
در این مقاله سعی کردیم خلاصه‌ای از معیارهای Web vitals را ارائه دهیم. سه معیار LCP، FID و CLS به صورت مختصر معرفی شدند. واضح است که برآورده کردن هر سه معیار کار دشواری است اما هرچه بیشتر در این راستا گام بردارید، صفحه‌ی وب سایت شما تجربه‌ی کاربری بهتری را ارائه خواهد داد.
این مطلب توسط اعضای تیم منتوریکس تهیه و گردآوری شده است.
انتشار مطالب فوق تنها با ذکر مرجع به همراه لینک وبسایت منتوریکس مجاز می‌باشد.
لطفا به حقوق هم احترام بگذاریم.