Page Speed Techniques Explained: Caching, Unused CSS, Delayed JavaScript, Fonts and Images

Speed matters for visitors and for Core Web Vitals: Largest Contentful Paint (loading), Interaction to Next Paint (responsiveness) and Cumulative Layout Shift (visual stability). Google judges these on real-user data at the 75th percentile.

Each technique below targets one of those metrics. Some are safe defaults; others can break menus, forms or tracking if you don’t test.

Which technique helps which metric

Technique	Main metric	Risk
Better hosting / page cache	LCP (server response)	Low; stale content if cache isn’t purged
CDN	LCP for distant visitors	Low
WebP / AVIF images, srcset, sizes	LCP	Low
Width and height on images	CLS	None
Preload LCP image, fetchpriority=high	LCP	Overuse slows other resources
Preconnect to critical third-party origins	LCP	Too many waste connections
Remove unused CSS	LCP, FCP	Missing styles on menus, popups, dynamic content
Defer JavaScript	LCP, FCP	Scripts that must run early break
Delay JavaScript until interaction	INP, TBT, LCP	Sliders, menus, cookie banners, tracking can fail
Font loading (subset, preload, font-display)	LCP, CLS	Layout shift if fallbacks differ

Server, hosting and caching

Time to first byte makes up a large share of LCP. If uncached pages take more than a second to start arriving, page caching and a better host usually beat any front-end tweak. Consider an upgrade when caching is on and server response is still slow, when traffic spikes cause errors, or when the host can’t run current PHP versions.

WordPress-specific caching setup is in WordPress and WooCommerce speed.

Images

• Serve WebP or AVIF; both are much smaller than JPEG or PNG at similar quality.
• Use srcset and sizes so phones download smaller files.
• Set width and height (or aspect-ratio) to reserve space.
• Lazy-load images below the fold, never the main hero or LCP image.
• Add fetchpriority=”high” to the LCP image, and to no more than one or two images (image SEO).

CSS: removing unused CSS

Themes and page builders load styles for every widget on every page. Removing unused CSS generates a smaller stylesheet per page type. The risk is styles applied only after JavaScript adds a class (mobile menus, popups, sliders, form errors), which the tool may not see. Most tools offer a safelist; test interactive elements on mobile and desktop after enabling it.

JavaScript: defer vs delay

Deferring loads scripts without blocking rendering, then runs them after the HTML is parsed. Delaying, as in WP Rocket’s Delay JavaScript execution, waits until the visitor moves the mouse, scrolls, taps or presses a key. WP Rocket says this can improve unused JavaScript, main-thread and blocking-time audits, but can cause display issues, so it offers one-click exclusions, file exclusions and a temporary safe mode.

• Test: menus, sliders, accordions, forms, cookie banners, chat, analytics and conversion tags.
• Exclude scripts that must run before interaction, such as consent tools.
• Check analytics still records visits, since delayed tags fire later.

Fonts

• Host fonts locally and limit families and weights.
• Preload the one or two font files used above the fold.
• Use font-display and fallback font metric overrides to reduce layout shift.
• Consider a system font stack for body text.

Third-party scripts: chat widgets and tag managers

Chat widgets, review widgets, heatmaps and marketing tags often add the most JavaScript and hurt INP. Load chat on interaction or after a delay, remove tags no one uses, and audit the tag manager container regularly. A tag manager is a container: every tag inside it still costs performance (Core Web Vitals).

A simple performance budget

• Pass Core Web Vitals in field data: LCP 2.5 s or less, INP 200 ms or less, CLS 0.1 or less.
• Keep the homepage and key service or product templates within agreed limits for page weight and third-party scripts.
• Re-test after every new plugin, app or tag.
• Read reports properly (reading PageSpeed Insights).

Frequently asked questions

Sources

• Google Search Central: Understanding Core Web Vitals and Google search results
• PageSpeed Insights: About PageSpeed Insights
• web.dev: Optimize Largest Contentful Paint
• web.dev: Optimize Interaction to Next Paint
• web.dev: Optimize Cumulative Layout Shift
• WP Rocket Knowledge Base: Delay JavaScript execution

Last reviewed October 14, 2026.