كيفية إصلاح تسليم الصور في PageSpeed Insights

1. 01افتح الصفحة المعنية في PageSpeed Insights أو Lighthouse. اختر تقرير الهاتف أو سطح المكتب المطلوب، ثم وسّع تنبيه تحسين تسليم الصور وسجّل رابط الصورة المحددة والتعديل المقترح.
2. 02ابحث عن الصورة في الصفحة. قارن الملف المنزّل بأبعاد عرضه في أدوات المطوّر مع مراعاة كثافة الشاشة. افحص المصدر المختار، لا الأصل الموجود في مكتبة الوسائط فقط.
3. 03إذا احتوت الصورة المسلّمة على بكسلات زائدة، فأصلح الأحجام المتجاوبة أو إعدادات القالب أولًا. إذا كانت الأبعاد مناسبة، فقارن الضغط أو تنسيقًا بديلًا مدعومًا.
4. 04جهّز نسخة بالأبعاد المطلوبة في محرر صور. استخدم ضاغط صور Bitinz للملفات المناسبة، وافحص النص والحواف والشفافية والتدرجات قبل استبدال أي شيء.
5. 05انشر الملف البديل أو تعديل القالب. تأكد من أن الصفحة تطلب الصورة الجديدة بدل نسخة قديمة مخزنة مؤقتًا، ثم أعد التقرير بإعداد الجهاز نفسه.

يقدّر Chrome التوفير من حجم تنزيل الصورة ونسبة فعالة للبايتات إلى البكسلات حسب التنسيق. لا تُحدّد الصور التي يقل توفيرها المتوقع عن 4 KiB. هذه عتبة للتقرير وليست حدًا أقصى مقترحًا للصور.

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

• WordPress: افحص حجم الصورة المختار في المكوّن أو القالب، ووسمي srcset وsizes الفعليين. ينشئ WordPress بدائل متجاوبة، لكن قالبًا مخصصًا أو وصفًا غير دقيق للتخطيط قد يقدّم حجمًا غير مناسب. تعديل الأصل وحده قد يترك النسخ المولّدة السابقة قيد الاستخدام.
• Shopify: تُحسّن صور المتجر بالفعل عبر CDN الخاص بـ Shopify، بما يشمل اختيار التنسيق. يوضح Shopify أن الضغط اليدوي قبل الرفع غير ضروري. عند ظهور تنبيه، افحص عرض الصورة الذي يطلبه القالب والوسوم المتجاوبة بدل إضعاف المصدر مرارًا. يستطيع مطوّر القالب فحص image_url وimage_tag.
• Next.js: استخدم إعدادات التجاوب في مكوّن Image واضبط sizes ليتوافق مع التخطيط الفعلي، خاصة مع fill. دون قيمة مناسبة، قد تُعامل صورة ضيقة كأنها بعرض نافذة العرض ويُنزّل بديل أكبر. تغيير الجودة وحدها لا يصلح عدم التطابق هذا.

احتفظ بأصل قابل للتحرير. للصور المقدمة بشكل مستقل، قارن حجم الملف المجهز ومظهره الفعليين؛ تساعدك مقارنة JPG وPNG وWebP على الاختيار. لا يغيّر Bitinz أبعاد الصور. قد ينتج التحويل إلى WebP ملفًا أكبر، لذا احتفظ بالنسخة الأنسب للصفحة.

للنشر المتكرر، تستطيع واجهة المطوّرين API معالجة الملفات المناسبة بحساب وحصة شهرية. لا تصلح وسوم القالب أو التخطيط المتجاوب. افحص الصفحة المقدمة مجددًا بعد ربط الأتمتة.

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