שירותי אופטימיזציה של Largest Contentful Paint (LCP)

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const last = entries[entries.length - 1];
  console.log('LCP element:', last.element);
  console.log('LCP time:', last.startTime);
}).observe({ type: 'largest-contentful-paint', buffered: true });

שלב את CrUX ו-Lighthouse לתמונה מלאה. קרא עוד על המדד ב-MDN.

טכניקות אופטימיזציה מרכזיות

טעינה מוקדמת של תמונות קריטיות ושימוש בטעינה מוקדמת של תמונות

<link rel="preload" as="image" href="/images/hero.webp" imagesrcset="/images/hero-640.webp 640w, /images/hero-1280.webp 1280w, /images/hero-1920.webp 1920w" imagesizes="100vw" fetchpriority="high">
<img src="/images/hero.webp" srcset="/images/hero-640.webp 640w, /images/hero-1280.webp 1280w, /images/hero-1920.webp 1920w" sizes="100vw" width="1920" height="1080" alt="Оптимизация LCP: preload герой-изображения" fetchpriority="high" loading="eager" decoding="async">

שימוש ב-new PerformanceObserver((list) => { const entries = list.getEntries(); const last = entries[entries.length - 1]; console.log('LCP element:', last.element); console.log('LCP time:', last.startTime); }).observe({ type: 'largest-contentful-paint', buffered: true }); על תמונת LCP הוא טעות נפוצה. טעינה עצלה דוחה את הטעינה ומגדילה את LCP. השתמש תמיד ב-<link rel="preload" as="image" href="/images/hero.webp" imagesrcset="/images/hero-640.webp 640w, /images/hero-1280.webp 1280w, /images/hero-1920.webp 1920w" imagesizes="100vw" fetchpriority="high"> <img src="/images/hero.webp" srcset="/images/hero-640.webp 640w, /images/hero-1280.webp 1280w, /images/hero-1920.webp 1920w" sizes="100vw" width="1920" height="1080" alt="Оптимизация LCP: preload герой-изображения" fetchpriority="high" loading="eager" decoding="async"> ו-loading="lazy" עבור התמונה הראשית.

טיפול בתמונות רקע

אם אלמנט ה-LCP הוא fetchpriority="high" של CSS, הדפדפן לא יכול לטעון אותו מראש אוטומטית. הפתרון הטוב ביותר הוא להחליפו ב-loading="eager". אם זה לא אפשרי, הוסף טעינה מוקדמת באמצעות JavaScript.

האץ את TTFB וחסל משאבים חוסמי רינדור

LCP = TTFB + זמן טעינת משאב. TTFB איטי הופך LCP טוב לבלתי אפשרי. השתמש במטמון שרת—Full Page Cache או fastcgi_cache.

// Laravel: Full Page Cache для публичных страниц
// Пакет spatie/laravel-responsecache или nginx fastcgi_cache
class CacheResponse
{
    public function handle(Request $request, Closure $next): Response
    {
        if (!$request->isMethod('GET') || auth()->check()) {
            return $next($request);
        }

        $key = 'fpc:' . md5($request->fullUrl());
        $cached = Cache::get($key);

        if ($cached) {
            return response($cached['body'], 200, $cached['headers'])
                ->header('X-Cache', 'HIT');
        }

        $response = $next($request);

        if ($response->isOk()) {
            Cache::put($key, [
                'body' => $response->getContent(),
                'headers' => ['Content-Type' => 'text/html; charset=UTF-8'],
            ], now()->addMinutes(5));
        }

        return $response;
    }
}

# nginx fastcgi_cache
fastcgi_cache_path /var/cache/nginx levels=1:2 keys_zone=FCGI:10m inactive=60m;
location ~ \.php$ {
  fastcgi_cache FCGI;
  fastcgi_cache_valid 200 5m;
  fastcgi_cache_bypass $cookie_session $http_authorization;
  fastcgi_no_cache $cookie_session $http_authorization;
  add_header X-Cache $upstream_cache_status;
}

תצורות אלה שומרות דפים במטמון עבור משתמשים לא מחוברים, ומצמצמות את TTFB ל-30–50 אלפיות השנייה.

CSS קריטי

הטמע CSS קריטי ב-background-image לרינדור מיידי של האזור שמעל לקפל. טען את השאר באופן אסינכרוני.

// vite.config.ts
import { critters } from 'critters';

export default defineConfig({
  plugins: [
    critters({
      preload: 'swap',
      pruneSource: false
    })
  ]
});

התוסף Critters מחלץ CSS קריטי ומטמיע אותו; השאר נטען מראש.

תוצאות אמיתיות ומדדי ביצועים

עבור לקוח מסחר אלקטרוני גדול (300 אלף ביקורים חודשיים), LCP היה 4.2 שניות. על ידי טעינה מוקדמת של תמונות hero, הטמעת nginx fastcgi_cache והטמעת CSS קריטי, הפחתנו את LCP ל-1.8 שניות. התנועה האורגנית עלתה ב-12% ושיעור ההמרה עלה ב-8% תוך חודשיים. עלויות השרת ירדו ב-20% עקב עומס מופחת.

טעויות נפוצות באופטימיזציית LCP

• טעינה עצלה של אלמנט ה-LCP – מגדילה את LCP פי 2–3.
• חוסר preconnect לגופנים – מעכב רינדור טקסט.
• ללא מטמון – TTFB גבוה (300+ אלפיות השנייה) גורם ל-LCP >2.5 שניות.
• תמונות לא מותאמות – JPEG במקום WebP, חוסר srcset.
• CSS ו-JavaScript חוסמי רינדור – חוסמים ניתוח HTML.

התהליך שלנו ומה כלול

1. בדיקה – אבחון LCP נוכחי, TTFB ומשאבים באמצעות Lighthouse, WebPageTest ו-CrUX. אנו גם מבצעים אבחון LCP לזיהוי צווארי בקבוק מדויקים.
2. ניתוח – זיהוי צווארי בקבוק (טעינה עצלה על LCP, שרת איטי, חסימת רינדור). אנו נותנים עדיפות לאסטרטגיות טעינה מוקדמת של תמונות ומטמון שרת.
3. אופטימיזציה – טעינה מוקדמת, מטמון שרת (Varnish, Redis), CSS קריטי, WebP/AVIF. אנו מבטלים CSS חוסם רינדור.
4. בדיקות – מדידות לפני/אחרי, בדיקות מובייל.
5. ניטור ודוח – הגדרת Long Tasks API, דוחות קבועים.

ציר זמן: 3–5 ימים כולל תצורת build, מטמון ובדיקות. העלות נקבעת לאחר הניתוח; אנו מספקים הצעת מחיר קבועה לפני התחלת העבודה.

מה כלול

• בדיקת Core Web Vitals מלאה עם דוח.
• תצורת טעינה מוקדמת ואופטימיזציית תמונות (WebP, AVIF, רספונסיבי). זה כולל הטמעת טעינה מוקדמת של תמונות hero.
• הגדרת מטמון שרת (Varnish, Redis, nginx). אנו מייעלים TTFB באמצעות מטמון שרת.
• הטמעת CSS קריטי וביטול חסימת רינדור.
• ניטור LCP באמצעות Long Tasks API ו-CrUX.
• תיעוד השינויים והמלצות תחזוקה.

התחל עכשיו

קבל ייעוץ לפרויקט שלך—נעריך את ה-LCP הנוכחי שלך ונציע תוכנית פעולה. בקש בדיקת LCP כדי לראות את השיפורים המדויקים. צור קשר כדי לדון במקרה שלך.