انتقل إلى المحتوى
SEO Madmanby Adam Hafez
أداة مجانية

فحص التحميل الكسول وأبعاد الصور

الصق كود HTML لتفحص كل وسم img: وجود العرض والارتفاع، وعدم التحميل الكسول لصورة LCP المرجّحة. أداة مجانية تعمل في متصفحك.

تعمل بالكامل في متصفحك. لا يُرفع ما تُدخله، ولا يُسجَّل، ولا يُحفظ.

تتبع قواعد الأبعاد والتحميل الكسول إرشادات web.dev. أما اعتبار الصورة الأولى صورة LCP المرجّحة فهو تقدير خاص بهذه الأداة. لا يُرسل أي شيء تلصقه إلى أي مكان.

أهم النقاط

  • يوصي web.dev بإضافة سمتي width وheight إلى كل وسوم img، ليحجز المتصفح المساحة ويتجنب تحرّك التصميم المزعج.
  • ينصح web.dev بعدم التحميل الكسول للصور التي يُرجَّح ظهورها عند تحميل الصفحة، وخاصة صورة LCP.
  • للسمة loading قيمتان هما lazy وeager، وeager تساوي ترك السمة كليًا.
  • لا يمكن معرفة الصورة الظاهرة أولًا من الكود وحده، لذلك تعتبر الأداة الصورة الأولى هي المرجّحة وتقول ذلك.
  • تقرأ الأداة كود HTML الذي تلصقه فقط، ولا تقيس تحرّك التصميم الفعلي ولا تعرف عنصر LCP الحقيقي في صفحتك.

ما تحتاج إليه

  • كود HTML ملصوق يحتوي على وسوم img

أدوات أخرى

كلها مجانية، وكلها تعمل في المتصفح.

تصفّح الأدوات

طريقة الاستخدام

  1. 1الصق كود HTMLانسخ كود الصفحة أو جزء القالب الذي يحتوي على الصور، مع كل وسوم img فيه.
  2. 2أضِف العرض والارتفاعأعطِ كل صورة عليها ملاحظة سمتي width وheight بأعداد صحيحة تطابق حجمها الأصلي، لتُحجز مساحتها قبل تحميلها.
  3. 3أزِل lazy من الصورة الأولىاحذف loading="lazy" من صورة الواجهة أو أول صورة ظاهرة، فهي عنصر LCP المرجّح.
  4. 4أبقِ lazy للصور البعيدةاترك loading="lazy" على الصور البعيدة في أسفل الصفحة، بشرط أن تحمل الأبعاد أيضًا.
  5. 5تأكد بقياس حقيقيافحص عنصر LCP في أداة قياس في المختبر، لأن هذه الأداة تقدّره فقط من موضعه في الكود.

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

يشرح web.dev الحالتين في دليله عن التحميل الكسول المدمج في المتصفح، وتفحص هذه الأداة الحالتين في كل وسم img تلصقه.

ماذا تفحص الأداة؟

تجد الأداة كل وسم <img> في الكود، وتقرأ سماته، وتطبّق خمس قواعد:

  • وجود العرض والارتفاع (تحذير إن غابا). يجب أن يكونا عددين صحيحين موجبين. ويوصي web.dev بإضافتهما إلى كل وسوم <img> لحجز المساحة وتجنب تحرّك التصميم.
  • قيمة loading صالحة (مشكلة إن لم تكن). تقبل السمة lazy أو eager. ويصف web.dev القيمة eager بأنها الافتراضية في المتصفح، أي مثل ترك السمة. وأي قيمة أخرى تظهر عليها ملاحظة.
  • لا تحميل كسول للصورة الأولى (مشكلة). يقول web.dev إن الصور التي يُرجَّح ظهورها عند تحميل الصفحة لا تُحمَّل تحميلًا كسولًا، وخاصة صور LCP. وتعتبر الأداة أول وسم img صورة LCP المرجّحة، وهذا تقدير خاص بها.
  • لا صورة كسولة بلا أبعاد (مشكلة). يحذّر web.dev من أن التحميل الكسول يزيد أهمية الأبعاد، لأن الصورة بلا أبعاد تبدأ بحجم 0 في 0 بكسل حتى تُحمَّل.
  • وجود src أو srcset (مشكلة إن غابا). وسم img بلا أي منهما لا يجد ما يحمّله.

كيف تقرأ النتائج؟

يعدّ سطر الملخص الصور الموجودة، وكم منها عليه ملاحظات. ثم تحصل كل صورة على بطاقة باسم src (أو srcset) وشارة: سليم بلا ملاحظات، وتحذير عندما تكون الملاحظة الوحيدة غياب الأبعاد، ومشكلة عند فشل أي قاعدة من نوع مشكلة. وتظهر كل ملاحظة تحت الشارة بلغة واضحة.

ابدأ ببطاقات المشكلة: أزِل loading="lazy" من صورة الواجهة، وأضِف الأبعاد للصور الكسولة، وصحّح أي قيمة loading مكتوبة خطأ. ثم أضِف العرض والارتفاع لبطاقات التحذير.

تبدأ المتصفحات جلب الصور الكسولة قبل وصولها إلى الشاشة: يذكر web.dev مسافة 1250px من الشاشة على 4G، و2500px على 3G أو أبطأ. لذلك لا يكلّف التحميل الكسول شيئًا يُذكر للصور البعيدة في أسفل الصفحة.

مثال عملي

تبدأ الأداة بهذا الكود:

<img src="/hero.jpg" alt="فريق العمل على مكتب" loading="lazy" width="1200" height="630">
<img src="/chart.png" alt="رسم بياني للزيارات" width="800" height="450" loading="lazy">
<img src="/logo.svg" alt="الشعار">
<img src="/photo.jpg" alt="المكتب" loading="lazy">

يقول الملخص: “عدد الصور: 4، منها 3 عليها ملاحظات”. الصورة /hero.jpg مشكلة: لها أبعاد، لكنها الأولى وكسولة. والصورة /chart.png سليمة، فهي كسولة ولها أبعاد وليست الأولى.

والصورة /logo.svg تحذير لغياب العرض والارتفاع. والصورة /photo.jpg مشكلة بملاحظتين: لا أبعاد لها، وهي كسولة بلا أبعاد. احذف loading="lazy" من صورة الواجهة، وأضِف عرضًا وارتفاعًا للشعار والصورة الأخيرة، فتصبح البطاقات الأربع سليمة.

أخطاء شائعة تكشفها

  • قالب يحمّل كل الصور تحميلًا كسولًا. كثيرًا ما يصل loading="lazy" العام إلى صورة الواجهة أيضًا، وهذه هي حالة الصورة الظاهرة التي يخصّها web.dev بالتحذير.
  • صور بأبعاد في CSS فقط. بلا سمتي العرض والارتفاع في HTML، لا يجد المتصفح ما يحجز به المساحة قبل وصول ملف الأنماط والصورة.
  • وحدات داخل السمات. القيمتان width="800px" وwidth="100%" تفشلان في قاعدة العدد الصحيح هنا. ضع الحجم بالبكسل في السمة، وتحكّم في حجم العرض بـ CSS.
  • أخطاء كتابة في قيمة loading. قيمة مثل loading="lazyload" ليست قيمة أصلية، فلا يطبّق المتصفح التحميل الكسول الذي أردته.

ما لا يكشفه الكود: عنصر LCP الحقيقي يعتمد على حجم الشاشة والتصميم، فتأكد منه في أداة قياس في المختبر قبل الاعتماد على تقدير الصورة الأولى. ويجري التحليل في متصفحك، ولا يُرسل أي شيء تلصقه إلى أي مكان.

أدوات وقراءات ذات صلة

المصادر

  1. 1.Browser-level image lazy-loading for the web، web.devمصدر أساسي

أسئلة شائعة

لماذا تظهر ملاحظة على الصورة الأولى إذا كانت كسولة؟

يقول web.dev إن الصور التي يُرجَّح ظهورها عند التحميل لا تُحمَّل تحميلًا كسولًا، وخاصة صورة LCP، والصورة الأولى في الكود هي الأرجح. وإذا كان أول وسم img بعيدًا عن الشاشة الأولى فعلًا، مثل شعار تذييل مبكر في الكود، فالملاحظة خاطئة.

هل أحمّل كل صورة أسفل الشاشة الأولى تحميلًا كسولًا؟

يوصي web.dev بـ loading="lazy" للصور خارج الشاشة الأولى فقط. وأعطِ هذه الصور عرضًا وارتفاعًا أيضًا، لأن الصورة الكسولة بلا أبعاد هي ما تعدّه الأداة مشكلة.

هل يضر loading="lazy" في المتصفحات التي لا تدعمه؟

لا. يقول web.dev إن المتصفحات التي لا تدعم السمة تتجاهلها، فتفقد فائدتها دون ضرر. ويذكر دعمها بدءًا من Chrome 77 وEdge 79 وFirefox 121 وSafari 16.4.

هل تُقبل العروض بالنسبة المئوية؟

لا. تتوقع الأداة أعدادًا صحيحة موجبة للعرض والارتفاع، مثل width="800"، وتعطي تحذيرًا لأي قيمة أخرى، ومنها "100%" و"800px". وهذا التشدد قاعدة خاصة بها. ضع الحجم الأصلي بالبكسل في السمتين، وتحكّم في العرض بـ CSS.

هل أحمّل صورة خلفية CSS تحميلًا كسولًا بهذه السمة؟

لا. يقول web.dev إن السمة loading تعمل على وسوم img (وعلى iframe) فقط، لا على صور خلفية CSS، ولهذا تقرأ الأداة وسوم img وحدها.

هل تغني عن أداة فحص النص البديل؟

لا. تفحص هذه الأداة سمات التحميل والأبعاد فقط. أما النص البديل المفقود أو الفارغ أو العام فتفحصه أداة فحص النص البديل للصور.