بهترین روش های بهینه سازی core web vital

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

حالا اگر کار شما بهینه‌سازی سایت نیست، ممکنه خیلی واضح نباشه که کدوم بهینه‌سازی‌ها بیشترین تأثیر رو روی سایت شما می‌ذاره. چون وقت کافی برای همه‌شون ندارید، باید بررسی کنید که کدوم بهینه‌سازی‌ها بیشترین تأثیر رو روی تجربه کاربر شما می‌ذاره. اگه شما تخصصی در این زمینه ندارید به شما پیشنهاد می کنم از خدمات افزایش سرعت سایت استفاده نمایید تا بهینه سازی سرعت سایت شما به صورت حرفه ای انجام شود.

حقیقت اینه که نمی‌تونید بهینه‌سازی‌ها رو فقط بر اساس جنبه‌های فنی‌اش قضاوت کنید. باید به عوامل انسانی و سازمانی هم توجه کنید. بعضی از بهینه‌سازی‌ها ممکنه در تئوری تأثیر زیادی داشته باشن، ولی در عمل ممکنه منابع و زمان کافی برای پیاده‌سازی اون‌ها نباشه. از طرف دیگه، ممکنه بعضی از بهترین شیوه‌های بهینه‌سازی خیلی ساده و در دسترس باشن و همه دارن ازشون استفاده می‌کنند.

هدف ما اینه که به شما راهکارهایی معرفی کنیم که:

1. تأثیر واقعی زیادی داشته باشه
2. برای بیشتر سایت‌ها مناسب و کاربردی باشه
3. پیاده‌سازی اون‌ها برای بیشتر توسعه‌دهنده‌ها واقع‌بینانه باشه

این‌ها همون راهکارهایی هستن که به شما کمک می‌کنن تا متریک‌های Core Web Vitals سایتتون رو بهبود بدید. اگر تازه‌کارید یا هنوز تصمیم نگرفتید که کدوم تغییرات بیشترین بازده رو دارن، اینجا بهترین جا برای شروعه.

1. Interaction to Next Paint (INP)

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

• وظایف طولانی رو تقسیم کن: وقتی یک وظیفه در جاوااسکریپت بیشتر از 50 میلی‌ثانیه طول بکشه، باعث میشه که سایت نتونه به سرعت به تعاملات کاربر پاسخ بده. بهترین کار اینه که این وظایف رو به قطعات کوچکتر تقسیم کنید تا بتونید زودتر به کاربر پاسخ بدید.
• جاوااسکریپت اضافی رو حذف کن: سایت‌ها به طور معمول جاوااسکریپت زیادی رو بارگذاری می‌کنن که باعث میشه زمان بارگذاری سایت بیشتر بشه. استفاده از ابزارهای مختلف مثل Chrome DevTools برای پیدا کردن کدهای اضافی و کاهش حجم اون‌ها می‌تونه به سرعت بارگذاری سایت شما کمک کنه.

2. Largest Contentful Paint (LCP)

LCP یکی از سخت‌ترین متریک‌ها برای بهبود هست و خیلی از سایت‌ها نتونستن آستانه مناسب رو برای تجربه کاربری خوب به دست بیارن. به زبان ساده LCP یعنی لود بزرگترین قسمت یک سایت. برای بهبود LCP این کارها رو انجام بدید:

• تصاویر رو به درستی اولویت‌بندی کن: اطمینان حاصل کنید که تصویر بزرگ‌ترین محتوای قابل مشاهده (LCP) به سرعت بارگذاری بشه. برای این کار می‌تونید از ویژگی fetchpriority=”high” استفاده کنید.
• سرور سایت رو بهینه کن: برای سرعت بیشتر باید صفحات سایت از نزدیک‌ترین سرور به کاربر شما بارگذاری بشه. استفاده از CDN یکی از بهترین راه‌ها برای این کار هست.

3. Cumulative Layout Shift (CLS)

CLS نشون میده که سایت چقدر از نظر بصری پایدار هست. این یکی از معیارهایی هست که سایت‌ها معمولاً خیلی به خوبی از پسش برمیان، اما هنوز هم خیلی از سایت‌ها بهینه‌سازی‌های بیشتری برای این مورد نیاز دارن. برای بهبود CLS:

• عرض و ارتفاع دقیق رو برای تصاویر تنظیم کن: یکی از دلایل اصلی حرکت‌های ناخواسته در صفحه، نداشتن ابعاد مشخص برای تصاویر هست. همیشه از ویژگی‌های width و height برای تصاویر استفاده کنید.
• از کشف صفحات توسط bfcache استفاده کن: bfcache به شما کمک می‌کنه تا صفحات سریع‌تر بارگذاری بشن و همچنین از حرکت‌های ناخواسته جلوگیری می‌کنه.

نتیجه‌گیری:

بهبود عملکرد سایت ممکنه در ابتدا کمی پیچیده به نظر بیاد، ولی اگر روی این موارد کلیدی تمرکز کنید، می‌تونید خیلی سریع به نتایج خوبی برسید و سایتتون رو از نظر سرعت و تجربه کاربری بهبود بدید.

منبع:

https://web.dev/articles/top-cwv