How to speed up a wordpress site: from a beginner to a pro

This is the easiest guide which will cover all what you will need to speed up your WordPress site for free.

Infact I used the same hacks to improve my site’s performance on Google Page Insights.

How to speed up a wordPress site and get a perfect score in Google Page Insights
~ Google Page Insights

Actually, without compromising my site’s UX nor it’s appearance.

But,

Before I can delve in right now, do you know why you should ascertain that your website load faster enough?

Let’s check in…

Why you should speed up your website

Speed is an important metric for the success of your online business. From SEO to the rate of conversion of your users.

Google especially uses speed as among the top ranking factors in their algorithm. This meaning that slow websites are highly penalized by Google.

Why?

Research by Google shows that each second that your website takes to load more users are likely to leave your site before it fully loads.

Correspondingly resulting to higher bounce rates.

Higher webpage loading time higher bounce rates
~ effect of slowly loading webpages

Since Google uses bounce rates to measure the users’ experience in your site it will consider ranking websites with low bounce rates.

This is because Google assumes that if a user spends more time to interact with your website it means that users love your site.

Leave alone Google, put yourself in the same shoes. Sincerely, would you continue browsing a slow website. Would you continue to shop online from a website that is also slow?

Of course no! By the way you would certainly opt for a website whose speed is intuitive.

If you are running a blog, an ecommerce site or any other business website where you expect customers to convert you would probably never assume speeding it up.

Therefore, slow web pages not only hurt your SEO rankings but can also cause huge losses for your business.

Tired of reading the 2500+ guide? Download the free PDF guide instead 😉

If you want to know how fast or slow your website is run a speed test using these tools.

How to optimize a wordpress website for speed

Before I took on the initiative to speed up my blog, here was my webpage on  GTmetrix.

Bloggerkenya speed score in GTmetrix

And after I implemented the strategies that I am about to show you, here was how fast I was able to optimize that webpage.

Bloggerkenya speed test

Now, if you are ready to learn how I was able to bring a difference between the two, you would rather not want to miss reading this tutorial till the end.

Step #1: Use a super responsive theme

WordPress directory avails over 3000+ free themes.

The bad news is that most of these themes aren’t as fast as you would wish them to be.

Unfortunately, a number of these themes are poorly coded, recklessly maintained and if you want advanced features such as a better support you would be required to get the premium version of that theme.

Well, does it mean that there are no free themes that are lightweight and responsive?

Here is the good news.

Kinsta did this great job! They tested out the most reputed lightweight themes in the market to get a list of these  ten most responsive themes for you.

Personally, I didn’t want to end it there I took a list of twenty themes that were suggested to be fast enough. I ran my tests on Pingdom and GTmetrix.

Here is my list also.

  • Hello Theme
  • GeneratePress
  • Neve 👉 (my all-time favorite)
  • Astra.
  • Arke
  • OceanWP
  • Zakra
  • Customify.
  • Sydney.

Well, I am not trying to be limiting. There are also a number of lightweight themes but since the list would be so  long that’s why I just listed ten.

Sidenote: developers are working day and night to bring the best to their clients . With this list it does not limit you from getting a theme of your choice.

Just to be clear, focus on getting a theme that is properly coded and constantly updated.

Research about the theme. Read its user’s reviews or even tests it for yourself by using tools like Pingdom or GTmetrix.

On the other side, if you are looking forward to getting a premium theme which is properly coded and unlock more features websites like StudioPress, ThemeForest, Thrivethemes, and Elegant Themes are among the amazing theme developers and sellers.

A popular theme such as Divi which is  developed by Elegant themes is among those fastest and versatile themes out there.

If you get a better theme which is code with an SEO mentality, you wouldn’t strive much creating a fast-loading website.

Well, if you had hired a developer to create a theme for your website the task to make sure that it’s ultra-fast is solely his.

Step #2: Minify your JS, CSS and HTML files

Minification refers to reducing the size of your web files by removing all the unnecessary characters from a source code which are useless to a machine.

These characters include white spaces, comments, and line breaks.

To minify your website you need to work around with the basic elements of a website. That is HTML, JS, and CSS.

By this, I don’t mean that you necessarily need to know how to code.

If you are one of those  non-technical website owners who have no skills in coding there are numerous tools to help you fix this.

At the moment we are going to work with an amazing plugin known as the W3 Total Cache.

So go ahead and install the W3 Total Cache from the WordPress directory.

Installing w3 total cache

Then let’s configure the plugin’s settings.

We will begin by minifying the HTML files. Hover on to your site’s dashboard and click on performance then minify.

For HTML check all the options but don’t check the ‘feeds’ options.

Minify HTML files using w3 total cache

Also, Minify the JS files like this.

Minification of js files using w3 total cache

And even the CSS files.

CSS files minification

It’s that simple actually.

However, minification may break your site. I would otherwise advise you to take on a backup with free tools like Updraftplus to be on the safe side.

Once you have minified your pages, take a look at your site’s appearance and check whether it’s all fine.

If W3 Total Cache seemed so technical for you the best alternatives are WP Fastest Cache and Autoptimize.

Step #3: Caching

Caching is a speed optimization technology that helps reduce the number of HTTP requests made across the server by the web browser.

This is how caching works.

When a visitor lands on your site a cache folder is stored in their web browser. Whenever your website’s user visits your website again, the browser does not need to send the HTTP requests to the server where your site is hosted.

Instead, it will automatically load the cached version of your website which was stored right on their web browser.

This will reduce the time it takes for your site to be rendered on the screen of the user’s device.

To cache your webpages a caching plugin like W3 Total Cache is a popular free tool. I love this plugin and it stands among the top free caching plugins in the market.

Once you’ve installed the go to performance  then general settings . After that move on to page cache  and check the options as shown.

Page caching using w3 total cache

For those who find W3 Total Cache so complicated WP Fastest Cache is a very lit alternative. Its configuration is very simple.

To enable caching using WP Fastest Cache just got to your dashboard, click on WP Fastest Cache then settings. Configure your settings as follows.

Enabling caching using WP Fastest Cache

However, if you are willing to spend an extra dollar and certainly get superb speed performance for your website  WP Rocket is a powerful caching plugin that is highly voted for their outstanding performance.

Unlike other plugins that cache your pages after a http request is made, WP Rocket automatically crawls your static pages and preload pages in the cache.

Here’s how to cache your pages using WP Rocket.

Page caching using WP Rocket
Image source => wpbeginner.com

That being said caching your web pages not only make your site highly responsive but also saves you the cost of hosting since you would have saved on your server’s resources.

Step #4:  Optimize your Images

If you are in love with images like me and you constantly use them all over your website you would probably never assume optimizing them for better speed performance of your website.

Images are very heavy files and apparently, they constitute about 30% of the overall webpage weight.

Which is the reason you have to take on the task of optimizing them.

To effectively optimize your images you need to compress, scale them and thereafter serve them through a CDN as well as enabling lazy image loading. All this can easily be integrated using a plugin.

For myself, I have been personally using the Optimole plugin to do all this. Although there are equally amazing plugins to sort you such as Shortpixels and Imagify.

Optimole compresses your images without affecting the quality of your images and serves them through their CDN.

Once you’ve installed and created an account with Optimole, you can enable the settings as shown below.

Web image Optimization using Optimole

Cool!

By this, you would have optimized your images.

Step #5: Fix the render-blocking JS and CSS files

Render blocking JS and CSS are files that hinder a webpage to load before loading these scripts. This means your website users have to wait a bit for those scripts to load.

This will be detrimental especially for those users who are in slow internet connectivity.

Using the Google Page Insights tool you will find the stylesheets and scripts that are render-blocking.

Fixing render blocking sources to speed up a wordpress site

Fixing this issue will make your website faster.

Two plugins can easily help you achieve that. The W3 Total Cache and Autoptimize.

I will take you through both of them and choose what you find the perfect fit for you.

For W3 Total Cache begin by hovering to your dashboard and click on performance. Go ahead and click on ‘general settings’ and then enable the ‘minify’ section.

Minifying Js files using w3 total cache manually

Over the Minify mode choose the manual option. Save the changes that you have made.

After that proceed to Google Page Insights and run the test to find the CSS and JS resources that are render-blocking.

After that go back to the w3 total cache dashboard and then click on ‘minify’.

For JS section enable the ‘JS minify settings’. Proceed and select the ‘ the non-blocking using “defer” option under the ‘ before <head> ‘ tag.

Fixing the render blocking JS

Choose the current theme that you are using for your site. Once done go back and copy the JS render blocking URLs that you got from Google Page Insights and then paste it on the fields provided by W3 Total Cache.

Paste the render blocking JS URLs in W3 Total Cache
~Fixing render-blocking JS files using w3 total cache

Click on verify URL and save the changes.

For the render-blocking CSS files make sure that you have enabled minification first.

CSS minification

Under CSS file management select your current theme also and then paste the render-blocking CSS url that you got from Google Page Insights.

Fixing render-blocking CSS using W3 Total Cache
~Fixing render blocking JS using Autoptimize

Click on ‘verify url’ and then save your changes.

It’s actually that simple.

If you are using Autoptimize go ahead to ‘settings’ and then click on ‘Autoptimize’.

For JavaScript make the changes by checking the options as shown.

Fixing render blocking JS using Autoptimize
~ Fixing render blocking JS using Autoptimize

To fix render blocking CSS make the changes as shown.

Removing render-blocking CSS files using Autoptimize
~Removing render-blocking using Autoptimize

As usual don’t forget to save the changes.

Step #6: Use a CDN

A CDN (content delivery network) is a technology implemented by webmasters to improve the performance of a website.

This is by geographically distributing their website’s data across a network of proxy servers such that any user, despite his location can easily access the website without a compromise.

Take for example you have a website which does use a CDN and your data centers are from Europe and Australia . When a user who is from USA wants to access your site, he is likely to incur slow performance of your website.

Reason being, the significantly huge distance between the servers and the user will result to slow speed performance of your website.

Nevertheless, a CDN totally gives a solid solution to this havoc.

What happens is that exact companies of your website are distributed all over the globe. When that user from USA wants to access your site, automatically, a copy of your website near to him will be loaded instead.

Using a CDN will not only boost your speed performance but it will avail a secured environment for your website.

If you are using or are planning to use managed web hosting plans such as Kinsta and WP Engine a CDN service is included in all their plans and its very easy to enable it from their dashboard.

A company like Cloudflare which is among the best CDN providers worldwidely, protects your WordPress site from DDoS attacks and even blocks bot traffic which might eat up your bandwidth can cause a rise in hosting expenses.

Cloudflare has a free plan for you and fortunately, you don’t need to start spending an extra dollar to use a CDN. As your site grows you would like to move on to paid plans in order to unlock more resources.

Getting started is simple. Just a cloudflare.com right away.

Getting started with Cloudflare
~cloudflare

Proceed to the signup page to get started. Once done, choose the appropriate plan for you. I would advise you to get started with the free plan.

Selecting Cloudflare best plan
~Cloudflare free plan

Enter your parent domain in form of domain.com like what I have done.

Enter the parent domain
~ domain

Cross-check your DNS records your CNAME and AAA records whether there are all okay.

Cross-checking DNS records
~DNS Records

Cloudflare will require you to change your nameservers to theirs.

 Changing to Cloudflare nameservers
~ Cloudflare nameservers

Now, the process of changing your nameservers from your web hosting company to Cloudflare may vary from one company to the other.

I would otherwise recommend you to reach out to your company and they will certainly help you how to go about it.

Step #7: Enable G-zip Compression

Compressing the elements of a website is another of your site lighter and faster.

Gzip compression is one simple way of going about it. Using this technological software it eases the transfer of your web files from the server to the web browser reducing the time it takes for your site to fully load.

I can compare gzip compression to when you want to send a huge PDF copy through email. To send it fast the best way is to compress it into a zip folder.

However, if you using the managed WordPress hosting providers such as Kinsta and WP Engine you don’t have to go through all this. Gzip is enabled by default.

From this guide, I will show you how to enable gzip compression using two easy ways.

Using a WordPress plugin and editing your .htaccess file by adding a code into the file.

1. The plugin Method

There are three best plugins that can help you compress your website into gzip.

The W3 Total Cache, WP Fastest Cache, and WP Super Cache.

To enable gzip compression in W3 Total Cache, move on to dashboard >> performance >>> browser cache.

Then check ‘enable HTTP compression’. 

Gzip compression in W3 Total Cache
~ gzip compression in W3 Total Cache.

For WP Fastest Cache move on to your site dashboard then to ‘wp fastest cache’ and then enable Gzip.

Gzip Compression in WP Fastest Cache
~ Gzip Compression using WP Fastest Cache

If you are using WP Super Cache ho we on to settings >> WP Super Cache >> advance section. Check the option labeled ‘ compress pages so they’re served more quickly to visitors’.

Enabling Gzip Compression in WP Super Cache

And it’s as simple as that.

Well, let’s go on to the next method.

2. Modifying your .htaccess file

Compression using plugins may not be effective like this one.

However, before you jump into this method I would recommend you to take a backup for your site. This is because are dealing with the most sensitive file in your website in which you can easily break your site.

Use a free backup plugin such as Updraftplus.

To avoid any chance of site breakages for those non-technical users you should contact your web hosting company and ask them to enable gzip compression for your site.

If you are willing to take on the risk let’s go on.

Most the websites on the internet are powered by either Apache, NGINX, or Litespeed as their webservers.

Moreover, most of them use a Cpanel as their web management dashboards.

To login to your Cpanel to access the root folder where the .htaccess file is located.

After logging into your Cpanel move on to the File Manager section.

Go on to the public_html folder and locate the .htaccess file.

Gzip Compression using htaccess method

To find the .htaccess which is of course not an easy task you need to use an FTP Client. Filezilla is the best FTP client around.

After that open your your. htaccess file using one of your code editing tools such as Notepad.

Add this string of code at the end of your .htaccess file if your website uses Apache webserver.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml  

  # Remove browser bugs (only needed for ancient browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

And this one if your site uses NGINX webserver.

# enables GZIP compression
gzip on; 

# compression level (1-9)
# 6 is a good compromise between CPU usage and file size
gzip_comp_level 6;

# minimum file size limit in bytes to avoid negative compression outcomes
gzip_min_length 256;

# compress data for clients connecting via proxies
gzip_proxied any;

# directs proxies to cache both the regular and GZIP versions of an asset
gzip_vary on;

# disables GZIP compression for ancient browsers that don't support it
gzip_disable "msie6";

# compress outputs labeled with the following file extensions or MIME-types
# text/html MIME-type is enabled by default and need not be included
gzip_types
application/atom+xml
application/geo+json
application/javascript
application/x-javascript
application/json
application/ld+json
application/manifest+json
application/rdf+xml
application/rss+xml
application/vnd.ms-fontobject
application/wasm
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
font/eot
font/otf
font/ttf
image/bmp
image/svg+xml
text/cache-manifest
text/calendar
text/css
text/javascript
text/markdown
text/plain
text/xml
text/vcard
text/vnd.rim.location.xloc
text/vtt
text/x-component
text/x-cross-domain-policy;

Once done editing your file save it and upload it using Filezilla.

If your website is powered by Litespeed webservers I would rather refer you to this guide and learn what code to add to your .htaccess document.

Step #8: General Cleaning

Your website’s speed could also be messed up by irrelevant database, pings, junky pages, inactive plugins, and even inactive themes

The fact is that they are all adding weight to your website whereas there no benefits of having them at all.

A better solution is to clean all those databases, disable pingbacks, delete inactive themes, and plugins.

Using a plugin like WP Optimize helps you clean up post revisions, clean trashed comments and posts as well as you can schedule an automatic clean up all in a touch of a button.

WP Optimize Database cleanup
~ WP Optimize database cleanup

And you can also disable pingbacks and trackbacks on your site. Just navigate to your ‘site settings’ and then ‘discussion’. Go on and uncheck the pingbacks and trackback option.

Disable pingbacks
~ disable pingbacks

By cleaning up your website you will reduce the page weight which will make your site load faster.

Step #9: Oh my! What about your web hosting company

I think this is the most sensitive issue while trying to reduce your site:s loading time.

You might have tried all that but if your company does not have enough resources to cater for the betterment of your website it’s all vanity.

How responsive are their servers? How often does your site experience a downtime? What kind of web hosting plan are you using in relation to your web traffic.

If your site’s server response is too slow without any doubt your site will be slow.

Do you want to know whether your web hosting company has responsive servers? Just head on to bitcatcha.com

Start a test using bitcatcha
~ bitcatcha

Enter your URL to start running your test.

Test server's response time using bitcatcha
~ servers response time test using bitcatcha.

From the results, you will understand whether your web hosting provider has amazing servers to ensure that your website is fast enough.

If your company’s servers are not quick I would rather advise you to migrate to a better host.

If your site’s traffic is beyond your shared hosting plan, common, upgrade to VPS to access more resources for your site.

Step #10: AMP’s are also good

It’s undoubtedly that AMP webpages are taking up the digital marketing industries by storm and pretty a good number of website owners are using them.

AMP, an abbreviated word for (accelerated mobile pages) was a project which was initially developed by Google to enhance a better experience for its users.

Websites that use AMP webpages load exceptionally fast than their latter.

For this reason, Google seems to favor websites that are implementing AMP to speed up their sites.

If all the above speed optimization techniques didn’t work so good the best thing is to opt for is AMP and unfortunately, you must be ready to sacrifice some of your assets in your sites such as opting forms, proper arrangements of social share icons, and even the glossy appearance of your site.

That’s the downside of using AMP.

Nevertheless, the big advantage of using them is that you can sit back and relax as you watch your site’s speed improving aggressively.

To enable AMP isn’t difficult. You can do it using an AMP plugin.

Installing AMP plugin
~ AMP plugin

Once you’ve installed the plugin open the launching wizard to configure the plugin.

AMP configuration
~ launching wizard

Proceed and select the  ‘non-technically savvy’ option.

From there choose the transitional template mode especially if you have a theme that is fully compatible with AMP.

Preview your site and see how it appears and finally save your changes.

Wow! You already have set up an AMP version of your site.

Summing Up

Believe it or not, we’ve covered all the essential steps for a fast loading WordPress site and actually, it is as easy as that.

It’s your turn now to implement each of them, step-by-step and note the changes on your site.

Or have you implemented them already? What change did you incur? What is your site’s speed now?

Let me know in the comment section below and if you loved the tutorial and you would like to receive such kind of  guides then hold us tight by subscribing to our newsletter.

2 thoughts on “How to speed up a wordpress site: from a beginner to a pro”

Leave your views

This site uses Akismet to reduce spam. Learn how your comment data is processed.