وبلاگ
Core Web Vitals چیست؟
Core Web Vitals مجموعه ای از عوامل خاص هستند که گوگل آنها را در تجربه کاربری کلی صفحه وب سایت شما مهم می داند. Core Web Vitals از اندازه گیری سه پارامتر تعامل کاربر با سایت تشکیل شده است.
- بزرگترین رنگ محتوا LCP
- اولین تاخیر ورودی FID
- تغییر تجمعی طرح CLS
به طور خلاصه، Core Web Vitals زیرمجموعه ای از عواملی هستند که بخشی از امتیاز «تجربه صفحه» Google خواهند بود. به عبارتی دیگر روش Google برای اندازه گیری UX کلی صفحه شما. میتوانید داده های Core Web Vitals سایت خود را در بخش یا “enhancements یا بهبودها” حساب Google Search Console خود بیابید.
چرا Core Web Vitals مهم هستند؟
گوگل قصد دارد تجربه صفحه یا UX را به یک فاکتور رسمی برای رتبه بندی گوگل تبدیل کند. تجربه صفحه ترکیبی از عواملی است که گوگل برای تجربه کاربر مهم می داند، از جمله:
- HTTPS
- سازگاری با موبایل یا موبایل فرندلی
- عدم وجود پاپ آپ بینابینی
- «مرور ایمن» یا نداشتن بدافزار در صفحه شما
مهم است که به این نکته اشاره کنیم که تنها کسب یک امتیاز تجربه صفحه یا UX به طور جادویی، شما را به رتبه اول گوگل سوق نمی دهد. در واقع، گوگل به صراحت اشاره کرد که تجربه صفحه یکی از 200 عاملی است که آنها برای رتبه بندی سایت ها استفاده می کنند.
بزرگترین رنگ محتوایی (LCP)
LCP مدت زمان بارگذاری یک صفحه از دیدگاه یک کاربر واقعی است. به عبارت دیگر، زمانی که روی لینک سایت کلیک میکنید تا زمانی که اکثریت محتوا را روی صفحه مشاهده میکنید، مدت زمان مربوط به LCP است. LCP با سایر اندازه گیری های سرعت صفحه متفاوت است. مابقی معیارهایی که سرعت صفحه را میسنجند، (مانند TTFB و First Contextual Paint)؛ لزوماً بازکردن یک صفحه وب را برای کاربر نمیسنجند. از سوی دیگر، LCP دقیقا روی توانایی دیدن و تعامل صفحه با شما تاکید میکند. میتوانید امتیاز LCP خود را با استفاده از Google PageSpeed Insights بررسی کنید. به خصوص وقتی قسمت هایی از سایت برای بهبود یافتن، مشخص میشوند. همچنین میتوانید عملکرد صفحه خود را در دنیای واقعی بر اساس داده های مرورگر کروم ببینید.
LCP را از کجا مشاهده کنیم؟ Google Search Console یا Google PageSpeed Insights
توصیه میشود به داده های LCP در Google Search Console خود نگاه کنید. در گوگل سرچ کنسول، مانند Google PageSpeed Insights، دادهها در کنسول جستجو از گزارش تجربه کاربر میآیند. اما برخلاف PageSpeed Insights، شما می توانید داده های LCP را در کل سایت خود مشاهده کنید. بنابراین به جای اینکه صفحات تصادفی را یک به یک تجزیه و تحلیل کنید، لیستی از URLهای خوب، بد و… را دریافت میکنید.
گوگل برای دستورالعمل های LCP قوانین خاصی دارد. آنها سرعت LCP را به سه دسته تقسیم می کنند: خوب، نیاز به بهبود، و ضعیف.
به طور خلاصه، شما می خواهید هر صفحه در سایت شما در عرض 2.5 ثانیه به LCP برسد. این ویژگی می تواند یک چالش واقعی برای صفحات بزرگ باشد. یا صفحاتی با امکانات زیاد. به عنوان مثال، صفحه ایی با ده ها تصویر با کیفیت و وضوح بالا دارای LCP حدود 5.1 ثانیه است که ضعیف در نظر گرفته میشود.
این تعاریف بهانه نیست. اما نشان می دهد که بهبود LCP به سادگی نصب CDN نیست. در این صورت ممکن است مجبور شویم برخی تصاویر را از صفحه حذف کرده و کد صفحه را پاک کنیم. کار سختی است؟ مطمئنا. ارزشش را دارد؟ قطعا.
backlinko.com
اقداماتی برای بهبود LCP وبسایت
- اسکریپت های غیرضروری شخص ثالث را حذف کنید. مطالعه اخیر روی سرعت صفحه ما نشان داد، هر اسکریپت که توسط شخص ثالث نوشته میشود، سرعت آن صفحه را 34 میلی ثانیه کاهش می دهد.
- هاست خودرا ارتقا دهید. میزبانی بهتر = زمان بارگذاری سریعتر به طور کلی (از جمله LCP).
- تنظیم بارگذاری تنبل! بارگیری تنبل باعث می شود که تصاویر فقط زمانی بارگیری شوند که شخصی صفحه شما را پایین بیاورد. این بدان معناست که شما می توانید به طور قابل توجهی سریعتر به LCP دست پیدا کنید.
- عناصر صفحه بزرگ را حذف کنید: Google PageSpeed Insights به شما می گوید که آیا صفحه شما عنصری دارد که LCP صفحه شما را کند می کند یا نه.
- CSS خود را کوچک کنید. CSS حجیم می تواند زمان LCP را به طور قابل توجهی به تاخیر بیندازد.
تاخیر ورودی اول (FID)، دومین مورد قابل توجه core web vitals
در مرحله بعد، اجازه دهید نگاهی به دومین Core Web Vital Google یعنی First Input Delay بیندازیم. بنابراین در این مرحله، صفحه شما به FCP رسیده است. اما سوال اینجاست: آیا کاربران می توانند با صفحه شما تعامل داشته باشند؟ FID مدت زمانی است که کاربر برای تعامل واقعی با صفحه شما نیاز دارد. نمونه هایی از تعاملات عبارتند از:
انتخاب یک گزینه از یک منو | وارد کردن ایمیل خود در یک فیلد |
با کلیک بر روی یک پیوند در ناوبری سایت | باز کردن “متن آکاردئون” در دستگاه های تلفن همراه |
گوگل FID را مهم می داند زیرا نحوه تعامل کاربران واقعی با وب سایت ها را در نظر می گیرد.
ساخت سایت
FID از نظر فنی مدت زمانی را که طول می کشد تا اتفاقی در صفحه بیفتد را اندازه گیری می کند. بنابراین سرعت لود صفحه در این قسمت حائز اهمیت میشود. اما FID یک گام فراتر رفته و زمان لازم برای انجام یک کار واقعی یا بررسی واکنشی از سمت کاربران را در صفحه شما اندازه گیری میکند. برای صفحهای که 100% محتوا دارد (مانند یک پست وبلاگ یا مقالات خبری)، FID احتمالاً چیز مهمی نیست. تنها “تعامل” واقعی پایین کشیدن صفحه است. یا برای بزرگ نمایی و کوچک نمایی.
صفحات وبلاگ و مقاله ها تعامل یا FID بالایی ندارند. اما برای یک صفحه ورود، صفحه ثبت نام، یا صفحه دیگری که در آن کاربران باید به سرعت روی چیزی کلیک کنند، FID بسیار بزرگ است.
مواردی که با رعایت آن ها میتوانید FID سایت خود را افزایش دهید.
به حداقل رساندن (یا به تعویق انداختن) کد های جاوا اسکریپت. تعامل کاربران با یک صفحه در حالی که مرورگر در حال بارگیری JS است تقریبا غیرممکن است. بنابراین به حداقل رساندن یا به تعویق انداختن JS در صفحه شما کلید طلایی رسیدن به FID های بزرگ است. |
هر گونه اسکریپت شخص ثالث که مهم نیست را حذف کنید. درست مانند FCP، اسکریپت های شخص ثالث (مانند Google Analytics، Heatmaps و غیره) می توانند بر FID تأثیر منفی بگذارند. |
از کش مرورگر استفاده کنید. این به بارگذاری سریعتر محتوا در صفحه شما کمک می کند. که به مرورگر کاربر شما کمک می کند تا کارهای بارگیری JS را سریعتر انجام دهد. |
تغییر چیدمان تجمعی یا (CLS)، سومین اثر مهم در وب کور ویتال
تغییر چیدمان تجمعی (CLS) نشان دهنده پایداری یک صفحه در هنگام بارگیری است. به عبارت دیگر، اگر عناصر در صفحه شما با بارگیری صفحه حرکت کنند، CLS بالایی دارید. که ویژگی بسیار بدی است. در عوض، عناصر صفحه شما باید در هنگام بارگذاری نسبتاً پایدار باشند. به این ترتیب، وقتی صفحه به طور کامل بارگذاری می شود، کاربران مجبور نیستند بخ ذهن بسپارند که لینک ها، تصاویر و فیلدها در کجا قرار داشتند. یا اینکه به اشتباه روی چیزی کلیک کنند.
معیارهای خاصی است که Google برای CLS در نظر گرفته است، به شرح زیر هستند.
- از ابعاد مشخصه اندازه تنظیم برای هر رسانه (ویدئو، تصاویر، GIF، اینفوگرافیک و غیره) استفاده کنید. به این ترتیب، مرورگر کاربر دقیقاً میداند که آن عنصر چقدر فضای آن صفحه را اشغال خواهد کرد. در نتیجه، در همان لحظه اندازه و شکل صفحه را تغییر نمی دهد. زیرا صفحه به طور کامل بارگیری خواهد شد.
- اطمینان حاصل کنید که عناصر تبلیغاتی دارای یک فضای رزرو شده هستند. در غیر این صورت ممکن است ناگهان در صفحه ظاهر شوند و محتوا را به پایین، بالا یا به طرفین فشار دهند.
- عناصر UI جدید را در زیر صفحه اضافه کنید. به این ترتیب، محتوایی را که کاربر «انتظار دارد» ببیند، در جایی که هست باقی بماند.
خلاصه ایی از مباحث core web vitals
مبانی UX ،Core Web Vitals و به طور کلی معیار «تجربه صفحه» گوگل در تلاش هستند تا تجربه کاربر را کمی و قابل اندازه گیری کنند. بنابراین هرچه به طور کلی UX شما بهتر باشد، امتیاز تجربه صفحه شما بهتر خواهد بود. راهنمای «Basics of UX» گوگل یک آغازگر عالی است.
مطلب کامل و جامعی بود برای کور وب ویتال. ممنون