نصائح ياهوو (Yahoo) لأفضل الممارسات لتسريع المواقع

السلام عليكم ورحمة الله وبركاته

خلاصة بسيطة او ربما ترجمة غير حرفية لهذه المقالة التي تحتوي على 35 نصيحة لتسريع المواقع وقد تطرقت هنا فقط ل 26 نصيحة والتي وعدتكم بها من قبل عندما تحدت عن افضل المواقع لقياس سرعة تصفح موقعك. المهم حاولت تلخيص هذه المقالة قدر الامكان واريد ان اشير الى انه عندما طبقت بعض هذه النصائح اصبح موقعي اسرع بفضل الله لاني سابقا كنت أقيس سرعة موقعي فاجد 30s لفتح الموقع والان اصبحت 2.81s تقريبا يعني اعطت تمارها هذه النصائح بالنسبة للموقعي المهم ندخل في صلب الموضوع كي لا اطيل عليكم

اولا المقالة باللغة الإنجليزية موجودة هنا لمن يجيد الإنجليزية أحسن تقرئها هناك

اخواني الأفاضل سنتطرق الى شرح  تطبيقي لهذه الطرق في تدوينات لاحقة ان شاء الله بالتفصيل بالنسبة لسكريبت التدوين ووردبريس

Minimize HTTP Requests

اول نصيحة واهمها على الاطلاق عن تجربة وهي تقليل معدل طلبات HTTP كما تعلمون فبمجرد طلب موقع مثلا yahoo.com فانه يتم مباشرة ارسال طلبات http من جهاز الزائر ان صح التعبير الى سيرفرات yahoo.com وبالتالي يتم الرد على هذه الطلبات

واثناء الرد على طلبات الزائر يقوم متصفح الزائر بتحميل هذه الملفات او العناصر فاذا كانت كتيرة (مثلا 5 ملفات تنسيق 4 ملفات جافاسكريبت و 10 خلفيات مع الايقونات هذا فقط بالنسبة لتصميم لا ننسى الاعلانات ومحتويات اخرى توجد بالموقع) سياخد وقت عرض هذه الصفحة مدة اطول وان كانت قليلة فسيتم عرض الصفحة بسرعة, لهذا فان مفتاح سرعة موقعك تكمن في تقليل هذه العناصر, ولتقليل من معدل هذه الطلبات اما ان يكون تصميم موقعك بسيطا جدا او ان تقوم بهذه الاقتراحات التي ذكرت في نصائح ياهو وهي كالتالي :

1. تجميع الملفات (Combined files) هذه الطريقة تساعد ايضا على التقليل من معدل طلبات HTTP وهنا ستقوم بجمع كل ملفات التنسيق (css) في ملف تنسيق واحد ونفس الطريقة بالنسبة لملفات الجافا سكريبت
2. CSS Sprites هذه الطريقة تعتمد على جمع خلفيات تصميم موقعك والايقونات في صورة واحدة وهي طريقة صعبة نوعا ما وايضا لها دور مهم في تقليل معدل طلبات HTTP فكما تعلمون بعض التصميم تحتوي على خلفيات وايقونات كتيرة
3. Image maps هذه الطريقة لها نفس دور الطريقة السابقة لكن عيبها كما جاء في نصائح ياهو يجب ان تكون الخلفيات والايقونة مدرجة في نفس الصفحة. مع اعلم اني جربت هذه الطريقة باستعمال اداة خاصة بها ونجحت لا اتذكر ان كانت تلك الاداة حقا خاصة بهذه التقنية ام لا
4. Inline images هذه الطريقة وسيلة لادراج الصور ضمنيا في الصفحات بدلا من استعمالها خرجيا الطريقة حقا مدهلة لكنها بعض العيوب

Use a Content Delivery Network

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

عل فكرة بالنسبة لي استعمل الان خدمة تطبيقات جوجل لان سيرفراتها سريعة وقوية احسن من موقع cloudflare ولمعرفة المزيد عن طريقة استعمال سيرفرات جوجل كشبكة توزيع محتوى راجعوا هذه المقالة المعنونة باسم استخدام Google App Engine مثل CDN

Add an Expires or a Cache-Control Header

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

ExpiresDefault "access plus 10 years"

واهمية هذه الطريقة هي انه لن يتم اعادة استعمال هذه الملفات مرة اخرى عند زيارة الزائر مرة اخرى لكن قام  احد مطوري ياهو بدراسة هذه الطريقة اتضح خلالها أن 40% – 60% من الزوار يقومون بتفريغ الكاش للمتصفح مما يؤدي الى اعادة تحميل كل محتوى الموقع مرة اخرى وللمزيد عن هذه الدراسة يرجى مراجعة هذه المقالة Performance Research, Part 2: Browser Cache Usage – Exposed!

Gzip Components

في النصيحة الاولى عندما تحدث مطورين ياهو عن تقليل معدل طلبات HTTP لتسريع التصفح تأتي هذه الطريقة لتساعد في نقل طلبات HTTP بشكل اسرع من السابق وذالك بضغط الملفات قبل ارسالها لمتصفح الزائر وهذا سيزيد من سرعة تحميل الصفحة بشكل جيد

تتم هذه العملية باشارة متصفح الزائر لسيرفر من ان المتصفح يدعم ضغط الملفات عن طريق طلبات HTTP بارسال Accept-Encoding في طلبات HTTP مثال :

Accept-Encoding: gzip, deflate

اذا وجد السيرفر هذه المعلومة في طلبات HTTP, سيقوم بضغط الملفات حسب الطريقة التي يستعملها السيرفر اما gzip او deflate. بعد ذالك يقوم السيرفر باعلام المتصفح عن طريق Content-Encoding عند الاستجابة لطلبات HTTP هكذا :

Content-Encoding: gzip

بالنسبة لطريقة الضغط يوجد نوعين لضغط الملفات GZIP و DEFLATE ومعظم الاستضافات اصبحت تدعم ضغط الملفات ونوع الضغط حسب نوع ملقم الويب apache بالنسبة لمستخدمي نسخة apache 1.3 فانهم يستعملون الموديل mod_gzip اما بالنسبة لمستخدمي apache 2.x فانهم يستعملون mod_deflate

والطريقة الاكتر شعبية في ضغط الملفات هي GZIP تم تطويرها من قبل مشروع GNU لادائه العالي وبعده ياتي DEFLATE اقل فعالية واقل شعبية ايضا

واذا احببت ان تعرف هل موقعك يدعم طريقة الضغط او اي نوع قم باستعمال الموقع التالي : GIDZipTest

Put Stylesheets at the Top

في هذه الطريقة يتحدثون عن وضع ملفات التنسيق في اعلى الصفحة او الترويسة (haader) فبعدما قاموا بتجربة هذه الطريقة تبين لهم انه يتم تحميل الصفحة اسرع وبوضع ملفات التنسيق اعلى الصفحة داخل الوسم Head سيجعل تحميل الصفحة تدريجي

بالنسبة لتحميل التدرجي لصفحة له اهمية خاصة فهو يقوم بعرض اقرب محتوى يعني اي شيئ سيصل اليه المتصفح اولا مثلا خلفيات, ايقونات, نصوص الى اخره وايضا مهم بالنسبة لصفحات التي تحتوي على محتوى كبير بالنسبة لاصحاب الاتصال الضعيف

المهم خلاصة القول لا تضع ملفات التنسيق اسفل الصفحة لان لها بعض السلبيات

Put Scripts at the Bottom

بعجالة 🙂 في هذه الطريقة يتحدثون عن وضع ملفات الجافا سكريبت اسفل الصفحة (footer) عكس تماما ملفات التنسيق لان ملفات الجافا سكريت تقوم بمنع التحميل المتوازي لمحتويات الموقع بمعنى اخر انه لا يتم تحميل اي عنصر من محتويات الموقع حتى يكتمل تحميل ملف الجافاسكريبت. وربما احدكم صادفته هذه المشكلة من قبل, عندما تدخل موقع يتوقف تحميل الصفحة عند ملف بصيغة .js وهذه هي المشكلة التي يتحدثون عنها لهذا احسن شيئ ان تقوم بوضع الملفات اسفل الصفحة

Avoid CSS Expressions

كما جاء في موقع ياهو تعبيرات CSS لها مميزات مهمة لكنها خطرة على موقعك في نفس الوقت وهذه التعبيرات هي طريقة لاعطاء خصائص متغيرة تلقائيا بدون تدخل منك فكما تعلمون التنسيقات في CSS تكون تابتة وهذا مثال لتعبيرات css :

 background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

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

Make JavaScript and CSS External

في هذا الطريقة يتحدثون عن اهمية استضافة ملفات التنسيق والجافا سكريبت في مواقع خارجية وباستعمال هذه الطريقة ستزيد من سرعة عرض الصفحات, لانه اذا كنت تستعمل هذه الملفات ضمنيا اي تستعملها من موقعك مباشرة سيتم تحميلها في كل مرة يتم عرض صفحات موقعك وكما نعلم ان استعمال الملفات ضمنيا يقلل من عدد طلبات HTTP المطلوبة لكنه يزيد من حجم صفحات HTML. من ناحية اخرى اذا تم استعمال جافا سكريبت وملفات التنسيق خارجيا سينقص حجم صفحات HTML بدون خفض معدل طلبات HTTP.

المهم كي لا نطيل هذا الكلام يستحسن استعمال ملفات خارجية لكي لا يتم تحميلها كل مرة لزوار الذين يتصفحون موقعك بشكل كبير

Reduce DNS Lookups

نظام أسماء النطاقات (DNS) اختصار لجملة Domain Name System هو نظام يقوم بترجمة أسماء النطاقات من كلمات إلى أرقام تعرف باسم (IP Address). المهم هذا فقط تعريف من wikipedia كما هو معلوم عندما تكتب مثلا mwordpress.net في المتصفح الخاص بك، فإن الخطوة الأولى التي يقوم بها متصفحك هي الاستعلام عن الـIP الخاص بهذا الموقع، ويتم هذا عبر الـDNS، أو نظام أسماء النطاقات، وفي هذه الحالة يستغرق البحث عن النطاق عادة 20-120 ميلي ثانية على فكرة المتصفح لا يقوم بتحميل اي شيئ من الصفحة ان لم تتم عملية البحث عن النطاق بشكل كامل

المهم هنا ينصح الموقع بخفض عدد اسماء النطاقات الموجودة في صفحات موقعك لكن هذا له تاتير سلبي على التحميلات المتوازية مع انه يساعدة على سرعة استجابة الموقع لطلبات HTTP ولا ننسى ان التحميلات المتوازية لها دور في سرعة الاستجابة لطلبات HTTP ولكي لا تستبعد احدى الطريقتين (التحميلات المتوازية او نطاقات الاسماء) يجب عليك ان لا تتعدى 4 نطاقات (في التطيبق ستفهم اكتر)

Minify JavaScript and CSS

في هذه الطريقة يتحدثون عن تقليص (Minify) حجم ملفات الجافا سكريبت و ملفات التنسيق وهذا بازالة الرموز الغير مهمة لنقص حجم الملف وتحقيق سرعة تحميل جيدة. عندما يتم تقليل الملفات بازالة التعليقات البرمجية والفرغات الى اخره في هذه الحالة سيصبح حجم الملف اصغر بكتير وهذ سياساعد في استجابة اسرع لطلبات HTTP وتوجد ادواة كتيرة تقوم بهذا الغرض واشهرها JSMin و YUI Compressor.

توجد اضافة للووردبريس تقوم بهذا الغرض واكتر من ذالك ايضا سنتطرق لها لاحقا ان شاء الله بالتفصيل

Avoid Redirects

هنا الحديث عن اعادة توجيه الزائر عن طريق اكواد حالة HTTP وهي 301 و 302 وهذا مثال لاعادة توجيه استجابة 301 لطلب HTTP :

HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html

هنا يقوم المتصفح تلقائيا بتوجيه الزائر الى الرابط الموجود في خانة Location كل المعلومات المطلوبة لاعادة التوجيه تكون موجودة http headers ولمعرفة المزيد عن (HTTP Headers) قم بمراجعة هذه التدوينة من هنا

خلاصة القول ان لا تقوم باستعمال اعادة توجيه بكترة لانها تبطئ من سرعة تصفح الموقع وايضا يجب عليك استعمال mod_rewrite لكي تتجنب مشاكل DirectorySlash للمجلدات لانها ايضا تسبب كترت اعادة توجيه للمتصفح وهذا يزيد من مدة عرض الصفحة للزائر او المتصفح

Remove Duplicate Scripts

هنا الحديث عن الانتباه لعدم استعمال متكرر لملفات الجافا سكريبت وكما اشار موقع ياهو بأسف الى انه هناك مواقعين من افضل 10 مواقع في الولايات المتحدة وقعا في هذا المشكل وهناك عاملين رئيسيين قد سبب في زيادة احتمال تكرار نفس الملفات وهما العدد والحجم لهذه الملفات

خلاصة القول انه عند تحميل الملف مرتين فهذا سيزيد من مدة عرض الصفحة وهذا امر سيئ بطبيعة الحال, كما تحدثنا سابقا عن اهمية وضع الجافا سكريبت اسفل الصفحة. فعند طلب ملف جافا سكريبت تتوقف جميع طلبات http (مثلا الصور وملفات التنسيق) حتى يتم تحميل جافا سكريبت

Configure ETags

ال ETags اختصار ل entity tag وهي جزء من نظام HTTP تقوم بتحقق من صحة الملفات المخزنة في جهاز الزائر. المهم كما جاء في موقع ياهو فان لهذه الطريقة بعض المشاكل ويستحسن ازالتها لنقص من عدد طلبات HTTP وتقليل ايضا اسهلاك الباندويث ويمكن اعداد ذالك بواسطة htaccess بادراج الكود التالي :

# Remove ETag
Header unset ETag
FileETag none

Flush the Buffer Early

هذه الطريقة تساعد في تقليل مدة عرض الصفحة لزائر بعرض عناصر اخرى من الموقع في حالت كان السيرفر مشغول بتلبية طلبات HTTP اخرى, فكما جاء في موقع ياهو ان المستخدم ينتظر ما بين 200 الى 500ms قبل عرض عناصر الصفحة خلال هذا الوقت صفحة الموقع تبقى فارغة تنتظر وصول البيانات (ربما لاحظتم هذا من قبل وكم طال الانتظار :)). ولحسن الحظ في PHP توجد دالة flush والتي تسمح لنا بارسال اجزاء من صفحة html لمتصفح الزائر بينما يكون السيرفر او خادم الاستضافة مشغول بتنفيد الطلبات الاخرى

وهذه الطريقة ستساعدنا ايضا في التحميل المتوازي للملفات والتي لها دور مهم في عرض الصفحة باقصى سرعة لزائر, وافضل مكان لادراج هذه الدالة بين نهاية الوسم head و بداية الوسم body كما في المثال التالي في ملف header.php بالنسبة لمستخدمي ووردبريس :

… <!– css, js –>
</head>
<?php flush(); ?>
<body>
… <!– content –>

Post-load Components

هذه الطريقة لم انتبه لها ولم اجربها من قبل ولكن على ما يبدوا  ان لها مميزت وعلى ما اظن انهم يتحدث عن طريقة عرض الصور وملفات الجافاسكريبت ضمنيا كما في طريقة image inline والله اعلم ربما اقوم باختبارها لاحقا

القيت نظرة على وصف هذه الأداة YUI 2: ImageLoader وهي تستعمل Lazy Loading وقد تحدث عنها الاخ عبد الرحمن العتيبة في مقالة روعة ومفصلة بشكل دقيقة وهذا تعريف او مقدمة من شرح الاخ عبد الرحمان العتيبية لهذه الطريقة :

تعبير التحميل الكسول أو Lazy Loading في العادة يستعمل في لغات البرمجة، ويطلق عند تأخير تحميل كائن أو عنصر ما لحين حاجته. أي معناه، أننا لا نحمل أي كائنات أو عناصر حتى ولو كان يستخدمها البرنامج في وقت لاحق، إلى حين حاجتنا أو استدعائنا لها في ذلك الوقت، وعندها يتم تسخير كل الموارد المطلوبة للتحميل والاستدعاء.

التحميل الكسول يستخدم في عدة لغات، ولكن في هذا المقال، سنرى كيف يمكننا استخدامه في لغة جافاسكربت على عدد من المكتبات المشهورة YUI ،jQuery ،MooTools، وكيف يمكنه أن يفيدنا.

مقتطف من : مدونة المشروع

عنوان التدوينة : التحميل الكسول في جافاسكربت

Reduce the Number of DOM Elements

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

مثلا اذا كنت تستعمل :

<div id="nav">
<ul>
….
</ul>
</div>

فاستعمل عوضا عنها الطريقة التالية بالتخلص من الوسم div

<ul id="nav">
….
</ul>

بهذه الطريقة ستقوم بتخفيض لعدد عناصر DOM

Split Components Across Domains

تقسيم او تفريق عناصر الموقع على نطاقات فرعية او  نطاقات اخرى اذا كانت لديك $$$ تسمح لك بزيادة التحميلات المتوازية بشكل افضل واسرع لكن تاكد من ان ا تستعمل اكتر من 2-4 نطاقات فرعية او اساسية لانه اذا استعملت اكتر فان ستقع في مشكلة DNS Lookup وقد تحدثنا عنها فوق

المهم راجع طريقة استعمال Use Cookie-free Domains for Components اسفل فهي نفس طريقة استعمال النطاقات الفرعية لزيادة التحميلات المتوازية

Minimize the Number of iframes

هنا الحديث عن النقص من استعمال Iframe فهذه الاخيرة تسمح صفحات html كاملة في صفحات موقعك. من المهم أن نفهم كيفية عمل Iframes بحيث يمكن استخدامها بشكل فعال.

<iframe> الايجابيات :

1. تساعد على ادراج محتوى خارجي مثل الاعلانات وصندوق فيسبوك للمواقع
2. Security sandbox (فكوها ;))
3. التحميل المتوازي لسكريبتات

<iframe> السلبيات :

1. مكلفة حتى لو فارغة
2. تقوم بمنع حدث onload في الصفحات
3. Non-semantic (فكوها ;))

Use Cookie-free Domains for Components

عندما تقوم المتصفحات بطلب صورة ثابة وارسال الكوكيز في نفس الوقت مع طلبات HTTP, السيرفر او الخادم ليس لديه حاجة او استعمال لهذه الكوكيز وبالتي فان المتصفحات تقوم بانشاء شبكة بيانات (network traffic) بدون سبب وجيه. يجب عليك هنا التاكد من ان الملفات الثابتة يتم طلبها مع طلبات cookie-free.  ما عليك سوى إنشاء نطاق فرعي (subdomain) وقم باستضافة الملفات الثابة فيه

اذا كان نطاق موقعك هكذا www.exemple.com يمكنك وضع الملفات الثابتة في نطاق فرعي مثلا static1.exemple.com لكن في حالة قمت بضبط الكوكيز لنطاق الاساسي (domain top-level) مثلا كنت تستعمل موقعك هكذا exemple.com بدون www هنا اذن الملفات الثابتة  من  static1.exemple.com سيتم طلبها مع الكوكيز يعني بدون جدوى, في هذه الحالة ستضطر الى حجز نطاق اخر وتستضيف فيه الملفات الثابتة وتضبط الكوكيز فيه بطريقة cookie-free مثل موقع ياهو قام باستضافة الصور في طاق خاص yimg.com واليوتوب ytimg.com وهكذا …

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

Choose <link> over @import

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

في متصفحات الاكسبلور @import تستخدم بنفس طريقة وضع <link> في اسفل الصفحة هذا ليس جيدا لانه يجب استعماله في اعلى الصفحة لهذا يستحسن عدم استعمال @import

Avoid Filters

هنا كما جاء في نصائح ياهو يستحسن الابتعاد عن استعمال مرشح مايكروسوفت الاحتكاري AlphaImageLoader Filter نهائيا لانها تتسبب في زيادة استهالك الذاكرة وايضا تتسبب في تعليق المتصفح بينما يتم تحميل الصورة اذن مشاكل AlphaImageLoader Filter متعددة كما ترون لهذا يستحسن استبدلها بحفظ الصور بصيغة PNG8.

Optimize Images

تحسين حجم الصور من الامور المهم ايضا لهذا يجب التعامل معها ايضا بشكل جدي لن اكر هنا التفاصيل التي جائت في موقع ياهو لانها متعبة جدا وقد تمل حياتك اذا طبقتها . لحسن الحظ توجد اضافة تساعد على عملية تحسن الصور وهي WP Smush.it هذه الاضافة تقلل قدر الامكان من حجم الصور من خلال موقع Smush.IT، حيث يقوم الموقع بضغط ملفات الصور وجعل مساحتها صغيرة قدر الامكان وبالتالي تقلل من زمن تحميلها بشكل ملحوظ .

Optimize CSS Sprites

1. ترتيب الصور افقيا بدلا من عموديا
2. الجمع بين الألوان مشابهة في صورة (sprit) تساعدك على عدد ألوان منخفض

Don’t Scale Images in HTML

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

<img width="100" height="100" src="mycat.jpg" alt="My Cat" /> 

المهم لكي تتضح الفكرة مثلا لو ان لديك صورة بحجم 100x100px لا تستعمل قيم في العرض والارتفاع اكبر من 100px مثلا الصورة ارتفاعها 100px وعرضها 100px وانت تستعملها هكذا :

<img width="500" height="500" src="mycat.jpg" alt="My Cat" /> 

Make favicon.ico Small and Cacheable

ايقونة الموقع favicon.ico كما قيل في موقع ياهو انها شر لابد من وجوده في المجلد الرئيسي لموقعك لان المتصفح الخاص بالزائر داما يقوم بطلبها وفي حالة عدم وجودها سيتم الرد عليها بالخطاء 404, والمشكل الاخر يكمن في وجودها ايضا في السيرفر لان يتم ارسال الكوكيز في كل مرة تم طلبها عن طريق HTTP ولها ايضا سلبات على التحميل التسلسلي.

اذن للتخفيف من سلبيات وجود favicon تأكد:

1. ان تكون صغيرة الحجم ويستحسن اقل 1K
2. اعطاء اليقونة تاريخ الانتهاء تحدث عنه في نصيحة فوق

وهذه اداة اقترحها الموقع لانشاء هذه اليقونة Imagemagick

Avoid Empty Image src

في هذه النصيحة يحذر موقع ياهو من استعمال وسم صورة برابط فارغ وطريقة ادراج الصور لها شكلين :

1 – باستعمال وسم HTML عادي :

<img src="">

2 – باستعمال الجافاسكريبت :

var img = new Image ();
img.src = "";

كل من الشكلين يتسببان في نفس المشكل : وهو اعادة طلبات HTTP الى السيرفر الخاص بموقعك

1. Internet Explorer تقوم بإجراء طلب إلى المجلد الذي يحتوي على صفحة.
2. Safari و Chrome يقومان باجراء طلب الى نفس الصفحة.
3. Firefox 3 و النسخة التي قبلها لها نفس طريقة Safari و Chrome لكن النسخ الجديدة اصلحت هذا المشكل ولم تعد تقوم بهذه الطلبات.
4. Opera لا تجري اي طلب.

لماذا تعد هذه السلوكات في المتصفحات سيئة ؟

تقوم بارسال كمية كبيرة من traffic غير متوقعة وخصوصا الصفحات التي تحصل على العديد من المشاهدات وهذا قد يؤدي الى مشاكل في الخادم الخاص بموقعك

تضيع الخادم للخطوات المتبعة في تنفيذ تعليمة انشاء صفحة مما يؤدي الى عدم عرض الصفحة في الاخير (الي فهم شيئ يخبرني :))

من المحتمل ضياع البيانات. اذا كنت تقوم بتتبع الطلبات سواء عن طريق الكوكيز او طريقة اخرى .

خلاصة القوم يجب عليك ان تتفادى استعمال وسم الصور فارغا كما في المثال أعلاه وهناط طرق عديدة في الانترنت للابتعاد عن هذه المشكلة

خاتمة

هذه فقط بعض النصائح وليس كلها صراحة لها اتر كبير في تسريع الموقع, وارجوا ان لا تزعلوا مني لاني واجهت صعوبات كتيرة في توصيل هذه المقالة لكم كما ينبغي اول هذه الصعوبات اني لا اجيد الانجليزية وثانيها في كلمات تحتاج لدروس لوحدها ويصعب ترجمتها للعربية