الصور عادةً هي أثقل البايتات في الصفحة، لذا فتحسينها هو أكبر مكسب لـ LCP. ثلاث رافعات: الصيغ الحديثة، والتحجيم المتجاوب، وأولوية التحميل.
تضغط AVIF و WebP بحجم أصغر بكثير من JPEG/PNG بالجودة نفسها (غالبًا ما تكون AVIF أصغر بنسبة 50% من JPEG). قدّمها ببديل احتياطي بحيث تظل المتصفحات القديمة تعمل:
لا ترسل صورة بعرض 2000px إلى هاتف بعرض 400px. يتيح srcset للمتصفح اختيار الحجم الصحيح للجهاز:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
يخبر sizes المتصفح بعرض عرض الصورة بحيث يختار أصغر مصدر كافٍ.
fetchpriority="high" وloading="eager"، وفكّر في preload.loading="lazy" بحيث لا تُجلَب حتى تُحتاج.أبقِ دائمًا على width/height لمنع CLS.
LCP البطيء هو غالبًا مجرد صورة بطل ذات حجم زائد. ومعرفة الصيغ (AVIF/WebP)، وsrcset للدقة الصحيحة، والأولوية الصحيحة — إضافةً إلى عدم التحميل الكسول لصورة LCP — هي العُدّة العملية التي يتوقعها القائمون على المقابلات، وهي عادةً أعلى تغيير أثرًا على موقع حقيقي.
مكتبة من أسئلة مقابلات تقنية المعلومات مع إجابات مفصّلة — من المبتدئ إلى المتقدم.
تبرع