Core Web Vitals چیست؟
Core Web Vitals یا هسته حیاتی وب مجموعه ای از معیارهای تاثیرگذار است که گوگل با در نظر گرفتن این معیارها کیفیت تجربه کاربری در سایت را اندازه گیری می کند.
در ادامه ابتدا به صورت کامل متوجه می شوید core web vitals چیست و چه اهمیتی دارد و سپس روش های بهینه سازی سایت برای هسته حیاتی وب را می آموزید.
دقیقا Core Web Vitals چیست؟ (هسته حیاتی وب)
Core Web Vitals از سه مولفه اصلی تشکیل شده است که عبارتند از:
- Largest contentful paint (LCP): بزرگترین رنگ محتوا
- First Input Delay (FID): اولین تاخیر ورودی
- Cumulative Layout Shift (CLS): تغییر طرح بندی تجمعی
می توانید اطلاعات Core Web Vitals سایت خود را در قسمت “پیشرفت ها (enhancements)” در حساب گوگل سرچ کنسول خود ببینید.
چرا Core Web Vitals مهم است؟
تجربه کاربری در صفحه به یک عامل رتبه بندی تبدیل شده است.
تجربه کاربری در صفحه شامل فاکتورهایی است که گوگل آنها را برای تجربه کاربر مهم می داند، از جمله:
- استفاده از HTTPS
- موبایل فرندلی بودن
- عدم وجود پنجره های پاپ آپ
- مرور امن (عدم وجود بدافزار در صفحه شما)
- و core web vitals
در ادامه قصد دارم تا تمام سه بخش Core Web Vitals را تحلیل کنم و نحوه بهبود دادن هرکدام از آنها را به شما نشان دهم!
Largest Contentful Paint (LCP)
LCP مدت زمانی است که طول می کشد تا صفحه از نظر کاربر واقعی بارگیری شود.
به عبارت دیگر، از زمان کلیک کردن بر روی لینک تا مشاهده اکثر مطالب روی صفحه را LCP می گویند. LCP با دیگر اندازه گیری های سرعت صفحه تفاوت دارد، بسیاری از معیارهای دیگر سرعت صفحه (مانند TTFB و First Contextual Paint) نشان دهنده باز کردن صفحه توسط کاربر نیستند.
این مورد بسیار مفید است، به خصوص هنگامی که نوبت به تشخیص مواردی برای بهبود دادن می رسد.
نکته جالب در استفاده از Google Pagespeed Insights به جای ابزاری مانند webpagetest.org، این است که می توانید (براساس داده های مرورگر Chrome) عملکرد صفحه خود را مشاهده کنید.
با این وجود، من توصیه می کنم تا داده های LCP خود در GSC (گوگل سرچ کنسول) نگاه کنید.
چرا؟
اطلاعات سرچ کنسول نیز مانند Google Pagespeed Insights از گزارش تجربه های کاربری مرورگر Chrome تهیه می شوند، اما برخلاف Google Pagespeed Insights می توانید داده های LCP را در تمام سایت خود مشاهده کنید. بنابراین به جای تجزیه و تحلیل یک به یک صفحات مختلف، لیستی از آدرس های صفحات خوب، بد یا حتی متوسط را دریافت می کنید.
حالا که صحبتش شد، گوگل دستورالعمل های LCP خاصی دارد، که در آن سرعت LCP را به سه بخش خوب، نیاز به بهبود و ضعیف تقسیم می کنند.
به طور خلاصه، باید هر صفحه از سایت شما در عرض ۲/۵ ثانیه به LCP برسد، که این می تواند یک چالش سخت برای صفحات وب بزرگ یا صفحاتی که ویژگی های زیادی دارند باشد، در این صورت ممکن است مجبور باشیم برخی از تصاویر را از صفحه حذف کنیم یا حتی بخشی از کد صفحه را پاک کنیم، قطعا کار آسانی نیست ولی ارزشش را دارد!
با این حال، در اینجا مواردی برای بهبود LCP سایت شما وجود دارد:
- حذف هرگونه اسکریپت غیرضروری شخص ثالث: در مطالعه اخیر ما در مورد سرعت صفحه مشخص شد که هر اسکریپت شخص ثالث می تواند سرعت صفحه را تا ۳۴ میلی ثانیه کاهش می دهد.
- ارتقا دادن هاست وب سایت خود: هاست بهتر به طور کلی منجر به بارگذاری سریع تر می شود (ازجمله LCP).
- تنظیم بارگذاری ضعیف: بارگذاری ضعیف باعث می شود تا تصاویر فقط زمانی بارگذاری شوند که شخصی صفحه شما را پیمایش می کند. این کمک می کند تا به طور چشمگیری سریع تر به LCP برسید.
- حذف عناصر بزرگ صفحه: در Google Page Speed insights می توانید ببینید که آیا صفحه شما عنصری دارد که سرعت LCP را کاهش بدهد یا خیر.
- به حداقل رساندن CSS: استقاده از CSS های زیاد می تواند به طور قابل توجهی زمان LCP را طولانی کند.
First Input Delay (FID)
در مرحله بعد بیایید نگاهی بر دومین فاکتور Core Web Vitals گوگل بیندازیم، اولین تاخیر ورودی.
در این مرحله، صفحه شما به LCP دست یافته است. اما سوال این است که آیا کاربران می توانند با صفحه شما ارتباط برقرار کنند؟
این دقیقا همان چیزی است که FID اندازه گیری می کند، مدت زمانی که یک کاربر برای تعامل با صفحه شما صرف می کند.
نمونه هایی از تعاملات مانند:
- انتخاب یک گزینه از منو
- کلیک کردن بر روی یک لینک در منوی ناوبری سایت
- وارد کردن ایمیل خود در یک فیلد
گوگل، FID را مهم می داند زیرا نحوه ارتباط واقعی کاربران با وب سایت ها را در نظر می گیرد.
همچنین مانند FCP گوگل برای FID هم معیارهای مشخصی دارد.
برای صفحه ای که ۱۰۰٪ آن محتوا است (مانند یک پست وبلاگ یا مقالات خبری)، احتمالا FID چیز مهمی نیست، تنها ″تعامل″ واقعی پیمایش به پایین صفحه یا کلیک کردن برای بزرگنمایی و کوچکنمایی است.
اما برای یک صفحه ورود، ثبت نام یا صفحات دیگری که باید کاربران به سرعت چیزی را کلیک کنند، FID بسیار مهم است، در چنین صفحه ورودی، مدت زمان بارگذاری محتوا چندان مهم نیست. آنچه اهمیت دارد این است که چقدر سریع می توانید اطلاعات ورودی خود را تایپ کنید.
- به حداقل رساندن (یا به تعویق انداختن) Java Script: تقریبا برای کاربران غیر ممکن است درحالی که مرورگر JS را بارگیری می کند با صفحه تعامل داشته باشد. بنابراین کاهش یا به تعویق انداختن JS در صفحه شما برای FID مهم است.
- حذف اسکریپت های شخص ثالث غیرضروری: درست مانند FCP، اسکریپت های شخص ثالث (مانند Google آنالیتیکس، نقشه های حرارتی و غیره) می توانند بر FID تاثیر منفی بگذارند.
- استفاده از حافظه پنهان مرورگر: این مورد به بارگذاری سریع تر مطالب در صفحه شما کمک می کند.
Cumulative Layout Shift (CLS)
CLS میزان ثبات صفحه هنگام بارگیری است (معروف به “ثبات بصری”).
به عبارت دیگر، اگر عوامل صفحه شما در حین بارگذاری صفحه جابجا شوند، پس CLS بالایی دارید که این بد است.
درعوض، باید عوامل صفحه شما درحین بارگذاری نسبتا پایدار باشند. به این ترتیب، کاربران هنگامی که صفحه کامل بارگیری شد، مجبور نیستند دوباره یاد بگیرند که لینک ها، تصاویر و فیلدها کجا قرار دارند یا به اشتباه روی چیزی کلیک کنند.
برای CLS هم معیارهای خاصی وجود دارد که گوگل در نظر گرفته است:
بعضی از راه های ساده برای به حداقل رساندن CLS:
- استفاده از ویژگی سایز تعیین شده برای هر رسانه (ویدیو، GIF، اینفوگرافیک و غیره): با این روش، مرورگر کاربر متوجه می شود که آن عنصر دقیقا چقدر فضا را در صفحه اشغال خواهد کرد و بارگذاری کامل صفحه، آن را تغییر نخواهد داد.
- مطمئن شوید تبلیغات فضای مورد نیاز خود را دارند: در غیراین صورت، ممکن است به طور ناگهانی در صفحه ظاهر شوند و محتوا را به بالا، پایین یا اطراف حرکت دهند.
- عناصر UI جدید را به پایین صفحه اضافه کنید: با این روش، محتوایی را که کاربر انتظار دارد در همان مکان باقی بماند، پایین نمی رود.
