Οι εικόνες είναι συνήθως τα βαρύτερα bytes σε μια σελίδα, οπότε η βελτιστοποίησή τους είναι η μεγαλύτερη νίκη για το LCP. Τρεις μοχλοί: σύγχρονα formats, responsive sizing και loading priority.
Tα AVIF και WebP συμπιέζουν πολύ μικρότερα από JPEG/PNG στην ίδια ποιότητα (το AVIF συχνά 50% μικρότερο από το JPEG). Σερβίρετέ τα με fallback ώστε οι παλιοί browsers να λειτουργούν ακόμη:
Μη στέλνετε μια εικόνα 2000px σε ένα κινητό 400px. Το srcset επιτρέπει στον browser να επιλέξει το σωστό μέγεθος για τη συσκευή:
<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 λέει στον browser πόσο πλατιά γίνεται render η εικόνα ώστε να επιλέξει τη μικρότερη επαρκή πηγή.
fetchpriority="high", loading="eager", και εξετάστε ένα preload.loading="lazy" ώστε να μην κατεβαίνει μέχρι να χρειαστεί.Να διατηρείτε πάντα το width/height για να αποτρέψετε το CLS.
Ένα αργό LCP είναι τις περισσότερες φορές απλώς μια υπερμεγέθης εικόνα hero. Η γνώση των formats (AVIF/WebP), του srcset για τη σωστή ανάλυση, και της σωστής priority — συν το να μην κάνετε lazy-load την εικόνα LCP — είναι το πρακτικό εργαλείο που περιμένουν οι συνεντευξιαστές, και είναι συνήθως η μεμονωμένη αλλαγή με τον υψηλότερο αντίκτυπο σε έναν πραγματικό ιστότοπο.
Μια βιβλιοθήκη ερωτήσεων συνέντευξης IT με αναλυτικές απαντήσεις — από Junior έως Senior.
Δωρεά