بهینه‌سازی Core Web Vitals در قالب دیتالایف: LCP، CLS و INP
وقتی از «سرعت سایت» حرف می‌زنیم معمولاً منظورمان یک عدد کلی است. اما آنچه گوگل واقعاً می‌سنجد سه معیار مشخص است و هرکدام علت متفاوتی دارد. خبر خوب برای کاربران دیتالایف: بخش بزرگی از امتیاز از دست رفته در سطح قالب قابل جبران است، نه سرور.
| معیار | چه چیزی را می‌سنجد | هدف |
|---|---|---|
| LCP | زمان نمایش بزرگ‌ترین عنصر صفحه | زیر ۲.۵ ثانیه |
| CLS | میزان جابه‌جایی ناگهانی عناصر هنگام بارگذاری | زیر ۰.۱ |
| INP | تأخیر پاسخ به تعامل کاربر | زیر ۲۰۰ میلی‌ثانیه |
LCP — بزرگ‌ترین عنصر صفحه
در قالب‌های دیتالایف، عنصر LCP تقریباً همیشه یکی از این دوتاست: تصویر بنر بالای صفحه، یا تیتر اصلی مطلب.
فونت را زودتر برسانید
اگر تیتر شما عنصر LCP است، تا وقتی فونت نرسیده متن رندر نمی‌شود. سه کار لازم است:
<link rel="preload" href="/templates/DLEMarket/fonts/Vazirmatn-400.woff2"
as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/templates/DLEMarket/fonts/Vazirmatn-800.woff2"
as="font" type="font/woff2" crossorigin>@font-face {
font-family: 'Vazirmatn';
src: url('../fonts/Vazirmatn-400.woff2') format('woff2');
font-weight: 400;
font-display: swap; /* متن با فونت جایگزین نمایش داده می‌شود تا فونت اصلی برسد */
}- فقط وزن‌هایی را preload کنید که واقعاً بالای صفحه استفاده می‌شوند. preload کردن شش وزن، پهنای باند را از چیزی می‌گیرد که به آن نیاز فوری دارید.
- فونت را محلی میزبانی کنید. هر دامنه‌ی خارجی یعنی یک DNS lookup و یک دست‌دادن TLS اضافه.
- فرمت
woff2کافی است.ttfوeotبرای مرورگرهایی است که دیگر وجود ندارند و فقط حجم اضافه‌اند.
تصویر بالای صفحه را lazy نکنید
این اشتباه بسیار رایج است: loading="lazy" روی همه‌ی تصاویر گذاشته می‌شود، از جمله تصویر بنر. نتیجه این است که مرورگر بارگذاری مهم‌ترین تصویر صفحه را عقب می‌اندازد و LCP بدتر می‌شود.
<!-- تصویر بالای صفحه -->
<img src="..." width="1200" height="630" fetchpriority="high">
<!-- تصاویر پایین‌تر -->
<img src="..." width="400" height="225" loading="lazy" decoding="async">CSS حیاتی را بالا نگه دارید
ترتیب {include} ها در main.tpl اهمیت دارد. استایل‌های مربوط به هدر و بخش بالای صفحه باید زودتر از استایل‌های صفحه‌های داخلی بارگذاری شوند. اگر فایل CSS بزرگی دارید که فقط در صفحه‌ی محصول لازم است، آن را با شرط قالب جدا کنید:
[available=showfull]
{include file="/templates/DLEMarket/css/product.css"}
[/available]CLS — جهش چیدمان
CLS آزاردهنده‌ترین معیار برای کاربر است: می‌خواهد روی چیزی کلیک کند و در همان لحظه صفحه جابه‌جا می‌شود. سه منبع اصلی در قالب‌های دیتالایف:
۱. تصاویر بدون ابعاد
هر <img> باید width و height داشته باشد. مرورگر از روی این دو، نسبت تصویر را حساب می‌کند و جای خالی را از قبل رزرو می‌کند. اندازه‌ی نمایشی را CSS تعیین می‌کند:
img { max-width: 100%; height: auto; }در کارت‌های فهرست که تصاویر با ابعاد متفاوت می‌آیند، به‌جای ابعاد ثابت از aspect-ratio استفاده کنید:
.card__thumb { aspect-ratio: 16 / 9; overflow: hidden; }
.card__thumb img { width: 100%; height: 100%; object-fit: cover; }۲. بنرها و تبلیغات
جای بنر را با ارتفاع کمینه از قبل رزرو کنید، حتی وقتی بنری وجود ندارد:
.banner-slot { min-height: 250px; }۳. محتوای آژاکسی
بلوک‌هایی مثل شمارنده‌ی سبد خرید یا نظرات که بعد از بارگذاری صفحه پر می‌شوند، باید فضایشان از قبل رزرو شده باشد. یک اسکلت (skeleton) با همان ابعاد محتوای نهایی، هم CLS را صفر می‌کند و هم تجربه‌ی بهتری می‌سازد.
INP — پاسخ به تعامل
INP جایگزین FID شده و سخت‌گیرانه‌تر است: کل تأخیر بین کلیک کاربر و دیده شدن نتیجه را می‌سنجد. مقصر معمولاً جاوااسکریپت است.
- اسکریپت‌ها را با
deferبارگذاری کنید. اسکریپت بدونdeferدر<head>کل تجزیه‌ی HTML را متوقف می‌کند. - jQuery اضافی بار نکنید. دیتالایف خودش jQuery را لود می‌کند؛ نسخه‌ی دوم فقط حجم و تداخل است.
- رویدادهای پرتکرار را throttle کنید. شنونده‌ی
scrollیاresizeکه در هر فراخوانی محاسبه‌ی سنگین انجام دهد، مستقیم به INP آسیب می‌زند. - انیمیشن را روی
transformوopacityبسازید. انیمیشن رویwidth،height،topیاmarginدر هر فریم چیدمان را دوباره محاسبه می‌کند.
اگر هنوز به این مرحله نرسیده‌اید، اول هفت اشتباه رایجی که سرعت سایت دیتالایف را می‌گیرد را مرور کنید؛ بیشتر سایت‌ها با همان هفت مورد نصف راه را می‌روند.
سمت سرور: کارهایی که یک بار انجام می‌شوند
اینها مربوط به قالب نیستند اما مکمل کار هستند:
| کار | کجا |
|---|---|
| فعال کردن کش دیتالایف | پنل ← تنظیمات اسکریپت ← بهینه‌سازی |
| فشرده‌سازی Gzip / Brotli | پیکربندی وب‌سرور |
هدر Cache-Control برای فایل‌های ثابت | .htaccess یا nginx |
| تبدیل تصاویر به WebP | پنل ← تنظیمات آپلود |
| HTTP/2 یا HTTP/3 | وب‌سرور |
نمونه‌ی هدر کش برای فایل‌های ثابت:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType image/webp "access plus 6 months"
</IfModule>کش یک‌ساله فقط وقتی امن است که آدرس فایل‌ها نسخه‌دار باشد. دیتالایف این کار را با پارامتر cache_id انجام می‌دهد — به شرطی که فایل‌ها را با {include} اضافه کرده باشید و نه با تگ <link> دستی.
بخشی از این تنظیم‌ها داخل فایل‌های قالب انجام می‌شود؛ اگر مطمئن نیستید هر تگ در کدام فایل رندر می‌شود، راهنمای ساختار فایل‌های TPL را ببینید.
چطور اندازه بگیرید
PageSpeed Insights یک آزمایش آزمایشگاهی است و همیشه با تجربه‌ی واقعی کاربران یکی نیست. برای تصمیم‌گیری، بخش «داده‌های واقعی کاربران» همان گزارش یا گزارش Core Web Vitals در سرچ کنسول معتبرتر است. همیشه روی موبایل بسنجید؛ اختلاف امتیاز موبایل و دسکتاپ معمولاً چشمگیر است.
جمع‌بندی
ترتیب کار را از پرتأثیر به کم‌تأثیر بچینید: اول ابعاد تصاویر و رزرو فضای بنر (CLS تقریباً رایگان درست می‌شود)، بعد بارگذاری فونت و اولویت تصویر بالای صفحه (LCP)، و در آخر بازبینی جاوااسکریپت (INP). این ترتیب بیشترین نتیجه را با کمترین ریسک می‌دهد.