مقال

تحسين وسائط الموقع للسرعة ومؤشرات Core Web Vitals

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

اختر الصيغة الصحيحة قبل أي شيء آخر

يهم اختيار الصيغة أكثر من أي شريط جودة. للصور الفوتوغرافية على صفحة ويب، يُعد WebP الخيار الافتراضي الصحيح: فهو أصغر بنسبة 25 إلى 35 بالمئة من JPEG عند الجودة المرئية نفسها وتدعمه كل المتصفحات الحديثة. ويضغط AVIF أكثر، بنسبة أفضل تصل إلى 50 بالمئة من JPEG، مقابل ترميز أبطأ. استخدم AVIF لصور الواجهة الرئيسية وصور المنتجات التي تضغطها مرة واحدة، واستخدم WebP لكل ما تعالجه بالدُّفعات أو تحتاجه بسرعة. أما PNG فمكانه فقط حيث تحتاج إلى دقة بلا فقدان أو خلفية شفافة. وSVG هو الخيار المعقول الوحيد للشعارات والأيقونات والرسوم التوضيحية: فهو يتكيف مع أي حجم وغالبًا ما يزن بضعة كيلوبايتات مقابل مئات لما يقابله من رسم نقطي.

ضغط الصور دون فقدان مرئي للجودة

ابدأ بتغيير الأبعاد إلى أبعاد العرض الفعلية: صورة واجهة تُعرَض بعرض 1280 بكسل لا تحتاج إلى 4000 بكسل من البيانات. غيّر الأبعاد أولًا، ثم اضغط. للصور الفوتوغرافية، تُعد الجودة 80 في WebP أو JPEG الحد العملي الذي يبدأ الزوار العاديون دونه بملاحظة الفرق، لذا استهدف 75 إلى 85 وانظر إلى الناتج بتكبير كامل قبل النشر. أما الرسوم ذات النص والمساحات المسطحة، فإن PNG بلا فقدان أو SVG يحفظان الحدة التي تطمسها الصيغ ذات الفقدان. وأداة ضغط الصور في هذا الموقع تتعامل مع كل هذه الصيغ، وتعمل بالكامل داخل متصفحك، وتطبّق الخوارزميات نفسها التي تستخدمها أدوات سطح المكتب المخصصة.

تحويل الفيديو للويب دون رفعه

الحلقات الخلفية والفيديو المضمّن هما الموضع الذي كثيرًا ما يقصّر فيه تحسين وسائط الويب. يُشغَّل MP4 بترميز H.264 في كل مكان، لكن WebM بترميز VP9 أصغر بنسبة 20 إلى 40 بالمئة عند الجودة نفسها، وهذا يهم لمستخدمي الهاتف على الاتصالات المحدودة. النهج العملي هو التحويل مرة واحدة إلى WebM، وتقديمه كمصدر مفضّل داخل عنصر فيديو، والإبقاء على MP4 كبديل احتياطي. وأداة تحويل الفيديو هنا تستخدم FFmpeg المترجَم إلى WebAssembly: يجري التحويل داخل متصفحك، لا شيء يُرفع، وتعمل الملفات بأي حجم ما دامت ذاكرة جهازك كافية. وللفيديو الخلفي المضمّن، فكّر أيضًا في أداة قص الفيديو لإزالة الثواني الميتة قبل الترميز: فالمدة هي العامل الأكبر في حجم الملف.

الأصول المضمّنة: base64 وSVG

الصور الصغيرة جدًا والأيقونات وأيقونات المفضلة المضمّنة مباشرة في HTML أو CSS كسلاسل base64 تلغي رحلة شبكة ذهابًا وإيابًا لكل أصل. وهذا منطقي للأصول الأقل من نحو 2 كيلوبايت التي تظهر في كل صفحة، مثل صورة شعار مجمّعة أو مؤشر تحميل. أما الأصول الأكبر فينبغي أن تبقى ملفات منفصلة، لأن base64 يرمّز بحجم أكبر بنسبة 33 بالمئة من الثنائي، ولأن المتصفحات تخزّن مراجع الملفات في الذاكرة المؤقتة لكنها لا تخزّن البيانات المضمّنة بشكل مستقل. وأداة تحسين SVG تزيل بقايا المحرر من ملفات SVG المصدَّرة دون المساس بالناتج المرئي. وأداة تحويل الصورة إلى base64 تولّد عنوان URI للبيانات جاهزًا للصق داخل متصفحك.

الأدوات المذكورة في هذا المقال

الأسئلة الشائعة

هل يؤثر ضغط الصور في ترتيب موقعي بالبحث؟

تستخدم Google مؤشرات Core Web Vitals كإشارة للترتيب، وغالبًا ما يكون Largest Contentful Paint صورة أو ملصق فيديو. الصفحة التي تُحمَّل صورة واجهتها في أقل من ثانية تحقق درجة أفضل من صفحة تستغرق ثلاث ثوانٍ. ويؤثر الضغط والصيغة الصحيحة مباشرة في هذا المقياس، لذا نعم، لتحسين الصور أثر قابل للقياس في تحسين محركات البحث. ويكون الأثر أقوى على الهاتف، حيث تكون الاتصالات أبطأ وتكون عقوبة الصور الثقيلة أكبر.

لماذا تعالج الوسائط محليًا بدلًا من استخدام خدمة ويب؟

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