الموقع السريع ليس الموقع الذي يحمّل ملفًا واحدًا فقط؛ الأداء يشمل زمن التحميل، وقت التفاعلية، الاستجابة، وسلاسة التفاعل كما توضّح MDN [1]. لذلك لا تبدأ بتحسين عشوائي. التقط baseline، غيّر شيئًا واحدًا، ثم قارن.
أنشئ baseline
سجّل حجم الصفحة، عدد الطلبات، وقت ظهور المحتوى الأساسي، ووقت استجابة التفاعل على هاتف متوسط. احفظ لقطة من أدوات المتصفح مع التاريخ والنسخة. الرقم المنفرد لا يكفي؛ المهم أن ترى الاتجاه بعد كل تغيير.
الصور أول مشتبه به
اضبط أبعاد الصورة قبل رفعها، استخدم صيغة مناسبة، ولا ترسل صورة 4000px لمكان عرضه 600px. ضع width وheight أو aspect ratio لتجنب قفز الصفحة، واستخدم lazy loading للصور البعيدة عن الشاشة. الغلاف الرئيسي يستحق أولوية مختلفة عن صور أسفل المقال.
JavaScript بقدر الحاجة
حمّل السكربتات غير الأساسية بـdefer أو بعد ظهور المحتوى، ولا تجعل analytics أو widget يمنع رسم الصفحة. قلّل listeners المتكررة، وادمج عمليات القراءة من DOM عندما تكون متتابعة. لا تستخدم animation على width وheight إذا كان transform أو opacity يكفي.
قياس بعد الإصلاح
| التغيير | المؤشر المتوقع | خطر جانبي |
|---|---|---|
| ضغط الصور | حجم نقل أقل | جودة بصرية أقل |
| defer للسكربت | رسم أسرع | اعتماد ترتيب التنفيذ |
| تقليل API calls | تفاعلية أفضل | بيانات قديمة |
| CSS أبسط | وقت parsing أقل | فقدان تفصيلة تصميم |
التحسين الناجح ليس الذي يجعل Lighthouse أخضر فقط؛ بل الذي يشعر به المستخدم ولا يكسر الوصول أو الوظائف الأساسية.
مراجع رسمية
هذه الروابط الرسمية هي نقطة الرجوع عند اختلاف إصدار الأداة أو تغيّر سلوك المتصفح.