top of page
  • Writer's pictureBrent Payne

Eliminate render blocking resources

When a webpage contains CSS or JavaScript that hinders the immediate loading of the page, it's said to contain render blocking resources.


Why is this important?

As webpages increasingly depend on JavaScript, the size of JavaScript files can greatly slow down site performance. 'Render blocking resources' refer to JS or CSS that the browser needs to process before it can show the first content of your page.


Basically, this means your site's load time is delayed by the time taken to get, unpack, and use code that isn't even needed for the first thing users see.


What does the Optimization check?

This Optimization will fire if it detects render blocking code in an internal URL:

<script> tags inside the <head>, not marked with 'defer' or 'async'.<link rel="stylesheet"> tags, not marked with 'disabled' or not tailored to the user's device via the 'media' attribute.


How do you resolve this issue?

To limit the effect of render-blocking content, consider these solutions:

- Embed vital resources directly- Defer loading non-essential resources- Exclude unused code components


Addressing this effectively requires a developer to understand the codebase and utilize evaluation tools such as Lighthouse to identify which files can be enhanced.


The following resources offer further guidance:


Further Reading

14 views

Recent Posts

See All

ClubReq Gets A Link (Because They Asked)

I am a mentor for Techstars and have been for over 10 years. In those ten years I have mentioned to startups to ask ANYONE and everyone that they meet to link to their site. Yet, in all those times on

Comments


bottom of page