كيفية تشفير الصور بكفاءة على WordPress وإصلاح تحذير PageSpeed

إذا أجريت تدقيقًا لموقع WordPress الخاص بك من خلال PageSpeed ​​Insights ، فقد توصي Lighthouse بتشفير صورك بكفاءة. PageSpeed ​​Insights (PSI) هي أداة تنشئ تقرير أداء لصفحة WordPress الخاصة بك بالكامل. إذا اكتشف إمكانية تحسين صورك بشكل أفضل ، فإنه يطلق تحذير "تشفير الصور بكفاءة".

في هذا الدليل ، نشرح معنى تشفير الصور بكفاءة وكيفية التحقق من حالة صورك . هذه أيضًا طريقة فعالة لتحسين درجة أداء Lighthouse. نشارك أيضًا 6 تقنيات لتحسين الصور وطريقة سريعة لإصلاح تحذير "تشفير الصور بكفاءة".

دعنا نتعمق!

ماذا يعني تشفير الصور بكفاءة؟

يعني ترميز الصور بكفاءة تحسين الصور لتقليل حجم ملفها دون التأثير بشكل كبير على جودتها.

كيف علم Lighthouse الصور على أنها قابلة للتحسين؟ ما الذي يثير هذه المشكلة؟

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

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

لتجنب هذا الموقف ، نشارك 6 تقنيات تحسين تتيح لك عرض صورك على الويب بشكل صحيح.

6 طرق لتشفير الصور بكفاءة على WordPress:

هناك ست خطوات يمكنك اتخاذها لتشفير الصور بكفاءة ومعالجة توصية PageSpeed ​​Insight هذه ، بما في ذلك:

1. ضغط صورك
2. تنفيذ الحمل الكسول
3. تحويل الصور إلى WebP (تنسيق الجيل التالي)
4. خدمة الصور بالأبعاد الصحيحة
5. استخدام صورة CDN
6. استبدال ملفات GIF المتحركة بالفيديو

لنستعرض كل خطوة.

1. ضغط صورك

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

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

في المثال أدناه ، أحدهما هو الملف الأصلي ، والآخر مضغوط. هل تستطيع ملاحظة الفرق؟ لا استطيع.

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

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

2. تنفيذ الحمل الكسول

يساعد التحميل الكسول على ترميز صورك بكفاءة لأنها تقنية تحسين تهدف إلى عرض الصور عند الحاجة فقط. إذا شاهدها المستخدم ، فسيتم عرض الصور بواسطة المتصفح. وإلا فسيتم تأجيل التحميل لتحديد أولويات المحتوى الأكثر أهمية. توصي Google بـ "تأجيل الصور خارج الشاشة" على PageSpeed ​​، مما يعني تطبيق نص التحميل البطيء التالي:

 “loading=lazy”

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

إذا كنت لا ترغب في تنفيذ التحميل البطيء يدويًا ، فيمكنك استخدام مكون إضافي مجاني من WordPress مثل Lazy Load بواسطة WP Rocket أو إلقاء نظرة على أفضل المكونات الإضافية للتحميل البطيء لـ WordPress.

3. تحويل الصور إلى WebP (تنسيق الجيل التالي)

تم تطوير WebP بواسطة Google ، وهو تنسيق صور من الجيل التالي يوفر ضغطًا أفضل للصور بدون فقدان البيانات. ينتج عن هذا ترميز صورك بشكل أفضل على موقع WordPress الخاص بك واجتياز تدقيق PageSpeed.

في الواقع ، وفقًا لـ Google ، "متوسط ​​حجم ملف WebP أصغر بنسبة 25٪ -34٪ مقارنة بحجم ملف JPEG". يوضح هذا الجدول أن WebP يحقق ضغطًا أفضل من تنسيق JPEG:

هل اقتنعت؟ يستطيع البرنامج المساعد Imagify تحويل صورك إلى WebP مباشرة من لوحة معلومات WordPress.

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

4. خدمة الصور بالأبعاد الصحيحة

يسهل Lighthouse العثور على الصور ذات الحجم غير الصحيح على موقع WordPress الخاص بك. ما عليك سوى مراجعة صفحتك ، وإذا وجدت تحذير "حجم الصور المناسب" ، فيجب عليك تغيير حجمها.

يمكن أيضًا استخدام لوحة DevTools Elements للتحقق من حجم الصورة التي يتم عرضها:

يبدو هذا القسم سهلاً ، ولكن نظرًا لتنوع أحجام الشاشات المتوفرة في عام 2022 ، يمكن أن تتعقد الأمور بسرعة.

قاعدة واحدة: من الناحية المثالية ، يجب ألا تعرض صفحتك أبدًا صورًا أكبر من شاشة المستخدم.

• يبلغ متوسط ​​حجم شاشة سطح المكتب 1920 × 1080 بكسل
• يبلغ عرض جهاز معظم الهواتف المحمولة 400 بكسل

بالنسبة لموقع WordPress الخاص بك ، يمكنك إما تحميل الصور من خلال مكتبة الوسائط أو مباشرة على صفحتك. توصي Google بضمان استخدام أحجام الصور المثلى (بما في ذلك تلك الخاصة بنقاط التوقف سريعة الاستجابة). المفتاح هو تجنب استخدام الصور بالحجم الكامل وتغيير حجمها بشكل صحيح:

• حاول أن تجعل حجم ملف صورتك أقل من 200 كيلوبايت
• بالنسبة لمعظم الصور ، يكفي عرض بحد أقصى 800 بكسل

سيضمن الاحتفاظ بالصور بين هذه الأرقام تحميلها بسرعة على أجهزة المستخدم.

يمكنك الذهاب إلى أبعد من ذلك وتحسين صورك وفقًا لكل جهاز كما هو موضح أدناه في Sketch:

لديك العديد من الخيارات لحجم صورك بشكل صحيح وتجنب تباطؤ موقع الويب الخاص بك:

• افعل ذلك يدويًا باستخدام أدوات مثل Photoshop و Lightroom و Gimp وما إلى ذلك.
• استخدم مكونًا إضافيًا لتحسين الصور مثل Imagify. على غرار الضغط ، يمكنك أيضًا استخدام الحجم الكبير لتغيير حجم جميع الصور الموجودة على موقعك:

5. استخدام صورة CDN

لتشفير الصور بكفاءة على WordPress ، يجب عليك اختيار مزود CDN. سيوفر صورك بشكل أسرع ويساعد في التخلص من المشكلات المتعلقة بالصور في Google PageSpeed. تتخصص شبكة CDN في تحسين الصور وتسليمها أينما كان المستخدمون في العالم:

وفقًا لـ WebDev ، "يمكن أن يؤدي التبديل إلى CDN للصور إلى توفير 40-80٪ في حجم ملف الصورة" ، كما هو موضح أدناه:

6. استبدال ملفات GIF المتحركة بالفيديو

سيؤدي استبدال ملف GIF متحرك بفيديو إلى تحسين الأداء لأن مقطع فيديو بتنسيق .mp4 أخف بكثير من ملف GIF ، كما ترى في المثال أدناه:

- حجم ملف GIF: 12 ميجا بايت
- حجم ملف MP4: 286 كيلو بايت ( إجمالي التوفير: 98٪ )

تنصح PageSpeed ​​أيضًا بتقديم المحتوى المتحرك الخاص بك من خلال تنسيق الفيديو وليس باستخدام GIF. عندما تقوم بتحويل المحتوى الخاص بك إلى MP4 ، تأكد من أن لديك الإعدادات الصحيحة لجعله يبدو وكأنه GIF:
- يجب أن تدور باستمرار
- يجب أن تلعب تلقائيا
- يجب أن تكون صامتة

هناك عدد من الطرق لتحويل صور GIF إلى فيديو ، لقد استخدمت Ezgif للمقارنة أعلاه.

الآن بعد أن رأينا تقنيات التحسين الست لترميز الصور بكفاءة على WordPress ، اسمحوا لي أن أشارككم صندوق أدوات الأداء الخاص بي. يمكن أن يكون مفيدًا إذا كنت بحاجة إلى زيادة سرعة موقع WordPress الخاص بك والتأكد من أن صورك مُحسَّنة جيدًا للويب.

في القسم التالي ، سنركز على Imagify ، المكون الإضافي القوي لضغط الصور الخاص بنا والذي يقوم بترميز الصور بكفاءة تلقائيًا.

كيفية إصلاح ترميز الصور بكفاءة باستخدام Imagify

بفضل Imagify ، يمكنك ضغط صورك دون المساومة على الجودة وإصلاح تحذير "تشفير الصورة بكفاءة".

حان الوقت لمشاهدة Imagify أثناء العمل ومقارنة رؤى PageSpeed ​​مع Imagify وبدونه.

قبل Imagify - نتائج أدائي على PageSpeed ​​Insights

لا تقدم Lighthouse أي نتائج رائعة ، وأواجه بعض المشكلات المتعلقة بالصور ، وهي:

• تشفير الصور بكفاءة (وهو موضوعنا لهذا اليوم)
• خدمة الصور بتنسيقات الجيل التالي
• الحجم المناسب للصور

حان الوقت الآن لتنزيل Imagify لضغط وتقديم صورنا بتنسيقات الجيل التالي ، وحجمها بشكل مناسب ، وبالطبع ترميزها بكفاءة.

باستخدام Imagify - نتائج الأداء على PageSpeed ​​Insights

قام Imagify بإصلاح تحذير "تشفير الصورة بكفاءة"! لقد قام أيضًا بتحسين جميع صوري ووضع مشاكلي السابقة في منطقة التدقيق التي تم تمريرها:

تخيل تصغير حجم ملف صورتي بنسبة 90٪ - فقد انتقل من 2 ميغابايت تقريبًا إلى 200 كيلوبايت ، كما هو موضح في المثال أدناه:

هل تريد التخلص من تحذير "استعادة الصورة بكفاءة" ، مثلما فعلت؟

قم بتثبيت Imagify وتطبيق الإعدادات التالية:

• إعداد Imagify (إنه أمر مباشر)
• حدد مستوى التحسين الذي تريد استخدامه لضغط صورك. اخترت Ultra ، أعلى مستوى تحسين:

• قم بتحويل صورك إلى WebP ، تنسيق الجيل التالي الذي أوصت به PageSpeed ​​Insights:

• حسِّن صورك الكبيرة بشكل مجمّع باستخدام Imagify. ( هذا يعني تحسين المكتبة بأكملها بنقرة واحدة!)
• وبهذه الطريقة ، اختفى تحذير PSI.

تجدر الإشارة إلى أن عملية تحسين الصور هذه كانت مجانية تمامًا!

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

• 4.99 دولارات شهريًا مقابل 500 جيجابايت (حوالي 5000 صورة)
• و 9.99 دولارات شهريًا للاستخدام غير المحدود.

إذا كنت لا تزال لديك شكوك ، فإن PageSpeed ​​Insights توصي أيضًا باستخدام مكون إضافي لتحسين الصورة مثل Imagify:

تغليف

بدون Imagify ، حددت PageSpeed ​​العديد من المشكلات لصوري:

عند استخدام Imagify ، تم إصلاح جميع المشكلات المتعلقة بالصور. تم تحسينها في أحد تنسيقات الجيل التالي (WebP) وتحذير "تشفير الصور بكفاءة" الخاص بي أخيرًا تحول إلى اللون الأخضر.

إذا كنت مثلي وتريد تشفير صورك بكفاءة في WordPress ببضع نقرات ، فلماذا لا تستخدم Imagify؟ يمكنك تجربة Imagify مجانًا ، وتحسين صورك وإجراء تدقيقك الخاص على PageSpeed ​​Insights ، تمامًا كما فعلت. اسمحوا لي أن أعرف في التعليقات ما إذا كنت قد اجتزت الاختبار أيضًا بفضل Imagify ، أنا فضولي!