حل مشكلة عرض الصور بتنسيقات الجيل القادم Webp - تسريع مدونة بلوجر - seo+
مرحباً متابعيين مينت ويب الكرام و زوارنا الأعزاء - اليوم سنناقش معكم حل مشكلة عرض الصور بتنسيقات الجيل القادم باستخدام Statically WEBP، في هذا المقال، أرغب في تقديم شرح قد يكون مهماً لبعضكم.
أريد هذه المرة مناقشة كيفية حل مشكلة سرعة مدونة بلوجر. ربما لا يزال بعضكم يهتم بميزة سرعة الصفحات الاختبارية من جوجل Google Pagespeed.
حسنًا هذا مجرد هراء، لماذا؟ لأن الاختبار لا يعتمد فقط على الكود الذي نستخدمه ولكنه يعتمد على مدى سرعة الاتصال بالإنترنت الذي نستخدمه. هذا هو السبب عند استخدام gtmetrix و google pagespeed، فإن النتيجة مختلفة.
بالعودة إلى الموضوع، يعد عرض الصور بتنسيقات الجيل القادم - Serve images in next-gen formats إحدى المشكلات التي تحدث لأن مصدر الصورة على المدونة كبير جدًا، حتى لو 100 كيلو بايت، فإنه يعطينا درجة صفراء.
فضلاً على أنك لا تستضف صورك على cdn محلي خاص بك، ولكن كل الصور تذهب إلى bp.blogspot.com. لكن لا تقلق، فهناك الآن حل بسيط، وهو استخدام Statically.io وتغيير التنسيق إلى webp.
على سبيل المثال صورة المدونة الأصلية:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjphncpnWiVmse0Q2Y8FjKOL0iup79nGkIN02s_6nuwbXfq3C5-DdQAn9h1izwnds9atbfSWolcU4zIFHIpC5gTaKDNrGFdBUX7DIo4kXbHbpSzhY3mZ3IjALWqAxWyXSCD-QdAGUCg2feh/d/search-engine-results-page.png
لكن بلوجر يدعم فعلًا تحويله إلى WEBP باستخدام statically.io مثل هذا:
https://cdn.statically.io/img/1.bp.blogspot.com/-Ndg5qQomzRA/XzpkC8lLCDI/AAAAAAAAMUc/blgMFC5zZK4Rya1BUH6SiiwxzmFUgTVEgCLcBGAsYHQ/d/search-engine-results-page.png?
حاول الآن فتح عنوان الرابط أعلاه، ستتغير الصورة تلقائيًا إلى webp وتتغير لاستضافة statically.io ولكن الصورة الأصلية لا تتغير، رائعا ليس كذلك؟
الأن دعنا نفكر في امر أخر، هل يبدوا ان إضافة هذا الجزء في الأعلي مملاً بعضا لشيئ؟ تخيل معن انك تقوم بتحويل جميع الصور في المدونة إلي تنثيق webp ! مملاً اليس كذلك؟
لذلك قمت بتطوير سكريب بسيط جداً مهمته هو أن يقوم بتحويل جميع االصور فب المدونة إلي تنسيق Webp بدلاً عنك، كل ما عليك فعله هو اتباع الشرح التالي
انتقل إلى لوحة تحكم بلوجر المظهر انقر فوق وقم بوضع الكود التالي أعلي الوسم </body> وثم بوضع الكود التالي اعلاه
للبحث في أي شيء في بلوجر اضغط على Ctrl + F واكتب أو الصق المصطلح للبحث في شريط البحث.
<script>
//<![CDATA[
var imgs = document.getElementsByTagName("img");
for (var i = 0; i < imgs.length; i++) {
var src = imgs[i].src;
imgs[i].src = src.replace(/^(http:|https:)?///,'https://cdn.statically.io/img/') + "?format=webp";
}
//]]>
</script>
<script>
//<![CDATA[
<script>
$('img').each(function(){
var $this = $(this);
$this.attr('src',$this.attr('src').replace(/^(http:|https:)?///,'https://cdn.statically.io/img/') + "?format=webp");
})
</script>
}
//]]>
</script>
قم بإختيار أي كود مناسب لك، أذا كان القالب المستخدم يحتوي علي مكتبة jquery فقم بإختيار كود الجيكوير، أذا لم تكن كذلك فأستخدم كود Javascript الخالص
- انقر فوق حفظ القالب ، وتحقق من مدونتك
- كيف تتأكد ان الأسكريبت يعمل بشكل جيد؟الرجاء النقر فوق صورة مدونتك، انقر بزر الماوس الأيمن على إحدى الصور وافتح الصورة في علامة تبويب جديدة، هل تغيرت إلى تنسيق webp ؟
- إذا كان الأسكريبت يعمل بشكل جيد ، فسيظهر شعار رمز المفضلة بأحمر فاتح، وليس رمز المفضلة الأصفر المعتاد ، ولا يزال عنوان url للصورة كما هو ويضيف سيرفر statically أمامه.
هذه النسخة من الأسكريبت ليست جيدا 100% ولكن أيضاً تفي بالغرض المطلوب، أذا حظي هذا المقال بردود فعل جيده او انطباع جيد ساقوم بتحديث الأسكريبت، وإضافة نسخة أحد بميزات أكثر حداثه.
حسناً نصل هنا إلي أخر موضوعونا اليوم عن حل مشكلة عرض الصور بتنسيقات الجيل القادم Webp - تسريع مدونة بلوجر، لأ تنسي مشاركة أرائك معنا عبر التعليقات وشكراً
- روابط التحميل والمشاهدة، الروابط المباشرة للتحميل من هنا
إرسال تعليق