5 أخطاء تدمر أداء موقعك على الجوال (وحلولها الفعلية)

53% من زوار الجوال بيتركوا الموقع لو ما فتح بثلاث ثواني. هاي مش نظرية — هاي تجربة بنشوفها يومياً بمشاريع عملائنا. بهالمقال، بشاركلك أهم 5 أخطاء بنكتشفها وبنصلحها مع حلول فعلية.

الخطأ الأول: صور كبيرة بدون ضغط. صورة PNG حجمها 2 ميجابايت ممكن تضغطها لـ 50 كيلوبايت بصيغة WebP من غير فرق بالعين. الحل: دائماً استخدم صيغ حديثة مثل WebP أو AVIF مع أحجام مختلفة لكل شاشة (responsive images).

الخطأ الثاني: تحميل كل المحتوى بوقت واحد. لو صفحتك فيها 10 صور و5 ملفات CSS و3 خطوط، الجوال رح يحتاج يحمل كل شي قبل ما يوريك شي. الحل: استخدم Lazy Loading — المحتوى بتحمّل لما المستخدم يقعد يقرب منه بس.

الخطأ الثالث: خطوط ثقيلة. خط عربي واحد بوزن عادي ممكن يكون 150 كيلوبايت. لو حمّلت 6 أوزان مختلفة، صار عندك 900 كيلوبايت خطوط لحالها. الحل: خذ وزنين أو ثلاثة فقط (عادي، متوسط، عريض).

الخطأ الرابع: JavaScript كبير. ملفات JS الكبيرة بقتل أداء الجوال لأنو المعالج لازم يفسّر كل كود قبل ما يورّي الصفحة. الحل: استخدم Dynamic Imports و Code Splitting عشان تحمّل بس اللي المستخدم محتاجه حالياً.

الخطأ الخامس: ما فيه caching. لو كل مرة العميل يفتح موقعك لازم يحمل كل شي من جديد، رح يمل ويروح. الحل: استخدم Service Workers و Cache API عشان يحفظ الملفات المهمة محلياً بالجوال.

في كاتبي، كل مشروع قبل ما نسلمه بنفحص أداءه ع أدوات مثل Lighthouse و PageSpeed Insights. ونتيجتنا دائماً 90+ على الجوال باستخدام Next.js و Vercel.