للاسف هذه المدونة اصبحت ارشيف فقط، لمتابعة جديد مقالاتي يرجى زيارة موقعي الشخصي BassamShhadat.com

نصائح لزيادة سرعة تحميل صفحات الويب

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

الآن سأذكر بعض التقنيات و النصائح للوصول الى صفحات سريعة في التحميل و لكن أريد أن اؤكد أن هذه النصائح ليست هي كل شي فكفائة السيرفر الذي تستضيف عليه موقعك تلعب دور كبير أيضاً .

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

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

a:link
{
color: #ffffff;
background: #ff9900;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #99f #008 #008 #99f
}

a:hover
{
color: #ffffff;
background: #ffaa11;
text-decoration: none;
padding: 0.2em;
border: 4px solid;
border-color: #008 #99f #99f #008
}

استخدم الوسوم المختصرة قدر المستطاع
تحوي لغة CSS على وسوم لها اكثر من قيمة و منها margin و border يمكن أعطاء القيم في سطر واحد او اكثر و المثال سيوضح ذالك، و لكن البعض يعتقد أن هذا الحجم الذي سينقص ضئيل بحيث لا يعتبر و لكن تجمع البايتات يولد كيلو بايت و كله مفيد في النهاية

margin: 2px 1px 3px 4px (top, right, bottom, left)

أو تكتب بالطريقة التالية

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px;

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

ضع كود ال css و javascript في ملفات خارجية
و ذالك لما ذكرته مسبقاً عند استدعاء الملفات الخارجية في صفحة الويب يتم تخزين هذه الملفات في الكاش و تحفظ هنالك و تزيد من سرعة فتح الصفحات الأخرى التي أدرجت فيها هذه الملفات أيضاً

استخدم / في نهاية روابط المجلدات
عند طلب رابط لموقع معين مثلاً لا تستخدم هذا الشكل

<a href=”http://www.URL.com/directoryname”>

بل أستخدم هذا الشكل مع وضع / في نهاية العنوان

<a href=”http://www.URL.com/directoryname/”>

و السبب في ذالك هو أن السيرفر سيقوم بفحص الرابط هل هو لملف ام لمجلد عن وضع ال / تقوم بتوفير الوقت و أعلام السيرفر أنك تطلب مجلد

في تصميمك لموقعك لا تبتعد عن الجماليات فالجمال في تصميم الموقع يجذب الزائر إليك و لكن كن معتدلاً بين الجمال و الاضافات الجمالية لموقعك و بين أن يكون موقعك مناسباً للزوار ، إذا كنت تستخدم احصائيات لموقعك و انصحك بـ Google Analytics حاول أن تستقرء من الاحصائيات هل تصميم موقعك يناسب زواره أم لا ..

رابط متعلقة بالموضوع :
كتاب Speed Up Your Site
وصف لكتاب Speed Up Your Site و محتوياته
موقع لقياس سرعة موقعك و بيان أكثر الأشياء المدرجة في صفحتك ثقلاً .



10 تعليقات to “ “نصائح لزيادة سرعة تحميل صفحات الويب”

  1. موضوع مفيد
    شكرا لك على المعلومات القيمه

  2. يقول مؤيد:

    مقال مفيد فعلاً، شكراً لك على النصائح.
    بالنسبة للنقطة الثانية فمعك حق تماماً، إن أكثر ما يزعجني عند تصفح الويب هي عروض الفلاش و حجم الصور الكبيرة، و خاصةً مع الاتصال البطيء الذي أستخدمه لذلك أعتمد على إضافتين لفيرفوكس لتقليل هذا الإزعاج هما Flashblock للتحكم بعرض الفلاشات و ImgLikeOpera للتحكم بعرض الصور، إضافتين رائعتين أنصحك بتجبرتهما.
    بالنسبة للنقطتين الثالثة و الرابعة : أذكر أنه كان هناك برنامج ويب يقوم بهتين المهمتين لم أعد أجد عنوانه و لكني بحثت الآن فوجدت برنامج على العنوان
    http://mabblog.com/cssoptimizer/compress.html
    و هو يقوم بوظيفة ضغط ملفات الـCSS و هو مفيد فعلاً بعد التجربة.

  3. يقول zakwan:

    شكرا لك على المقال النافع..
    وأحب أن أعلق أن حتى Google Analytics يأخذ مزيدا من الوقت هذا ما لاحظته عند استخدامي لـ FireBug الذي يأتي كـAdd-ons للفيرفوكس..
    فائدتها هي معرفة حجم كل صورة أو فلاش أو ملف CSS أو JavaScript بل أيضا يحسب لك المدة المستغرقة في التحميل كل منها وعدد الـ Requests، وهذا غير ميزات أخرى مفيدة..
    أنصح بتجربته من على الرابطhttps://addons.mozilla.org/en-US/firefox/addon/1843
    وهنا تفاصيل أكثر http://www.getfirebug.com/

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

  5. شكرا اخي علي المقال الأكثر من رائع .. فعلا يحتاج الكثير من العرب لهذا المقال ..لان المواقع العربية أصبحت بطيئة جدا

    شكرا لك .. لو كان في وقتك سعة ..هل يمكن ان تشرح أساسيات في الcss ..لان أسلوبك في الشرح ممتاز جداا ..

    لدي صعوبة في كتابة لغة عربية Ùˆ انجليزية في نفس المقال علي البلوجر …
    http://anaas.blogspot.com/2007/04/blog-post_7768.html

    هل تعرف حل لهذه المشكلة ..؟

    بانتظار المزيد من ابداعك

  6. يقول RedMan:

    الحوراني : شكراً لمرورك أخي .

    مؤيد : انا استخدم برنامج Kaspersky Internet Security Ùˆ هو يقوم بمنع الصور Ùˆ الفلاشات التي تحتوي اعلانات فقط Ùˆ يترك الباقي ØŒ إذا كان الفلاش إعلاني يقوم بمنعه أما إذا كان غير ذالك فهو يظهره بسهولة ØŒ قمت بتجربة CSS Optimizer Ùˆ قام بتخفيض الحجم Ùˆ لكن اصبح الكود غير مقروء بسهولة 🙁 يمكن أن نستخدم هذه الخدمة بعد الانتهاء من التصميم بشكل كامل شكراً لك .

    zakwan : جربت بعض الخدمات المشابهة لـ Google Analytics و منها الخدمات العربية ، وجدت أن Google Analytics هي الافضل و ذالك يغفر لها ثانيتين زيادة ، أضافة FireBug جربتها فترة قصيرة و هي جيدة جداً و لكن اضطررت للأستغناء عنها بعد فترة حتى لا ازيد من الضغط على المتصفح .

    محمد مصطفي : شكراً لك هذه النقطة غابت عني ، الضغط لصفحات الـ php جيد جداً و يسهل من فتح الصفحات و خصوصاً في المنتديات و لكن عليك التأكد من مستضيفك و قدرات المخدم خصوصاً في المواقع الكبيرة .

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

  7. يقول BassamBadri:

    جزاك الله خيراً يا أخي على هذه المعلوماات المفيدة ..

    د. بسام البدري

  8. يقول Amaiko:

    ما تقوله صحيج جدا فالجداول اصبحت من الماضي و يمكننا ان ان نقوم بتصمم مواقع اكثر جمالا ب ال css صحيح الجداول كانت تسهل علينا العملية الي حدا ما و لكن بعد التعامل مع السي اس اس لفترة كبيرة سيكون باستطاعة المتعلم عمل ما يريد بيها بشكل اكثر احترافية و جمالا

  9. يقول محمد:

    لشكرك استاذي الكريم تم اتباع نصائحك

    /http://www.4eqt.com

  10. يقول أبو أنس:

    قمت بتجربة CSS Optimizer و قام بتخفيض الحجم و لكن اصبح الكود غير مقروء بسهولة يمكن أن نستخدم هذه الخدمة بعد الانتهاء من التصميم بشكل كامل شكراً لك .

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

    اللهم علمنا ما ينفعنا جزاك الله خيرا

اضف تعليق