حل مشكلة عرض الصور بتنسيقات الجيل القادم Webp - تسريع مدونة بلوجر

مرحباً متابعيين مينت ويب الكرام و زوارنا الأعزاء - اليوم سنناقش معكم حل مشكلة عرض الصور بتنسيقات الجيل القادم باستخدام 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/AVvXsEj5h2fKLdx6481X4kJx3IgkhMr22Gb5QMuY8otIim6KGNaW8StvaWBp5zE7FvaScK8rSHF4F4A6bqFClX-xaBuGiYqK66UaxnJyZaUtPX8cPyZVScdWrHMNHDo9b6hKpIqcphhYcKLd5z47/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 بدلاً عنك، كل ما عليك فعله هو اتباع الشرح التالي

<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 الخالص

هذه النسخة من الأسكريبت ليست جيدا 100% ولكن أيضاً تفي بالغرض المطلوب، أذا حظي هذا المقال بردود فعل جيده او انطباع جيد ساقوم بتحديث الأسكريبت، وإضافة نسخة أحد بميزات أكثر حداثه.

حسناً نصل هنا إلي أخر موضوعونا اليوم عن حل مشكلة عرض الصور بتنسيقات الجيل القادم Webp  - تسريع مدونة بلوجر، لأ تنسي مشاركة أرائك معنا عبر التعليقات وشكراً