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

 

مرحبًا أعزائي متابعي MintWeb وزوارها الأعزاء - اليوم سنناقش معكم حل مشكلة عرض الصور بتنسيقات الجيل القادم باستخدام Statically WEBP ، في هذه المقالة ، أود أن أقدم شرحًا قد يكون مهمًا لبعضكم  .

  هذه المرة أريد أن أناقش كيفية حل مشكلة سرعة مدونة بلوجر.  ربما لا يزال بعضكم مهتمًا بميزة Google Pagespeed.

  حسنًا ، هذا مجرد هراء ، لماذا؟  لأن الاختبار لا يعتمد فقط على الكود الذي نستخدمه ولكن على مدى سرعة اتصال الإنترنت الذي نستخدمه.  هذا هو السبب عند استخدام gtmetrix و google Pagespeed ، تكون النتيجة مختلفة.

  بالعودة إلى الموضوع ، يعد تقديم عرض الصور بتنسيقات الجيل التالى - Serve images in next-gen formats احدى المشكلات التي تحدث لأن مصدر الصورة على المدونة كبير جدًا ، حتى لو كان 100 كيلوبايت ، فإنه يعطينا درجة صفراء.

  علاوة على ذلك ، لا تستضيف صورك على القرص المضغوط المحلي الخاص بك ، ولكن تنتقل جميع الصور إلى bp.blogspot.com.  لكن لا داعي للقلق ، فهناك الآن حل بسيط ، وهو استخدام Statically.io وتغيير التنسيق إلى webp.

  لكن المدون يدعم بالفعل تحويله إلى WEBP باستخدام statically.io 

  لنفكر الآن في شيء آخر ، هل تبدو إضافة هذا الجزء في الأعلى مملة بعض الشيء لشيء ما؟  تخيل أنك تقوم بتحويل جميع الصور الموجودة في المدونة إلى تنسيق webp!  ممل أليس كذلك؟

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

  لا تنس أن تأخذ نسخة احتياطية من القالب

  اذهب إلى 

انتقل إلى لوحة تحكم بلوجر  المظهر  انقر فوق  وقم بوضع الكود التالي أعلي الوسم </body> وثم بوضع الكود التالي اعلاه

للبحث في أي شيء في بلوجر اضغط على Ctrl + F واكتب أو الصق المصطلح للبحث في شريط البحث.

 <script> // <! [CDATA [var imgs = document.getElementsByTagName ("img")؛  لـ (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>

  نسخة مسج إصدار جافا سكريبت نقية

  

  اختر أي كود مناسب لك ، إذا كان القالب المستخدم يحتوي على مكتبة jquery ، ثم اختر كود jquery ، إذا لم يكن كذلك ، استخدم كود Javascript النقي

  انقر فوق حفظ القالب ، وتحقق من مدونتك

  كيف تتأكد من أن النص يعمل بشكل جيد؟  الرجاء النقر فوق صورة مدونتك ، والنقر بزر الماوس الأيمن على إحدى الصور وفتح الصورة في علامة تبويب جديدة ، هل تغيرت إلى تنسيق webp؟

  إذا كان البرنامج النصي يعمل بشكل جيد ، فسيظهر شعار favicon باللون الأحمر الفاتح ، وليس الرمز المفضل الأصفر المعتاد ، ولا يزال عنوان url للصورة كما هو ويضيف الخادم أمامه بشكل ثابت.

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

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