تحسين و تسريع تحميل موقع ويب – الحد من طلبات http

 

كان يجب علي أن أبدأ به بما أنه سبب فعال في تسريع المواقع. طلب http: بكل سهولة هو كل طلب للحصول على صورة أو css من الخادم وهو الوقت الذي يأخذ 80% من سرعة الكاملة لتحميل الموقع. إذا إستطعنا الضغط على هذا الجانب لتخفيض فنحن نقوم بتحسين 80% من الموقع وليس 20%.

طلبات http هما إثنان الأول يخصنا ويمكننا تغيره وإزاته أو تغييره والثاني ما أسميه طلب ثالث أنه طلب لموقع أخر ليس لنا ولايمكن عمل شيء لتحسينه*

الطلبات http الأولية

جمع وضغط css و js

إذا كان لنا موقع له الكثير من ملفات JS و CSS فعلينا التفكير في جمعها في ملف واحد وهذا يتيح لنا التخفيض من هذه الطلبات التي نحن بغنى منها
على سبيل المثال


<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/IE6.css" rel="stylesheet" type="text/css" />
<script src="js/effect.js" type="text/javascript"></script>
<script src="js/javascript.js" type="text/javascript"></script>
<script src="js/slider.js" type="text/javascript"></script>
<script src="js/menu.js" type="text/javascript"></script>

وتخفيض طلبات هذه إلى 80% ما علينا إلى هو جمعها في ملف واحد

<link href="css/full_css.css" rel="stylesheet" type="text/css" />
<script src="js/full_js.js" type="text/javascript"></script>

وضغطها يمكن الرجوع إلى الجزء الأول تحسين و تسريع تحميل موقع ويب – تحليل

الصور

هذه المرة شيء جديد على تحسين الصور وهو ثلاث طرق للحد من طلبات http لصور

إستعمال CSS Sprites

هذا شرحت إستعماله في دوينة سابقة شرح أساسيات CSS Sprite

إستعمال خريطة الصور

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

<img src="menu1.png" width="50" height="20" alt="" />
<img src="menu2.png" width="50" height="20" alt="" />
<img src="menu3.png" width="50" height="20" alt="" />

عندما يكتمل سيبقى نقوم بطلب صورة واحدة عوض ثلاثة

<img src="menu_p.png" width="200" height="20" usemap="#map" />
<map name="map">
<area shape="rect" coords="0,0,50,20" href="#" title="" />
<area shape="rect" coords="50,0,100,20" href="#" title="" />
<area shape="rect" coords="100,0,150,20" href="#" title="" />
</map>

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

إستعمال الصور Inline

هذه الخاصية تسمح لنا بتحميل الصورة الصغيرة بدون طلب http وهو عبارة عن طلب من نوع data وهي صورة تم تغييرها إلى خوارزمية base64 وهذه له حسناته
مثال تحميل صورة عادية

<img src="icon.png" width="16" height="16" alt="" />

وهذا نفس المثال مستعملا خصائص Data:URL Base46

<img src="data:image/png;base64,iVBORw0KGgoAAAA...N"  width="16" height="16" alt="" />

في هذه الحالة يتم عدم طلب الصورة بطلب من http ويمكن إستعمال خاصية php لهذا الغرض مستعملا base64_encode إضافتا إلى file_get_contents

<?php echo base64_encode(file_get_contents("smile.png")) ?>

أو إستعمال تطبيق ويب لهذا الغرض Online Image to Base64 Converter

الطلبات http الثاثة

هو كل طلب لا يعني موقعنا لكن يضيف عبأه علينا وهو إضافة أي شيء ثالث من صورة أو إضافة js صغير أو كبيرة من موقع ثالث وهذا إضافة إلى وقت تحميلها يدخل في اللعب تحويل dns والكل له وقته لذالك إذا كنت تفكر في إضافة صورة من الأحسن تحميلها وإضافتها إلى النطاق الخاص بك وهذا أحسن من طلبها لموقع أخر.
إذا كنت تحب زخرفت موقعك بالأشياء التي يمل منها الزائر فأعد التفكير فإضافة ساعة لموقعك أو عدد الزائرين يضيف عبأ لتحميل موقعك وإذا لزم الحال لا تقم بعمل طلب لموقع أخر
أما بما يسمى الأن المواقع الإجتماعية والكل يضيف الزر الخاص بهذه الخدمة فهذا الزر سريع لكن حاله هو طلب من نوع http للموقع الإجتماعي وعليك التفكير هل يلزم هذا الزر .
إلى هنا أكمل هذا الجزء والقادم أفضل إنشاء الله مع تحياتي.