Core Web Vitals یا هسته‌های حیاتی وب (روش‌های موثر جهت بهبود آن‌ها)

هسته‌های حیاتی گوگل؛ روش گوگل برای اندازه‌گیری UX کلی صفحه

Core Web Vital مجموعه‌ای از عوامل خاص هستند که گوگل آن‌ها را در تجربه کاربری کلی یک صفحه وب مهم می‌داند. Core Web Vital یا همان هسته اصلی وب از سه فاکتور خاص برای سرعت صفحه اندازه‌گیری تعامل کاربر تشکیل شده است.

به طور خلاصه Core Web Vitalها زیرمجموعه عواملی هستند که بخشی از امتیاز “page experience” گوگل را تشکیل می‌دهند. (در واقع روش گوگل برای اندازه‌گیری UX کلی صفحه شما)

می‌توانید داده‌های Core Web Vital سایت خود را در بخش “enhancement” حساب گوگل سرچ کنسول خود پیدا کنید.

اهمیت هسته‌های حیاتی وب (Core Web Vitals)؛ بخش عمده امتیاز تجربه کاربر

گوگل قصد دارد تجربه کاربر از صفحه را عامل رتبه‌بندی رسمی خود قرار دهد.

تجربه صفحه ترکیبی از فاکتورهایی است که گوگل آن‌ها را جزئی از مهم‌ترین سیگنال‌های تجربه کاربران معرفی می‌کند. همانند:

• https
• mobile-friendliness
• عدم وجود پاپ‌آپ‌های مزاحم
• جستجوی ایمن (نداشتن malware (بدافزار) در صفحه)

Core Web Vital یا همان هسته‌های حیاتی وب بخشی فوق العاده مهم این امتیاز (تجربه صفحه) خواهند بود.

در واقع همانطور که از اسمش هم مشخص است، منصفانه است که بگوییم core web vitals (هسته‌های حیاتی وب) عمده‌ترین بخش از امتیاز تجربه صفحه را در اختیار دارد.

بهتر است این موضوع را مدنظر داشته باشید که امتیاز بالا در تجربه صفحه “page experience” باعث نمی‌شود که سایت شما به صورت معجزه‌آسا و جادویی به رتبه اول در گوگل برسد. در حقیقت گوگل به صورت شفافی اعلام کرده که تجربه صفحه تنها یکی از فاکتورهای متعددی (تقریبا 200 فاکتور) است که آن‌ها برای رتبه‌دهی به سایت‌ها از آن استفاده می‌کنند.

ما در مقاله قرار گرفتن در صفحه اول گوگل و کسب رتبه 1 به شما می‌گوییم چطور با بهینه کردن سایر این فاکتورها به رتبه 1 برسید.

نیازی نیست بترسید. گوگل گفت که تا سال آینده فرصت دارید نمرات Core Web Vital سایت خود را بهبود بخشید.

اما اگر می‌خواهید قبل از این زمان امتیاز هسته‌های حیاتی سایتتان را بهبود ببخشید؛ این عالی است.

3 هسته اصلی وب؛ سه تفنگدار برجسته

در این راهنما می‌خواهیم هر سه هسته اصلی وب را تجزیه و تحلیل کنیم و نحوه بهبود هر یک از آن‌ها را به شما نشان دهیم.

Largest Contentful Paint (LCP)؛ مدت زمان واقعی بارگیری سنگین‌ترین عنصر صفحه از دید یک کاربر

به عبارت دیگر: زمان کلیک کردن روی لینک تا دیدن اکثر مطالب صفحه است.

LCP با سایر فاکتورهای اندازه‌گیری سرعت صفحه متفاوت است. بسیاری دیگر از معیارهای سرعت صفحه (مانند TTFB و First Contextual Paint) لزوما نمایانگر چگونگی باز شدن صفحه وب برای کاربر نیستند.

از طرف دیگر تمرکز LCP روی بخش‌هایی از سرعت صفحه است که واقعا اهمیت دارد: توانایی دیدن و تعامل با صفحه شما.

با استفاده از Google PageSpeed Insights می توانید امتیاز LCP خود را بررسی کنید.

بررسی امتیاز LCP اهمیت دارد. خصوصا وقتی که می‌خواهید روی بهبود نقطه ضعف‌های سایتتان تمرکز کنید. نکته جالب توجه در استفاده از Google Pagespeed Insights از طریق ابزاری مانند webpagetest.org این است؛ که می‌توانید ببینید صفحه شما در دنیای واقعی چگونه عمل می‌کند. (براساس داده‌های مرورگر کروم)

با این اوصاف، ما توصیه می‌کنیم به اطلاعات LCP خود در GSC نگاه کنید.

چرا؟

مانند Google PageSpeed Insights داده‌های موجود در سرچ کنسول هم از گزارش تجربه کاربر (user experience) کروم بدست می‌آید.

اما برخلاف PageSpeed Insights، می‌توانید در سرچ کنسول داده‌های LCP را برای کل سایت خود مشاهده کنید. بنابراین به جای اینکه صفحات تصادفی را یک به یک تجزیه و تحلیل کنید، لیستی از URLهایی که امتیاز خوب، بد یا میانه دارند را دریافت می‌کنید.

گوگل راهنماهای خاصی برای LCP تعریف کرده است. آن‌ها سرعت LCP را به سه سطح تقسیم می‌کنند: خوب (Good)، نیازمند بهبود (Improvement)، ضعیف (Poor).

باتوجه به نمودار بالا، می‌دانیم که باید LCP برای هر صفحه از سایت ما نهایتا 2ونیم ثانیه باشد.

این مسئله برای صفحاتی از سایت که بزرگ هستند و یا ویژگی‌های زیادی دارند، قطعا چالش محسوب می‌شود.

به عنوان مثال این صفحه از سایت ما دارای ده‌ها تصویر با وضوح بالا است.

به همین دلیل LCP موجود در آن صفحه 6.5 ثانیه است. (که “ضعیف” تلقی می‌شود)

این مسئله نشان می‌دهد که بهبود LCP به سادگی نصب CDN نیست. در این حالت ممکن است مجبور شویم برخی تصاویر را از صفحه حذف و کد آن را پاک سازی کنیم.

کار سختی است؟

مطمئنا.

ارزشش را دارد؟

قطعا!

روش‌های بهبود LCP:

• هرگونه اسکریپت غیرضروری شخص ثالث را حذف کنید: مطالعه اخیر ما درباره سرعت صفحه نشان داد که هر اسکریپت شخص ثالث، سرعت یک صفحه را 34 میلی ثانیه کند می‌کند.
• هاست سایت خود را ارتقا دهید: هاست بهتر = زمان بارگذاری سریع‌تر به طور کلی (از جمله LCP)
• روش بارگذاری تنبل را برای سایت خود پیاده کنید: بارگذاری تنبل باعث می‌شود تصاویر فقط وقتی کسی صفحه شما را پیمایش می‌کند بارگیری شود. این بدان معناست که می‌توانید LCP خود را بهبود بخشید.
• المنت‌های بزرگ صفحه را حذف کنید: اگر صفحه شما المنتی داشته باشد که سرعت LCP را کم کند، Google PageSpeed Insights به شما گزارش می‌کند.

• CSS خود را به حداقل برسانید: CSS بزرگ می‌تواند زمان LCP را به تاخیر بیاندازد.

First Input Delay (FID)؛ زمانی که برای کاربر طول می‌کشد تا تعاملش با صفحه شما به نتیجه برسد.

حالا بیایید نگاهی به دومین هسته حیاتی وب (Core Web Vital) بیاندازیم.

در این مرحله صفحه شما به FCP (زمان شروع بارگذاری تا زمانی که اولین بخش از محتوای صفحه ظاهر می‌شود) رسیده است؛ اما سوال این است که آیا کاربران می‌توانند با صفحه شما تعامل داشته باشند؟

خب این دقیقا همان چیزی است که FID آن را اندازه گیری می‌کند.

نمونه‌هایی از تعاملات می‌تواند موارد زیر باشد:

• انتخاب یک گزینه از فهرست
• کلیک روی یک لینک از بخش ناوبری سایت
• وارد کردن ایمیل در بخش مربوطه
• باز کردن “متن آکاردئون” در دستگاه‌های تلفن همراه

گوگل FID را مهم می‌داند زیرا نحوه تعامل کاربران واقعی با وب‌سایت‌ها را نشان می‌دهد.

مانند FCP، آن‌ها معیارهای خاصی دارند برای این که چه عواملی FID قابل قبول را تشکیل می‌دهد.

بله FID از نظر فنی مدت زمان وقوع یک اتفاق در صفحه را اندازه گیری می‌کند. بنابراین از این نظر امتیاز سرعت صفحه است؛ اما این فاکتور یک قدم فراتر از این تعریف است. در واقع زمانی که طول می‌کشد تا کاربر واقعا کاری در صفحه شما انجام دهد را تعیین می‌کند.

برای صفحه‌ای که 100٪ محتوای آن اطلاعاتی است (مانند پست وبلاگ یا مقالات خبری)، FID احتمالا مسئله مهمی نیست. تنها “تعامل” واقعی در این صفحات پیمایش به پایین صفحه یا بزرگ‌نمایی و کوچک‌نمایی است.

برای صفحه ورود به سیستم(login)، صفحه ثبت نام(sign up) یا صفحات دیگری که کاربران باید سریع روی چیزی کلیک کنند، FID بزرگ است.

به عنوان مثال به تجربه بارگیری صفحه‎‌ای مانند این فکر کنید:

با یک صفحه ورود به سیستم مانند این، مدت زمان بارگیری محتوا چندان مهم نیست. آنچه اهمیت دارد این است که چقدر سریع می‌توانید اطلاعات ورود به سیستم خود را تایپ کنید.

روش‌های بهبود FID:

• به حداقل رساندن (یا به تعویق انداختن) JavaScript: تقریبا غیرممکن است که کاربران در هنگام بارگیری JS با یک صفحه ارتباط برقرار کنند. بنابراین به حداقل رساندن یا به تعویق انداختن JS در صفحه برای FID امری کلیدی و مهم است.
• حذف اسکریپت‌های شخص ثالث غیر حیاتی: دقیقا مانند FCP، اسکریپت‌های شخص ثالث (مانند Google Analytics، نقشه‌های حرارتی و غیره) می‌توانند بر FID تاثیر منفی بگذارند.
• استفاده از حافظه پنهان (cache) مرورگر: این به شما کمک می‌کند تا محتوای صفحه شما سریع‌تر بارگیری شود که به مرورگر کاربر شما کمک می‌کند تا بارگذاری کارهای JS را با سرعت انفجار انجام دهد.

Cumulative Layout Shift (CLS)؛ ثبات بصری

میزان پایداری یک صفحه هنگام بارگیری است.

به عبارت دیگر: اگر عناصر صفحه شما با بارگذاری صفحه به اطراف حرکت کنند، CLS بالایی دارید و بالا بودن این فاکتور نتیجه مثبتی به همراه ندارد.

بنابراین بهتر است که عناصر صفحه شما با بارگیری پایداری خودشان را حفظ کنند.

به این ترتیب هنگام بارگذاری کامل صفحه، کاربران نیازی به یادگیری مجدد مکان عناصر، لینک‌ها و تصاویر ندارند یا به اشتباه روی چیزی کلیک نمی‌کنند.

در تصویر زیر ما محدوده ارزشگذاری‌های گوگل برای فاکتور CLS را برای شما آورده‌ایم:

روش‌های بهبود CLS:

• از ابعاد مشخص و اندازه تعیین شده برای هر رسانه (ویدیو، تصاویر، GIF، اینفوگرافیک و غیره) استفاده کنید: به این ترتیب مرورگر کاربر می‌داند که این عنصر در آن صفحه چقدر فضای اشغال می‌کند و با بارگیری کامل صفحه، اندازه عناصر را تغییر نمی‌دهد.
• مطمئن شوید که بنرهای تبلیغاتی فضای ذخیره شده و مشخصی دارند: در غیر این صورت می‌توانند به طور ناگهانی در صفحه ظاهر شوند و محتوا را به سمت پایین، بالا یا کنار بکشند.
• اصل مسئله را در همان ابتدای مقاله ارائه کنید: با این کار کاربر نیاز ندارد در محتوای شما بدنبال هدف اصلی باشد. برای این کار می‌توان از هر المانی (تصویر، فیلم و…) استفاده کرد.