كثيراً من الاحيان ما يصيبني الضجر و أنا انتظر تحميل صفحة من موقع ما و هذا الشعور يتولد لدى جميع من يزور تلك المواقع الثقيلة، و خصوصاً في عالمنا العربي فخدمة الانترنت هي بأسوء حال و لله الحمد، سرعة تصفح الموقع لها دور كبير فى اقبال الزوار عليه و عودتهم لاحقاً و لهذا تعتبر سرعة تصفح الموقع من العوامل الاساسية لانجاح أي موقع او فشله بغض النظر عن المضمون، فكثرة الانتظار عند فتح أي صفحة سوف تجعل زوار موقعك يرحلون سريعا حتى دون يقرؤن المحتوى .
الآن سأذكر بعض التقنيات و النصائح للوصول الى صفحات سريعة في التحميل و لكن أريد أن اؤكد أن هذه النصائح ليست هي كل شي فكفائة السيرفر الذي تستضيف عليه موقعك تلعب دور كبير أيضاً .
أبتعد عن استخدام الجداول و استعيض عنها ب 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 في ملفات خارجية
و ذالك لما ذكرته مسبقاً عند استدعاء الملفات الخارجية في صفحة الويب يتم تخزين هذه الملفات في الكاش و تحفظ هنالك و تزيد من سرعة فتح الصفحات الأخرى التي أدرجت فيها هذه الملفات أيضاً
استخدم / في نهاية روابط المجلدات
عند طلب رابط لموقع معين مثلاً لا تستخدم هذا الشكل
كود
بل أستخدم هذا الشكل مع وضع / في نهاية العنوان
كود
و السبب في ذالك هو أن السيرفر سيقوم بفحص الرابط هل هو لملف ام لمجلد عن وضع ال / تقوم بتوفير الوقت و أعلام السيرفر أنك تطلب مجلد
