WordPress Installation & Optimization (Step 3)

Introduction

In this step of the series we are going to focus on optimizing the website for speed and page rating, we will cover which plugins and their configuration give the best results on our hosting.

Once you have finished with steps 1 & 2 of this guide, you can access the admin dashboard of your WordPress installation and do the changes described in this guide to the WordPress website.

At the end of the tutorial you should have a very fast website that feels very responsive and fast to use, as an added bonus all the optimization done here will also boost page rating as search engines take the website speed into account for their ratings.

Plugins

Javascript and Styles optimization using "Autoptimize"

Javascript and CSS optimization will give us the biggest performance boost, by default each javascript and css file is loaded separately, additionally they contain white-spaces and comments which we don’t need.

The “Autoptimze” plugin takes care of those issues for us giving us a huge performance boost, the first step is to install it on your WordPress website.

Once it is installed and activated enter the settings for the plugin, and expand the advanced settings mode as shown in the picture.

Under the HTML options make sure they are not ticked.

Under the javascript options make sure the “Optimize Javascript Code”, “Aggregate JS-Files” and “Also aggregate inline JS” are ticked, additionally make sure that the “Exclude scripts from Autoptimize” is empty

Under the CSS Options we want to make sure that the “Optimize CSS Code”, “Aggregate CSS-files”, “Also aggregate inline CSS” are ticked, additionally in “Exclude CSS from Autopatimize” make sure only the admin-bar and dashicon files are present.

Under Misc options, make sure both “Save aggregated script/css as static files” and “Also optimize for logged in users” are ticked.

Next move into the Extra options located in the tab at the top of the page. 

In the extra options we want to modify the Google Fonts and set it to “‘Combine and preload in head”, and tick the “Remove emojis” and “Remove query strings from statis resources”.

The configuration of the Autoptimize plugin is complete now, we have optimized all our JS and CSS resources and prepared the optimization for the fonts, with the next plugin we will make sure they are optimized as well.

Google fonts optimization with "Self-Hosted Google Fonts"

Font optimization will give us the a decent performance boost by combining all of the fonts into a single font and serving them from our own server.

The “Self-Hosted Google Fonts” plugin takes care of downloading all the external fonts locally and then Autoptimize will bundle them together with the settings we already made.

Once the plugin is installed enter the settings page and follow the instructions below.

Make sure that the “Process Enqueues”, “Process CSS Files”, “Process Inlince CSS” and “Protocol Relative URLs” options are ticked, also the “Enable Processing” dropdown field needs to be set to “Yes Enable”.

The configuration of this plugin is complete now, to verify that everything is working you can open the front page of your website and inspect the network traffic, only a single JS file and a single CSS file should be loaded now.

The performance increase should be noticeable now, keep in mind that all the content from our servers is gziped to further increase performance and caching of status resources is provided by the server configuration to make sure the same resources are not reloaded on every page.

HTML Rendering optimization using "Cache Enabler – WordPress Cache"

HTML optimization will provide us with a way to skip long running rendering of pages, if the page remains the same why should it be rendered again right? that’s where this plugin comes in.

The “Cache Enabler – WordPress Cache” plugin takes care of downloading all the external fonts locally and then Autoptimize will bundle them together with the settings we already made.

Once the plugin is installed enter the settings page and follow the instructions below.

Make sure that the “Cache Expiry” is set to 0, “Cache Exclusions” and “Cache Inclusions” are empty, and the “Cache Minification” is set to “HTML & Inline JS”.

Now we want to control the Cache Behavior, Make sure that “Clear the complete cache if a new post has been published”, “Pre-compression of cached pages.” and “Clear the complete cache if any plugin has been upgraded.” are ticked.

This plugin will give a decent performance boost on low traffic website, but it’s highest contribution is on high traffic websites where it really shines. Nevertheless we recommend to have it on websites of any size.

Image optimization using "reSmush.it Image Optimizer"

Image optimization is just as important as any of the previous steps, each saved kilobyte decreases your page speed and your data usage.

The “reSmush.it Image Optimizer” plugin takes care of optimizing your images every time you upload an image, the optimization is done without sacrificing visible image quality and on average saves about 50% size on images.

This plugin has no configuration as soon as it is installed and activated it will do it’s magic on every uploaded image.

The benefits of this plugin are huge especially on websites heavy on images and takes care of all the optimization for you.

Congratulations!

You have reached the end of our 3 step WordPress Installation & Optimization guide, by now you should have a secure and fast website, Further optimization is always possible but the approach depends on the type of website and requires dedicated analysis and implementation of a specific solution.

If you have any questions feel free to contact us via our support section.