谷歌SEO优化指南: Lighthouse Web 性能核心指标 FCP、LCP、FID、CLS、TTFB

، يأخذك لفهم المؤشرات الأساسية لأداء الويب واحدا تلو الآخر.هل تقفز الصفحات ؟القيم الموصى بهالم يتم FID ؟�

ماذا هناك أيضا TTFB ؟

• تحويل التخطيط التراكمي

• LCP أحمر ؟

• المؤشرات

• 1. ما هي هذه المؤشرات ؟

لا تقلق ، هذا المقال يهدف إلى حل هذه "الرهاب الأبجدي".

ماذا تعني CLS ؟

FIDCLSسوف نستخدمها

<2.5s

تصور المستخدم

(أول Input Delay)نحن نفتح Chrome.

• عادة الرسم البياني الرئيسي للصفحة ، العنوان الرئيسي ، الوحدة النمطية الكبيرةالصور ، وعلامات الفيديواستخدم انتقالات الرسوم المتحركة بدلاً من إدراج قوي

• تقسيم الحزمة ، تحميل كسول

• استخدام المكونات الإضافية لـ Chrome: Web Vitals ، Core Web Vitals Reporter

• تقليل عدد JS للتحميل الأول

• <0.5s

• سيشعر المستخدمون بـ "البطاقة" ، عادةً ما يكون مؤشر الترابط الرئيسي JS مغلقًا

• تجنب إدخال المحتوى الديناميكي في الرأس

• قم بتشغيل ذاكرة التخزين المؤقت

• الأداء ليس فقط "سرعة التحميل" ، ولكن من فتح الصفحة إلى أسفل الزر

• الصور/العناوين الرئيسية التي تم تحميلها مسبقا (preload)

• 2. LCP: تم تحميل الصفحة "أهم محتوى"

• سيحكم Chrome على "أكبر كتلة مرئية" ، وليس ما تقرره!

• استخدام Chrome DevTools → Performance → Lighthouse

• المرحلة عبر الإنترنت (مستخدم حقيقي)

• بعد أن ينقر المتصفح على الرابط ، كم من الوقت للحصول على أول بايت استجابة للخادم

• على سبيل المثال: اضغط على الزر ، انقر على مربع البحث ، اضغط على Tab ، إلخ.

• تقليل عرض حظر JS

• 4. CLS: صفحة "لا تقفز"3. يشرح كل مؤشر أفكار التحسين بالتفصيل

• استخدام تنسيقات الصور الحديثة (WebP/AVIF)

• جوجل يكره هذا ، وسوف يزعج المستخدمون

• الخلفية بطيئة ، DNS بطيء ، CDN غير مكشوف ، سيتم رفع هذا المؤشر

• إدراك المستخدم: بدأت الصفحات في التحميل

• استخدام التقنيات غير المتزامنة مثل requestIdleCallback لتأخير المنطق غير الحاسم

• 4. كيفية جمع هذه المؤشرات ؟

• تقفز العناصر عند تحميل الصفحة ؟ زر الانزلاق بعيدا ؟ إدراج الإعلان ؟ اذهب عارياً على الصفحة أولاً ؟ هذا هو CLS عالية

• 3. FID: "سرعة الاستجابة" لتفاعل المستخدم الأول

• 1. FCP: صفحة "بدأ المحتوى"

import { getLCP, getFID, getCLS } from 'web-vitals';
getLCP(console.log);
getFID(console.log);
getCLS(console.log);

.

FCP → دع المستخدمين يعرفون أن "الصفحة قادمة"

• عنوان هذا المقال: https://www.jeawin.com/google-seo-chrome-lighthouse-core-web-vitals-fcp-lcp-fid-cls-ttfb.html

• من خلال هذه المؤشرات الخمسة ، يمكنك تحسين كل خطوة بشكل أكثر هادفة:

• LCP → يجعل المستخدمين يشعرون أن "المحتوى الرئيسي يخرج"

• FID → دع المستخدمين يتفاعلون بمجرد العمل

• CLS → لا تدع المستخدمين يطاردون الأزرار

TTFB → لا تدع النهاية الخلفية تسحب الواجهة الأمامية.