يعتمد أداء الويب الحديث إلى حد كبير على تحسين الموارد ، مع التركيز بشكل كبير على الصور. تمثل الصور نسبة كبيرة من البيانات التي تستخدمها مواقع الويب. لذلك ، فإن تقديم الصور بأكثر التنسيقات كفاءة يمكن أن يكون له تأثير عميق على أداء الموقع وتجربة المستخدم وترتيب تحسين محركات البحث. توفر أداة تدقيق Lighthouse من Google رؤى مهمة للمساعدة في تحقيق هذا التحسين ، وإحدى هذه الأفكار هي فرصة "عرض الصور بتنسيقات حديثة". تحدد هذه الميزة ، الموجودة في قسم الفرص في تقرير Lighthouse ، جميع الصور الموجودة على الموقع بتنسيقات قديمة ، مما يشير إلى مكاسب محتملة في الأداء يمكن تحقيقها من خلال تقديم هذه الصور بتنسيقات حديثة ، مثل AVIF و WebP.
مشكلة تنسيقات الصور التقليدية
لا تزال العديد من مواقع الويب تستخدم التنسيقات التقليدية مثل JPEG و PNG و GIF لصورها. في حين أن هذه التنسيقات لها نقاط قوتها وقد خدمت الويب جيدًا لسنوات ، إلا أنها ليست فعالة مثل بعض التنسيقات الحديثة عندما يتعلق الأمر بالضغط والجودة. غالبًا ما تؤدي هذه التنسيقات القديمة إلى أحجام ملفات أكبر ، مما قد يؤدي إلى إبطاء أداء الموقع ، لا سيما للمستخدمين الذين لديهم اتصالات إنترنت أبطأ أو على أجهزة الجوال.
الوعد بتنسيقات الصور الحديثة
في السنوات الأخيرة ، ظهر تنسيقان كخيارات ممتازة لصور الويب: AVIF و WebP.
يعتمد AVIF ، أو تنسيق ملف صورة AV1 ، على تنسيق ترميز الفيديو AV1 الذي طوره تحالف الوسائط المفتوحة. يوفر مكاسب ضغط كبيرة مقارنة بالتنسيقات القديمة ، مما يعني أنه يمكنه تقديم صور عالية الجودة بأحجام ملفات أصغر بكثير. هذا يجعل AVIF اختيارًا ممتازًا لمواقع الويب ذات المحتوى الثقيل للصور.
يوفر WebP ، الذي طورته Google ، أيضًا إمكانات ضغط رائعة ، خاصة للصور ذات الشفافية (قنوات ألفا) ، حيث يتفوق بشكل كبير على PNG. يدعم هذا التنسيق كلاً من الضغط المفقود وغير المنقوص ، مما يسمح للمطورين بموازنة جودة الصورة وحجم الملف وفقًا لاحتياجاتهم.
تحديد الفرص مع المنارة
تُعد أداة المنارة مفيدة في اكتشاف الفرص لتحسين أداء الموقع. من خلال تحليل موارد الموقع ، فإنه يوفر قائمة بجميع الصور المعروضة حاليًا بتنسيقات قديمة. يوضح هذا التقرير التفصيلي التوفير المحتمل بالكيلوبايت (KB) أو الميجابايت (MB) الذي يمكن الحصول عليه من خلال تحويل هذه الصور إلى تنسيقات حديثة.
لكل صورة ، تحسب Lighthouse الفرق بين حجم الملف الحالي وحجم الملف المقدر إذا تم تقديمها بتنسيق حديث. ثم يعرض هذه المدخرات المحتملة ، ويقدم للمطورين إرشادات واضحة حول مكاسب الأداء المحتملة التي يمكن تحقيقها.
تنفيذ التغيير
بعد تحديد الصور المراد تحويلها ، تتضمن الخطوة التالية إنشاء إصدارات AVIF أو WebP من هذه الصور. هناك العديد من الأدوات والمكتبات المتاحة لهذا الغرض ، بما في ذلك Squoosh ، وهو تطبيق ويب لضغط الصور عبر الإنترنت تم تطويره بواسطة Google ، و ImageMagick ، وهي مجموعة برامج قوية تتعامل مع تحويل الصور ومعالجتها.
بمجرد تحويل الصور ، يجب تقديمها للمستخدمين بطريقة تتوافق مع المستعرضات الخاصة بهم. غالبًا ما يتضمن ذلك استخدام عنصر HTML "للصورة" أو طرق مشابهة ، مما يسمح بتقديم إصدارات مختلفة من الصورة وفقًا لإمكانيات المتصفح.
خاتمة
يعد تقديم الصور بتنسيقات حديثة مكونًا مهمًا لتحسين أداء الويب. من خلال الاستفادة من ميزة "خدمة الصور بتنسيقات حديثة" في Lighthouse ، يمكن لمطوري الويب تحديد المدخرات المحتملة التي توفرها هذه التنسيقات بسهولة. إن تبني AVIF و WebP لا يؤدي فقط إلى تحسين أداء الموقع ؛ إنه يعزز تجربة المستخدم ويمكن أن يؤثر بشكل إيجابي على تصنيفات تحسين محركات البحث. تنسيقات الصور الحديثة موجودة لتبقى ، والاستفادة منها إلى أقصى إمكاناتها فرصة لا ينبغي تفويتها.
