طرق تحسين سرعة تحميل تطبيق منشور على الإنترنت

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

لماذا يغادر الزائر قبل أن تكتمل صفحتك؟

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

الأمر لا يتوقف عند المغادرة. دراسة Deloitte المعروفة باسم «Milliseconds Make Millions» الصادرة عام 2020 وجدت أن تحسين سرعة مواقع الجوال بعُشر ثانية فقط رفع معدل التحويل في متاجر التجزئة بنحو 8.4%. عُشر ثانية! رقم يصعب تصديقه حتى تراه في لوحة مبيعاتك.

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

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

وللأمر جانب يخص الظهور في البحث. تعتمد Google مؤشرات «Core Web Vitals» ضمن إشارات الترتيب، فالتطبيق البطيء يُعاقَب مرتين: في تجربة الزائر، وفي النتائج. السرعة جزء أصيل من تجربة المستخدم في تطبيق الويب، وليست تفصيلاً تقنياً تتركه للنهاية.

كيف تقيس سرعة تحميل تطبيقك المنشور بدقة؟

افتح أداة PageSpeed Insights المجانية من Google، والصق رابط تطبيقك، وركّز على نتيجة الجوال لا الحاسوب. راقب ثلاثة مؤشرات: LCP ويجب أن يكون 2.5 ثانية أو أقل، وINP تحت 200 ملّي ثانية، وCLS أقل من 0.1. هذه هي الحدود التي تصنّفها Google رسمياً على أنها «جيدة».

دعني أبسّط هذه الاختصارات. LCP يقيس متى يظهر أكبر عنصر في الشاشة، كصورة الغلاف أو العنوان الرئيسي. INP يقيس سرعة استجابة التطبيق حين يضغط الزائر زراً، وقد حلّ محل المؤشر القديم FID منذ مارس 2024. أما CLS فيقيس «قفز» المحتوى أثناء التحميل، تلك اللحظة المزعجة حين تهمّ بالضغط على زر فينزاح فجأة.

قبل أن تغيّر أي شيء، اتبع هذه الخطوات:

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

نصيحة من التجربة: لا تطارد الدرجة 100. رأيت أصحاب مشاريع يضيّعون أسابيع للانتقال من 88 إلى 97، بينما صفحة الدفع عندهم تستغرق سبع ثوانٍ. انتبه أيضاً إلى الفرق بين «بيانات المختبر» و«بيانات المستخدمين الحقيقيين» في أعلى التقرير. الثانية هي التي تعتمد عليها Google فعلاً، لكنها لا تظهر إلا إذا كان لتطبيقك عدد كافٍ من الزوار.

الصور: أسرع مكسب بأقل مجهود

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

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

ما الذي تفعله عملياً؟

• غيّر الصيغة: استخدم WebP أو AVIF بدل JPEG وPNG. الحجم ينخفض كثيراً دون فرق تلاحظه العين.
• صغّر الأبعاد: عرض 1600 بكسل كافٍ لصور الغلاف، وأقل من ذلك لصور المنتجات.
• استعمل أداة مجانية: موقع Squoosh من Google يضغط الصورة داخل المتصفح ويعرض المقارنة قبل وبعد.
• أجّل الصور البعيدة: خاصية التحميل الكسول (lazy loading) تؤخر الصور أسفل الصفحة حتى يقترب الزائر منها.

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

أمر أخير: حدّد عرض الصورة وارتفاعها دائماً. حين يعرف المتصفح المساحة مسبقاً يحجزها، فلا يقفز النص، ويتحسن مؤشر CLS دون جهد إضافي.

الاستضافة وموقع الخادم: المسافة تصنع الفرق

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

الخبر الجيد أن الخليج صار مخدوماً جيداً بمراكز البيانات. افتتحت أمازون AWS منطقة في البحرين عام 2019، ثم منطقة في الإمارات عام 2022. ولدى Google Cloud مناطق في الدمام والدوحة. يعني ذلك أن تطبيقك يمكن أن يعمل على بُعد مئات الكيلومترات من عملائك، لا آلاف.

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

اسأل مزوّد الاستضافة قبل الدفع:

• في أي مدينة يقع الخادم فعلياً؟
• هل التوسع تلقائي حين يرتفع عدد الزوار في موسم رمضان أو الجمعة البيضاء؟
• هل شهادة SSL وضغط الملفات مشمولان دون تكلفة إضافية؟

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

شبكة CDN والتخزين المؤقت: اجعل المحتوى قريباً من الجميع

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

أسهل بداية هي الخطة المجانية من Cloudflare. للشركة نقاط حضور في مدن خليجية مثل دبي والرياض وجدة، والإعداد لا يتجاوز تغيير إعدادات النطاق عند المسجّل. غالباً ينتهي الأمر في أقل من ساعة.

بعد التفعيل، راجع ثلاثة أمور:

• الضغط: فعّل Brotli أو Gzip لتقليص ملفات النصوص والأكواد.
• مدة التخزين المؤقت: الشعار والخطوط لا تتغير كثيراً، فاطلب من المتصفح الاحتفاظ بها أسابيع.
• HTTP/3: بروتوكول أحدث يحمّل عدة ملفات في الوقت نفسه بكفاءة أعلى.

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

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

الخطوط العربية والأكواد الخارجية: الوزن الخفي

هذا القسم خاص بنا كعرب. الخطوط العربية أثقل من اللاتينية بطبيعتها، لأنها تحتوي أشكالاً متعددة لكل حرف حسب موقعه في الكلمة.

الخطأ الشائع؟ تحميل ستة أوزان من الخط بينما التصميم يستخدم وزنين فقط. احذف الباقي. استخدم صيغة WOFF2 لأنها الأصغر، وأضف خاصية font-display: swap حتى يظهر النص فوراً بخط احتياطي ثم يتبدل عند اكتمال التحميل.

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

جرّب هذا التمرين: اسأل عن كل إضافة مثبتة متى استفدت منها آخر مرة. في مراجعة لمتجر إلكترونيات في الدوحة، وجدنا بكسلاً لحملة توقفت قبل سنة ونصف ما زال يُحمَّل في كل صفحة.

• اجمع أكواد التتبع داخل Google Tag Manager بدل تركها متفرقة.
• أجّل نافذة الدردشة حتى يتفاعل الزائر أو تمر بضع ثوانٍ.
• احذف أي إضافة لم تستخدمها منذ ثلاثة أشهر.

تجد قائمة أوسع من هذه الهفوات في مقال أخطاء شائعة عند بناء تطبيق ويب بلا كود.

قاعدة البيانات والصفحات الديناميكية

أحياناً تكون الواجهة خفيفة، لكن التطبيق يتأخر في جلب البيانات. يحدث هذا كثيراً في تطبيقات الحجوزات والمتاجر وأنظمة إدارة العملاء.

المثال الكلاسيكي: صفحة «كل المنتجات» تجلب 800 منتج دفعة واحدة. لا أحد يتصفح 800 منتج مرة واحدة. قسّم النتائج إلى صفحات من 20 أو 24 منتجاً، أو حمّل الدفعة التالية عند الوصول لأسفل الصفحة.

نقاط تستحق المراجعة حتى لو لم تكن مبرمجاً:

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

نصيحة توفر عليك الكثير: اختبر التطبيق بعد أن تتراكم فيه البيانات، لا وهو فارغ. تطبيق فيه عشرة طلبات تجريبية سيبدو سريعاً جداً، ثم يتباطأ بعد ستة أشهر حين تصل الطلبات إلى عشرات الآلاف. أدخل بيانات وهمية كثيرة واختبر قبل الإطلاق.

تحسّن بنفسك أم توظّف مطوراً أم تختار منصة؟

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

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

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

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

قبل الاشتراك، اطلب إجابات واضحة:

• هل شبكة CDN مشمولة في الباقة الأساسية؟
• هل تُحوّل الصور إلى WebP تلقائياً؟
• هل يمكنني قياس تطبيق حقيقي في PageSpeed Insights قبل الدفع؟

السؤال الأخير هو الأهم. لا تثق بوعود السرعة دون قياس. مع codeyy مثلاً، تتبع دليل إنشاء أول تطبيق، وتنشره، ثم تختبره في جلسة واحدة. قارن الأرقام بتطبيقك الحالي، ودع النتيجة تقرر.

خطة عملية تبدأ بها هذا الأسبوع

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

الأسئلة الشائعة

ما السرعة المقبولة لتحميل تطبيق ويب في السعودية والإمارات؟

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

هل تكفي خطة Cloudflare المجانية لمتجر إلكتروني صغير؟

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

كم تكلفة تحسين سرعة تطبيق منشور عبر مطور مستقل؟

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