Skip to content
Rankora
مجاني · يعمل في متصفحك

فاحص التحميل الكسول للصور

تأكد أن التحميل الكسول مستخدم في مكانه الصحيح: أسفل الشاشة الأولى، وليس على الصورة الرئيسية، وبالسمات الصحيحة.

الخصوصية والتكلفة

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

كيف تعمل الأداة

  1. الصق كود HTML للصفحة؛ تُقرأ عناصر <img> و<iframe> داخل متصفحك مع تجاهل <noscript>.
  2. تخمّن الأداة صورة LCP (أول صورة غير صغيرة) وتنبّه إن كان عليها loading="lazy"، وكذلك إلى الصور الكسولة في أعلى الصفحة.
  3. كما تفحص قيم loading وfetchpriority والصور الكسولة بلا width وheight وأنماط التحميل الكسول بجافاسكربت وإطارات iframe بلا loading="lazy".
  4. تحصل على جدول صورة بصورة يمكن تصديره بصيغة CSV.

مثال

ست صور وإطار YouTube: الصورة الأولى (hero.jpg بأبعاد 1200×600) عليها loading="lazy" فتُعلَّم كخطر على LCP؛ و3 صور كسولة و3 بلا سمة؛ وصورتان بعيدتان بلا سمة يمكن جعلهما كسولتين؛ والأخيرة كسولة بلا width وheight؛ وإطار YouTube غير كسول. النتيجة: 6 صور و3 كسولة و3 بلا loading و0 من 1 إطار بتحميل كسول.

ماذا تعني النتيجة

يوفر التحميل الكسول الأصلي النطاق الترددي للمحتوى خارج الشاشة، لكنه على الصورة الرئيسية الظاهرة عند الفتح يؤخر Largest Contentful Paint. تخمّن الأداة تلك الصورة من HTML وحده؛ فهو تقدير لأنها لا تعرف CSS الخاص بك ولا حجم الشاشة. تحقق عبر PageSpeed Insights أو Chrome DevTools.

مشكلات شائعة تساعد هذه الأداة على حلها

  • loading="lazy" على صورة أعلى الصفحة، ما يؤخر رسم أكبر عنصر.
  • عشرات الصور أسفل الشاشة الأولى تُحمَّل فوراً.
  • صور كسولة بلا width وheight تُزيح التخطيط عند وصولها.
  • إطارات YouTube أو الخرائط تُحمَّل فوراً وهي ثقيلة قياساً بما تقدمه.

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

هل يجب أن تكون كل الصور كسولة؟

لا. اقصر ذلك على الصور أسفل الشاشة الأولى. الصورة الرئيسية الظاهرة عند التحميل يجب أن تُحمَّل فوراً، ويفضّل مع fetchpriority="high".

ماذا تفعل fetchpriority="high"؟

تخبر المتصفح أن الصورة ذات أولوية ليجلبها أبكر. تعمل أفضل حين تكون نادرة: صورة أو صورتين.

هل يعمل التحميل الكسول الأصلي على iframe؟

نعم، تنطبق loading="lazy" على الإطارات في المتصفحات الحالية. وهي مفيدة للفيديوهات والخرائط المضمنة في أسفل الصفحة.

ماذا لو كان موقعي يستخدم سكربت تحميل كسول؟

تنبّه الأداة إليه (data-src أو صنف lazyload). السمة الأصلية loading="lazy" تزيل الاعتماد على جافاسكربت وتستمر في العمل إن فشل السكربت.