الخط الخفي الذي أبطأ موقعنا على الجوال 1.3 ثانية

سرعة الجوال عامل ترتيب وعامل تحويل. حين يكون ~95% من زوّارك على الهواتف، فإن بطء أول رسم يكلّفك مبيعات وترتيبًا في Google بصمت. وكان موقعنا بطيئًا — والسبب شبه خفيّ. أشار Google PageSpeed Insights إلى طلبٍ يحجب العرض بتكلفة نحو 1320 مللي ثانية. المتسبّب: سطر واحد في ملف الأنماط العام يستورد خطّ أيقونات من Google Fonts. ولأنه كان @import في أعلى ملف CSS، رفض المتصفح رسم أي شيء حتى يكتمل تنزيل ملف الخط — في كل صفحة وعلى كل هاتف. والأسوأ أننا بالكاد نستخدمه. أيقونة قائمة واحدة كانت تعتمد على ذلك الخط بالكامل. فحذفنا الاستيراد، واستبدلنا الأيقونة بأيقونة SVG مضمّنة خفيفة، فاختفى الطلب الحاجب للعرض، وانخفض مؤشّر LCP فورًا. وأثناء ذلك وجدنا المزيد: حشوات JavaScript قديمة تُرسَل لهواتف حديثة (أصلحناها باستهداف متصفحات حديثة عبر browserslist)، وملف CSS غير مستخدم يُحمَّل في كل الموقع (قصرناه على الصفحة التي تحتاجه فقط). كيف تُصلح بطء التحميل على الجوال في موقعك: 1. شغّل PageSpeed Insights (تبويب الجوال) واقرأ قسمي «الطلبات الحاجبة للعرض» و«تقليل CSS/JavaScript غير المستخدم». 2. احذف @import الحاجب لخطوط الويب. استضِف الخطوط ذاتيًا، أو استبدل خطوط الأيقونات بـ SVG مضمّن. 3. استهدف المتصفحات الحديثة كي يتوقف بناؤك عن إرسال حشوات لا يحتاجها أحد. 4. أجّل بيكسلات الطرف الثالث (الإعلانات والتحليلات) إلى وقت الخمول كي لا تحجب أول رسم. 5. في EYE راقب «سرعة الصفحة» و«مدى القراءة» للتأكد أن الزوّار الحقيقيين صاروا أسرع بعد كل تغيير. أكبر مكاسب السرعة عادةً سطر أو سطران خفيّان. قِس، أزِل الحاجب، ثم أعِد القياس.