TTP و هي تتسبب في تأخير صغير ، و ذلك دون النظر إلى حجم الملف الخارجي و الوقت اللازم لتحميله 
.
إذن فتقليل طلبات الـHTTP يتم عبر تقليل عدد روابط جلب الملفات الخارجية ، فبعض السكربتات الصغيرة لا تستحق إنشاء ملف خارجي لها ، و كذلك بعض الصور التي تلعب دور الخلفيات ، يمكن التخلي عنها و تعويضها بخصائص CSS 3 . و قد وفرت CSS 3 عدة إمكانيات تتيح التخفيف من حجم الموقع مع الحفاظ على كل الجمالية و حسن التنسيق .
بل و إن بعض المواقع تضع الأزرار بأكملها عبارة عن صور ، ليس الخلفية فقط ، و إنما النص أيضا ، هذا خطأ : بهذه الطريقة يزيد عدد طلبات الـHTTP بشكل كبير و بالطبح تحتاج كل صورة إلى وقت للتحميل ، و بالتالي يصبح الموقع بطيئا خاصة و إن كان يحتوي على الكثير من الأزرار ، هذا من جهة ، و من جهة أخرى إعتماد الصور بدل الكلمات يقتل الأرشفة و لا يجلب عناكب غوغل أبدا و بالتالي يقضي على الـSEO الخاص بالموقع ، مما يؤذي إلى تدني مستوى الـPageRank .
مسألة بسيطة يعتقد الكثيرون أنها غير مهمة و لكن على العكس تماما ، هذه التفاصير الصغيرة أهم بكثير مما تبدوا عليه ، بل و إنها هي من تحدد أكثر المواقع إحترافية من بين المواقع الكبرى
.
و البديل الذي أقترح إستخدامه لإنشاء الأزرار و خلفيات التدرج بالألوان هو إستخدام القيمة linear-gradient في خاصية background ، و هي قيمة حذيثة العهد لم يتم تعميمها بعد غير أنها تُستخدم كثيرا و هي تعمل على جميع المتصفحات ما عدا إنترنت إكسبلورر
، تقوم هذه القيمة بإنشاء خلفية متدرجة بالألوان حيث نكتفي بإدخال لون الإنطلاق و لون الوصول مع توفر إمكانية تحديد نسب الألوان و إتجاه إنتشار التدرج ( من الأعلى إلى الأسفل - من اليمين إلى اليسار ... )
و النتيجة كما يلي :
تدرج من الأحمر إلى الأزرق إبتدائا من اليمين ، أو نحو اليسار ، هذا ما تقوله القيمة linear-gradient للمتصفح .
يمكن الإستعانة بمولد الخلفية المتدرجة على صفحة gradients.glrzad.com .
قد تبدوا غريبة هذه القيمة الجديدة و لكنها في الواقع تُستخدم في العديد من المواقع الكبرى ، نذكر منهاGoogle.com ، فإن لاحظتم فإن أزرار غوغل تحتوي على تدرج خفيف للون الرمادي ، و هذا التدرج يتم عبر إستخدام القيمة linear-gradient نفسها .
فكما رأيتم ، توفر الـCSS 3 أدوات ذكية و خفيفة ، تتيح لنا إنشاء مواقع خفيفة و لا تحتوي على روابط جلب كثيرة مما يقلل من طلبات الـ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);
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 .
لا تعليق
إرسال تعليق