Buy me a coffee

WP: Fix Above the Fold, Render Blocking & Defer CSS & JavaScript WordPress

Out of the box, WordPress is fast but could become slow with installing themes and a lot of plugins. Plugins are loading their own CSS and JavaScript. You can minify, combine, and defer with plugins or by code in function.php.

Follow this very easy step-by-step tutorial to speed up your WordPress.

Slow website leads to losing visitors and more importantly losing potential customers.

This is what you will get after optimization:

gtmetrix pagespeed, wordpress optimization, images optimization,combine internal, external, minify and defer javascript, combine thrid party CSS, minify, above the fold

These are the things that need to be done for better optimization:

  1. Always create a child theme
  2. Above the fold (critical), combine, minify and remove unused CSS
  3. Minify, combine and defer JavaScript
  4. Change the size, compress and lazy load images
  5. Files expiration date or leverage browser caching
  6. Caching solution

Using WordPress means working with multiple style.css and JavaScript files, not just from the theme but also from the plugins (ex. Jetpack). You want those CSS and JavaScript files combined into one, minified, compressed, and deferred.

How to Create a Child Theme in WordPress?

Creating a child theme is a few steps with a child theme configurator plugin.

From WordPress dashboard go to tools -> Child themes and these are the steps:

1 -> CREATE a new Child Theme

2 -> Select a Parent Theme

3 -> Click Analyze

4 -> Give the child theme a name in my case (Avada-child)

5 -> Select primary stylesheet

6 -> Use the WordPress enqueue style

7 -> Optional (changes will be shown in the WordPress dashboard -> appearance -> themes

8 -> Optional (if you want to copy menus and widget from the parent theme)

9 -> Click on Create New Child Theme

10 -> Finally from WordPress dashboard go to Appearance -> Themes -> choose the new Child theme
From the Files menu in the child configurator you can include all the files you need, let’s say you want header.php never to be changed you can include in the child theme by checking it and click Copy Selected to Child Theme, this way in the further updates of the Parent theme you won’t lose any customization in the header.php. This said tho you shouldn’t ever change header.php by adding the code manually like Google Analytics but use the function.php and add the code from there into header.php. Function.php is created when you create a child theme.

The proper way to include something in header.php

add_action('wp_head','myhostingfacts_analytics', 20);
function myhostingfacts_analytics() {
Google Analytics Code here


child theme configuration plugin steps

WP Rocket Review: How to Optimize It for Best Performance

WP Rocket best caching plugin for WordPress

I’ve tried every caching plugin for WordPress and no one is even close to WP Rocket. The best spent money ever.

Recently I’ve started using WP Rocket because of how he creates above the fold (critical) CSS for every page, post, archive, author, portfolio, etc.. even for custom post types and have the best options for JavaScript defer with an option to defer jQuery too.

WP Rocket features:

  • Minify HTML
  • Combine Google fonts
  • Minify/combine and create critical CSS for the front page, posts, categories, custom post type etc…
  • Minify/combine JavaScript
  • LazyLoad for images
  • LazyLoad for iframes/videos
  • Remove unused CSS (critical CSS)
  • Defer JavaScript
  • Defer jQuery

All of this above can be turned on or off for every page or post etc…

This is the settings I’m using:

wp-rocket-settings-2018-12-07-5c0a61bf09179 unzip JSON file, go into the WP Rocket tools and upload the file, then import the settings. You can do this step by step by enabling settings (see images below).

WP Rocket Cache settings

WP Rocket File Optimization

WP Rocket File optimiztion

WP Rocket Media

WP Rocket settings for lazyload images and iframes with fallback image and disable WordPress emoji and embeds

WP Rocket Preload (WP Rocket will show other SEO plugin sitemaps generators if you have custom sitemap specify the URL), also you can prefetch DNS from the third party files/domains (I’m prefetching Google Fonts).

Keep in mind, you can’t fix render-blocking JavaScript from third-party apps (ex. Google fonts) or you should host them on your website, render blocking Google fonts won’t be a problem because they are cached by a big number of websites and will load so fast.

WP Rocket Preload and sitemap integration

Advanced Caching Rules: If you have cookies, login, logout, shop, check out you can finetuning to exclude cache or specify on/off cache for query strings(I don’t have any of these so left it default).

Make database backup before use database optimization (just to be on the safe side if something goes wrong).

WP Rocket CDN (the best CDN integration by far, you can choose multiple CDNs[if you have more than one CDN account] for different files)

WP Rocket CDN

WP Rocket Heartbeat (if you hit resources on your hosting you might want to reduce[all three have dropdown] or turn off[untick Controlheartbeat] heartbeat)

WP Rocket heartbeat

WP Rocket Add-Ons (turn on Google Analytics, Facebook or Varnish cache[hosting that uses it ex. WP Engine] to host the files locally[this won’t give you speed boost but satisfy Google Page insights, GTMetrix etc…])

How to Configure Autoptimize?

I’ll recommend using plugin Autoptimize for combining all CSS files. Follow these steps:

After installing Autoptimize go to WordPress dashboard Settings ->Autoptimze

Click on show advanced settings (top right).

autoptimize above the fold CSS WordPress optimization

When you see an image like this one in your Autoptimize plugin, tick the box optimize CSS code, and the box Inline and Defer CSS.

Go to critical path generator and paste your URL and click GENERATE CRITICAL PATH CSS.

above the fold, critical path css

Copy everything without <style> and </style> at the end and paste it in Autoptimize.

above the fold autoptimize fixed WordPress optimization

From more than 1 000 000 characters it’s reduced to 15 500 (~98.5% unused CSS removed) characters that above the fold needs to load and after it’s finished the full CSS file will be loaded as not render-blocking.

With Autoptimize we combined, minified, removed unused CSS, fixed above the fold error from Google Page Insights, the compressing which is left will be finished by enabling Gzip compression with the caching plugin.

Check Gtmetrix, Pingdom, or Google page insights and see the CSS results.

Defer CSS & JavaScript manually with code in function.php

Follow the steps below to defer CSS & JavaScript and fix the render-blocking problem easily with code. Here if you want to do that with a plugin.

Add the code below into function.php at the end. This code will show all JavaScripts that load in the header and in the footer. After you finish with deferring the Javascript remove the code above from function.php

add_action( 'wp_head', 'show_scripts_in_header', 9999 );
add_action( 'wp_footer', 'show_scripts_in_footer', 9999 );
// JavaScripts appear on the top, before the header
function show_scripts_in_header(){
global $wp_scripts;echo '<pre>'; 
print_r($wp_scripts->done); echo '</pre>';
// JavaScripts appear on the bottom, after the footer
function show_scripts_in_footer(){
global $wp_scripts;echo '<pre>';
print_r($wp_scripts->done); echo '</pre>';

You will get something like this:Header:show all JavaScripts that load in the headerFooter: Choose which JavaScript file you want to defer with the following code:

add_filter( 'script_loader_tag', 'defer_scripts_myhostingfacts', 10, 3 );
function defer_scripts_myhostingfacts( $tag, $handle, $src ) {
// The handles of the enqueued scripts we want to defer
$defer_scripts = array('here', 'is', 'an', 'example', 'change', 
'actual-example', 'vc_woocommerce-add-to-cart-js');
if ( in_array( $handle, $defer_scripts ) ) {
return '<script src="' . $src . '" defer="defer" type="text/javascript"></script>' . "\n";}
return $tag;

jQuery is best to load in the <head> because a lot of plugins and themes need jQuery to load before loading some styles, front-end animations or some validation, etc…

//The code below is to remove the scripts from head and add them in footer

function remove_head_scripts() {
remove_action(‘wp_head’, ‘wp_print_scripts’);
remove_action(‘wp_head’, ‘wp_print_head_scripts’, 9);
remove_action(‘wp_head’, ‘wp_enqueue_scripts’, 1);

add_action(‘wp_footer’, ‘wp_print_scripts’, 5);
add_action(‘wp_footer’, ‘wp_enqueue_scripts’, 5);
add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5);
add_action( ‘wp_enqueue_scripts’, ‘remove_head_scripts’ );
//Test thoroughly if everything works

Image Optimization

Image optimization can be done with plugins or with Photoshop.

True image optimization starts with size, you need to know what image size you need to your website I recommend about 1600×1200.

Limit image size to your needs.

Great plugins for image optimization:

If you have a small to medium website free version will be enough, however, they all have premium plans for unlimited1 usage.

1. They have limits depending on the plan but for one website the cheapest plan should be enough.

Using only Photoshop isn’t enough, you will end up with images too big for web usage even tho we are saving for web. Export images for web legacy with photoshop.

 Photoshop export, save for web (legacy) images optimization for wordpress blog

Worth mentioning is the compress image toolur they have good options and easy to compress and change the quality of pictures.

At last lazy load images. Right now I’m using the lazy-load from WP Rocket but I highly recommend using a3 lazy load plugin (a lot of good options), try to load it trough footer, if your theme doesn’t use wp_footer() use header option and defer JavaScript with Speed Booster Option or paste this code at the end of Appearance->Editor->function.php.

File expiration date (Leverage browser caching)

It can be done by a plugin or manually with .htaccess. You can skip this part if you have a WP Rocket