Core Web Vitals مجموعه‌ای از معیارهای سرعت هستند که طبق گفته گوگل، بخشی از سیگنال‌های تجربه کاربری را اندازه می‌گیرد. این معیارها شامل اندازه‌گیری سرعت لود عناصر تصویری صفحه می‌شود که به آن LCP مخفف Largest Contentful Paint یا بزرگترین عنصر محتوای صفحه می‌گوییم. همچنین شامل میزان پایداری عناصر بصری با معیار CLS، مخفف عبارت Cumulative Layout Shift به معنای لغوی تغییر چیدمان تجمعی و همینطور معیار FID، مخفف First Input Delay یا همان میزان تأخیر اولین ورودی، می‌شود. در این مقاله از سئووب می‌خواهیم بیشتر درباره اینکه Web vitals چیست و هسته حیاتی گوگل توضیح بدهیم. پس با ما همراه باشید.
ساده‌ترین راه برای اینکه بتوانید گزارش‌های مربوط به هسته حیاتی گوگل را ببینید این است که از گوگل سرچ کنسول استفاده کنید. با این گزارشات می‌توانید متوجه شوید که چه صفحاتی در سایت شما نیاز به بهبود دارند، کدام صفحات ضعیف هستند و کدامیک از نظر گوگل بدون مشکل تشخیص داده شده‌اند.
داخل این گزارش حتی می‌توانید جزئیات بیشتری از مشکلاتی که وجود دارد را ببینید. مثلاً اینکه چقدر طول می‌کشد این صفحه از سایت شما در موبایل لود شود.
نکاتی درباره هسته حیاتی گوگل که باید بدانید
معیارهایی که می‌بینید، بر اساس موبایل و دسکتاپ جدا شده‌اند. اما فقط سیگنال‌های مربوط به موبایل برای رنکینگ صفحات موثر هستند. گوگل از ماه مارس 2021 به بعد، 100 درصد اول موبایل را ایندکس می‌کند. پس منطقی به نظر می‌رسد که سیگنال‌های سرعت موبایل بیشتر اهمیت داشته باشد. همچنین اگر داده‌های کافی برای شناسایی معیارهایی که برای هر صفحه در نظر گرفته می‌شود وجود نداشته باشد، از عملکرد کلی سایت به جای آن استفاده می‌شود.
توجه داشته باشید که با اضافه شدن این معیارهای جدید، دیگر AMP به عنوان یک نیازمندی اصلی مطرح نیست. این معیارها همواره در حال تغییر هستند. اما همیشه اولویت در افزایش سرعت لود سایت بوده است. پس برویم به سراغ اینکهWeb vitals چیست و چه کارهایی برای بهینه سازی لود سایت باید انجام دهیم؟
اجزای اصلی Web vitals چیست؟
هسته حیاتی گوگل در واقع شامل سه معیار اصلی می‌شود:
LCP یا بزرگترین عنصر محتوای صفحه
بزرگترین المان در صفحه معمولاً تصویر شاخص یا تگ H1 است اما ممکن است هرکدام از موارد زیر هم باشد:
- المان <img>
- المان <image> داخل یک المان <video>
- تصویر داخل المان <video>
- تصویر بک گراندی که با دستور url() لود شده است
- بلوک‌های متنی
<svg> و <video> هم ممکن است در آینده به این لیست اضافه شوند.
چگونه می‌توانیم در هسته حیاتی گوگل LCP را بهینه کنیم؟
از آنجایی که در بیشتر اوقات این تصاویر هستند که بیشترین زمان را برای لود می‌گیرند، اولین کاری که باید انجام دهید بهینه‌سازی آنهاست. همچنین می‌توانید از قابلیت preloading استفاده کنید یا اگر امکانش وجود دارد، کل تصویر را به صورت inline در بیاورید که همراه با کدهای HTML دانلود شود. هدف این است که تا جای ممکن لود تصاویر زودتر انجام شود.
CLS یا تغییر چیدمان تجمعی
حتماً برای شما هم پیش آمده که می‌خواستید روی یک قسمتی در صفحه سایتی کلیک کنید. اما چون صفحه تکان خورده و احتمالاً بلوک‌های تازه‌ای لود شده‌اند، در نهایت روی گزینه اشتباهی کلیک کرده‌اید. اینجاست که پای متریک CLS به میان می‌آید. دلایل رایج به وجود آمدن این مشکل عبارت است از:
- تصاویر بدون ابعاد مشخص شده
- تبلیغات، embedها و Iframeهای بدون ابعاد مشخص شده
- وارد کردن محتوا توسط جاوااسکریپت
- اعمال کردن دیرهنگام فونت یا استایل در هنگام لود شدن
CLS مشخص می‌کند که المان‌های داخل صفحه چگونه حرکت می‌کنند و چیدمان صفحه تا چه حد ثابت است. پس سایز محتواها و فاصله‌ای که از هم دارند در این معیار اهمیت پیدا می‌کند. یکی از مشکلاتی که با این متریک داریم این است که حتی بعد لود اولیه صفحه هم، هنوز اندازه‌گیری آن ادامه دارد. امیدواریم گوگل این مشکل را در آینده حل کند.
چگونه برای بهبود سئو CLS را بهینه کنیم؟
مطمئن شوید که فونت‌های preload شده است. تا جایی که می‌توانید از فونت‌های فرعی و شخصی‌سازی شده استفاده نکنید. یک فونت اصلی برای کل سایت و صفحات در نظر بگیرید و در صورت نیاز تنها بخش‌هایی از صفحات زیرمجموعه را با فونتی دیگر تنظیم کنید. گاهی برای گرفتن نتیجه، باید از خیر بعضی از استایل‌ها و کارهای گرافیکی روی سایت بپرهیزید. سعی کنید تا جایی که می‌شود یکپارچگی ساختار سایت را حفظ کنیم و المان‌های اضافی را حذف نمایید.
FID یا میزان تاخیر ورودی اول
مدت زمانی که طول می‌کشد یک کاربر با صفحه شما تعامل برقرار کند تا زمانی که سایت به او پاسخی می‌دهد. می‌توانید این معیار را نوعی پاسخگویی سایت شما به مخاطبان بدانید. البته این متریک ربطی به زوم یا اسکرول کردن ندارد. مثال‌های FID شامل موارد زیر می‌شود:
- کلیک کردن روی یک لینک یا دکمه
- وارد کردن متن در کادر پاسخ
- انتخاب یک گزینه از منوی لیست بازشونده
- کلیک کردن روی یک گزینه تیک انتخاب
شما به عنوان کاربر، نباید به ازای کلیکی که می‌کنید و توقع انجام یک کاری دارید، زیاد منتظر بمانید. البته تمام کاربران هم با سایت شما ممکن است تعاملی نداشته باشند. به همین خاطر روی FID تاثیری هم نمی‌گذارند. اما چه چیزی باعث FID می‌شود؟ جاوااسکریپت همواره در حال رقابت با thread اصلی است. وقتی یک کار یا task در حال انجام است، صفحه نمی‌تواند به ورود کاربر واکنش درست نشان دهد. به همین خاطر است که تاخیر احساس می‌شود.
هرچه کاری که در حال انجام است طولانی‌تر باشد، میزان تاخیر بیشتری توسط کاربر تجربه می‌شود. وقفه‌هایی که بین Taskها به وجود می‌آیند، فرصتی به صفحه می‌دهد که به سراغ ورودی کاربر برود و پاسخی که او انتظارش را می‌کشد، به او بدهد. برای بهبود این بخش، سعی کنید تا جایی که می‌شود کدهای جاوااسکریپت را محدود یا بهینه کنید تا جلوی سایر Taskها را نگیرد.
کلام آخر
در این مقاله تا حدودی با اینکه Web vitals چیست آشنا شدید. اما باید بدانید که برای بهینه سازی لود سایت، باید تمام جوانب را در نظر بگیرید. تمرکز شما روی بهتر کردن تجربه کاربری مخاطبین‌تان باشد. هرچه در افزایش سرعت لود سایت موفق‌تر باشید، کاربران راضی‌تری خواهید داشت. برای بخش‌های فنی، از توسعه‌دهنده‌ها استفاده کنید. اما برای آنالیز گزارش‌ها و کار با سرچ کنسول، پیشنهاد می‌کنیم دوره آموزش اصولی سئو را در سایت سئووب بگذرانید.