تقديم الصور بتنسيقات الجيل القادم لـ SEO

تحذير Lighthouse يعني تحويل ملفات JPEG و PNG إلى WebP أو AVIF، ثم تقديمها عبر عنصر picture مع الاحتفاظ بالملف الأصلي كبديل احتياطي. يعد هذا التدقيق أحد أسهل التدقيقات التي يمكن تجاوزها، لأن الحل آلي وليس هيكلياً.

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

ما الذي يقيسه Lighthouse

يقوم Lighthouse بإعادة ترميز كل صورة داخلياً بتنسيق WebP ويبلغ عن الفرق عندما يتجاوز التوفير حداً معيناً. الرقم الوارد في التقرير هو تقدير حقيقي وليس مجرد توصية عامة.

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

الأكواد البرمجية التي تلبي متطلبات التدقيق

استخدم عنصر picture مع وضع AVIF أولاً، ثم WebP ثانياً، وملف JPEG الأصلي في علامة img. يختار المتصفح أول مصدر يفهمه، وبذلك تحصل المتصفحات الأحدث على الملف الصغير بينما لا تزال المتصفحات الأقدم تحصل على الصورة.

يجب أن تظل علامة img موجودة، لأنها تحمل النص البديل alt، والأبعاد، والبديل الاحتياطي. يؤدي حذف سمتي العرض والارتفاع إلى حدوث إزاحة في تخطيط الصفحة أثناء تحميل الصور، مما يضر بمقياس آخر من مؤشرات أداء الويب الحيوية Core Web Vitals أثناء إصلاح هذا المقياس. اضبط كلتا السمتين على حجم البكسل الفعلي للصورة الاحتياطية.

كيفية تجاوز التدقيق

لحل هذا التحذير بشكل صحيح، اتبع هذه الخطوات الست.

1. افتح تقرير Lighthouse واكتب قائمة بالصور التي يذكرها بالاسم، وهي الصور التي يمكن تحقيق توفير ملموس فيها.
2. تحقق من حجم عرض كل صورة، حيث إن العديد منها يكون بحجم أكبر من اللازم بالإضافة إلى كونها بالتنسيق الخاطئ.
3. قم بتغيير حجم كل صورة لتناسب عرض عرضها الفعلي، ومضاعفته للشاشات ذات الكثافة العالية.
4. قم بالتحويل إلى WebP بجودة 80، وإلى AVIF بجودة 65 للصور الأكبر حجماً على الصفحة.
5. قدم النتائج من خلال عنصر picture مع استخدام الصورة الأصلية كبديل احتياطي في علامة img.
6. أعد تشغيل Lighthouse للتأكد من زوال التحذير وعدم ظهور أي إزاحة في تخطيط الصفحة.

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

أي تنسيق يناسب أي صورة

هل تقوم منصتك بهذا بالفعل

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

اختبر ذلك في دقيقتين. افتح الصفحة المنشورة، وانقر بزر الماوس الأيمن على الصورة وافتحها في علامة تبويب جديدة، ثم اقرأ امتداد الملف في شريط العنوان. وجود امتداد .webp لملف قمت بتحميله بتنسيق JPEG يعني أن المنصة تقوم بالتحويل بالفعل. تقوم Shopify ومعظم استضافات WordPress المدارة والعديد من أدوات بناء المواقع بهذا بشكل افتراضي.

لماذا يعود التحذير للظهور أحياناً

تتسبب عمليات التحميل الجديدة في عودة المشكلة عندما تكون خطوة التحويل يدوية وليست تلقائية. فالموقع الذي تم إصلاحه في يناير سيظهر فيه التحذير مجدداً بحلول يونيو إذا قام المحررون بالتحميل مباشرة من الكاميرا.

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

هل يجب استخدام AVIF أم WebP أم كلاهما

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

تتغير هذه الحسبة في المواقع التي تعتمد بكثافة على الصور الفوتوغرافية، حيث يوفر AVIF نسبة إضافية تتراوح بين 20 إلى 30 بالمئة على الملفات التي تقاس بالفعل بمئات الكيلوبايت. في صفحة تحمل صورة رئيسية بحجم 600 KB، يعد هذا خفضاً حقيقياً. أما في صفحة تحتوي على صور مصغرة بحجم 40 KB، فإن الجهد المبذول في هذه العملية الإضافية يفوق الفائدة المرجوة، ويكفي استخدام WebP وحده لتجاوز التدقيق.

التحقق من النتيجة بشكل صحيح

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

تأكد من أن المتصفح يتلقى التنسيق الجديد فعلياً بدلاً من افتراض ذلك. افتح أدوات المطورين، وانتقل إلى علامة التبويب Network، وقم بالتصفية حسب الصور (Img) وأعد تحميل الصفحة. يوضح عمود Type ما تم تقديمه بالفعل. إذا كانت الصفحة لا تزال تقدم JPEG بعد التحويل، فهذا يعني عادةً أن كود عنصر picture خاطئ، أو أن هناك طبقة تخزين مؤقت (Cache) تحتفظ بالنسخة السابقة.

التدقيقات ذات الصلة التي تظهر إلى جانبه

• تحديد حجم الصور بشكل مناسب. حجم الصورة أكبر من المساحة التي تُعرض فيها. قم بتغيير الحجم بدلاً من الضغط.
• ترميز الصور بكفاءة. الضغط خفيف جداً. قم بخفض إعداد الجودة.
• تأجيل الصور خارج الشاشة. أضف ميزة التحميل الكسول (lazy loading) للصور التي تظهر أسفل الجزء المرئي من الصفحة.
• عنصر Largest Contentful Paint. عادة ما تكون صورتك الرئيسية، وهي التي تستحق الاهتمام أولاً.
• عناصر الصور لا تحتوي على عرض وارتفاع محددين. أضف كلتا السمتين لمنع حدوث إزاحة في تخطيط الصفحة.

تظهر هذه التدقيقات الخمسة معاً عادةً، ويؤدي تغيير حجم الصور وتحويلها المذكورة في التقرير إلى حل معظمها في خطوة واحدة.

ما مدى التحسن الفعلي الذي يطرأ على الصفحة

يؤدي التحويل إلى التنسيقات الحديثة عادةً إلى إزالة 25 إلى 35 بالمئة من حجم الصور، وغالباً ما يؤدي تغيير الحجم أولاً إلى إزالة أكثر من ذلك بكثير. في الصفحات الغنية بالصور، غالباً ما يصل التأثير المشترك إلى 70 أو 80 بالمئة.

يظهر هذا التحسن في مقياس Largest Contentful Paint، الذي يقيس سرعة ظهور المحتوى الرئيسي. يتم تحديد هذا القياس عادةً بواسطة صورة واحدة، لذا فإن تقليل حجم ملف الصورة الرئيسية له تأثير يفوق بكثير نسبته من حجم الصفحة الإجمالي. تقليل حجم 20 صورة صغيرة يقل أهمية عن تقليل حجم صورة واحدة كبيرة.

ما يجب تجنبه

لا تقم بإزالة بديل JPEG الاحتياطي، ولا تقم بتحويل الصور التي سيقوم الزوار بتنزيلها. كلا الخطأين يضحيان بميزة حقيقية من أجل تحسين طفيف في النتيجة.

يجب أن تظل الملفات الصحفية، والأدلة القابلة للطباعة، والقوالب القابلة للتنزيل، وملفات الموردين بتنسيق JPEG أو PNG، لأن WebP لا يعمل بشكل جيد خارج المتصفحات. تقديم هذه الملفات بتنسيقات حديثة يتسبب في طلبات دعم فني من أشخاص لا يمكنهم فتحها، وهو ما يكلف أكثر من النطاق الترددي (Bandwidth) الذي تم توفيره.

تحويل الصور التي ذكرها التقرير

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

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

احتفظ بالملفات المحولة إلى جانب الملفات الأصلية باستخدام أسماء متطابقة، بحيث يمكن إنشاء أكواد عنصر picture بنمط يمكن التنبؤ به بدلاً من تعديلها يدوياً لكل صورة. إن وجود مجلد يحتوي على hero.jpg و hero.webp و hero.avif يسهل صياغته برمجياً، ويجعل الانتقال القادم إلى تنسيق جديد مجرد عملية تحويل جماعي بدلاً من إعادة كتابة كل صفحة.