Light house و LCP (Largest Contentful Paint)
mhmda965290 منذ شهر
Light house و LCP (Largest Contentful Paint)
لو الـ LCP عندك بطيء المستخدم هيحس إن الموقع معلق حتى لو الـ FCP سريع.
إزاي تقفل سكور الـ LCP وتخلي موقعك يفتح في لمح البصر؟
الـ LCP بيقيس الوقت اللي بيستغرقه المتصفح عشان يعرض أكبر عنصر مرئي في الشاشة الي غالباً بيكون صورة Hero فيديو، أو بلوك نصي كبير.
لو الرقم ده تحت 2.5 ثانية إنت في الأمان.
ازاي تحسن الLCP
تحسين صور الـ Hero
بما إن أكبر عنصر غالباً صورة.
Preload: لو الصورة موجودة في أول الصفحة، لازم تقول للمتصفح يحملها فوراً قبل أي حاجة تانية باستخدام:
<link rel="preload" as="image" href="hero.webp">
بلاش Lazy Load للـ Hero أكبر غلطة إنك تعمل loading=lazy للصورة اللي في الأول لأن دي لازم تحمل فوراً
استخدم WebP أو AVIF لتقليل حجم الصور .
وقت استجابة السيرفر
لو السيرفر بيتأخر في الرد، كل حاجة هتتأخر بالتبعية.
TTFB (Time to First Byte): حسن أداء ال data base واستخدم CDN عشان تقرب الصور والملفات من المستخدم.
و اتأكد إن الـ HTML نفسه بيحصله Caching لو مش بيتغير كتير.
سرعة تحميل الـ CSS والـ JS
المتصفح مش هيرسم إلا لما يتأكد إن الـ Layout جاهز.
صغر الملفات (Minification) او (gZip).
حط الـ CSS بتاع الجزء الأول من الصفحة في الـ Head مباشرة عشان المتصفح ما ينتظرش تحميل ملف CSS كبير.
الـ Client-Side Rendering
لو موقعك React أو Vue بالكامل (CSR)، المتصفح بيضطر يستنى لما الـ JS يتحمل وبعدين يعمل Render ده بيقلل الـ LCP عشان كدا استخدم Next.js او Vite SSR عشان تستفيد من الـ SSR ده بيخلي المحتوى يوصل للمتصفح جاهز ومكتوب.
