المشروع - كل ما يتعلق بتطوير المواقع http://www.almashroo.com/

لعل أحد أهم النصائح لتحسين سرعة تحميل صفحات الويب هي التقليل من معدل طلبات HTTP للخادم، في الواقع، هذه النصيحة هي أول نصائح ياهوو لأفضل الممارسات لتسريع المواقع. كلما قلت الطلبات على خادم الموقع، كلما ساعد في تحسين سرعة الموقع.

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

وسائل التغلب على مشكلة تعدد طلبات HTTP

هناك الكثير من الوسائل التي تتيح لنا التقليل من حجم هذه الطلبات على الخادم، وبالتالي تؤدي إلى سرعة تحميل الصفحات. من بين هذه الوسائل هي دمج ملفات CSS في ملف واحد، وبطريقة مشابهة يمكن دمج ملفات جافاسكربت في ملف واحد. ويمكننا أيضاً استخدام الصور الضمنية، عبر تحويلها إلى نص مرمّز داخل مستندات HTML وCSS، وهو ما سنركز عليه في هذا المقال.

ماهي data: URI

data URI هي وسيلة لإدراج البيانات ضمنياً في صفحات الموقع بدلاً من استدعائها خارجياً. البيانات تشمل، على سبيل المثال لا الحصر، الصور، ملفات CSS، ملفات جافاسكربت، وهي من تعريف اللجنة الخاصة بنظام الإنترنت IETF في RFC 2397.

طريقة التنسيق هي كالتالي:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

هذا النسق العام الذي يجب استخدامه لإدراج البيانات ضمنياً على الصفحة، حيث كل جزئية فيه تعني التالي:

• data، البروتوكول الذي يجب استخدامه ليفهمه المتصفح، وهنا تم استخدام data للتعريف بأنها عبارة عن بيانات.
• mime type، نوع ملف الوسائط الذي سيتم إدراجه، على سبيل المثال لإدراج صورة PNG يتم استخدام image/png. إذا لم يتم استخدام أي قيمة هنا، فإن القيمة الافتراضية هي النص text/plain;charset=US-ASCII.
• charset، نوع الترميز المستخدم للنصوص، واستخدامه يكون خاص فقط للنصوص. يمكن تركه فارغاً للملفات الأخرى.
• base64، نوع ترميز البيانات، على عكس charset المستخدم للنصوص، فإن نوع الترميز هنا يعني الترميز الخاص بالبيانات التي سيتم إدراجها. افتراضياً وعند عدم تحديد أي قيمة هنا، يتم استخدام الترميز الخاص بروابط الإنترنت URL encoding، والذي يكون في العادة حروف آسكي ASCII اللاتينية، وأي حروف أخرى خارج أسكي يتم استبدالها بالحروف %xx حيث x يكون عدد ستعشري Hexdecimal. عندما يتم استخدام ترميز Base64، يجب أن تكون البيانات أيضاً مرمّزة بهذا الترميز.
• encoded data، هنا يتم وضع البيانات، ويجب وضع البيانات مرمّزة حسب الترميز المختار في النقطة السابقة.

ترميز Base64

يساعد ترميز Base64 على تحويل البيانات الثنائية binary data إلى نصوص بحيث يسهل نقلها عبر الإنترنت. يتم ذلك عبر تحويل البيانات إلى بت bits، ومن ثم جمعها وتحويلها إلى حروف Base64. هذه الحروف تتكون من الأبجدية الإنجليزية الكبيرة والصغيرة A-Z a-z والأرقام 0-9 بالإضافة إلى “+” و “/”. أيضاً يتم استخدام “=” في النهاية لمعرفة وجود حشوة padding.

مثال نص

الشيفرة
هذا نص كلمة “مرحبا” مرمّز بطريقة Base64.

data:text/plain;charset=utf-8;base64,2YXYsdit2KjYpw==

مثال صورة

الشيفرة
هذه صورة أيقونة “عدسة مكبرة” بحجم ١٦ بيكسل.

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAI6SURBVDjLpZJbaJJxGMaHgdcFXURdBLtZrGitiFh0uhjRVRTVWI1as7mQakhjyyEkRAcaHSCrj0xrWGuuoVsr25qzfeYObh6yJJdzavoZs3Sy8PhJ8vR9EoHkotXFA/+b3+//vC9vEYCi/8mvh8H7nTM8kyF0LpoacCazLxzxbM/bb1S3OUo8GQtz/iggGfi1O0NaAzS8kQwCURqBORrTX9LQf5jHQ3KWlA1RnAUFeneGsATSoKIZOGdTsAWSMPuTsFNJeL7SEOoF4GtrUKuuShUUvJpKUd4wnYMtDDj5KQGTN4FRTyInOvH8MDonL6BKuRcFBey8fqYyC0/4Ehhn4JGZOBp1AtT1VkOkrYfMKIKgsxq7b+zErssV0TyBxjaf9UVomBh4jPnVyMCG6ThbGfKRVtwebsK1wdO4+JIPce8xbBGXI0+gMkWoqZ/137jjIBlY/zEGnqoO+2R7wGvfj/N9x3FAWonNojKUCUtTeQKlMUT02+fgCqVzs7OwzhnLyd4HU2xlCLsOYlPz+sI7uK8Pcu4O+EnNRAhWfwKOzym8Y2LyxCAf9GGHZDvKm9Zha2NptudcRUnBQ7rZ5+G0aVzEpS4nJelwZMXt9myL3Bpskyq9FmUzQuZu2B63QCXcEH50ak3Jb4KF0i+p5D5r3aYeJeoRNCgwfq8BCv7q8F8L2Dw9u5HbcWateuj6IXi0V0HUrsCiBGweNBRzZbxVasXJYkhrll1ZtIDNnaPLl9w6snRlwSX+a34AgPPwSZzC+6wAAAAASUVORK5CYII=

مثال صورة في HTML و CSS

شيفرة صورة خلفية باستخدام CSS

.div-bg
{
	background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAI6SURBVDjLpZJbaJJxGMaHgdcFXURdBLtZrGitiFh0uhjRVRTVWI1as7mQakhjyyEkRAcaHSCrj0xrWGuuoVsr25qzfeYObh6yJJdzavoZs3Sy8PhJ8vR9EoHkotXFA/+b3+//vC9vEYCi/8mvh8H7nTM8kyF0LpoacCazLxzxbM/bb1S3OUo8GQtz/iggGfi1O0NaAzS8kQwCURqBORrTX9LQf5jHQ3KWlA1RnAUFeneGsATSoKIZOGdTsAWSMPuTsFNJeL7SEOoF4GtrUKuuShUUvJpKUd4wnYMtDDj5KQGTN4FRTyInOvH8MDonL6BKuRcFBey8fqYyC0/4Ehhn4JGZOBp1AtT1VkOkrYfMKIKgsxq7b+zErssV0TyBxjaf9UVomBh4jPnVyMCG6ThbGfKRVtwebsK1wdO4+JIPce8xbBGXI0+gMkWoqZ/137jjIBlY/zEGnqoO+2R7wGvfj/N9x3FAWonNojKUCUtTeQKlMUT02+fgCqVzs7OwzhnLyd4HU2xlCLsOYlPz+sI7uK8Pcu4O+EnNRAhWfwKOzym8Y2LyxCAf9GGHZDvKm9Zha2NptudcRUnBQ7rZ5+G0aVzEpS4nJelwZMXt9myL3Bpskyq9FmUzQuZu2B63QCXcEH50ak3Jb4KF0i+p5D5r3aYeJeoRNCgwfq8BCv7q8F8L2Dw9u5HbcWateuj6IXi0V0HUrsCiBGweNBRzZbxVasXJYkhrll1ZtIDNnaPLl9w6snRlwSX+a34AgPPwSZzC+6wAAAAASUVORK5CYII=") no-repeat;
	width: 16px;
	height: 16px;
}

شيفرة صورة في HTML

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAI6SURBVDjLpZJbaJJxGMaHgdcFXURdBLtZrGitiFh0uhjRVRTVWI1as7mQakhjyyEkRAcaHSCrj0xrWGuuoVsr25qzfeYObh6yJJdzavoZs3Sy8PhJ8vR9EoHkotXFA/+b3+//vC9vEYCi/8mvh8H7nTM8kyF0LpoacCazLxzxbM/bb1S3OUo8GQtz/iggGfi1O0NaAzS8kQwCURqBORrTX9LQf5jHQ3KWlA1RnAUFeneGsATSoKIZOGdTsAWSMPuTsFNJeL7SEOoF4GtrUKuuShUUvJpKUd4wnYMtDDj5KQGTN4FRTyInOvH8MDonL6BKuRcFBey8fqYyC0/4Ehhn4JGZOBp1AtT1VkOkrYfMKIKgsxq7b+zErssV0TyBxjaf9UVomBh4jPnVyMCG6ThbGfKRVtwebsK1wdO4+JIPce8xbBGXI0+gMkWoqZ/137jjIBlY/zEGnqoO+2R7wGvfj/N9x3FAWonNojKUCUtTeQKlMUT02+fgCqVzs7OwzhnLyd4HU2xlCLsOYlPz+sI7uK8Pcu4O+EnNRAhWfwKOzym8Y2LyxCAf9GGHZDvKm9Zha2NptudcRUnBQ7rZ5+G0aVzEpS4nJelwZMXt9myL3Bpskyq9FmUzQuZu2B63QCXcEH50ak3Jb4KF0i+p5D5r3aYeJeoRNCgwfq8BCv7q8F8L2Dw9u5HbcWateuj6IXi0V0HUrsCiBGweNBRzZbxVasXJYkhrll1ZtIDNnaPLl9w6snRlwSX+a34AgPPwSZzC+6wAAAAASUVORK5CYII=" width="16" height="16" />

ترميز URL

ويسمى أيضاً بالترميز المئوي، حيث يعتمد الترميز على جدول أسكي ASCII للمحارف، وأي محرف يقع خارج هذا الجدول يتم ترميزه باستخدام UTF-8، ومن ثم تحويله إلى رقمه المئوي.

لا ينصح باستخدام هذا الترميز لنقل البيانات، وخصوصاً الكبيرة منها لحجمه الكبير مقارنة بترميز Base64.

مثال نص

الشيفرة
هذا نص كلمة “مرحبا” مرمّز بطريقة URL encoding.

data:text/plain;charset=utf-8,%D9%85%D8%B1%D8%AD%D8%A8%D8%A7

مثال صورة

الشيفرة
هذه صورة أيقونة “عدسة مكبرة” بحجم ١٦ بيكسل.

data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%06%00%00%00%1F%F3%FFa%00%00%00%04gAMA%00%00%AF%C87%05%8A%E9%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%02%3AIDAT8%CB%A5%92%5Bh%92q%18%C6%87%81%D7%05%5DD%5D%04%BBY%ACh%AD%88Xt%BA%18%D1U%14%D5X%8DZ%B3%B9%90jHc%CB%21%24D%07%1A%1D%20%AB%8FLkXk%AE%A1%5B%2B%DB%9A%B3%7D%E6%0En%1E%B2%24%97sj%FA%19%B3t%B2%F0%F8I%F2%F4%7D%12%81%E4%A2%D5%C5%03%FF%9B%DF%EF%FF%BC%2Fo%11%80%A2%FF%C9%AF%87%C1%FB%9D3%3C%93%21t.%9A%1Ap%26%B3%2F%1C%F1l%CF%DBoT%B79J%3C%19%0Bs%FE%28%20%19%F8%B5%3BCZ%034%BC%91%0C%02Q%1A%819%1A%D3_%D2%D0%7F%98%C7Cr%96%94%0DQ%9C%05%05zw%86%B0%04%D2%A0%A2%198gS%B0%05%920%FB%93%B0SIx%BE%D2%10%EA%05%E0kkP%AB%AEJ%15%14%BC%9AJQ%DE0%9D%83-%0C8%F9%29%01%937%81QO%22%27%3A%F1%FC0%3A%27%2F%A0J%B9%17%05%05%EC%BC%7E%A62%0BO%F8%12%18g%E0%91%998%1Au%02%D4%F5VC%A4%AD%87%CC%28%82%A0%B3%1A%BBo%EC%C4%AE%CB%15%D1%3C%81%C66%9F%F5Eh%98%18x%8C%F9%D5%C8%C0%86%E98%5B%19%F2%91V%DC%1En%C2%B5%C1%D3%B8%F8%92%0Fq%EF1l%11%97%23O%A02E%A8%A9%9F%F5%DF%B8%E3%20%19X%FF1%06%9E%AA%0E%FBd%7B%C0k%DF%8F%F3%7D%C7q%40Z%89%CD%A22%94%09KSy%02%A51D%F4%DB%E7%E0%0A%A5s%B3%B3%B0%CE%19%CB%C9%DE%07Sle%08%BB%0EbS%F3%FA%C2%3B%B8%AF%0Fr%EE%0E%F8I%CDD%08V%7F%02%8E%CF%29%BCcb%F2%C4%20%1F%F4a%87d%3B%CA%9B%D6akci%B6%E7%5CEI%C1C%BA%D9%E7%E1%B4i%5C%C4%A5.%27%25%E9pd%C5%ED%F6l%8B%DC%1Al%93%2A%BD%16e3B%E6n%D8%1E%B7%40%25%DC%10%7EtjM%C9o%82%85%D2%2F%A9%E4%3Ek%DD%A6%1E%25%EA%114%280%7E%AF%01%0A%FE%EA%F0_%0B%D8%3C%3D%BB%91%DBqf%ADz%E8%FA%21x%B4WA%D4%AE%C0%A2%04l%1E4%14se%BCUj%C5%C9bHk%96%5DY%B4%80%CD%9D%A3%CB%97%DC%3A%B2te%C1%25%FEk%7E%00%80%F3%F0I%9C%C2%FB%AC%00%00%00%00IEND%AEB%60%82

مثال صورة في HTML و CSS

شيفرة صورة خلفية باستخدام CSS

.div-bg
{
	background: transparent url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%06%00%00%00%1F%F3%FFa%00%00%00%04gAMA%00%00%AF%C87%05%8A%E9%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%02%3AIDAT8%CB%A5%92%5Bh%92q%18%C6%87%81%D7%05%5DD%5D%04%BBY%ACh%AD%88Xt%BA%18%D1U%14%D5X%8DZ%B3%B9%90jHc%CB%21%24D%07%1A%1D%20%AB%8FLkXk%AE%A1%5B%2B%DB%9A%B3%7D%E6%0En%1E%B2%24%97sj%FA%19%B3t%B2%F0%F8I%F2%F4%7D%12%81%E4%A2%D5%C5%03%FF%9B%DF%EF%FF%BC%2Fo%11%80%A2%FF%C9%AF%87%C1%FB%9D3%3C%93%21t.%9A%1Ap%26%B3%2F%1C%F1l%CF%DBoT%B79J%3C%19%0Bs%FE%28%20%19%F8%B5%3BCZ%034%BC%91%0C%02Q%1A%819%1A%D3_%D2%D0%7F%98%C7Cr%96%94%0DQ%9C%05%05zw%86%B0%04%D2%A0%A2%198gS%B0%05%920%FB%93%B0SIx%BE%D2%10%EA%05%E0kkP%AB%AEJ%15%14%BC%9AJQ%DE0%9D%83-%0C8%F9%29%01%937%81QO%22%27%3A%F1%FC0%3A%27%2F%A0J%B9%17%05%05%EC%BC%7E%A62%0BO%F8%12%18g%E0%91%998%1Au%02%D4%F5VC%A4%AD%87%CC%28%82%A0%B3%1A%BBo%EC%C4%AE%CB%15%D1%3C%81%C66%9F%F5Eh%98%18x%8C%F9%D5%C8%C0%86%E98%5B%19%F2%91V%DC%1En%C2%B5%C1%D3%B8%F8%92%0Fq%EF1l%11%97%23O%A02E%A8%A9%9F%F5%DF%B8%E3%20%19X%FF1%06%9E%AA%0E%FBd%7B%C0k%DF%8F%F3%7D%C7q%40Z%89%CD%A22%94%09KSy%02%A51D%F4%DB%E7%E0%0A%A5s%B3%B3%B0%CE%19%CB%C9%DE%07Sle%08%BB%0EbS%F3%FA%C2%3B%B8%AF%0Fr%EE%0E%F8I%CDD%08V%7F%02%8E%CF%29%BCcb%F2%C4%20%1F%F4a%87d%3B%CA%9B%D6akci%B6%E7%5CEI%C1C%BA%D9%E7%E1%B4i%5C%C4%A5.%27%25%E9pd%C5%ED%F6l%8B%DC%1Al%93%2A%BD%16e3B%E6n%D8%1E%B7%40%25%DC%10%7EtjM%C9o%82%85%D2%2F%A9%E4%3Ek%DD%A6%1E%25%EA%114%280%7E%AF%01%0A%FE%EA%F0_%0B%D8%3C%3D%BB%91%DBqf%ADz%E8%FA%21x%B4WA%D4%AE%C0%A2%04l%1E4%14se%BCUj%C5%C9bHk%96%5DY%B4%80%CD%9D%A3%CB%97%DC%3A%B2te%C1%25%FEk%7E%00%80%F3%F0I%9C%C2%FB%AC%00%00%00%00IEND%AEB%60%82") no-repeat;
	width: 16px;
	height: 16px;
}

شيفرة صورة في HTML

<img src="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%06%00%00%00%1F%F3%FFa%00%00%00%04gAMA%00%00%AF%C87%05%8A%E9%00%00%00%19tEXtSoftware%00Adobe%20ImageReadyq%C9e%3C%00%00%02%3AIDAT8%CB%A5%92%5Bh%92q%18%C6%87%81%D7%05%5DD%5D%04%BBY%ACh%AD%88Xt%BA%18%D1U%14%D5X%8DZ%B3%B9%90jHc%CB%21%24D%07%1A%1D%20%AB%8FLkXk%AE%A1%5B%2B%DB%9A%B3%7D%E6%0En%1E%B2%24%97sj%FA%19%B3t%B2%F0%F8I%F2%F4%7D%12%81%E4%A2%D5%C5%03%FF%9B%DF%EF%FF%BC%2Fo%11%80%A2%FF%C9%AF%87%C1%FB%9D3%3C%93%21t.%9A%1Ap%26%B3%2F%1C%F1l%CF%DBoT%B79J%3C%19%0Bs%FE%28%20%19%F8%B5%3BCZ%034%BC%91%0C%02Q%1A%819%1A%D3_%D2%D0%7F%98%C7Cr%96%94%0DQ%9C%05%05zw%86%B0%04%D2%A0%A2%198gS%B0%05%920%FB%93%B0SIx%BE%D2%10%EA%05%E0kkP%AB%AEJ%15%14%BC%9AJQ%DE0%9D%83-%0C8%F9%29%01%937%81QO%22%27%3A%F1%FC0%3A%27%2F%A0J%B9%17%05%05%EC%BC%7E%A62%0BO%F8%12%18g%E0%91%998%1Au%02%D4%F5VC%A4%AD%87%CC%28%82%A0%B3%1A%BBo%EC%C4%AE%CB%15%D1%3C%81%C66%9F%F5Eh%98%18x%8C%F9%D5%C8%C0%86%E98%5B%19%F2%91V%DC%1En%C2%B5%C1%D3%B8%F8%92%0Fq%EF1l%11%97%23O%A02E%A8%A9%9F%F5%DF%B8%E3%20%19X%FF1%06%9E%AA%0E%FBd%7B%C0k%DF%8F%F3%7D%C7q%40Z%89%CD%A22%94%09KSy%02%A51D%F4%DB%E7%E0%0A%A5s%B3%B3%B0%CE%19%CB%C9%DE%07Sle%08%BB%0EbS%F3%FA%C2%3B%B8%AF%0Fr%EE%0E%F8I%CDD%08V%7F%02%8E%CF%29%BCcb%F2%C4%20%1F%F4a%87d%3B%CA%9B%D6akci%B6%E7%5CEI%C1C%BA%D9%E7%E1%B4i%5C%C4%A5.%27%25%E9pd%C5%ED%F6l%8B%DC%1Al%93%2A%BD%16e3B%E6n%D8%1E%B7%40%25%DC%10%7EtjM%C9o%82%85%D2%2F%A9%E4%3Ek%DD%A6%1E%25%EA%114%280%7E%AF%01%0A%FE%EA%F0_%0B%D8%3C%3D%BB%91%DBqf%ADz%E8%FA%21x%B4WA%D4%AE%C0%A2%04l%1E4%14se%BCUj%C5%C9bHk%96%5DY%B4%80%CD%9D%A3%CB%97%DC%3A%B2te%C1%25%FEk%7E%00%80%F3%F0I%9C%C2%FB%AC%00%00%00%00IEND%AEB%60%82" width="16" height="16" />

أدوات التحويل إلي data: URI

يوجد الكثير من الأدوات التي يمكنها تحويل الوسائط المتعددة إلى بيانات مرمّزة بترميز Base64.

• DataURLMaker، خدمة على الويب تتيح تحويل الصور إلى بيانات URI باستخدام ترميز Base64، ووضعها تلقائياً في وسم <img>.
• data: URI Generator، خدمة على الويب أيضاً. تقبل جميع أنواع الملفات وليست محددة بالصور.
• The data: URI kitchen، خدمة أخرى على الويب، ولكن تتيح تحكم أكثر بنوع البيانات، على سبيل المثال، إدخال HTML والتحويل مباشرة.
• استخدام شاشة الأوامر بلغة PHP.

  $ php -r "echo base64_encode(file_get_contents('example.png'));"

• استخدام برنامج uuencode على اللينكس والماك (يأتي افتراضياً على أغلب التوزيعات)

  $ uuencode -m example.png

دعم المتصفحات

يتم دعم بيانات data: URI من قبل جميع المتصفحات الحديثة:

• Firefox
• Opera
• Chrom
• Safari
• Internet Explorer v8 – فقط للصور، للنسخ الأقل من النسخة ٨ يمكن استخدام MHTML.