بهینهسازی Core Web Vitals در قالب دیتالایف: LCP، CLS و INP
Core Web Vitals تجربه واقعی کاربر را از سه زاویه میسنجد: محتوای اصلی چه زمانی دیده میشود، صفحه هنگام بارگذاری چقدر جابهجا میشود و رابط با چه سرعتی به تعامل پاسخ میدهد. در دیتالایف بخش زیادی از نتیجه به قالب وابسته است، چون ترتیب CSS و JavaScript، نحوه نمایش تصویر و بارگذاری فونت در همان لایه تعیین میشوند.
سه معیار اصلی را درست بشناسید
- LCP: زمان نمایش بزرگترین عنصر محتوایی در نمای اولیه، معمولاً تصویر شاخص یا عنوان اصلی
- CLS: مجموع جابهجاییهای ناخواسته عناصر هنگام بارگذاری
- INP: مدت زمان میان تعامل کاربر و نمایش پاسخ بصری صفحه
عدد آزمایشگاهی برای عیبیابی مفید است، اما داده کاربران واقعی اهمیت بیشتری دارد. یک صفحه ممکن است روی سیستم مدیر سریع باشد و روی موبایل با اینترنت متوسط نتیجه ضعیفی داشته باشد.
صفحه مرجع و خط مبنا بسازید
از هر نوع صفحه یک نمونه انتخاب کنید: صفحه اصلی، دسته، مطلب کامل و جستجو. نتایج را با شرایط یکسان ثبت نمایید و سپس هر بار فقط یک گروه تغییر اعمال کنید. مقاله هفت اشتباه رایج سرعت دیتالایف برای شناسایی علتهای عمومی کندی مکمل خوبی برای این فرایند است.
بهبود LCP در صفحه مطلب
تصویر اصلی را درست اندازهگذاری کنید
تصویر شاخص را متناسب با بیشترین عرض نمایش خروجی بگیرید و نسخه چند هزار پیکسلی را بدون نیاز ارسال نکنید. ویژگی width و height را در HTML قرار دهید تا مرورگر نسبت تصویر را از ابتدا بداند. برای تصویر بالای صفحه lazy loading انتخاب مناسبی نیست؛ این تصویر باید زود درخواست شود.
عنصر اصلی را پشت اسکریپت پنهان نکنید
عنوان و تصویر اصلی بهتر است در HTML اولیه وجود داشته باشند. اگر نمایش آنها به اجرای اسلایدر یا JavaScript وابسته باشد، LCP تا پایان دانلود و اجرای اسکریپت عقب میافتد.
CSS حیاتی را سبک نگه دارید
فایل CSS بزرگ و پر از استایل صفحههای غیرمرتبط، رندر اولیه را به تأخیر میاندازد. استایلهای واقعاً لازم را زود بارگذاری کنید و فایلهای مخصوص گالری، فرم یا فروشگاه را فقط در همان صفحات وارد نمایید.
کاهش CLS و جلوگیری از پرش صفحه
برای تصویر، ویدئو، تبلیغ و iframe از ابتدا فضا رزرو کنید. سادهترین روش برای تصویر مشخص کردن width و height یا aspect-ratio است. بنر یا پیام بالای صفحه نباید پس از بارگذاری ناگهان محتوای اصلی را به پایین هل دهد.
فونت نیز میتواند باعث جابهجایی شود. فونت جایگزین را از نظر عرض حروف نزدیک به فونت اصلی انتخاب کنید، وزنهای غیرضروری را حذف و font-display را مناسب تنظیم نمایید. اگر فونت اصلی در نمای اول استفاده میشود، preload آن را فقط برای همان فایل ضروری در نظر بگیرید.
بهبود INP و پاسخگویی تعاملات
تعامل کند معمولاً نتیجه اجرای طولانی JavaScript روی رشته اصلی است. منوی موبایل، جستجوی زنده، سبد خرید، امتیازدهی و پنجرههای گفتگو را جدا بررسی کنید. یک کلیک ساده نباید باعث محاسبه بزرگ، ساخت صدها عنصر یا چند درخواست تکراری شود.
- اسکریپتهای غیرضروری را با defer بارگذاری کنید.
- رویداد scroll را مستقیم و پیوسته پردازش نکنید.
- در جستجوی زنده از debounce و لغو درخواست قبلی استفاده کنید.
- تغییر DOM را دستهای انجام دهید و از بازسازی کل بخش پرهیز کنید.
- پلاگینهایی را که در همه صفحات listener ثبت میکنند شناسایی نمایید.
کش و پاسخ سرور
Core Web Vitals فقط مسئله فرانتاند نیست. اگر HTML دیر برسد، مرورگر بارگذاری تصویر و CSS را نیز دیر شروع میکند. کش دیتالایف، opcode cache در PHP، پایگاه داده و CDN برای فایلهای استاتیک میتوانند زمان پاسخ را بهتر کنند. صفحههای شخصی مانند سبد و حساب کاربری را با محتوای عمومی یکسان کش نکنید.
ساختار قالب و هزینه رندر
بلوک تکرارشونده سنگین در shortstory.tpl به تعداد مطالب صفحه تکثیر میشود. در راهنمای ساختار فایلهای TPL دیتالایف توضیح دادهایم کدام بخش باید در فایل آیتم و کدام بخش در والد قرار گیرد. همین تفکیک تعداد عناصر DOM و درخواستهای تکراری را کاهش میدهد.
چکلیست اجرایی
- عنصر LCP هر صفحه را شناسایی کنید.
- تصاویر بالای صفحه را فشرده و دارای ابعاد صریح کنید.
- فضای تصویر، ویدئو و بلوک پویا را از ابتدا رزرو نمایید.
- وزنها و فایلهای فونت را محدود کنید.
- JavaScript صفحه را بر اساس محل مصرف تفکیک نمایید.
- تعاملهای کند را در Performance مرورگر ضبط کنید.
- پس از هر تغییر دوباره همان URL و همان شرایط را بسنجید.
جمعبندی
بهبود Core Web Vitals در دیتالایف از قالب شروع میشود، اما با اندازهگیری کامل میشود. تصویر شاخص درست، فضای رزروشده، فونت محدود و JavaScript هدفمند معمولاً بیشترین اثر را دارند. تغییرها را مرحلهای اجرا کنید تا رابطه میان اصلاح و نتیجه قابل اثبات باشد.