جميعنا مهتم بزيادة سرعة مواقعنا ولعلك قد واجهت هذا الخطأ بينما كنت تقوم بتحليل صفحتك عبر Google PageSpeed Insights
(Serve images in next-gen formats).
حسنا، دعني أشرح لك أولاً ماذا يعني هذا الخطأ ومن ثم كيفية إصلاحه.
امتدادات صور الجيل القادم
بالتأكيد أنك سمعت عن امتدادات الصور مثل الـ JPEG والـ PNG، هذه امتدادت الصور التي نستخدمها يوميا ولكن شركة جوجل قامت بإنشاء امتداد جديد وهو الـ WebP. هذا النوع الجديد من الصور أسرع بكثير من الـ JPEG والـ PNG.
فعندما تقوم باستخدام الامتدادات العادية في موقعك، يقوم جوجل بإخبارك باستخدام الجيل الجديد ويقصد به الـ WebP.
كيف يعمل امتداد الـ WebP
ستقوم برفع الصور الخاصة بك الي موقعك بالامتداد العادي سواء JPEG او PNG وبعد اتباع واحدة من الطرق التي سأقوم بشرحها لاحقا، سيتم تحويل الصور تلقائيا الي WebP وعرضها للزوار. وبالتالي ستزداد سرعات تحميل صفحات موقعك.
كيفية استخدام صور الـ WebP في ووردبريس
في الواقع هناك عدة طرق لتفعيل امتداد الـ WebP للصور في موقعك. الفكرة في الاساس تتلخص في تحويل الصور الي هذا الامتداد ومن ثم إخبار المتصفح بعرض الصورة ذات الامتداد WebP اذا كان المتصفح يدعهما!. نعم لا تتعجب فهناك ما زال بعض المتصفحات لا تدعم هذا الامتداد ولكن لا تقلق، فالطرق التي سنشرحها هنا تضمن عرض الصورة بامتداد الـ WebP في حالة ان المتصفح يدعم الامتداد، والصورة الأصلية في حالة اذا كان المتصفح لا يدعم الامتداد الجديد.
لاحظ ان جوجل كروم وفايرفوكس يدعمون هذا الامتداد. فلما لا نبدأ بشرح كيفية استخدام صور الـ WebP في ووردبريس بعدة طرق مختلفة؟
الطريقة الأولي: استخدام إضافة ShortPixel
لعل هذه هي أسهل الطرق علي الإطلاق. فإضافة ShortPixel المشهورة بتحسين أداء الصور في موقعك، قادرة أيضا علي تحويل الصور الي الامتداد WebP وتوصيلها لزوارك الذين يستخدمون المتصفحات الداعمة لهذا الإمتداد.
الإضافة مجانية (حتي 100 صورة في الشهر) واذا أردت أكثر من 100 صورة فأسعار الخطط معقولة جدا!
خطوات استخدام إضافة ShortPixel:
1- اذهب الي موقع ShortPixel ثم إضغط علي Monthly Plans واختر الخطة المجانية.
2- ادخل ايميلك، ومن ثم احصل علي الـ Key الخاص بك.
3- قم بتثبيت إضافة ShortPixel Image Optimizer (وليس ShortPixel Adaptive Images) في موقعك.
4- اذهب الي صفحة الإعدادات ثم Shortpixel. الان يمكنك ادخال الـ Key الخاص بك.
5- اذهب الي تاب Advanced وفعل خيارات الـ WebP كما هو موضح بالصورة
6- اذهب الي صفحة الوسائط الخاصة بك ومن ثم Bulk Shortpixel وقم بالضغط علي Optimize لتحسين الصور وأيضا انشاء نسخة الـ WebP.
هذا كل ما يتطلبه الأمر لاستخدام صور الـ WebP في ووردبريس بإضافة ShortPixel.
الطريقة الثانية: استخدام وسم <picture>
في هذه الطريقة، ستقوم نظريا بتغيير وسم الصور الـ <img> الي وسم اخر هو الـ <picture> ولكن الطريقة لن تكون يدوية، بل سنستخدم إضافة لتقوم بتلك العملية.
كل ما عليك فعله هو تثبيت اضافة WebP Express ثم الذهاب الي الاعدادات الخاصة بالاضافة وتفعيل الخيارات الموضحة بالصورة
مع العلم، أن هذه الطريقة قد لا تعمل جيدا مع اضافات الـ Caching ولكنها كما تري سهلة الاستخدام!
الطريقة الثالثة: استخدام شبكة توزيع محتوي CDN
لعل هذه الطريقة هي الأمتع علي الاطلاق، فالسيرفر الخاص بك لن يقوم بأي تحويلات ولن تضطر لتثبيت أي اضافات. فهذه الطريقة تتم عن طريق استخدام CDN والتي بدورها تقوم بخدمة صور الـ WebP اوتوماتيكيا.
أمثلة علي شبكات توزيع المحتوي التي تقوم بخدمة الـ WebP أوتوماتيكيا:
فبمجرد اشتراكك في الخدمة، تستطيع اختيار توصيل المحتوي مع خدمة امتداد الـ WebP.
حسنا، انت الان لديك 3 اختيارات لتفعيل امتداد الـ WebP في موقعك. قم باختيار المناسب لك الان.
في موقعي هذا، انا ذهبت للاختيار الاول، فـ Shortpixel تقوم بتحسين أداء الصور بشكل مذهل وأيضا تمكنني من استخدام صور الـ WebP في ووردبريس.
اذا كان لديك أي استفسار، لا تتردد في كتابته في قسم التعليقات.
