ATF (Above The Fold) is the part of your website that is visible after the first load. Any other part — anything you see after scrolling down is BTF (Below The Fold).
To fix render-blocking, you should first test your website’s speed with PageSpeed Insights:
- Go to the page, paste your website’s URL address in the “Enter a web page URL” field.
- Hit Analyze to get the results.
Since most websites score around 50 to 70, this should help you measure your score. Also, Google will list recommendations to improve the performance of your site.
Remember that your site doesn’t have to reach the maximum score, which is 100. Your goal is to try to receive a nice score without sacrificing UX.
Also, understand that you shouldn’t remove any scripts that are crucial for quality UX only to get a bit higher score on PageSpeed Insights.
The rules on which Google evaluates your site are only directions to consider for improving your website. In the end: use your own judgment!
W3 Total Cache
One of my favorite plugins: W3 Total Cache. After you’ve finished installing and activating it follow these actions on your WordPress admin dashboard:
- Performance -> General Settings.
- Look for the Minify heading and you’ll see some choices below the heading.
- Check the “Enable” box for Minify. After that choose “Manual” for the Minify mode.
- Click the “Save all settings” button.
- After finding the rogue script, find your way back to Performance -> Minify.
- Locate the JS intersects. Select the embed type Non-blocking using “defer” for the Before <head> tag in the Operations in areas section.
- Down below you’ll find the CSS segment. Now find the “CSS file management” part. Select your website's current theme and hit Add a style sheet. Like in the previous step, copy and paste the CSS stylesheets URLs from the Google PageSpeed Insights to the required fields.
- Lastly, hit the “Save Settings & Purge Caches”.
- Visit Settings -> Autoptimize.
- Hit “Save Changes and Empty Cache”.
To guarantee that the matter has been fixed, check your website on Google PageSpeed Insights once more. If the warning doesn’t appear, that’s great — you can move on! Otherwise, let’s try adding some additional optimizations:
- Navigate to Settings -> Autoptimize.
- Click the “Show Advanced Settings”.
- Once there, find and tick both the “Also aggregate inline JS” and “Also aggregate inline CSS” selections.
- Save your adjustments.
Speed Booster Pack
- Navigate to the Speed Booster Pack segment and enter the Advanced tab.
- Find the CSS Optimization menu down below and enable the CSS render-blocking optimization.
- You will also see the extra options like Inline all CSS, Minify all (previously) inlined CSS, Move all inlined CSS into the footer. You can do some tests with these settings to reach appropriate results.
By activating all of these settings, you will make your website load faster, although it could present an instance called FOUC (Flash Of Unstyled Content). To explain it shortly — it’s an occurrence when a website appears briefly with the browser’s default styles prior to loading an external CSS stylesheet due to the web browser engine rendering the page before all information is retrieved.
Once you’ve tried the mentioned methods, try to run your website through Google PageSpeed Insights again to make sure that the render-blocking problem is solved.
Since search engines consider websites’ loading times when ranking results, it is one of the major elements in captivating and keeping visitors.