FullStackإعدادات و مكتبات

لماذا يهمنا تحسين أداء الويب وما الذي يمكنك فعله

كتب بواسطة: 28/10/2019 لا يوجد تعليقات

Linda Ikechukwu

يشير أداء الويب إلى معدل سرعة تحميل صفحة الويب وعرضها في متصفح المستخدم.

يشير تحسين أداء الويب من ناحية أخرى إلى عملية تحليل أداء صفحات الويب وتحديد طرق تحسينه.

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

C:\Users\nz199\Desktop\1_qyeuHuU7TnwnV2svtHAlMQ.gif
ما الذي يهمني؟

حسناً، لدي أخبار لك. إنها مهمة لك.

لماذا يهم أداء الويب؟

الاحتفاظ بالمستخدمين وتعزيز تجربة المستخدم:

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

زيادة الإيرادات (Revenue):

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

تعزيز (SEO ( Search Engine optimization وتعني تحسين محرك البحث

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

ما الذي يمكنني فعله؟

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

1. فكر أولاً:

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

تنطبق هذه القاعدة أيضا على الصور، وبعبارة أخرى يجب أن يبقى في محتوى الويب ما هو ضروري جداً.

2. تصغير أصول النص (HTML/CSS/JS):

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

يقلل تصغير أصول النص من حجم الملفات، وبالتالي تقليل ما يجب على المتصفح تحميله من أجل جعل الصفحة جاهزة. وهذا يؤدي إلى استجابة أسرع ووقت تحميل أقل.

هناك العديد من الادوات التي يمكنك استخدامها لتقليل حجم أصول النص المختلفة مثل: 

HTML : HTML Minifier

CSS : CSSNano , CSSO

JAVASCRIPT : UglifyJS

لجعل العملية أتوماتيكية، يمكن استخدام أداة مثل :Gulp

استخدام أداة الgulp من شأنه تقليل ملفات html و css و js وتخزين الإصدار المصغر في مجلد  dist

إذا لم تكن على دراية بأداة Gulp اقرأ هذا المقال العظيم عنها.

3. تحسين الصور:

يتضمن تحسين الصورة عرض الصور بأقل حجم ممكن مع الحفاظ على الجودة والحجم والدقة والشكل المناسب.

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

هناك أداوت مختلفة (مجانية ومدفوعة) يمكنها تحسين الصور. بعض مما أفضل استخدامه:

  1. ImageOptim
  2. ImageKit
  3. FileOptimizer
  4. ImageMagick
  5. Imagemin

يمكن أن تكون العملية أوتوماتيكية باستخدام gulp-imagemin plugin. قم بتثبيت الملفات المعتمدة عليها، ثم قم بكتابة الكود.

تصغير حجم ملفات  png, jpg, svg و gifعن طريق الgulp

مرة أخرى، إذا لم تكون على دراية بأداة الgulp، قم بقراءة هذا المقال العظيم عنها.

4. التخزين المؤقت ل (HTTP (HTTP caching:

التخزين المؤقت في هذا السياق يشير إلى تخزين المتصفح للبيانات ( مثل: الصور، CSS، JS). بحيث يتم جلب البيانات الطلبات المستقبلية مباشرة من المتصفح دون إعادة تحميلها وجلبها من السيرفر أو الخادم. عدد تحميلات أقل يؤدي إلى موقع أسرع.

يمكن تطبيق عملية التخزين المؤقت (HTTP caching) بواسطة Cache-Control header الذي يحدد سياسات التخزين المؤقت للمتصفح. وكذلك مع كل HTTP Cache Headers المتاحة.

أنواع متعددة من الملفات يمكن تخزينها مؤقتاً منها HTML, CSS, JavaScript ، الخطوط، الصور والأيقونات. يمكن وضع الكود في ملف htaccess. أو في الأباتشي (Apache) في ملف httpd.conf.

لمزيد من الاطلاع، اقرأ المقالة، تحسين الصفحات باستخدام HTTP caching.

ماذا بعد ذلك؟

إذا قمت بتنفيذ النصائح المذكورة أعلاه بنجاح، يجب أن تكافئ نفسك بكوب من كريمة لاتيه 😉. لا تسترخي بعد، هناك شيء آخر يجب فعله.

الاختبار والتحليل:

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

هناك العديد من الأدوات ( تتفاوت بين تطبيقات على الانترنت، أو إضافات على المتصفح، أو أدوات نظام) يمكن استخدامها لتدقيق الموقع. لننظر إلى بعض منهم ونتعرف على إمكانياتهم.

Lighthouse : هو أداة على متصفح chrome يمكن تشغيلها عن طريق إضافة الأداة، والنظر إلى نافذة أدوات المطور في Chrome أو عن طريق شاشة الأوامر (command line).

PageSpeed Insights : هي إحدى خدمات Google  للويب، والتي تحلل محتوى الصفحة، وتنشئ مقترحات لكيفية جعل تحميل الصفحة أسرع. ما عليك سوى كتابة ال URL في خانة الإدخال التي يتم تزويدك بها، ثم تضغط على تحليل (analyze)، وستنشئ لك تقريراً عن موقعك.

WebPageTest : هذه أداة على الانترنت، تقوم بتشغيل اختبار سرعة الموقع، من مواقع متعددة حول العالم، باستخدام المتصفحات الحقيقية (IE وChrome)، وبسرعات اتصال حقيقية.

SiteSpeed.io: هي مجموعة من أدوات مفتوحة المصدر، تقوم باختبار مواقع الويب باستخدام متصفحات حقيقية ومحاكاة اتصال المستخدمين الحقيقيين وجمع مقاييس مركزية مهمة للمستخدم مثل مؤشر السرعة (Speed Index) وأول تجسيد مرئي (First Visual Render).

أحد الأشياء التي يجب معرفتها هو أن تحسين أداء الويب فن وليس علم. لا يوجد طريق محددة لتنفيذه. لذلك، ابدأ بتحسين مواقعك وأنت تستمتع في ذلك (إذا كنت تستطيع 💁).

اترك تعليق