Fix Above the Fold, Render Blocking & Defer CSS & JavaScript WordPress 2018-03-14T01:08:31+00:00

How to fix above the fold, render blocking and async or defer load of CSS & JavaScript

Fixing above the fold, render blocking and async or defer load of CSS and JavaScript is easy following this tutorial. WordPress optimization everyone should do after installation. Even though is the best CMS it’s suffering from slow website loading without optimization.

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

I’ll show you how to optimize WordPress, so the website can load time under 1 sec which is great for ranking to Google as well.

google page insights myhostingfacts 100 score mobile and desktop

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 optimization needs to be done:

  • Create child theme
  • Above the fold (critical) CSS, combine, minify and load asynchronously
  • Minify, combine and defer JavaScript
  • Change size, compress and lazy load images
  • Files expiration date or leverage browser caching
  • Caching solution
  • Choose web hosting

Complete WordPress speed optimization

Optimizing WordPress will lead to more users, less bounce rate, better Google rank and it’s something you must do to your website.

testmysite.withgoogle.com speed.

think with google mobile test speed www.myhostingfacts.com

How to optimize above the fold CSS, combine, minify and load asynchronously

Compressing, minifying, combine and use critical CSS for above the fold is ¼ of optimizing a website for speed.

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

Create child theme

Creating child theme in WordPress is so easy. Use child theme configurator plugin to create a child theme with files that you need following this steps:

create wordpress child theme with child theme configurator plugin

From WordPress dashboard->Tools->child themes.

  1. Tick create a new child theme.
  2. Select a parent theme
  3. Click Analyze
  4. Give the child theme directory name
  5. Select primary stylesheet
  6. Do not add any parent stylesheet handling
  7. Show hide attributes if you want to change child theme name or description (this will change name and description in Appearance->Themes)
  8. If you already made changes to the parent theme or you’ve been working with parent theme you can replace menus, widgets and customize settings.
  9. Click create new child theme

Ignore This child theme does not load a Configurator stylesheet.

Now click on the files button from child theme generator menu, here you can find all parent theme files, function.php and CSS are already created.

I don’t recommend including other files but sometimes, someone maybe needs to import header.php or footer.php or another file.

Finally, go to Appearance->Themes and activate your child theme.

Above the fold (critical) CSS

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

After installing Autoptimize go to WordPress dashboard Settings ->Autoptimze

Click on show advanced settings (top right).

autoptimize above the fold CSS WordPress optimization myhostingfacts.com

You will see an image like this one, 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 myhostingfacts.com

From more than 1 000 000 characters it’s reduced to 15 500 (~1.5% CSS used) characters that above the fold needs to load and after it’s finished the full CSS file will be loaded asynchronously and will not render block.

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

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

Minify, combine and defer JavaScript

Minifying JavaScript is also about ¼ of site optimization and it’s as important as a CSS.

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 fonts won’t be a problem because they are cached by a big number of websites.

Paid solution

There a few ways to optimize JavaScript but the easiest is to use WP Fastest Cache premium.

how to minify, combine third party, combine internal and defer JavaScript wordpress speed optimization

Just go to WP Fastest Cache from WordPress dashboard tick minify Js, Combine Js Plus and Render Blocking Js.

You’ve minified, combined, loaded from the footer and removed render blocking.

Free solution

Speed Booster Pack is a great plugin to do all the above for free, for the cost of only one more plugin installed.

minify, combine and defer JavaScript with Speed Booster Pack wordpress plugin

Install speed booster pack go to WordPress dashboard -> settings -> Speed Booster pack and tick Move scripts to the footer, Defer parsing of javascript files and minify HTML and JS (if you didn’t in Autoptimize).

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(from my test they work only under 2MB, some warn you about that, some don’t):

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 depend on the plan but for one website the cheapest plan should be enough.

Photoshop can be used to reduce image size under 2MB and then you can use some of the plugins mentioned above.

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

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

Worth mentioning is compress image toolur. They have good options.

At last lazy load images. I recommend using a3 lazy load plugin, 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.

Defer JavaScript manually

function defer_parsing_of_js ( $url ) {

if ( FALSE === strpos( $url, ‘.js’ ) ) return $url;

if ( strpos( $url, ‘jquery.js’ ) ) return $url; return “$url’ defer “;

}

add_filter( ‘clean_url’, ‘defer_parsing_of_js’, 11, 1 );

After you can move jQuery to footer if you don’t need load in the header:

add_action(‘wp_enqueue_scripts’, ‘move_jquery_to_footer’);

function move_jquery_to_footer() {

wp_deregister_script(‘jquery’);

wp_register_script(‘jquery’, includes_url(‘/js/jquery/jquery.js’), false, null, true);

wp_enqueue_script(‘jquery’);

}

File expiration date (Leverage browser caching)

Can be done by a plugin or manually with .htaccess.

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.

Use far future expiry header. WordPress dashboard -> settings -> far future expiry header and enter 365 days as you can see in the picture below.

leverage browser caching, far future expiration date plugin for wordpress speed optimization

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.

show system files (ungide) .htaccess for leverage browser caching

ipage htaccess editing for leverage browser caching for wordpress speed

 

Copy this and paste last (should be after caching and WordPress):

<IfModule mod_expires.c>

ExpiresActive on

ExpiresDefault                          “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

I left caching solution last because I know if you install cache plugin first you will have a problem and you’ll need to constantly clear cache between steps.

There are three best plugins that you should choose from:

Personally, I use WP Fastest Cache with this settings:

wp fastest cache best settings combined with autoptimize myhostingfacts

 

I don’t use combine CSS because in my test the Autoptimize combined CSS file always loads faster than the WP Fastest Cache combined CSS files (two files cache and font cache), also I don’t use combine JavaScript because Autoptimize somehow is faster.

W3 Total Cache is great but I  avoid it because I have many problems with Server Error 500 and I had this problem with HostGator, iPage, InMotion, SiteGround and many more.

WP Super Cache is also great and free but I do prefer WP Fastest Cache.

Great video how to configure WP Super Cache:

Choose best web hosting

First and the most important step is choosing a web hosting even tho I left him last.

Choosing bad hosting will cost you the speed no matter how good you are in WordPress optimization. Some hosting are good some are bad and only a few really stay on top, reviewed and compared best web hostings 2018.

 

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section]