سرعة الموقع على الهاتف: ما فعلته فعلاً لتحسين التجربة

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

الصور أولاً وأخيراً

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

أجّل ما ليس ضرورياً

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

الخطوط

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

احذر من تحرّك العناصر

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

قسّم الملفات

إذا كان لديك لوحات إدارية أو أدوات ثقيلة، لا سبب لتحميلها لكل زائر. تحميلها عند الطلب فقط يقلّل الملف الأول بشكل كبير، وهو أهم رقم على الهاتف.

كيف أقيس

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

خطة تحسين السرعة خطوة بخطوة

1. قِس أولاً: افتح PageSpeed Insights وسجّل LCP وCLS وINP لصفحتك الأهم.
2. حوّل الصور إلى WebP وقدّم نسخة صغيرة للهاتف (عرض 640 بكسل تقريباً) بدلاً من الصورة الكاملة.
3. حدد أبعاد كل صورة (width وheight) لمنع قفز المحتوى أثناء التحميل.
4. حمّل الصورة الأولى مبكراً واجعل بقية الصور تُحمّل عند الوصول إليها (lazy).
5. أجّل السكربتات غير الضرورية: التحليلات والإعلانات بعد ظهور المحتوى.
6. قلّل الخطوط إلى عائلة واحدة بوزنين أو ثلاثة، مستضافة على موقعك.
7. أعد القياس وقارن بالأرقام الأولى.

مثال من موقعنا

صور المقالات كانت تزن نحو 3 ميغابايت مجتمعة. بعد تحويلها إلى WebP وإنشاء نسخة 640 بكسل للهاتف، انخفض الحجم إلى نحو 0.55 ميغابايت، وصارت الصورة الأولى تظهر مباشرة بدل الانتظار. لم نغيّر التصميم ولا إطار العمل، فقط طريقة تقديم الصور وترتيب التحميل.

جدول مقارنة: أثر كل تحسين مقابل جهده

بعد التحسين، افحص الصفحة عبر فحص السيو للتأكد من أن العناوين والصور ما زالت سليمة.

الخلاصة

السرعة ليست مشروع شهر. هي عادة: كل مرة تضيف شيئاً للموقع، اسأل نفسك ما إذا كان يجب أن يحمّل الآن أو يمكن أن ينتظر. غالباً يمكنه الانتظار.