Mar 09, 2021
Above-the-fold (ATF) means the part of your webpage that is visible when the page first loads. Any part of the page that you have to scroll down to reach is non-ATF.
The first step in fixing render-blocking is testing your site’s speed using Google PageSpeed Insights. Follow these steps to do so:
- Visit the page, and paste your website’s URL in the “Enter a web page URL” field.
- Click Analyze to get the report.
Most sites score between 50-70; this should serve as a benchmark for your score. Google will also list suggestions to improve the performance of your website.
Keep in mind that you should not force your website to score a perfect 100. Just try your best to get a good score without sacrificing user experience.
If there are scripts on your WordPress site that are essential for a robust UX, you shouldn’t remove them just to get a slightly higher score on PageSpeed Insights.
The rules on which Google scores your websites are merely guidelines and should be taken as such.
W3 Total Cache
- Go to Performance -> General Settings.
- Find the Minify heading on the page. Then, you will see a few options under this heading.
- Tick the Enable box for Minify. Then, for the Minify mode option, choose Manual.
- Press Save all settings.
- Once you’ve found the troublemaker, navigate back to Performance -> Minify on your WordPress dashboard.
- Find the JS section. In the Operations in areas section, choose the Non-blocking using “defer” embed type for the Before <head> tag.
- Scroll down and find the CSS section. For the CSS file management, choose your active theme and click on Add a style sheet. Similar to the step above, copy the CSS stylesheets URLs from the PageSpeed Insights and paste them on the required fields.
- Finally, click the Save Settings & Purge Caches button.
- Go to the Settings -> Autoptimize.
- Press the Save Changes and Empty Cache button.
In most cases, this is enough to fix the warning. However, the result may vary depending on your theme and active plugins.
To make sure your problem has been solved, run your site through PageSpeed Insights again. If there’re any blocking JS and CSS resources left, take the optimization even further by following these steps:
- Head back to Settings -> Autoptimize.
- Hit the Show Advanced Settings button.
- Then, check the options for Also aggregate inline JS and Also aggregate inline CSS.
- Save your changes.
Speed Booster Pack
- Go to the Speed Booster Pack section and access the Advanced tab.
- Scroll down to the CSS Optimization menu to set the CSS render-blocking optimization.
- You will find additional settings for inlining all CSS, minifying all (previously) inlined CSS, and moving all inlined CSS into the footer. Experiment with these options to find a proper solution.
Simply enabling all of them will load your site faster, but may also introduce the unwanted Flash of unstyled content (FOUC) artifact. This happens when the browser loads the web page without waiting for the stylesheet to load, causing a momentary flash of unstyled page.
After trying the methods above, head back to Google PageSpeed Insights to ensure that render-blocking is not an issue anymore.
Website speed is one of the most critical factors in attracting and retaining visitors. This is because search engines consider site speed when ranking results.
Hopefully, this tutorial is beneficial for you. Feel free to comment below if you have any questions. Good luck!