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() {
?>
<script>
Google Analytics Code here

</script>
 
<?php
}

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).