Competing with millions of websites is not a piece of cake in this age of the internet. You need to make sure it is easier than those on your website. If you equate the speed of the website with the top websites, you could be missing because the page loading time is below two seconds for most pages.
When your website is accessed by a customer, their web browser will start loading the page from top to bottom. Above the fold (ATF) text, the upper section of the page, which is loaded and shown first, is named.
During the loading process, if the browser comes across a CSS stylesheet or JS script, the page loading will be paused to parse those tools, thus slowing the overall page load pace.
The ones we call render-blocking are only the CSS stylesheets or JS scripts that are loaded when loading above the fold text but are considered non-relevant to its functioning. A strategy for counteracting this is to delay excessive resource loading.
You can do this by loading in the footer (before the closing tag) your JS scripts that are responsible for interactions and functionality rather than design.
In order to prevent the so-called flashes of unstyled content (FOUC), CSS stylesheets should always be loaded at the top (in the head section).
FOUC is a short moment in which the default browser stylization is loaded above the fold content, which can look unattractive to visitors and cause them to turn away from your web.
As both CSS and JS are applied to all plugins and themes, some of which might be render-blocking, you need to tackle this problem as effectively as possible. I am going to introduce you to some plugins that you can use to fix scripts and stylesheets that are render-blocking.
The solutions involve loading smaller CSS inline with HTML, using conditional CSS-specifying viewports and widths (with the use of media queries), and asynchronously loading the remaining stylesheets when it comes to removing render-blocking CSS stylesheets, which has become a standard WordPress practice.
1. Fix Render Blocking Scripts and CSS with WP Rocket
You need to install and activate WP Rocket Plugin. For more details, you can check our WordPress Plugins: How many should you install in 2020
WP Rocket works out of the box, and your website can allow caching with optimized settings. In our complete guide on how to install and configure WP Rocket in WordPress properly, you can learn more about it.
In order to achieve this you need to head over to the Settings > WP Rocket > File Optimization. Then check the boxes next to Minify CSS, Combine CSS Files, and Optimize CSS Delivery options.
You can stop WordPress from loading the Migrate jQuery file, too. It is a script that is loaded by WordPress to provide plugin and theme compatibility using old versions of jQuery.
Most websites do not need this file, but you would still like to review your website to make sure that your theme or plugins are not affected by the removal.
Click on the Save button. Once done, clear the cache in WP Rocket before you test your site again with the help of Google Page Speed.
Click on Save Changes and empty the cache. Once done like before, check your website’s speed by using the PageSpeed Insights tool.
Although the resources above will help, in order to function properly, your plugins can need those scripts at a different priority level. In that case, the solutions above can break the functionality of such plugins or may act unexpectedly.
Google may still show you certain problems, such as optimizing the delivery of CSS above the content fold. By manually adding Critical CSS required to display the above fold area of your theme, WP Rocket allows you to fix that.
However, it might be quite difficult to find out what CSS code you need to display above the content of the fold.