Core Web Vitals مجموعهای از معیارهای عملکرد وبسایت است که سرعت صفحه، ثبات بصری و پاسخدهی را اندازهگیری میکند. این ابزار به سرعت در حال تبدیل شدن به یکی از مهمترین عوامل رتبه بندی جستجوست. بهینه سازی Core Web Vitals مهم است زیرا میتواند بر بهینه سازی موتور جستجو (SEO) و تجربه کاربر تأثیر بگذارد. گوگل و دیگر موتورهای جستجو این ابزار را به عنوان بخشی از الگوریتم رتبه بندی کلی خود در اولویت قرار دادهاند و از آن برای تعیین اینکه کدام صفحات وب در SERPها (صفحات نتایج موتور جستجو) رتبه بالایی دارند، استفاده میکنند. این مقاله از مجموعه مقالات آژانس دیجیتال مارکتینگ سفیر به شما کمک میکند تا نحوه بهینه سازی Core Web Vitals را بیاموزید.
در این مطلب بخوانید
Core Web Vitals یا هسته حیاتی وب چقدر مهم است؟
گوگل از تعداد انگشت شماری سیگنال های رتبه بندی برای اندازه گیری و ارزیابی وب سایتها استفاده میکند. از جمله جدیدترین و مهمترین امتیازات Page Experience، ابزار Core Web Vitals است. اگر سایت خود را بر معیارهای این ابزار بهینه نمیکنید، ممکن است به سئو سایت و تجربه کاربری کلی (UX) خود آسیب وارد نمایید.
راهکارهای بهبود نتایج Core Web Vitals
اکنون که کمیبا Core Web Vitals و میزان اهمیت آن آشناشدیم، وقت آن است که به برخی از بهترین روشهای بهبود نتایج آن نگاهی بیندازیم. این نکته را به داشته باشید که اقدامات خاصی که باید برای بهبود نمرات انجام دهید به نتایج آزمون شما بستگی دارد. بنابراین، مهم است که پیشنهادات و توصیههای ارائه شده توسط PageSpeed Insights (یا سایر ابزارهای آزمایشی که استفاده میکنید) را نیز در نظر بگیرید.
روشهای بهبود نتایج Core Web Vitals
پیاده سازی یک راه حل ذخیره سازی
ذخیره محتوا میتواند به کاهش بار روی سرور شما کمک کند. یک ابزار کش، نسخه های HTML ایستا صفحات شما را ذخیره میکند و نیازی به بارگذاری هر بار که بازدید کننده به سایت شما میرسد را از بین میبرد. بسته به هاست وبسایت خود، ممکن است بتوانید از کش در سطح سرور استفاده کنید.
مراقب این معیارهای UX باشید
چندین معیار UX وجود دارد که باید هنگام ارزیابی عملکرد بخشهای حیاتی وب سایت خود در نظر بگیرید:
تأخیر ورودی اول (FID) : مدت زمانی را که طول میکشد تا صفحه پس از اولین تعامل کاربر با آن پاسخگو شود، اندازه گیری میکند. امتیاز FID خوب کمتر از 100 میلی ثانیه است.
تغییر چیدمان تجمعی (CLS) : پایداری طرحبندی صفحه را اندازهگیری میکند. نمره CLS خوب کمتر از 0.1 است.
Largest Contentful Paint (LCP) : زمان بارگذاری بزرگترین عنصر صفحه را اندازه میگیرد. امتیاز LCP خوب کمتر از 2.5 ثانیه است
این سه معیار، تجربه کاربری وب سایت شما را منعکس میکنند. یک وب سایت با عناصر حیاتی وب خوب، سریع، پایدار و پاسخگو خواهد بود و تجربه کاربری بهتری را برای بازدیدکنندگان فراهم میکند.
چگونه میتوان امتیاز تاخیر ورودی اول (FID) را بهبود بخشید؟
- مقدار جاوا اسکریپت را در صفحه خود کاهش دهید. جاوا اسکریپت یکی از دلایل رایج FID است، زیرا اجرای و مسدود کردن رشته اصلی ممکن است زمان ببرد.
- از بارگذاری تنبل یا همان Lazy Loading برای به تاخیر انداختن بارگذاری محتوایی که فوراً مورد نیاز نیست استفاده کنید. زیرا میتواند به کاهش زمان بارگذاری اولیه صفحه شما کمک کند و امتیاز FID را بهبود بخشد.
- اندازه و تعداد منابع موجود در صفحه خود مانند تصاویر و فونتها را بهینه کنید.
- از یک راه حل رندر سمت سرور، مانند پیش رندر، برای ارائه HTML اولیه صفحه خود استفاده کنید.
چگونه میتوان امتیاز بزرگترین رنگ محتوایی (LCP) را بهبود بخشید؟
- از ویژگیهای defer و async در تگهای اسکریپت خود برای کنترل ترتیب اجرای جاوا اسکریپت استفاده کنید. این میتواند به جلوگیری از مسدود کردن جاوا اسکریپت رندر صفحه شما کمک کند و امتیاز LCP را بهبود بخشد.
- شبکههای تحویل محتوا (CDN) در سالهای اخیر به دلیل توانایی آنها در بهبود بخشهای حیاتی وب، به طور فزایندهای محبوب شدهاند. به لطف CDNها، وب سایتها این پتانسیل را دارند که سریعتر از همیشه بارگذاری شوند. علاوه بر این، هنگام استقرار CDN، وبسایتها میتوانند از رندر بهتر و کاهش تأخیر محتوا بهره ببرند. از آنجایی که عناصر حیاتی وب نقشی کلیدی در تجربه کاربر بازی میکنند، و در نتیجه نرخ پرش پایینتر، CDNها ابزاری ارزشمند برای کسبوکارهایی هستند که به دنبال بهینهسازی LCP خود هستند و اطمینان حاصل میکنند که مشتریان از بهترین تجربه مرور ممکن لذت میبرند.
چگونه میتوان تغییر چیدمان تجمعی (CLS) را بهبود بخشید؟
- از درج مطالب بالاتر از محتوای موجود خودداری کنید. اگر نیاز به اضافه کردن محتوای جدید به صفحه دارید، مطمئن شوید که آن را به پایین محتوای موجود اضافه کنید.
- به تصاویر و عناصر ویدئو، ابعاد اضافه کنید. این به مرورگر اجازه میدهد تا فضای مناسب را برای این عناصر رزرو کند و احتمال تغییر طرح بندی را کاهش دهد.
- از استراتژی بارگیری فونت برای جلوگیری از متن پنهان استفاده کنید. این میتواند باعث تغییر طرح بندی در هنگام رندر شدن متن شود و در نتیجه نمره CLS ضعیفی به دست آید.
- از ویژگی will-change CSS برای اطلاع دادن به مرورگر از عناصری که در شرف متحرک شدن یا تغییر هستند استفاده کنید. این میتواند به مرورگر کمک کند تا رندر صفحه را بهینه کند و تغییرات طرح بندی را کاهش دهد.
- از ویژگیهای CSS انیمیشن و ترنزیشن برای متحرک سازی تغییرات در طرح بندی صفحه خود استفاده کنید. این میتواند به قابل پیش بینیتر کردن تغییرات طرح کمک کند و در نتیجه امتیاز CLS بهتری کسب کند.
ویژگی های بیش از حد را کاهش دهید
کاهش ویژگیهای وبسایت میتواند عملکرد را بهبود بخشد، زیرا میزان کاری را که مرورگر باید انجام دهد تا صفحه را ارائه دهد یا به اصطلاح رندر کند، کاهش میدهد. یک وبسایت با ویژگیها و منابع سنگین، مانند تصاویر و ویدیوهای بزرگ، ممکن است زمان بیشتری برای بارگذاری و رندر داشته باشد و در نتیجه تجربه کاربری ضعیفی را به همراه داشته باشد
با کاهش تعداد ویژگیها و بهینه سازی ویژگی های باقی مانده، میتوانید وب سایت خود را سریعتر و کارآمدتر کنید. این میتواند منجر به زمان بارگذاری سریعتر صفحه و تجربه کاربری بهتر برای بازدیدکنندگان وب سایت شما شود. علاوه بر این، کاهش ویژگیهای وبسایت میتواند میزان دادههایی را که باید بین سرور و مرورگر منتقل شود نیز کاهش میدهد. این میتواند به کاهش پهنای باند استفاده شده و بهبود عملکرد وب سایت شما کمک کند
از بهروزرسانیهای رندرینگ بزرگ خودداری کنید
جاوا اسکریپت فقط این نیست که میتواند بر پاسخگویی وب سایت تأثیر بگذارد. رندرینگ میتواند هزینه بر باشد و توانایی وبسایت را برای پاسخگویی به ورودیهای کاربر را مختل کند. بهینه سازی کار رندر میتواند پیچیده باشد و به هدف خاصی بستگی دارد. با این حال، راههایی برای اطمینان از اینکه بهروزرسانیهای رندر قابل مدیریت هستند و به کارهای طولانی تبدیل نمیشوند، وجود دارد
گوگل موارد زیر را توصیه میکند:
- از استفاده از requestAnimationFrame() برای انجام هر کار غیر تصویری خودداری کنید.
- اندازه DOM خود را کوچک نگه دارید.
- از محتویات CSS استفاده کنید.
کلام آخر
Core Web Vitals یک معیار مهم برای ارائه تجربه کاربری مثبت و رتبه بندی در نتایج جستجوی گوگل است. اگرچه همه توصیههای گوگل ارزش پیادهسازی را دارند، روش های فشردهای که در این مقاله خواندید برای اکثر وبسایتها قابل اجرا است و میتواند تأثیر معنادار و محسوسی ایجاد کنند.
