إصلاح بطء سرعة LCP عندما تكون الصورة هي السبب

قم بإصلاح بطء عنصر LCP (Largest Contentful Paint) على الصورة في 4 خطوات: تغيير حجمها ليناسب عرضها، تحويلها إلى WebP أو AVIF، تحميلها مسبقاً، وضبط fetchpriority على high. تقدم الخُطوتان الأوليان معظم التحسين ولا تتطلبان أي تغيير في برمجية الصفحة.

في معظم الصفحات، تكون الصورة الرئيسية (Hero) هي أكبر عنصر محتوى ظاهري، مما يعني أن LCP يدور حول ملف واحد بدلاً من موقعك بأكمله. وغالباً ما يؤدي إصلاح ذلك الملف إلى تحسين المقياس أكثر من أي تحسين آخر متاح.

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

يسجل LCP الوقت الذي يستغرقه أكبر عنصر مرئي لكي يظهر، مقاساً من بدء تحميل الصفحة. تعتبر Google أن 2.5 ثانية أو أقل أمر جيد، ومن 2.5 إلى 4 ثوانٍ يحتاج إلى تحسين، وأكثر من 4 ثوانٍ يعتبر سيئاً.

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

العثور على العنصر المسؤول

قم بتشغيل Lighthouse واقرأ حقل Largest Contentful Paint element، الذي يحدد العنصر الدقيق الذي يتم قياسه. التخمين يضيع الوقت، لأن العنصر غلباً ما يكون غير الذي يفترضه الأشخاص.

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

إصلاح الصورة حسب الأولوية والتأثير

لتسين LCP للصورة، اتبع هذه الخطوات الـ 6 بالترتيب.

1. تغيير أبعاد الصورة إلى أكبر حجم ستعرض به على الإطلاق، مع مضاعفتها للشاشات ذات الكثافة العالية.
2. تحويلها إلى WebP، أو إلى AVIF إذا كانت الصورة كبيرة وفوتوغرافية.
3. ضغط الصورة لتصل إلى أقل من 200 KB للصورة الرئيسية، وهو أمر ممكن بالعرض الكامل في معظم التصاميم.
4. إضافة سمات width و height حتى يحجز المتصفح المساحة ولا يحدث أي تغيير في التخطيط.
5. تحميل الصورة مسبقاً (Preload) في هيد الصفحة ليبدأ المتصفح في جلبها فوراً.
6. تعيين fetchpriority إلى high في عنصر الصورة، مما يخبر المتصفح أن هذا الملف هو الأهم.

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

لماذا يتفوق تغيير الأبعاد على الضغط

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

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

التحميل المسبق و fetchpriority

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

قم بتحميل صورة واحدة فقط مسبقاً. التحميل المسبق لعدة صور يلغي الفائدة، لأن المتصفح سيقسم اهتمامه بنفس الطريقة. تعيين fetchpriority إلى high يحقق نتيجة مماثلة ببرمجية أقل، وهو كافٍ في أغلب الأحيان للصورة الموجودة بالفعل في HTML الأولي.

أخطاء تزيد من بطء LCP

• التحميل الكسول للصورة الرئيسية. التحميل الكسول يؤخر الملف الذي تريد تحميلة أولاً. استخدمه فقط تحت الجزء المرئي من الصفحة.
• تحميل الصورة الرئيسية عبر JavaScript. الصورة المدرجة عبر نص برمجي لا يمكن أن تبدأ في التحميل حتى يتم تنفيذ السكريبت.
• استخدام صورة خلفية عبر CSS. يتم اكتشاف صور الخلفية متأخراً عن عناصر img ولا يمكن تحديد أولويتها بسهولة.
• التحميل المسبق لعدة صور. الأولويات المتنافسة تلغي الميزة تماماً.
• إغفال تحديد width و height. يتسبب انزياح التخطيط في الإضرار بمقياس آخر بينما يتحدد هذا المقياس.

عندما يكون عنصر LCP نصاً

عادة ما يتأخر LCP المعتمد على النص بسبب خطوط الويب وليس بسبب النص نفسه. يمتلك المتصفح الكلمات فوراً وينتظر ملف الخط قبل عرضها.

اضبط font-display على swap حتى يتم عرض النص بخط بديل ثم يتحول عند وصول خط الويب. قم بتحميل أهم ملف خط مسبقاً، واختصر الخط ليقتصر على الحروف التي تستخدمها صفحاتك بالفعل، مما يقلل حجم الخط غالباً من 200 KB إلى أقل من 30 KB. تقديم الخطوط من النطاق الخاص بك يزيل اتصالاً إضافياً بطرف ثالث.

زمن استجابة الخادم يحدد الحد الأدنى

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

تحقق من هذا الرقم قبل تحسين الصور، لأن استجابة الخادم المستغرقة لثانيتين تجعل تحقيق هدف 2.5 ثانية لـ LCP مستحيلاً مهما فعلت بالملفات. التخزين المؤقت، أو استضافة أسرع، أو شبكة توصيل المحتوى (CDN) تعالج تلك الطبقة. ثم يعمل تحسين الصور على تحسين ما تبقى بدلاً من محاربة حد تم فرضه من مكان آخر.

النصوص البرمجية لجهات خارجية تؤخر الصورة أيضاً

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

لافتات الموافقة هي الأكثر ضرراً، لأن الكثير منها يحظر العرض حتى يختار الزائر. قم بتحميل السكريبتات الخاصة بالجهات الخارجية باستخدام السمات defer أو async حتى لا تؤثر على تحميل الصفحة، وراجع العدد المطلوب منها بجدية. غالباً ما يؤدي إزالة 3 سكريبتات تتبع غير مستخدمة إلى تحسين LCP أكثر من جولة أخرى من ضغط الصور.

اختبار التغيير بشكل صحيح

اختبر في نافذة خاصة مع تعطيل الإضافات، وقم بإجراء القياس 3 مرات بدلاً من الاعتماد على نتيجة واحدة. تختلف الدرجات بين المحاولات بفارق ملحوظ.

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

الحفاظ على سرعة LCP بعد الإصلاح

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

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

تجهيز الصور الرئيسية في دفعة واحدة

قم بمعالجة جميع الصور الرئيسية في الموقع معاً، لأنها تتشارك في مواصفات واحدة وحجم هدف واحد. تحتوي معظم المواقع على ما بين 10 و 100 منها عبر صفحات الهبوط، وصفحات الفئات، والمقالات.

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