سكريبت تحويل الصور في بلوجر الي WEBP واضافة خاصية التخزين المؤقت علي الصور تلقائي

يعتبر تحسين سرعة تحميل المواقع من أهم العوامل التي تؤثر بشكل مباشر على تجربة المستخدم وتفاعله مع المحتوى. الصور تعد جزءًا أساسيًا من تصميم أي موقع أو مدونة، إذ تضيف بعدًا بصريًا جذابًا، ولكنها قد تكون في نفس الوقت سببًا رئيسيًا في إبطاء تحميل الصفحة. في هذا السياق، تُعتبر صيغة WEBP من الحلول المتقدمة لتحسين أداء الصور على الويب. صيغة WEBP، التي تم تطويرها بواسطة جوجل، توفر ضغطًا عالى الجودة للصور مع تقليص حجم الملف بشكل ملحوظ مقارنة بصيغ الصور التقليدية مثل JPEG و PNG. هذا التحويل لا يقتصر فقط على تحسين سرعة تحميل الموقع، بل يؤثر أيضًا بشكل إيجابي على تجربة المستخدم بشكل عام.

سكريبت تحويل الصور في بلوجر الي WEBP واضافة خاصية التخزين المؤقت علي الصور تلقائي

فوائد تحويل الصور إلى WEBP

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

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

تغيير s16000 إلى s1600-rw-e90

تعديل الرابط من s16000 إلى s1600-rw-e90 هو خطوة إضافية تعزز من الكفاءة. هذا التغيير في الرابط يساهم في تقديم صورة بحجم مناسب مع الحفاظ على جودتها مع استخدام WEBP. من خلال هذا التعديل، لا يتم فقط تقليص حجم الصورة، بل يتم أيضًا تحسين التوافق مع تقنيات الضغط المتقدمة التي توفرها WEBP. الصور التي تحتوي على هذا التعديل في الرابط سيتم تحميلها بشكل أسرع، وستؤدي إلى تقليل استهلاك الموارد، مما ينعكس بشكل إيجابي على الأداء العام للموقع.

الفوائد الشاملة لهذه التعديلات على المدونة

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

وفي إطار تحسين SEO، نجد أن محركات البحث تولي أهمية كبيرة للسرعة في تحميل الصفحات. سرعة تحميل الصور التي تم تحويلها إلى صيغة WEBP مع التعديل في الرابط يعكس تحسنًا ملحوظًا في أداء الموقع، وبالتالي في ترتيب الموقع في نتائج محركات البحث. المواقع التي تتمتع بسرعة تحميل جيدة تجدها غالبًا أكثر ظهورًا في نتائج البحث، وهو ما يعزز من الظهور العام للموقع ويزيد من فرص الوصول إلى جمهور أكبر.

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

كل هذه العوامل تؤدي إلى تحسين شامل للموقع من حيث السرعة، الأداء، ورضا المستخدمين. التعديلات على الصور عبر التحويل إلى صيغة WEBP وتغيير الرابط إلى s1600-rw-e90 تمثل خطوة أساسية نحو بناء تجربة مستخدم أفضل، مما يساهم في تحسين التفاعل مع المحتوى وزيادة التفاعل مع الموقع. في النهاية، يمكن القول إن تحسين الصور بهذه الطريقة يمثل استثمارًا ذا قيمة حقيقية لأي مدونة أو موقع إلكتروني يسعى إلى تحسين أدائه ورفع جودة الخدمة المقدمة لزواره.

شرح تعديل s16000 الي s1600-rw-e90 لتحويل الصورة الي webp و تخزينها مؤقتا 90 يوم

لتحويل الصور في مدونة بلوجر إلى صيغة WEBP وتعديل رابط الصورة من s16000 إلى s1600-rw-e90 بشكل تلقائي لجميع الصور، يمكن تنفيذ ذلك باستخدام أكواد JavaScript مدمجة مع بلوجر.

تحويل الصور في بلوجر الي WEBP واضافة خاصية التخزين المؤقت علي الصور تلقائي

1. إعداد الكود:

سوف تستخدم JavaScript لالتقاط جميع الروابط للصورة داخل المدونة وتحويلها إلى صيغة WEBP وإجراء التعديلات المطلوبة على الرابط.

2. كود JavaScript:

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

<script>
  window.onload = function() {

    const images = document.querySelectorAll('img');

    images.forEach(function(image) {
      let imgSrc = image.src;
      

      if (imgSrc && imgSrc.includes('s16000')) {
        // استبدال s16000 بـ s1600-rw-e90
        imgSrc = imgSrc.replace('s16000', 's1600-rw-e90');
        

        if (!imgSrc.endsWith('.webp')) {
          imgSrc = imgSrc.split('?')[0] + '.webp'; 
        }


        image.src = imgSrc;


        image.onload = function() {

          const cacheControl = "public, max-age=7776000"; // 90 يومًا (7776000 ثانية)
          image.setAttribute('cache-control', cacheControl);
        };
      }
    });
  };
</script>
    

3. الشرح:

التعديل على الروابط: الكود يلتقط جميع الصور في الصفحة باستخدام document.querySelectorAll('img') ثم يمر عبر كل صورة ويستبدل الجزء s16000 بـ s1600-rw-e90.

إضافة .webp: يضيف امتداد .webp للصورة إذا لم يكن موجودًا.
التخزين المؤقت: يتم تعيين فترة التخزين المؤقت للصورة إلى 90 يومًا (7776000 ثانية).

4. طريقة إضافة الكود إلى مدونتك:

  • الدخول إلى مظهر المدونة.
  • اضغط على تعديل HTML ثم ضع الكود فوق وسم وقم بالضفط على حفظ </head

ملاحظات إضافية:

يمكن تعديل الكود ليعمل مع فئات معينة من الصور إذا كنت ترغب في تصفية بعض الصور.

بهذا الشكل، ستكون قد حولت جميع صور مدونتك إلى WEBP وطبقت التعديلات المطلوبة على الروابط بطريقة تلقائية.

تعليقات