Eliminate Render Blocking Resources

When a page loads, oftentimes it will try to load all code such as JavaScripts and CSS on the page all at once. This code can be embedded in above-the-fold content, whether they are needed or not.

Render blocking CSS

Browsers download all CSS resources, whether they have blocking attributes or not. That means if you're on desktop, CSS written for mobile devices is still downloaded.

Blocking JavaScript and CSS that isn't needed on the page, or deferring code that isn't needed until below the fold content is essential to remedying this issue for page load.

Google says that optimizing CSS delivery -- keeping your CSS file lean, delivering it as quickly as possible, and using media types/queries to unblock rendering -- will go a long way in making this happen.

If you are using a WordPress site, the themes and plugins provided often contain render-blocking elements that are unnecessary upon first page-load. And every time you update the theme or plugin, it will reapply those attributes. These are things you need to edit out again each update.

Render-blocking JavaScript

When a broswer detects a script while building the DOM tree, it has to execute it before it can continue rendering the page. It blocks every other operation until it is fully loaded. This happens especially for external scripts and takes even longer to load.

Please avoid and minimize using render blocking JavaScript, perhaps inlining the necessary code in the actual html file.

Many script-heavy sites and applications takes script in order to render each user interaction, thus slowing every other function on the site until it is complete.

Lazy-loading the script until it is needed will also help. And file with more than two dozen unused functions, Google suggests to create a separate file.