مؤشرات الويب الأساسية: قياس وتحسين أداء الويب
مستخدموك غير صبورين. إذا استغرقت صفحتك وقتًا طويلاً للتحميل أو تحركت عناصرها أثناء محاولتهم القراءة، فسيغادرون. تعرف Google ذلك، وتستخدم خوارزمية الترتيب الخاصة بها مؤشرات الويب الأساسية لقياس تجربة المستخدم في العالم الحقيقي. ولكن بعيدًا عن SEO، تؤثر مؤشرات الويب الأساسية مباشرة على معدلات التحويل ورضا المستخدم. في هذا الدليل، سنشرح معنى كل مقياس، وكيفية قياسها بدقة، والأهم من ذلك، كيفية تحسينها بإصلاحات عملية على مستوى الكود.
ما هي مؤشرات الويب الأساسية؟
مؤشرات الويب الأساسية هي مجموعة من ثلاثة مقاييس تحدد جوانب رئيسية من تجربة المستخدم: التحميل، التفاعل، والاستقرار البصري. وهي جزء من إشارات تجربة الصفحة من Google.
- أكبر رسم للمحتوى (LCP): يقيس أداء التحميل. يحدد الوقت الذي يصبح فيه أكبر عنصر محتوى (صورة، فيديو، أو كتلة نصية) مرئيًا. استهدف LCP أقل من 2.5 ثانية.
- التفاعل مع الرسم التالي (INP): يقيس الاستجابة. يلتقط زمن الاستجابة لجميع التفاعلات (النقرات، اللمسات، ضغطات المفاتيح) ويبلغ عن الأطول منها. استهدف INP أقل من 200 مللي ثانية.
- تحول التخطيط التراكمي (CLS): يقيس الاستقرار البصري. يحدد التحولات غير المتوقعة في التخطيط أثناء تحميل الصفحة. استهدف CLS أقل من 0.1.
تستند هذه الحدود إلى بيانات ميدانية من مستخدمين حقيقيين، وليس اختبارات معملية. لهذا السبب فإن القياس الصحيح أمر بالغ الأهمية.
كيفية قياس مؤشرات الويب الأساسية
تحتاج إلى بيانات معملية وميدانية معًا. تساعدك الأدوات المعملية على تصحيح الأخطاء؛ بينما تعكس البيانات الميدانية تجربة المستخدم الحقيقية.
الأدوات الميدانية (مراقبة المستخدم الحقيقي)
- تقرير تجربة مستخدم Chrome (CrUX): مجموعة بيانات Google العامة لمقاييس المستخدم الحقيقي. اعرضها في PageSpeed Insights أو Search Console.
- PageSpeed Insights: يعرض بيانات معملية (Lighthouse) وميدانية (CrUX) لعنوان URL.
- تقرير مؤشرات الويب الأساسية في Search Console: يجمع عناوين URL حسب الحالة والمقياس.
- مكتبة Web Vitals JavaScript: اجمع بياناتك الميدانية عبر مكتبة
web-vitalsوأرسلها إلى تحليلاتك.
الأدوات المعملية (الاختبار الاصطناعي)
- Lighthouse: مدمج في Chrome DevTools. يوفر مقاييس معملية وفرصًا للتحسين.
- WebPageTest: اختبار متقدم مع شرائط فيلم ومخططات انسيابية.
- لوحة Performance في Chrome DevTools: تعمق في أداء وقت التشغيل.
ابدأ بـ PageSpeed Insights للحصول على نظرة عامة سريعة، ثم استخدم DevTools لتصحيح المشكلات المحددة.
تحسين LCP: اجعل المحتوى الرئيسي يُحمّل بشكل أسرع
غالبًا ما يكون LCP هو المقياس الأكثر تأثيرًا للإصلاح. تشمل الأسباب الشائعة لضعف LCP استجابة الخادم البطيئة، والموارد المعيقة للعرض، والصور غير المحسّنة.
- حسّن الصور: اضغط الصور، واستخدم تنسيقات حديثة مثل WebP أو AVIF، وقدم صورًا متجاوبة باستخدام
srcset. أدوات مثل ضاغط الصور يمكن أن تساعد في تقليل حجم الملف دون فقدان جودة مرئي. - قم بتحميل صورة LCP مسبقًا: أضف
<link rel="preload">لصورة البطل لبدء تحميلها مبكرًا. - قلل وقت استجابة الخادم: استخدم CDN، وفعّل التخزين المؤقت، وحسّن استعلامات الواجهة الخلفية. بالنسبة لـ Nginx، فكر في fastcgi_cache أو proxy_cache.
- تخلص من الموارد المعيقة للعرض: ضمّن CSS الحرج، وأجّل CSS و JavaScript غير الحرجين.
- استخدم شبكة توصيل المحتوى (CDN): قدم الأصول من مواقع أقرب للمستخدمين.
<!-- Preload LCP image -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">
<!-- Responsive images -->
<img src="#" srcset="hero-480.webp 480w, hero-800.webp 800w" sizes="(max-width: 600px) 480px, 800px" alt="Hero">
تحسين INP: اجعل التفاعلات تبدو فورية
حل INP محل تأخير الإدخال الأول (FID) في مارس 2024. يقيس المدة الكاملة للتفاعلات، وليس فقط التأخير قبل المعالجة. لتحسين INP، تحتاج إلى تقليل وقت تنفيذ JavaScript وتجنب المهام الطويلة.
- قسّم المهام الطويلة: استخدم
setTimeoutأوrequestIdleCallbackللتنازل عن الخيط الرئيسي. - حسّن معالجات الأحداث: استخدم debounce أو throttle للمعالجات المكلفة، وتجنب اهتزاز التخطيط.
- قلل حجم حزمة JavaScript: قسّم الكود، واستخدم tree-shake، والتحميل البطيء للسكريبتات غير الحرجة.
- استخدم web workers: انقل الحسابات الثقيلة بعيدًا عن الخيط الرئيسي.
- قلل من سكريبتات الطرف الثالث: غالبًا ما تعيق الخيط الرئيسي. قم بتحميلها بشكل غير متزامن أو تأجيلها.
استخدم لوحة Performance في DevTools لتسجيل التفاعلات وتحديد المهام الطويلة.
تحسين CLS: حافظ على استقرار التخطيط
يحدث CLS عندما تتحرك العناصر بشكل غير متوقع. الأسباب الشائعة هي الصور بدون أبعاد، والإعلانات، والتضمينات، والمحتوى المُدرج ديناميكيًا.
- قم دائمًا بتعيين سمات العرض والارتفاع للصور ومقاطع الفيديو: هذا يسمح للمتصفح بحجز مساحة.
- احجز مساحة للإعلانات والتضمينات: استخدم CSS
aspect-ratioأو حاويات بحجم ثابت. - تجنب إدراج محتوى فوق المحتوى الموجود: إذا كان لا بد من ذلك، فافعله استجابةً لتفاعل المستخدم.
- استخدم
font-display: swapبحذر: يمكن أن يسبب Swap تحولات في التخطيط إذا اختلفت مقاييس الخط. فكر فيfont-display: optionalأو تحميل الخطوط مسبقًا. - التزم بتحويلات CSS للرسوم المتحركة: فهي لا تسبب تحولات في التخطيط.
<!-- Reserve space with aspect-ratio -->
<img src="#" width="800" height="600" alt="...">
مقارنة مقاييس مؤشرات الويب الأساسية
| المقياس | ما يقيسه | الحد الجيد | الإصلاحات الشائعة |
|---|---|---|---|
| LCP | أداء التحميل | < 2.5s | تحسين الصور، التحميل المسبق، CDN |
| INP | الاستجابة | < 200ms | تقسيم المهام الطويلة، تقليل JS |
| CLS | الاستقرار البصري | < 0.1 | تعيين الأبعاد، حجز المساحة |
المراقبة والتحسين المستمر
تحسين مؤشرات الويب الأساسية ليس مهمة لمرة واحدة. بعد نشر الإصلاحات، راقب البيانات الميدانية للتأكد من عدم حدوث تراجعات. قم بإعداد تنبيهات في أداة RUM الخاصة بك عندما تتجاوز المقاييس الحدود. قم بتشغيل Lighthouse بانتظام في CI لاكتشاف تراجعات الأداء قبل وصولها إلى الإنتاج.
تذكر أن الأداء ميزة. من خلال إعطاء الأولوية لمؤشرات الويب الأساسية، فإنك تقدم تجربة أفضل تبقي المستخدمين متفاعلين وتعزز ترتيبك في البحث.
الأسئلة الشائعة
ما هي الحدود الحالية لمؤشرات الويب الأساسية؟
بالنسبة لـ LCP، الجيد أقل من 2.5 ثانية، يحتاج إلى تحسين من 2.5 إلى 4.0 ثانية، والضعيف أكثر من 4.0 ثانية. بالنسبة لـ INP، الجيد أقل من 200 مللي ثانية، يحتاج إلى تحسين من 200 إلى 500 مللي ثانية، والضعيف أكثر من 500 مللي ثانية. بالنسبة لـ CLS، الجيد أقل من 0.1، يحتاج إلى تحسين من 0.1 إلى 0.25، والضعيف أكثر من 0.25.
كم مرة يجب أن أقيس مؤشرات الويب الأساسية؟
يتم تحديث البيانات الميدانية يوميًا في CrUX، لكنها متوسط متحرك لمدة 28 يومًا. يجب عليك المراقبة المستمرة وإجراء اختبارات معملية بعد كل تغيير كبير في الكود. قم بإعداد تشغيل Lighthouse الآلي في خط أنابيب CI/CD لاكتشاف التراجعات مبكرًا.
هل يمكنني تحسين مؤشرات الويب الأساسية بدون مطور؟
بعض الإصلاحات مثل ضغط الصور أو تمكين التخزين المؤقت يمكن القيام بها عبر الإضافات أو إعدادات الاستضافة. ومع ذلك، فإن التحسينات الأعمق مثل تقسيم الكود أو إزالة الموارد المعيقة للعرض تتطلب عادةً مشاركة مطور. أعط الأولوية للمقاييس ذات التأثير الأكبر بناءً على بياناتك الميدانية.
هل أنت مستعد لتحسين صورك للحصول على LCP أفضل؟ جرب ضاغط الصور المجاني لتقليل أحجام الملفات دون فقدان الجودة.