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

ما المقاييس التي تهم فعلًا؟

السرعة ليست رقمًا واحدًا، بل مجموعة تجارب يمر بها الزائر:

أول محتوى مرئي (FCP): متى يرى الزائر أي شيء على الصفحة، فيتأكد أنها تعمل.
أكبر عنصر مرئي (LCP): متى يظهر العنصر الأكبر في الشاشة الأولى، كالصورة الرئيسة أو العنوان. وهو مؤشر ضمن مؤشرات «Core Web Vitals» التي تتبناها جوجل.
التفاعل (INP): سرعة استجابة الصفحة لنقرات المستخدم وضغطاته طوال زيارته. وقد حل محل مؤشر قديم هو FID، والمؤشرات تتحدث، فراجع التوثيق الحالي.
ثبات التخطيط (CLS): هل تقفز العناصر أثناء التحميل فتخطئ بالنقر؟ كالإعلان أو الصورة تظهر فتدفع المحتوى.
زمن الاستجابة الأول من الخادم (TTFB): سرعة بدء رد الخادم، ويعكس أداء الخلفية والشبكة.
حجم الصفحة وعدد الطلبات: مؤشرات بسيطة تفسر كثيرًا من البطء.
الحدود الموصى بها: تنشر جوجل عتبات «جيد» لكل مؤشر وتعدلها أحيانًا، فراجعها من توثيق web.dev بدل الاعتماد على أرقام محفوظة.
بيانات المختبر والميدان: القياس في بيئة مضبوطة يعطيك تشخيصًا، وبيانات المستخدمين الحقيقيين تعطيك الواقع. تحتاج الاثنين.

كيف تقيس أداء موقعك؟

الأدوات المجانية متاحة، والقياس المتكرر يمنع الانحدار:

Lighthouse: مدمج في أدوات Chrome، يشغل فحصًا شاملًا ويعطي تقريرًا وتوصيات عن الأداء وإمكانية الوصول والممارسات.
PageSpeed Insights: يجمع تحليل المختبر مع بيانات الميدان إن توفرت لموقعك.
تبويب الشبكة والأداء في أدوات المطور: ترى كل طلب وحجمه وزمنه، وخط الزمن الذي يظهر ما يعطل الرسم والمهام الطويلة.
WebPageTest: يتيح اختبار من مواقع وأجهزة وسرعات شبكة مختلفة، ويعرض شلال الطلبات بالتفصيل.
محاكاة الأجهزة والشبكات البطيئة: جرب على معالج مخنوق وشبكة 4G بطيئة، فالمستخدم الحقيقي ليس على جهازك القوي.
مراقبة المستخدم الحقيقي (RUM): أدوات تجمع قياسات من زوارك الفعليين لتعرف الواقع عبر الأجهزة والمناطق.
ضع ميزانية أداء: حدًا أقصى لحجم الصفحة أو زمن التحميل، واجعل التكامل المستمر يحذر عند تجاوزه.
كرر القياس: النتائج تتفاوت بين مرة وأخرى، فخذ عدة قياسات وقارن المتوسطات قبل أن تستنتج.

كيف تحسن الصور والخطوط؟

الصور غالبًا أكبر جزء من وزن الصفحة، وتحسينها أعلى عائد:

الحجم المناسب: لا تحمل صورة 4000 بكسل لتعرضها بعرض 400. غيّر حجمها إلى ما يحتاج.
صيغ حديثة: WebP وAVIF تعطي عادة حجمًا أقل بجودة قريبة من JPEG وPNG، مع توفير بديل للمتصفحات التي لا تدعمها بحسب الحاجة.
الضغط: أدوات تقلل الحجم بخسارة غير ملحوظة، ويمكن أتمتتها عند البناء.
srcset وsizes: لتحميل نسخة أصغر على الجوال، كما في مقال التصميم المتجاوب.
التحميل الكسول: loading="lazy" للصور خارج الشاشة الأولى. وللصورة الرئيسة ذات الأولوية لا تؤخرها، بل أعطها أولوية.
حدد الأبعاد: عرض وارتفاع الصورة في HTML يحجز المساحة ويمنع قفزات التخطيط.
الأيقونات: SVG للأيقونات والرسوم البسيطة، فهي صغيرة وتتسع بلا فقد جودة.
الخطوط: قلل عدد الأوزان والأنماط، وحمّل ما تحتاج فقط (خطوط مجموعات فرعية)، واستعمل font-display: swap لعرض نص بخط بديل أثناء التحميل، وخزّنها محليًا بدل طلبها من أطراف كثيرة حيث تناسبك سياسة الخصوصية.
الفيديو: لا تشغله تلقائيًا بلا حاجة، واستعمل صورة معاينة وتحميلًا عند الطلب.

كيف تحسن الكود والتحميل؟

بعد الصور يأتي الكود، وما يعطل رسم الصفحة:

قلل جافاسكربت: أثقل ما في الصفحة غالبًا، لأن المتصفح يحمله ويحلله وينفذه. احذف ما لا تستعمل، وتجنب المكتبات الضخمة لمهمة صغيرة.
تقسيم الكود (Code splitting): حمّل ما يحتاجه الزائر في الصفحة الحالية فقط، وأجّل الباقي.
التأجيل (defer/async): حتى لا تعطل السكربتات قراءة الصفحة.
CSS الحرج: ضع الأنماط اللازمة للشاشة الأولى مباشرة وأجّل الباقي إن كان الحجم كبيرًا.
التصغير والضغط: صغّر الملفات عند البناء، وفعّل ضغط gzip أو Brotli على الخادم.
سكربتات الأطراف الثالثة: الإعلانات والتحليلات وأدوات الدردشة تبطئ الصفحات كثيرًا. راجع كل واحد: هل يستحق كلفته؟ وحمّله متأخرًا.
الاتصالات المسبقة: preconnect وpreload لموارد حرجة، باعتدال فالإفراط يعاكس الهدف.
المهام الطويلة: قسم العمليات الثقيلة في جافاسكربت، أو انقلها إلى Web Workers، ليبقى الواجهة مستجيبة.
الأطر: إن اخترت إطارًا فافهم تكلفته، وفكر في التصيير على الخادم أو التوليد المسبق للصفحات الثابتة.

كيف تحسن جانب الخادم والشبكة؟

أحيانًا تكون المشكلة قبل أن يصل أي شيء إلى المتصفح:

التخزين المؤقت (Caching): رؤوس Cache-Control المناسبة تجعل المتصفح لا يعيد تحميل الملفات الثابتة. استعمل أسماء ملفات ببصمة المحتوى لتتجدد عند التغيير.
شبكة توصيل المحتوى (CDN): تقدم ملفاتك من خوادم قريبة من الزائر، فتقلل الزمن وتخفف حمل الخادم. وكثير من المنصات تتضمنها.
قرب الخادم: اختر منطقة الاستضافة قريبة من جمهورك الرئيسي. وإن كان جمهورك في السعودية فالأقرب إقليميًا أنفع.
HTTP الحديث: HTTP/2 وHTTP/3 يحسنان تعدد الطلبات، وتوفرهما كثير من المزودين تلقائيًا.
استعلامات قاعدة البيانات: البطء في الخلفية كثيرًا ما يكون استعلامًا بلا فهرس أو نمط N+1 يكرر الاستعلام لكل عنصر. استعمل أداة تحليل الاستعلامات.
تخزين النتائج المؤقت على الخادم: Redis أو غيره للنتائج المكلفة المتكررة، مع سياسة لتحديثها.
تقليل حجم الاستجابات: أرجع الحقول اللازمة فقط من الواجهة البرمجية، ورقّم النتائج.
التحجيم: إن كان الضغط عاليًا فقد تحتاج موازنة حمل وأكثر من نسخة، لكن لا تبدأ به قبل أن تقيس الاختناق الفعلي.

ما الأخطاء الشائعة في تحسين الأداء؟

التحسين الخاطئ يضيع الوقت ويعقد الكود:

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

أسئلة شائعة عن سرعة المواقع

هل تؤثر السرعة في ظهور موقعي في البحث؟

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

ما أول شيء أفعله لموقع بطيء؟

شغّل Lighthouse أو WebPageTest وانظر أكبر الملفات وأبطأ الطلبات. وغالبًا تكون الصور غير المحسنة والسكربتات الثقيلة أول المتهمين.

هل أحتاج CDN لموقع صغير؟

ليس ضرورة قصوى، لكن كثيرًا من منصات الاستضافة تضمنه مجانًا. ويفيد خصوصًا لجمهور موزع جغرافيًا ولملفات ثابتة كثيرة.