تسريع موقعك الإلكتروني: 5 نصائح جوهرية لتحسين الأداء وتجربة المستخدم

مقدمة: لماذا سرعة الموقع ضرورية؟

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

في هذا المقال، سأشارككم خلاصة ما تعلمته خلال رحلتي لتحقيق تقييم ممتاز (A grade) على أداة GTMetrix لموقع codedamn، وهي منصة مخصصة للمطورين لتعلم البرمجة بطريقة مبتكرة. لنبدأ!

1. ضغط الصور لتحسين الأداء

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

إليكم نظرة سريعة على مدى فعالية TinyPNG في توفير أكثر من 2 ميجابايت من حجم صورة عالية الدقة قمت بتحميلها على موقعهم:

الميزة الرائعة في TinyPNG هي أنها تتيح ضغط 500 صورة مجانًا شهريًا، مما يعني أن المواقع الصغيرة والمتوسطة يمكنها في معظم الأحيان البقاء ضمن هذه الحصة المجانية.

2. تجزئة الكود (Code Splitting) وتجزئة الحزم (Bundle Splitting)

تُعد تقنيات تجزئة الكود والحزم من الممارسات الأساسية لتحسين أداء تطبيقات الويب الحديثة:

• تجزئة الكود (Code Splitting)

  تعني تقسيم الكود البرمجي الخاص بك إلى أجزاء متعددة وتحميلها بشكل كسول (lazily loading) عند الحاجة إليها فقط. هذه التقنية ضرورية دائمًا لموقعك.

• تجزئة الحزم (Bundle Splitting)

  تشير إلى تقسيم الملفات الفردية الناتجة عن تجزئة الكود إلى حزم أصغر. هذا يحسن التخزين المؤقت في المتصفحات (browser caching) بالإضافة إلى التخزين المؤقت للتعليمات البرمجية (bytecode caching).

على الرغم من أن تجزئة الحزم قد تُنظر إليها أحيانًا على أنها تزيد من طلبات HTTP، إلا أن بروتوكول HTTP/2 له تأثير ضئيل أو معدوم على الطلبات المتعددة حتى يتم الوصول إلى حدود التزامن. ولحسن الحظ، فإن حدود التزامن عادة ما تكون في نطاق مئات الطلبات. لذا، إذا لم تكن تُجري مئات طلبات HTTP (وهو أمر غير مرجح لمعظم المواقع)، فستكون تجزئة الحزم خيارًا ممتازًا لك.

لتطبيق تجزئة الكود والحزم، تحتاج إلى دمج مشروعك مع حزمة تجميع الوحدات (module bundler) مثل Parcel أو Webpack. بمجرد تهيئتها بشكل صحيح، فإنها تعمل بكفاءة عالية، ويمكنها تقليل الحمل بشكل كبير على كل من الخادم ومتصفحات العملاء. تقوم هذه الأدوات بذلك عن طريق تخزين الموارد مؤقتًا وعدم تنزيل الموارد التي لا تحتاجها حاليًا – على سبيل المثال، لماذا سترسل الكود البرمجي لـ /about route عندما يكون المستخدم على /feedback route؟

يجب عليك أيضًا تصغير (minify) ملفات JS/CSS المُجمّعة. بالنسبة لـ Webpack، تتوفر إضافات مثل UglifyJS. يساعد هذا في تقليل الحجم عن طريق إزالة المسافات البيضاء، التعليقات، اختصار الكود، وما إلى ذلك، مما يقلل في النهاية من حجم المحتوى.

3. تجنب خدمات الاستضافة المشتركة (Shared Hosting)

إذا كنت مطورًا أو لديك فهم أساسي لكيفية التعامل مع سطر الأوامر (bash) قليلاً، فلا يوجد سبب يدعو لاستخدام خدمات الاستضافة المشتركة. في جميع الحالات تقريبًا، يمكنك إما استضافة أصولك الثابتة (static assets) مجانًا على مواقع مثل GitHub Pages، أو يمكنك اختيار خيارات أكثر تحكمًا مثل الاستضافة السحابية.

توفر جميع شركات الاستضافة السحابية تقريبًا مثل AWS، Google Cloud، و DigitalOcean الكثير من الأرصدة المجانية التي يمكنك استهلاك الكثير من خدماتهم مجانًا لفترة طويلة!

في بعض الحالات، قد تكون الاستضافة المشتركة أرخص من بدائل مثل استضافة DigitalOcean بقيمة 5 دولارات. ولكن هذه الخوادم لديها موارد محدودة للغاية مخصصة لموقعك، مما يقلل من الأداء العام للموقع. من بين هذه القيود نذكر بيئات Jailed shells، وحدات المعالجة المركزية المشتركة (shared vCPUs)، وذاكرة الوصول العشوائي المحدودة (limited RAM).

بصفتنا مطورين، نرغب دائمًا في أن نكون مسيطرين، والتوجه نحو نموذج البنية التحتية كخدمة (IaaS) أو المنصة كخدمة (PaaS) هو الحل الأمثل دائمًا. على الرغم من أنه يمكنك اختيار أي مزود سحابي تفضله، أوصي بـ DigitalOcean – وهو المزود الذي أستخدمه حاليًا لموقع codedamn. إنه سهل الإعداد للغاية، ويمكنك الحصول على أرصدة سحابية مجانية بقيمة 100 دولار من خلال هذا الرابط.

إن اختيار مزود سحابي يمكن أن يمنحك الموارد والبنية التحتية التي ستعزز أداء خادمك (وأداء موقعك) تلقائيًا بشكل ملحوظ.

4. ضبط رؤوس انتهاء صلاحية HTTP (HTTP Expiry Headers)

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

يجب عليك أيضًا تطبيق تقنية cache busting بشكل مناسب. مرة أخرى، بالنسبة لحزم تجميع الوحدات مثل Webpack، يمكنك تطبيق cache busting عن طريق تضمين [contenthash] في اسم الحزم التي تنتجها. يتطلب هذا أيضًا ألا يقوم المتصفح أبدًا بتخزين ملف index.html الخاص بك أو أي ملف HTML آخر تستخدمه كنقطة دخول لموقعك مؤقتًا. كيف يمكننا تحقيق ذلك؟

لخدمة الملفات الثابتة ورؤوس انتهاء صلاحية HTTP، استخدم NGiNX. يمكن لـ NGiNX إدارة كل هذه الأمور نيابة عنك. إليك نموذج تهيئة موصى به لضبط رؤوس انتهاء صلاحية HTTP:

تقوم هذه التهيئة ببساطة بإيقاف التخزين المؤقت لموارد text/html. أما بالنسبة للموارد الأخرى، فهي تحدد أقصى وقت ممكن يمكن للمتصفح الاحتفاظ بالتخزين المؤقت. لاحظ أن هذه التهيئة تعتمد بشكل كبير على حقيقة أن لديك آليات cache busting مطبقة في حزمة تجميع الوحدات الخاصة بك (مثل [contenthash] التي تحدثنا عنها أعلاه).

5. تفعيل ضغط Brotli

ضغط Brotli هو خوارزمية ضغط صممتها جوجل، وهي أكثر كفاءة بنسبة 20-25% من خوارزمية الضغط المعروفة GZIP. يمكن تطبيق ضغط Brotli على المواقع، مرة أخرى، باستخدام NGiNX.

دعنا نلقي نظرة على مثال لما يحدث عند تفعيل ضغط Brotli:

حجم الملف الأول هو 3.33 ميجابايت – بدون ضغط. عندما يتم ضغطه باستخدام Brotli – ينخفض الحجم إلى 572 كيلوبايت. وعندما يتم ضغطه باستخدام GZIP – ينخفض الحجم إلى 783 كيلوبايت فقط. يوفر Brotli أكثر من 200 كيلوبايت مقارنة بـ GZIP، وأكثر من 2.5 ميجابايت مقارنة بعدم الضغط على الإطلاق. وهذا لم يكن حتى في ذروة أدائه! إنها نسبة ضغط تتجاوز 82%! أمر مذهل حقًا.

الخلاصة التقنية

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