بهینهسازی LCP فروشگاه
بهینهسازی LCP فروشگاه اینترنتی — راهنمای عملی
LCP زمان رندر بزرگترین عنصر visible صفحه (معمولاً hero image یا عنوان) را اندازه میگیرد. برای فروشگاه اینترنتی هدف زیر ۲.۵ ثانیه است. سه اهرم اصلی: بهینهسازی تصویر hero، کاهش TTFB سرور، و حذف render-blocking JS/CSS.
LCP چیست و چرا برای فروشگاه مهم است؟
LCP عنصر بزرگ visible در viewport را اندازه میگیرد: تصویر hero، تصویر محصول، video poster یا block text بزرگ. هر ۱ ثانیه تأخیر LCP میتواند conversion را ۷٪ کاهش دهد.
آستانههای LCP (Google)
| رتبه | LCP | معنی برای فروشگاه |
|---|---|---|
| Good | ≤ ۲.۵s | تجربه خرید روان — سئو مثبت |
| Needs Improvement | ۲.۵ – ۴s | ریسک رهاسازی سبد بالاتر |
| Poor | > ۴s | penalty ضمنی + نرخ bounce بالا |
۵ گام بهینهسازی LCP
- 1
شناسایی LCP element
در Chrome DevTools → Performance یا PageSpeed Insights ببینید کدام element LCP است. معمولاً img.product-image یا .hero-banner.
- 2
Preload تصویر LCP
<link rel="preload" as="image" href="..." fetchpriority="high"> — فقط برای یک تصویر per page.
- 3
فرمت و سایز تصویر
WebP/AVIF، responsive srcset، width/height explicit برای جلوگیری از CLS. hero زیر ۱۵۰KB.
- 4
کاهش TTFB
هاست بهتر، object cache (Redis)، CDN edge. TTFB بالای ۶۰۰ms = LCP بالا حتی با تصویر بهینه.
- 5
حذف render-blocking
defer/async JS، critical CSS inline، حذف font blocking. Page builder ها معمولاً ۱MB+ CSS inject میکنند.
LCP بر اساس نوع صفحه
LCP element معمول per page type
| صفحه | LCP element معمول | اولویت بهینهسازی |
|---|---|---|
| صفحه اصلی | Hero banner / slider | حذف slider، static hero |
| دستهبندی | اولین تصویر محصول grid | lazy load بقیه، preload اول |
| صفحه محصول | تصویر اصلی محصول | preload + WebP + CDN |
| Checkout | فرم / logo | minimal JS، server-side render |
بهترین روشها
- fetchpriority="high" فقط روی یک resource per page
- از font-display: swap برای فونتهای فارسی
- مانیتور LCP هفتگی با CrUX یا RUM
- در Next.js: next/image با priority prop برای LCP image
- اگر LCP بعد از ۳ بهینهسازی هم > 3s: معماری را بازنگری کنید
اشتباهات رایج
- استفاده از slider خودکار روی hero
- بارگذاری ۵ فونت قبل از LCP
- CDN بدون HTTP/2 یا HTTP/3
- بهینهسازی فقط desktop، نادیده گرفتن mobile 4G