სურათები ჩვეულებრივ ყველაზე მძიმე ბაიტებია გვერდზე, ამიტომ მათი ოპტიმიზაცია ყველაზე დიდი LCP გამარჯვებაა. სამი ბერკეტი: თანამედროვე ფორმატები, რესპონსიული ზომა და ჩატვირთვის პრიორიტეტი.
AVIF და WebP ბევრად უფრო მცირედ იკუმშება, ვიდრე JPEG/PNG იმავე ხარისხზე (AVIF ხშირად 50%-ით პატარაა JPEG-ზე). მიაწოდე ისინი fallback-ით, რომ ძველი ბრაუზერებიც მუშაობდნენ:
ნუ გაუგზავნი 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 ყველაზე ხშირად უბრალოდ ზედმეტად დიდი hero სურათია. ფორმატების (AVIF/WebP), srcset-ის სწორი გარჩევადობისთვის და სწორი პრიორიტეტის ცოდნა — პლუს LCP სურათის არ-lazy-loading — არის პრაქტიკული ინსტრუმენტარიუმი, რომელსაც ინტერვიუერები ელოდებიან, და ის ჩვეულებრივ ყველაზე მაღალეფექტიანი ერთი ცვლილებაა რეალურ საიტზე.
IT გასაუბრების კითხვების ბიბლიოთეკა დეტალური პასუხებით — Junior-დან Senior-მდე.
შემოწირულობა