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.
Before you start reading the article and checking the whole process explained in steps, you need to be sure that you have the paid version of WP Rocket. This WP plugin is amazing and could help you to reach these great results.
Knowing that Google is pushing the Core Web Vitals with the latest algorithm, WP rocket will boost your performance immediately. Don’t forget to take the paid version which is super cheap and makes big difference.
This is what you will get after optimization:
These are the things that need to be done for better optimization:
- Always create a child theme
- Above the fold (critical), combine, minify and remove unused CSS
- Minify, combine and defer JavaScript
- Change the size, compress and lazy load images
- Files expiration date or leverage browser caching
- 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 }
WP Rocket Review: How to Optimize It for Best Performance
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 File Optimization
WP Rocket Media
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.
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 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 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).
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.
Copy everything without <style> and </style> at the end and paste it in Autoptimize.
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:Footer: 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', 'with-scripts-that-are-in-header-and-footer-from-previous-code', '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.
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 caching plugin.
Keep in mind you can’t control leverage browser caching to third-party files (ex. analytics), testing pages like Gtmetrix, Pingdom, and Google page insights shouldn’t be a problem for third-party files like analytics or Google fonts because they are cached by many websites in the world.
If you have more third-party JavaScripts you should configure Google Tag Manager so the website can fetch only one header, not multiple render-blocking headers.
Use far future expiry header. WordPress dashboard -> settings -> far future expiry header and enter 365 days as you can see in the picture below.
Personally, I always use the manual method .htaccess.
Go to your web hosting file manager and go to the root of your website, there will be a file .htaccess right-click opens it with editor (depend on your web hosting you may need to select and or from right to click edit). If you can’t find .htaccess you need to unhide system files.
Copy this and paste in .htaccess
<IfModule mod_expires.c> ExpiresActive onExpiresDefault "access plus 1 month" ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" ExpiresByType image/x-icon "access plus 1 week" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/webm "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType text/css "access plus 1 year" ExpiresByType application/javascript "access plus 1 year" </IfModule>
Caching solution (if you didn’t choose WP Rocket)
These are the top four caching plugins that you should choose from:
And, in the end, the most important step is choosing the right hosting. There is a lot of differences from one hosting to another. This is the list of top web hosting you should choose:
- WP Engine (best overall)
- SiteGround (best WP Engine alternative for less cost)
- HostGator (great hosting overall)
- IPage (cheapest with some downsides)
FAQs about WordPress optimization
1. Does minifying, defer, and remove unused CSS?
Yes, a lot. Deferring and removing unused CSS is also known as critical or above the fold CSS.
2. Does deferring JavaScript speed up the website?
Yes, a lot, “defer” means load everything then JavaScript also know as non-render blocking JavaScript.
3. Does hosting impact on the website load speed?
Yes, depending on the website nearly all hostings can be good. Yes, depending on the website nearly all hostings can be good. Best hosting is WP Engine closely followed by Siteground, the great balance from HostGator, and great for entry websites with $23 per year iPage.
4. Do images affect website speed?
Yes a lot, images have to lazy load and be scaled down properly. “Lazy load images” term are images that load in the viewport.
5. What are the most used WordPress files for minification?
The most used files are .htaccess, header.php, footer.php, and functions.php. The proper way is to load every script in functions.php and hook the script into header and footer which means you shouldn’t be changing the actual header.php and footer.php.