خطوات لزيادة سرعة تحميل موقعك / تقليل طلبات الـHTTP

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

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

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

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

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

تقليل طلبات الـHTTP

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

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

إستخدام خاصية linear Gradient .

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

مثال لخلفيات التدرج بالألوان

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

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

و البديل الذي أقترح إستخدامه لإنشاء الأزرار و خلفيات التدرج بالألوان هو إستخدام القيمة linear-gradient في خاصية background ، و هي قيمة حذيثة العهد لم يتم تعميمها بعد غير أنها تُستخدم كثيرا و هي تعمل على جميع المتصفحات ما عدا إنترنت إكسبلورر  ، تقوم هذه القيمة بإنشاء خلفية متدرجة بالألوان حيث نكتفي بإدخال لون الإنطلاق و لون الوصول مع توفر إمكانية تحديد نسب الألوان و إتجاه إنتشار التدرج ( من الأعلى إلى الأسفل - من اليمين إلى اليسار ... )

background: -webkit-linear-gradient( right, red, blue);
background: -moz-linear-gradient( right, red, blue);
background: -ms-linear-gradient( right, red, blue);
background: -o-linear-gradient( right, red, blue);
background: linear-gradient( to left, red, blue);

و النتيجة كما يلي :

تدرج من الأحمر إلى الأزرق إبتدائا من اليمين ، أو نحو اليسار ، هذا ما تقوله القيمة linear-gradient للمتصفح .

يمكن الإستعانة بمولد الخلفية المتدرجة على صفحة gradients.glrzad.com .

قد تبدوا غريبة هذه القيمة الجديدة و لكنها في الواقع تُستخدم في العديد من المواقع الكبرى ، نذكر منها Google.com ، فإن لاحظتم فإن أزرار غوغل تحتوي على تدرج خفيف للون الرمادي ، و هذا التدرج يتم عبر إستخدام القيمة linear-gradient نفسها .

فكما رأيتم ، توفر الـCSS 3 أدوات ذكية و خفيفة ، تتيح لنا إنشاء مواقع خفيفة و لا تحتوي على روابط جلب كثيرة مما يقلل من طلبات الـHTTP .

إستخدام الـCSS Image Spirites .

و كطريقة فعالة أخرى لتقليل طلبات الـHTTP يمكن الإعتماد على تقنية الـCSS Image Spirites ، هذه التقنية لا تستخدم خاصية CSS جديدة أو أي شيء من هذا القبيل ، بل إنها مجرد فكرة يتجلى مضمونها في دمج جميع صور الأيقونات المستخدمة في الموقع في صورة واحدة كبيرة ، و إظهارها على شكل أجزاء ( في الزر كذا يظهر الجزء الذي يحتوي على الأيقونة كذا ، و خلف النص كذا يظهر الجزء الذي يحتوي على الأيقونة كذا .... ) . فبهذه الطريقة نجمع جميع الأيقونات المستخدمة في صورة واحدة كبيرة بحيث عند تحميل الصفحة يقوم المتصفح بإرسال طلب HTTP واحد فقط ، و هو الخاص بجلب الصورة الكبيرة ، و باستخدام خاصية background-position يتم تحديد أجزاء الصورة في العناصر المناسبة لها  .

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

                      

ألا تذكركم هذه الأيقونات بشيء

فللتعمق قليلا في تقنية الـCSS Image Spirits ، و لمن يريد إتقان إستخدامها في موقعه إليكم الدرس الخفيف على موقع www.w3schools.com .

إستخدام بيانات الـData URI

كنت قد كتبتُ مقالا حول بيانات الـData URI لم يكثرث له إلا القليل ، و لكن ها أنا ذا أعيد إليه الإعتبار من جديد  .
الـData URI هي وسيلة لإدراج البيانات ضمنياً في صفحات الموقع بدلاً من استدعائها خارجياً. البيانات تشمل على سبيل المثال الصور، ملفات CSS، ملفات جافاسكربت ، و النصوص العادية أيضا ، فبدل جلب الملفات الخارجية التي يترتب عنها طلب HTTP يمكن ببساطة دمجها في كود الـHTML أو الـCSS الخاص بالموقع ، و هي خفيفة و سهلة .

على سبيل المثال الكود التالي :

data:text/plain;charset=utf-8;base64,2YXYsdit2KjYpw==

إن قمت بنسخ الكود السابق و لصقها في قائمة العناوين ( bare d'address ) في متصفحك ستشاهد نصا صغيرا : مرحبا  .

و يمكن إنشاء صفحات HTML كاملة و تحويلها إلى بيانات الـData URI ، و وضعها كقيمة لسمة href في الروابط ، لتحصل بذلك على صفحة جديد سريعة . على سبيل المثال : أزرار الـCSS 3 .

لقد وجهك الرابط أعلاه إلى صفحة جديد تم تحميلها في وقت قصير جدا ، و إن رأيت قيمة السمة href في الرابط السابق ستجد بيانات Data URI فقط .

<a href="data:text/html;charset=utf-8,PCFET0......==">أزرار الـCSS 3</a>

هذا و يمكن إستخدام هذه البيانات في تخزين الصور حيث يمكن إدخالها في سمة src الخاصة بالصور .

و لإنشاء هذه البيانات يمكن الإستعانة بالمواقع التالية :

• DataURLMaker ، خدمة على الويب تتيح تحويل الصور إلى بيانات URI باستخدام ترميز Base64، ووضعها تلقائياً في وسم <img>.
• data: URI Generator ، خدمة على الويب أيضاً. تقبل جميع أنواع الملفات وليست محددة بالصور.
• The data: URI kitchen ، خدمة أخرى على الويب، ولكن تتيح تحكم أكثر بنوع البيانات، على سبيل المثال، إدخال HTML والتحويل مباشرة.

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