تحسين سرعة الموقع وCore Web Vitals: دليل عملي للمطورين

خطة عمل لتحسين Core Web Vitals وقياس أثر التغيير

تبدأ خطة الأداء من تحديد الصفحة والجزء الذي يبطئ تجربة المستخدم. تختلف أسباب LCP وINP وCLS، لذلك لا تعالجها جميعًا بضغط الصور أو تقليل JavaScript فقط. اجمع بيانات ميدانية عند توفرها، ثم استخدم الاختبارات المعملية لتحديد العنصر أو المهمة المسؤولة.

حسّن LCP وفق السبب

إذا كان العنصر صورة، راجع أبعادها وصيغتها ووقت اكتشافها وأولوية تحميلها. إذا كان نصًا، افحص وقت استجابة الخادم والخطوط والموارد التي تؤخر العرض. لا تضع preload على كل صورة؛ أعطه للموارد الحرجة التي ثبت أن اكتشافها متأخر.

حسّن INP دون كسر التفاعل

قسّم العمل الطويل، وقلل العمليات غير الضرورية داخل أحداث النقر والكتابة، وتجنب تحديث DOM على نطاق واسع عندما يكفي تحديث جزء صغير. إذا كانت الصفحة تعرض نتائج بحث أثناء الكتابة، ففكر في إلغاء الطلبات القديمة أو تأخيرها قليلًا لمنع تنفيذ عمل لا يحتاجه المستخدم. اختبر كل ذلك على جهاز منخفض الأداء، لا على جهاز المطور فقط.

قلل CLS بحجز المساحات

حدّد أبعاد الصور والفيديو، واستخدم مقاييس خط مناسبة لتقليل القفز عند تحميل الخطوط، ولا تدرج عناصر أعلى المحتوى دون حجز مساحة لها. اختبر الصفحة أثناء التحميل البارد، لأن التحرك قد لا يظهر عند إعادة التحميل بعد التخزين المؤقت.

سجل التغييرات

1. حدد مؤشرًا وسببًا متوقعًا قبل التعديل.
2. سجّل النتائج الأساسية في ظروف اختبار واضحة.
3. نفّذ تعديلًا محدودًا واختبر الوظائف.
4. أعد القياس أكثر من مرة، وقارن بيانات المستخدمين عند توافرها.
5. وثّق أي أثر جانبي أو مفاضلة بين السرعة والوظيفة.

راجع دليل Web Vitals وإرشادات تحسين LCP وإرشادات تحسين INP.

منع تراجع Core Web Vitals بعد النشر

التحسين ليس مهمة تنتهي عند الوصول إلى نتيجة جيدة مرة واحدة؛ قد تؤدي صورة جديدة أو مكتبة إضافية أو إعلان أو تغيير خط إلى تراجع الأداء. ضع فحصًا دوريًا للصفحات الأساسية، وقارن مؤشرات الميدان عندما تتوفر بيانات كافية. راقب القوالب المشتركة لأن تغييرًا واحدًا فيها قد يؤثر في عدد كبير من الصفحات.

اختر عينة تمثل أنواع المحتوى

اختبر الصفحة الرئيسية ومقالًا وتصنيفًا وصفحة تحتوي على نموذج أو وسائط. لكل نوع قد يختلف عنصر LCP أو سبب تأخر التفاعل. لا تفترض أن نتيجة الصفحة الرئيسية تمثل الموقع كله، ولا تخلط بين بيانات جهاز سريع وتجربة مستخدم على هاتف منخفض الأداء.

اربط كل تنبيه بتغيير محدد

إذا تراجع المؤشر، راجع سجل النشر والموارد التي تغيرت، ثم أعد إنتاج المشكلة في بيئة اختبار. لا تحذف وظيفة مهمة فقط لتحسين رقم دون فهم أثرها. بعد الإصلاح، اختبر التفاعل والوصول ثم راقب القياس مرة أخرى.

راجع دليل Web Vitals ومسار الأداء في web.dev لإنشاء روتين متابعة قابل للتكرار.

تشخيص مؤشرات الويب الأساسية من السبب إلى الإصلاح

تساعد مؤشرات الويب الأساسية على فهم جوانب مختلفة من التجربة: سرعة ظهور المحتوى الأساسي، واستجابة الصفحة لتفاعل المستخدم، واستقرار التخطيط أثناء التحميل. لا ينبغي اختزال هذه الجوانب في رقم واحد، لأن كل مؤشر يرتبط بأسباب مختلفة. قد يكون بطء ظهور المحتوى مرتبطًا بصورة رئيسية أو بخط أو بموارد تمنع العرض، بينما قد يكون ضعف الاستجابة ناتجًا عن JavaScript طويل التنفيذ أو عمل كثيف على الخيط الرئيسي.

ابدأ من الدليل لا من التخمين

قارن بيانات المستخدمين الفعلية عندما تتوفر مع قياسات المختبر. استخدم تسجيل الأداء في أدوات المطور لتحديد المهام الطويلة، وافحص Network لمعرفة الموارد الكبيرة أو المتأخرة. إذا ظهرت تغييرات في التخطيط، راجع الصور والخطوط والعناصر التي تُضاف بعد التحميل من دون مساحة محجوزة. قد يكون السبب في مكتبة خارجية أو إعلان لا تتحكم فيه مباشرة، لكن يمكنك تقليل أثره أو تأجيله عندما يكون ذلك مناسبًا.

تحسينات شائعة بحسب المؤشر

لتحسين ظهور المحتوى الأساسي، قلل حجم المورد الرئيسي وتجنب تأخير تحميله بلا سبب. لتحسين التفاعل، قلل JavaScript غير الضروري وقسّم الأعمال الثقيلة إلى مهام أصغر عندما يسمح التصميم بذلك. لتقليل تغير التخطيط، حدد أبعاد الصور والإعلانات والعناصر الديناميكية واحجز مساحة مناسبة لها. لا تنفذ هذه التعديلات آليًا؛ اختبر تأثيرها في السلوك الفعلي للصفحة.

راقب النتائج بعد النشر

قياس المختبر مفيد للتشخيص، لكنه لا يمثل جميع الأجهزة والشبكات. راقب بيانات الميدان على مدى مناسب، وتجنب الحكم على تغيير من عينة صغيرة أو يوم واحد. احتفظ بسجل للتغييرات ونتائج القياس حتى تعرف أي تعديل أحدث الفرق، وأعد الاختبار بعد تحديث مكتبة أو قالب قد يؤثر في الأداء.

راجع شرح مؤشرات الويب الأساسية ودليل تحسين الأداء من web.dev. اختر الإصلاح بحسب سبب المشكلة ووزنها على تجربة المستخدم.

خطة أداء مستمرة بدل إصلاح لمرة واحدة

حدد مؤشرات أساسية للصفحات الأكثر زيارة، وراقبها بعد نشر تغييرات كبيرة في القالب أو الصور أو JavaScript. لا تخلط بين تراجع مؤقت بسبب عينة صغيرة واتجاه مستمر، واستخدم نافذة زمنية مناسبة عند قراءة البيانات الميدانية. إذا تكرر التراجع، اربطه بالتغييرات التي حدثت في الفترة نفسها وافحص الموارد المشتركة قبل إضافة تحسينات موضعية.

وازن الأداء مع أهداف الصفحة

قد تحتاج صفحة تعليمية إلى صور توضيحية، وقد تحتاج أداة تفاعلية إلى سكريبتات إضافية؛ لا يكون الحل دائمًا حذف الموارد. قلل ما لا يضيف قيمة، وحمّل ما يحتاج إليه المستخدم في الوقت المناسب، واحرص على بقاء المحتوى الأساسي متاحًا. اختبر جودة الصور وسلوك الواجهة بعد كل تعديل حتى لا يتحول تحسين القياس إلى تدهور في الاستخدام.

احتفظ بسجل للقياس والتغيير والنتيجة، وراجع المؤشرات عند تحديث مكتبة أو إضافة أداة طرف ثالث. هذا يجعل الأداء مسؤولية تشغيلية مستمرة بدل هدفًا يُقاس مرة واحدة عند الإطلاق.