50% of the brain is involved in visual processing Time to get the sense of a visual scene 0.01s How much we recall of what we see or do vs. 20% of what we read. 80% Increase in willingness to read due to color visuals. 80% Neuroscience How much audiences more likely to be persuaded by a talk with visuals vs. a purely verbal one 17% To process a symbol and 100ms to attach meaning to it. 150ms Sources: goo.gle/imgsci
Largest Contentful Paint Element Lighthouse Audit function getLCPDebugTarget(entries) {
const lastEntry = entries[entries.length - 1];
return lastEntry.element;
}
LCP API (RUM) web.dev/debug-web-vitals-in-the- fi eld/ User devices have di ff erent screen resolutions, which results in di ff erent page layouts and thus di ff erent elements being visible within the viewport.
Content may be personalized for the current user, so the LCP candidate element could vary wildly from user to user. 🔬 ⛰
JPEG 80 vs AVIF 70 vs WEBP 85 54% size reduction vs JPEG 26% size reduction vs JPEG https://www.industrialempathy.com/posts/avif-webp-quality-settings/
Next.js Image Component • Automatic srcsets for images • Enforced sizing to prevent layout shift • Automatic lazy-loading of o ff screen assets • Framework-speci fi c asset prioritization optimizations • Flexible layout options • Customizable loader support for any image server or CDN Features and bene fi ts Up to 60% faster LCP and up to 100% reduced CLS
31% improvement in LCP increased sales by 8% Optimizations to improve LCP included resizing their hero image, optimizing SVGs and using media queries to limit loading o ff screen images. Their optimizations to LCP included a 2.5s saving from switching their fi rst large image from being behind JavaScript (client-side hydration) to being directly in the main HTML document. 70% improvement in LCP correlated with a 76% reduction in load abandonment They determined shifts were caused after their hero images were loaded and snapped in for the fi rst view. They used Aspect Ratio Boxes to reserve space before their image was loaded. Optimizations to CLS helped increase News page views per session by 15% French Fashion house Chloè used Link Preload to preload their 1x and 2x Hero images, which were previously bottlenecked by a render-blocking script. Preloading 1x and 2x Hero images bottlenecked by render- blocking script improved LCP by 500ms (based on CrUX)
Automating Image Optimization in frameworks Image Components • Modern image components that build on , like Next.js (for React) and Nuxt image (for Vue) try to bake in as many of these concepts as possible by default.
• You can of course also do this manually just using the element directly.
• If using 11ty for your static sites, try the 11ty high-performance blog template.
addyosmani
visional_engineering_and_design
minorun365
maaretp
bkuhlmann
kaminashi
arthur1
patkua
tomzoh
dahatake
.png){kind=avatar}
gho4d76g
yuneco
rstankov
hatefulcrawdad
searls
sugarenia
roundedbygravity
jacobian
frogandcode
jeffersonlam
danielanewman
swwweet
lara
malarkey
colly