إتصل بنا

الاسم

بريد إلكتروني *

رسالة *

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

| 24 تعليق

جاء قبل خمسة أشهر تقريبا من الآن في المدونة الرسمية لمطوري غوغل مشرفي المواقع 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 .
مساحة إعلانية

تعليقات بلوجر

  1. مقال رائع واحترافي
    http://alwerdany.blogspot.com/

    ردحذف
  2. تميز كبير
    وفقك الله لكل خير ونفع بعملك الجميع يا أفضل شريك لي في الإنترنت

    ردحذف
  3. Excellent tips….I’ve heard of some of them, but you have a lot of them! Thanks!

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

    ردحذف
  5. نسيت ان أهنئك اخي عاشق على النطاق الرائع للموقع هنيئا لك

    ردحذف
  6. مشكورين إخواني ، بارك الله فيكم

    ردحذف
  7. السلام عليكم ورحمه الله وبركاته

    اولا شكرا اخي عاشق النت علي ماتقدمه لنا
    ثانيا:مبروك علي الدومين الجديد
    ثالثا:شكرا جدا علي ردك علي استفساري السابق عن القالب الخاص بك
    رابعا:اريد منك تصميم قالب مدفوع لي بهذه الامكانيات
    ومنتظر التواصل معك لنتفق علي المبلغ وعلي التصميم
    alfares6455@gmail.com للتراسل

    r.abozyad@yahoo.com للدردشه

    منتظر ردك يالغالي

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

      حذف
  8. شكرا اخي علي اهتمامك ربنا يعينك ويقويك ومنتظرك لما تكون جاهز
    بالنسبه لقالب الحالي وجدت به بعض المشكلات حيث لا يظهر ترتيب الرسائل كما بمدونتك ولا يوجد عن المؤلف

    واريد عمل ميتاتاج لهذا القالب حيث انك لم تشرحها بموضوعك

    شكرا اخي اريد التواصل معك ونكون اصدقاء

    بالتوفيق

    ردحذف
    الردود
    1. بالنسبة لترتيب الرسائل ، عليك أن تذهب إلى لوحة التحكمتخطيط إبحث عن الأداة الكبيرة ( رسائل المدونة الإلكترونية ) و أضغط على تحرير ستظهر نافذة بها العديد من الإختيارات ، عليك تعطيل خيار التواريخ و ستظهر المدونة عادية .
      و للتواصل أخي هذا إيميلي contact@3asq-net.com

      حذف
  9. يا عاشق النت انا عاوز اميلك للتواصل المباشر معاك

    ردحذف
    الردود
    1. هذا الإيميل أخي : contact@3asq-net.com ، قد لا أكون متصلا على النت بكثرة هذه الأيام ، يمكنك إرسال طلباتك و سأجيبك في أي وقت أخي

      حذف
  10. شكرا اخي بارك الله فيك

    ردحذف
  11. مشكور اخي لكن الموقع الاول لتحويل الصور زاد في حجم الصورة !!

    ردحذف
  12. السلام عليكم ورحمة الله وبركاته
    مقال مميز أخي الفاضل
    شكراًلك

    ردحذف
  13. شكرا على التدوينة رائعة فعلا
    http://learn-price-action.blogspot.com

    ردحذف
  14. تدوينة رائعة :

    أرجوا زيارة مدونتي : rib7i.blogspot.com

    ردحذف
  15. جميل جدا شكرا لك

    الفرسان تو داى
    http://alfrsan2day.blogspot.com/

    ردحذف
  16. شكرااا

    zoom-unlimit.blogspot.com

    ردحذف
  17. ممتاز اخي الكريم جزاك الله خير علي مجهودك مع جزيل الشكر والتقدير

    ردحذف
  18. مدونة رائعة مقال اكثر من رائع
    سلمت يداك :)

    ردحذف

  19. جزاك الله خيرا اخى على الموضوع الجميل
    نفعنا الله واياك بكل خير ونفع بنا العباد

    تحياتى لجهدك الطيب

    http://shomane.blogspot.com/
    http://12abjdhoaz.blogspot.com

    ردحذف
  20. http://12abjdhoaz.blogspot.com/

    صورمشبات وديكورات مشبات ومشبات اكبر موقع بالسعوديه وتجدون جميع الصور نتميز بالدقه فى اعمال مشبات الرخام والحجر والطوب
    http://abjdhoaz90.xtgem.com/
    مشبات ,صورمشبات . ديكورات مشبات . صور مشبات



    http://shomane.blogspot.com/

    مشبات صور مشبات

    ردحذف

لإدخال الأكواد بالتعليقات عليك تحويلها بـأداة ترميز أحرف HTML الخاصة