أداء HTML: التحميل الكسول وdefer وpreload وقياس السرعة

قرارات تحميل الموارد: متى تستخدم defer وpreload وlazy loading؟

التحسين الفعّال يبدأ بقياس التأخير الفعلي، لا بإضافة خصائص تحميل لكل مورد. قد يحسن preload وقت اكتشاف مورد مهم، لكنه قد ينافس موارد أخرى على الشبكة إذا استخدم دون تمييز. وبالمثل، قد يساعد lazy loading للصور أسفل الصفحة، لكنه قد يؤخر الصورة الرئيسية إذا استُخدم على العنصر الخطأ.

ابدأ من مؤشرات الأداء

استخدم بيانات المستخدمين الحقيقية عندما تكون متاحة، ثم أدوات المختبر لتحديد السبب. راقب LCP لفهم سرعة ظهور المحتوى الرئيسي، وINP للاستجابة للتفاعل، وCLS لاستقرار التخطيط. لا يعني تحسن نتيجة Lighthouse في تجربة واحدة أن جميع المستخدمين حصلوا على التحسن نفسه؛ قارن ظروفًا متشابهة وكرر الاختبار.

خطوات عملية

1. حدد العنصر الذي يؤثر في LCP بدل تخمين المورد المسؤول.
2. اضغط الصور واستخدم الأبعاد الصحيحة قبل إضافة تلميحات التحميل.
3. أجّل السكربتات غير الضرورية في بداية الصفحة، مع اختبار التبعيات.
4. قلل الخطوط والأوزان غير المستخدمة وتأكد من عدم حدوث تبديل تخطيط مزعج.
5. قارن النتائج قبل التعديل وبعده على أكثر من حجم شاشة.

لا تجعل التحسين يكسر الوظيفة

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

راجع دليل الأداء في web.dev ومرجع preload في MDN قبل إضافة تلميحات تحميل.

بروتوكول قياس أداء قابل للتكرار

قبل إضافة preload أو تأجيل سكربت، سجّل القياس الأساسي في ظروف واضحة. استخدم الصفحة نفسها، ونوع الجهاز نفسه قدر الإمكان، وكرر الاختبار لأن التخزين المؤقت وحالة الشبكة يؤثران في النتيجة. اكتب الفرضية مسبقًا، مثل أن الصورة الرئيسية تتأخر بسبب حجمها، ثم تحقق من أن الدليل يدعمها.

تجنب التحسينات المتضاربة

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

قياس بيانات المستخدمين

الاختبارات المعملية مفيدة لتحديد السبب، لكن بيانات المستخدمين توضح توزيع الأداء الفعلي عبر الأجهزة والشبكات. عندما تتوفر البيانات، راقب LCP وINP وCLS بدل الاعتماد على زمن تحميل إجمالي واحد. لا تخلط تحسن نتيجة اختبار منفرد مع تحسن دائم لكل الزوار.

قائمة تنفيذ

• حدد الموارد الحرجة من بيانات القياس.
• قلل حجم الصور والخطوط قبل إضافة تلميحات تحميل غير ضرورية.
• أجّل السكربتات غير الحرجة بعد فحص الاعتماد بينها.
• اختبر التحميل البارد والتفاعل بعد اكتمال التحميل.
• سجّل النتيجة قبل وبعد التغيير.

راجع دليل الأداء في web.dev ومرجع script في MDN.

مراجعة أولوية الموارد قبل إضافة تلميحات تحميل

قبل استخدام preload أو preconnect، حدد المورد الذي يمنع ظهور المحتوى أو التفاعل. قد لا يفيد تحميل مورد مبكرًا إذا كان كبيرًا أو غير ضروري للجزء الأول من الصفحة. افحص waterfall في أدوات الشبكة، وحدد الموارد التي تبدأ متأخرة بسبب اكتشافها من CSS أو JavaScript.

توازن بين الأداء والصحة

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

تحقق بعد كل تغيير

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

راجع دليل الأداء في web.dev ومرجع preload.

ترتيب أولويات التحميل بدل إضافة تحسينات عشوائية

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

استخدم defer وasync بحسب طبيعة السكريبت

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

حمّل الصور والموارد عند الحاجة

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

أعد القياس بعد كل تغيير

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

راجع دليل web.dev للأداء ومرجع MDN لعنصر script. اجعل القياس قبل التغيير وبعده جزءًا من عملية العمل، وسجل السبب والنتيجة حتى لا تعود المشكلة لاحقًا.

خطة اختبار التحميل بعد تغيير HTML

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

لا تؤجل كل شيء آليًا

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

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