Review render-blocking resources carefully
Find CSS and scripts on the critical rendering path, reduce what is needed before first paint, and preserve a styled, working page.
For your setup.
Choose your platform. A report may suggest one from source or delivery hints; confirm it matches the website you control.
This topic needs page-specific changes. Follow the general steps below; no platform snippet is assumed.
Why this matters
The browser needs document structure and applicable styles before it can render a page correctly. A blocking resource can delay first paint, but removing it or loading it at the wrong time can produce unstyled content or broken behavior.
Inspect the waterfall
Use Lighthouse or the browser Network panel to see which stylesheets and scripts delay rendering. Identify whether the file is needed for above-the-fold content or only for a later interaction.
Keep critical CSS small and available
Remove genuinely unused styles and split route-specific CSS where your build system supports it. Deliver the styles needed for the initial view promptly. Do not make the whole stylesheet asynchronous as a blanket fix.
Use script loading modes intentionally
For independent classic scripts, `defer` runs after parsing and preserves document order. Async scripts execute when ready and may run before parsing finishes; use that only when order and DOM timing do not matter. Module scripts defer by default. Test dependencies before changing attributes.
<script src="/js/site.js" defer></script>Prioritize only truly critical resources
Preload can help when an important resource is discovered late, but excessive or mismatched preloads compete for early bandwidth. Confirm the browser actually uses the preload and does not fetch the resource twice.
For your setup
Next.js
Let the framework manage route CSS and script loading unless profiling shows a concrete issue. Use supported script strategies and verify hydration and event handlers after changes.
WordPress
A theme or optimization plugin may combine or delay assets. Change one setting at a time and test page templates, menus, forms, and logged-in states.
Check your work
- Compare first contentful paint and LCP using the same device profile.
- Look for flashes of unstyled content and console errors.
- Test interactive components, including keyboard operation.
- Check whether any resource is requested twice after adding preload hints.