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

في الحلقة الأولى من هذه السلسلة ،  سأشرح ما يمكن تحسينه في الواجهة Front-End لتحسين أداء و سرعة الموقع ، هذه هي الأمور الأساسية العامة التي قد تلائم أي موقع شخصي أو تجاري ، صغير أو ضخم ، هذه مبادئ معروفة و يمكن تطبيقها بكل سهولة من قبل أي صاحب موقع ، تحتاج إلى خبرات بسيطة بالـ HTML و CSS و الجافا سكربت و فهم بسيط لطريقة عمل مواقع الويب.

الجزء الأول : الواجهة Front-End:

لعل ما سأطرحه في هذا الجزء يبدو بديهياً للغالبية العظمى من المصممين و المطورين ، ولكن للأسف يستهين الكثير منهم في هذه الأمور على إعتبار انها أمور بسيطة و صغيرة و لا تخلق الفارق الواضح خاصة للمواقع التي تعاني من مشاكل كبيرة في السرعة و الأداء. هذا صحيح اذا اخذنا كل من هذه التحسينات على حدة ، و لكن بتطبيقها مجتمعة بالشكل الصحيح قد تخلق فارق رهيب في السرعة و الأداء. معظم ما سأذكره هنا ذكر في عدة كتب أجنبية أشهرها كتاب High Performance Websites وهو الكتاب الذي أنصح بإقتنائه لمصممي واجهات المواقع و الذين يتعاملون مع CSS , HTML , JS بكثرة.

أولاً : قلل من استدعاءات العناصر HTTP Requests

عند زيارتك لهذه الصفحة ، فأن السيرفر سيرد عليك بشيفرة الـ HTML فقط التي تتكون منها هذه الصفحة. لن يرسل لك أي ملفات CSS او جافا سكربت أو صور أو فلاش ، ما يحدث هو أن المتصفح الذي تستخدمه (كروم ، فايرفوكس ، إنترنت إكسبلورر … الخ) يقوم بمعالجة الصفحة و عندما يصل إلى سطر يتطلب عرض صورة مثلاً فأنه يعيد فتح قناة إتصال مع السيرفر عبر بروتوكول HTTP و يطلب منه إرسال تلك الصورة. ثم يواصل المتصفح معالجة الصفحة و في أي وقت يصل إلى عنصر خارجي (صورة ، CSS ، جافا سكربت ، فلاش أو غيرها) يقوم بطلب ذلك HTTP Request و يواصل تحليل الصفحة و من ثم عرضها .

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

الحل : قلل من العناصر الموجودة في الصفحة قدر الإمكان و إليك بعض التلميحات التي قد تساعدك على إتخاذ خطوة كهذه:

– استخدم صور أقل : اذا كان هناك صور و أيقونات و خلفيات لا تحتاجها في موقعك أو يمكن أن تستخدم بدلاً منها تأثيرات الـ CSS .

– ادمج ملفات الجافا سكربت أو CSS : لأغراض تنظيمية ، قد يحبذ المصممون أن يضغوا أكواد التنسيق CSS و الجافا سكربت في عدد كبير من الملفات ، هذا جيد من ناحية تنظيمية ، ولكن كثرتها سيجعل عدد الإستدعاءات أكثر ، لذلك حاول أن تدمج قدر المستطاع ملفات الـ CSS في ملف واحد أو إثنين كحد أقصى ، و كذلك ملفات الجافا سكربت.

– إستخدم الـ Sprite : تقنية السبرايت ببساطة تسمح لك بوضع جميع الصور المشتركة في موقعك ، مثل صور شريط التصفح و الشعار و الخلفيات و الأيقونات الرمزية ، تسمح لك بوضعها في صورة واحدة كبيرة ، و من ثم بإستخدام الـ CSS تستطيع أن تقطع هذه الصورة على جهاز الزائر Client Side و تعرضها مباشرة. ما الفائدة ؟ تخيل لو كان لديك : شعار + 6 أيقونات رمزية صغيرة + صورتين لخلفيات الجداول = 9 صور ، الآن بدلاً من إنشاء 9 إستدعاءات لجلب هذه الصور أنت ستقوم بإستدعاء واحد لجلب الصورة الكبيرة و يتولى الـ CSS تقطيعها و عرضها.

ثانياً : نصائح لملفات الجافا سكربت و الـ CSS

هناك مجموعة متفرقة من النصائح البسيطة التي تساهم في تحسين أداء الموقع و تتعلق بالجافا سكربت و الـ CSS سأذكرها تحت هذا البند :

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

– ضع ملفات الـ CSS في أعلى الصفحة ، و ملفات الجافا سكربت في أسفل الصفحة : السبب وراء ذلك ببساطة هو أن المتصفحات تقوم بعرض الصفحة بشكل أسرع اذا توفرت لها كافة ملفات التنسيق من البداية ، و ذلك لكي تتجنب إعادة تنسيق الصفحة من جديد ، هذا هو سبب أفضلية وضع ملفات الـ CSS في الأعلى. أما لماذا ملفات الجافا سكربت في الأسفل، فأيضاً لأن المتصفحات يمكنها القيام بطلبين HTTP Requests في نفس الوقت ، و لكن اذا كان الأمر يتعلق بملف جافا سكربت ، فالمتصفح لن يقوم بجلب أي عنصر آخر معه حتى ينتهي منه !

– تجنب وضع الـ CSS و الجافا سكربت في سطور الـ HTML : أو ما يعرف بـ Inline CSS & Javascript . ضع أي أكواد خاصة بهاتين التقنيتين في ملفات منفصلة و ذلك لكي تستفيد من عملية التخزين المؤقت Caching التي توفرها المتصفحات. فهذه العناصر اذا كانت مخزنة في ملفات فسيتمكن متصفح الزائر من تخزينها في الملفات المؤقته و من ثم إستخدامها بدلاً من أن يجلبها كل مرة.

ثالثاً : استخدم شبكات تخزين المحتوى

شبكات تخزين / توصيل المحتوى CDN ، هي خدمات خاصة تقدم لك إمكانية استضافة كافة الملفات الساكنة Static لموقعك بحيث تتكفل هي بإيصالها للزائر بدلاً من أن يكون الحمل على سيرفر موقعك. فمثلاً يمكن أن تضع كافة ملفات الـ CSS و الجافا سكربت و الصور و الفيديو و ملفات الـ PDF و أي ملفات أخرى على شبكة تخزين محتوى و تعدل الروابط في موقع لتشير إلى عناوينها الجديدة. بالتالي أنت توفر على السيرفر عدد الإستدعاءات التي سيتكفل بالرد عليها ، كما أنك تستفيد من الخصائص المذهلة التي تقدمها شبكات تخزين المحتوى مثل التخزين المؤقت على البروكسي Proxy Caching و نشر نسخ من المحتوى في مناطق جغرافية مختلفة حول العالم مما يساهم بسرعة إيصال المحتوى بشكل أكبر من سيرفر موقعك !

ليس ذلك فحسب ، تذكر ما قلته في النقطة الأولى ، المتصفح يقوم بجلب الصور و كافة العناصر واحدة تلو الأخرى (أو عنصرين بالتزامن كحد أقصى) ، هذا صحيح اذا كان الطلب من نطاق واحد www.yoursite.com ، و لكن اذا كانت البيانات مخزنة في أكثر نطاق (وهذا ما تقوم به شبكات تخزين المحتوى) فإن المتصفح سيكون قادراً على جلب أكبر قدر ممكن من العناصر في نفس الوقت .

من أشهر خدمات تخزين المحتوى : أمازون S3 و خدمة NetDNA

رابعاً : معالجة الصور

بشكل عام فإن الصور هي عادة ما تكون أكبر العناصر في أي موقع ويب ، لذلك فإن معالجتها و التقليل من حجمها هو أمر بالغ الأهمية. حينما يتعلق الأمر بصفحة ويب ، فإن دقة الصور لا تكون ذات أهمية قصوى و يمكن بتقليل الدقة بنسبة 10 % تقليل حجم الصورة بنسبة 60 % أو أكثر . إليك هذا المثال من برنامج Paint.NET :

لاحظ في الصورة الأولى كيف أن حجم الملف أساساً هو 131.5 كيلو بايت ، بينما اذا قللنا جودة الصورة بنسبة 10 % وهو ما لا يترك أي أثر نهائياً على دقة الصورة وجودتها ، فإن حجم الصورة يقل إلى 54 كيلو بايت تقريباً ، أقل بـحوالي 60 % ، الآن راجع ملفات و صور موقعك و شاهد كيف يمكنك تقليل أحجامها دون المساس بدقتها.

نصيحة إضافية في هذا المجال ، للصور ذات الطابع الفوتوغرافي (الصور الحقيقية) أختر صيغة JPEG . أما للصور المرسومة بإستخدام الكمبيوتر ، فيفضل أن تكون الصيغة PNG او GIF :)

خامساً : التحميل الديناميكي للعناصر

هل تؤدي أحد الصفحات في موقعك مهام متعددة و يختلف شكلها أو محتواها وفقاً لطريقة إستخدام الزائر لها ، لا داعي إذاً لتحميل كافة ملفات الجافا سكربت و الـ CSS الخاصة بكل إحتمالات الإستخدام. قم بتحميل الملفات التي تحتاجها الصفحة لتظهر بالشكل الإفتراضي ، و من ثم قم “بذكاء” بإستدعاء مسبق Pre-load لأي عنصر جديد يتوقع أن المستخدم مقبل على إستخدامه. مثلاً اذا كان هناك ملف جافا سكربت يتاجه مربع محرك البحث ، فلماذا تقوم بتحميله في الصفحة من البداية ، أطلب تحميله من السيرفر بمجرد أن يمرر المستخدم الماوس فوق مربع البحث ، هذا يعني ان المستخدم على وشك استخدام مربع البحث على الغالب :)

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

سادساً : استغل جهاز المستخدم

الحواسيب الحديثة الآن تتمتع بقدرات معالجة عالية جداً و معالجة صفحة ويب قد لا يستهلك سوى 5 % من قدرات المعالج أو الذاكرة ، اذا لماذا لا تخفف الحمل على السيرفر بتحويل بعض عمليات المعالجة إلى واجهة المستخدم ، فتكون Client Side بدلاً من أن تكون Server Side . هذه أمثلة على بعض ما يمكنك القيام به :

– التحقق من إدخالات النماذج و معالجتها و التأكد من صحتها

– رسم الرسوم البيانية و ذلك بإستقبال المعلومات من السيرفر بصيغة XML او JSON و استغلال إمكانيات الجافا سكربت و الـ CSS للرسم و معالجة البيانات ، يمكنك إستخدام Processing أو D3 أو Flot لهذا الغرض

– الأجاكس AJAX هي أحد أشكال المعالجة على جهاز المستخدم

سابعاً : استخدم أدوات التحليل

هناك بعض البرامج و الإضافات التي يمكنك استخدامها لتحليل طبيعة تحميل العناصر و المشاكل التي تعتريها في موقعك. إليك بعضها:

– موقع Cuzillion : يستخدم لتحليل هيكلة الموقع و توقع الوقت اللازم لتحميله في حال إستخدام هذه الهيكلة. موقع بسيط و لكنه مفيد.

– إضافة Firebug : تستخدم لتحليل الصفحة و معرفة مشاكل الأكواد الخاصة بها ، أداة لا غنى عنها

– إضافة YSlow : إضافة مفيدة لفحص أي صفحة في موقعك و معرفة مستواها مقارنة بمجموعة من القوانين الخاصة بتحسين أداء الصفحة ، إضافة يجب إستخدامها :)

– موقع WPT: يمكنك إستخدام هذا الموقع لمعرفة مشاكل تصفح و تحميل موقعك من أي متصفح (حتى على الأجهزة المحمولة) و في أماكن متفرقة من العالم و حسب سرعات الإنترنت المختلفة و إعدادات التصفح المختلفة. رائع !

– أداة DynaTrace : أداة رائعة و متطورة تمنحك تفاصيل دقيقة عن أداء موقعك ، بمجرد التصفح ستجمع الأداءة الكثير من البيانات حول محتويات الصفحة و تظهر لك مستوى الأداء و النصائح لتطوير و تحسين سرعة الموقع و أداءه.

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

الموضوع القادم …

الموضوع القادم في هذه السلسلة سيكون عن : خادم الويب Web Servers و ما هي الأمور التي يمكن تغييرها لتحسين أداء و سرعة الموقع من خلال إعداداته و الإضافات الخاصة به.