9 Ways to Speed Up Your WordPress Site

posted in: Blog | 0

Speed up your WordPress – After you’ve completed your WordPress blog setup, its speed isn’t yet optimized. It can be much faster.

Optimizing a blog can be a daunting task. Without a proper knowledge, you’ll spend hours if not days to figure out what to do and you may feel deflated.

That’s the reason I’ve created this post. So you can have A guide to follow and in no time you’ll see result.

Bookmark this page (CTRL + D) in case you want to come back again.

Tools and things to consider

Speed analyzer tools – Here are 4 tools you can use to analyze your blog performance:

  1. PageSpeed Insight
  2. GTmetrix
  3. Webpagetest
  4. Pingdom

They can provide you with useful suggestions on how to improve you site and give score to your optimization effort. Choose one that you want to work with.

Score madness – I would like to talk about score obsession. Chasing a perfect score can sometimes quickly turn into a madness. The reason is because there are things that are out of your control.

For example:

You use Google PageSpeed Insight to check out your speed.

If you use Google badge, AdSense Ads, or Google Analytic, etc. there will be some external files transferred from the Google server. You can’t change it, you can’t modify it, you can’t do anything about it. But the tool will keep suggesting that you should optimize it, which you can’t. That’s the way it is.

Here’s a good quote I took from GTmetrix tool page:

Not every recommendation will apply to your page
The recommendations are meant to be generic, best practices; some things will be out of your control (eg. external resources) or may not apply to your page.

Another reason for this kind of case might be related to a responsive design.

Optimization rule says, if you’re going to display a 300px x 300px image on your blog. You should use exactly the 300px x 300px image size. Don’t use a bigger image. Because the browser has to resize it otherwise.

But in responsive design where the layout changes to fit various screen display sizes, bigger images might be used to accommodate the changes.

For example:

dannychoo.com and digital-photography-school.com

Try to resize your browser to see the responsive effect of those two sites.

That’s why in situation like that you can’t get yourself a perfect score. In fact Digital Photography School with almost 5 millions visitors/month scores between 50-60 for mobile and desktop optimization (PageSpeed Insight).

Another things you should know about speed:

1. Hosting

In order to have a fast blog you need to have a fast server, even when you are in a shared hosting.

I need to stress this out. No matter what kind of optimization you do, it won’t do much help, if your hosting is suck.

One of the biggest mistake I did was, I used a really bad web hosting. As the result, my site got slow and was down very often.

The customer service always always said, I used too many plugins. It wasn’t like I used over 20+ plugins, it’s more like the total of my left hand fingers.

In case like this, there’s no use arguing with the customer support, just leave and go find a great one.

If you want to know how to find a great web hosting service, check my previous post:

How to Start a Blog with WordPress for Beginners (Not a Free Guide)

2. Lean always mean faster

Theme – If you use a shared hosting plan, I suggest don’t use a fancy premium theme, such as Avada. Because it’s heavy and it drinks a lot of resources.

I would suggest something like Studiopress/Genesis. Because it’s lightweight, though they’re not sexy.

Often we see big sites looks very amazing and fast. Don’t get fooled. Their sites are probably hosted on VPS or dedicated hosting and use paid services such as CDN to boost the speed.

Plugins – If you use WordPress, it would be better to keep the plugins below 20. Some plugins may drag your performance. If you use jetpack site stats, I suggest that you don’t use it. Your site could go faster. Unless you really need it.

Now, let’s talk about the things you can optimize

1. Compress your images

Make your images size smaller in Kb. The reasons are:

  • Your pages will load faster.
  • Faster backups.
  • Less bandwidth usage.

Tools – I don’t like using Photoshop. Because no matter how much you’ve compressed your image, Google pagespeed test always say the image can still be optimized.

On WordPress I use WP Smush plugin from WPMU Dev. It does OK for the free version. All you have to do is upload the image and it does the job. The developer offers a better compression if you want to use their paid version.

Another tool I like is an online site: compress.photos.

Let’s see the result comparison before and after compression.

The first picture is downloaded straight from Flickr, 199 KB

red ruffed lemur not compressed

The second picture is the result after it’s compressed with compress.photos, 56 Kb.

red ruffed lemur compressed

What do you think on the quality after compression?

It takes a bit more steps to get the job done than with WP Smush, though.

2. Display images with their exact dimension

It means if you want to show a 300px X 300px image, then use an image in that size. Don’t use bigger image.

That way the browser can render it in just one go. Efficient. Faster.

In most cases this issue could be found in your post. For example your post container width is 640px, but when you create a post, you place a 1024px width photo. When the post is opened, the browser will have to resize it to fit the container.

This is a bad practice, because:

  1. It takes extra CPU resources
  2. The images are displayed in reduced resolution.

For the solution, adjust the size of your images on the settings > media. You can set 3 sizes:

  1. Thumbnail size
  2. Medium size
  3. Large size

If there’s a size you don’t want to use, give it a 0 x 0 value.

Here’s how WP works:

After you upload an image, WordPress will generate another 3 variation of images. In total there will be 4 images, if your own theme or widget doesn’t generate another image size on its own.

If you change your sizes after you’ve uploaded the images, you need to regenerate them again. I prefer using the Force Regenerate Thumbnails plugin, because it will delete the previous image sizes.

3. Use Jetpack Photon

The Jetpack plugin has a module called Photon.

What it does, it will upload your images and serve them from their server.

To test it’s performance I use a post containing 8000 words and many images:

How to Start a Blog with WordPress for Beginners (Not a Free Guide)

Even though based on the test using GTmetrix, the images served without Photon is faster:

photon serving speed test

But in overall performance it saves more time as shown below. I’ve tested it a couple of time and the result was always similar.

photon speed test

I don’t know the exact reason is, but my guess is because my server don’t have to allocate resources to process the images, thus it can work on the other things faster.

Note, you may not notice much of different in a short post with just only a few images, but another advantage of using Jetpack Photon is it saves bandwidth. Because the data isn’t send from your hosting.

This is good if your hosting has limited bandwidth.

4. Use Responsify WP plugin

This plugin allows the browser to pick different image sizes, depending on the view port width of a browser.

On number 2, I said:

Display images with their exact dimension

But even when you’ve set the image and use them correctly, probably you did it to serve desktop viewers.

How about mobile devices that have smaller view port?

The same problem will occur again. The browser will resize the image to fit in.

This where Responsify WP plugin comes into play. It can pick the more suitable image size according to the width of the view port.

So in smaller devices, which usually has less speed and power than a desktop, the browser can pick smaller images. It will be more efficient.

I have to admit, this is not a perfect solution, mobile devices come in different sizes. If you try to satisfy each one of them, you’ll end up with a very large image data.

You can use the three image sizes available on WP.

Or you can add your own if you feel you need to add more. Just edit the file functions.php located on your theme folder and add at the bottom:

add_image_size( 'Small', 200, 300 );

Small is the size name; 200 is the width; 300 is the height. Change the value according to your need

For the more techie guys here what it does:

This plugin modify the <img> tag and add srcset attribute. This attribute allows you to set different images sizes based on the view port width. Latter the browser get to decide which one should be used.

This will reduce the Kb size that need to be downloaded and your blog becomes more mobile friendly. Because mobile phone usually has less speed and power than desktop.

5. Google Page Speed Module

If your web host apply this thing on their server, you can activate it, and your optimization score on Google PageSpeed Insights will jump in an instance.

This module is created to meet the Google optimization suggestions. It’s very easy to setup I’m sure you can do it:

Edit your .htaccess and add this code:

ModPagespeed on

Here are some details about the job it does:

  1. Enable compression
  2. Leverage browser caching
  3. Minify resources
  4. Optimize images
  5. Optimize CSS Delivery
  6. Prioritize visible content
  7. Use asynchronous scripts

6. Activate keep alive

If you’ve already activated Google Page Speed Module, this step won’t be necessary. If you didn’t, add this.

Let me explain what it does:

When a page is loaded, there are files transferred from a web server to a browser. A season is opened and closed for each file send.

Opening and closing season takes time. For efficiency the session can be kept open until the communication is over by adding this code on .htaccess file:

<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>

You can find .htaccess on the base folder you’ve installed your WordPress.

7. Adsense optimization

This optimization is only for AdSense Publishers.

An example of AdSense code:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-123131231231323"
     data-ad-slot="123141681"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

At the top of the code, there’s a Javascript calling a file from google server:

<script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>

Without this file, your ads won’t appear.

The script exists on every AdSense code. That means if you have 6 ads, it loads the same file 6x.

This is unnecessary.

The more efficient way is to put only one script on header or footer of your template.

Some theme provide an easy way to add code on header and footer. If your theme doesn’t have it, you need to change the header.php or footer.php

Maybe you’ve heard that Goole doesn’t allow their AdSense code to be modified. And you are wondering, does this violate their rule? They said:

Our program policies do not permit any alteration to AdSense code which artificially inflates ad performance or harms advertiser conversions.

Source: https://support.google.com/adsense/answer/1354736?hl=en

But the alteration we made doesn’t inflate the ad performance or harms advertiser conversions.

In fact for more specific, Google explains on a FAQ:

Source: https://support.google.com/adsense/answer/3221666?hl=en

8. Use Content Delivery Network (CDN)

Distance has an impact on the speed of your page load.

For example:

Your blog is hosted in US. The users in the US and the users in Australia will experience different speed performance when opening your site. The farther the distance the slower it gets.

To solve that problem you use a CDN service. It’s a network of servers across the globe whose job is to clone your blog and serve your readers from the nearest one. Thus the distance that the data need to travel can be reduced. As the result your page load speed increases.

There are CDN companies out there, such as: CloudFlare and MaxCDN.

Most hosting right now has integration with Cloudflare. Because other than paid plans, they offer also a free service.

Here are the maps of CloudFlare servers.
network-map

You can setup CloudFlare from your cPanel or from their site.

Let me show the test result before and after I activated my CDN.

dUS blog is located on Chicago, USA. Using Pingdom I tested the speed from Melbourne, Australia.

Before:  dUS speed before CDN is activated

After:dUS speed after CDN is activated

9. Use the W3 Total Cache plugin

If you’ve activated Google Page Speed Module, do you still need W3TC? Yes. Because based on my experience you can achieve higher score if you do. But turn off the “minify,” because it won’t be necessary anymore.

I am using W3TC to speed up my site.

It looks complex for a beginner and there’s no manual. I suspect the developer do that in purpose, because he offers a premium service for optimizing sites.

I will show the general settings that can be use for the most good shared hosting. If your hosting is bad, close this post and find a good one first

If you want the magic pill, you can download the general settings in a file and upload it to your W3TC. Get the file.

Below is the general settings of W3TC.

Note, since every server is different, you might need to adjust it for your own need. But in general, it should work.

8.1. General settings

Here you choose which feature you want to turn on.

Go to Performance > General Settings

The settings:

  1. Page Cache
    Page cache: Enable
    Page cache method: Disk:Basic
  2. Minify
    Minify: Enable
    Minify mode: AutoMinify cache method: Disk
    HTML minifier: Default
    JS minifier: JSmin (default)
    CSS minifier: Default
  3. Database Cache
    Database cache: Enable
    Database cache method: Disk
  4. Object Cache
    Object cache: Enable
    Object cache method: Disk
  5. Browser Cache
    Browser cache: Enable
  6. CDN
    CDN: Disable
  7. Reverse Proxy
    Disable
  8. Monitoring
    Disable
  9. Misscellaneous
    Disable all

Here are some term definitions:

1. Page Cache – It is a way to make read and write of data faster by utilizing unused portions of the main memory of the server.

Minify – It is a process of rewriting code, such as CSS, JS, and HTML in the most efficient manner. For example:

Here is how a normal CSS code is written:

.entry {
width:640px;
font-family: "Times new Roman";
}

When it’s minified, it becomes something like this:

.entry{width:640px;font-family:"Times new Roman"}

The process of minifying includes the process of combining several files into one files. That way the request of certain file can be delivered in just one time.

Minification could brake your site. So a “less minification” is available, but the size will be also less smaller.

2. Database Cache – It’s a way to store the most frequently used data from the database into the memory so it can get accessed in a fast manner. Imagine if there are 800 users asking the same data simultaneously, instead of repeating all the processes of taking the data from the database 800 times, it can be retrieved directly from the memory in an instant.

3. Object Cache – It’s the saving of an application object locally so that it can be served for future requests without requiring retrieval from the server. In the caching world, an object is a collection of data that can be requested by a name. Examples of objects are documents, videos, or images on a Web page.

If the ProxySG appliance has previously cached the requested object, the user is served the object from the cache (also called the object store) instead of directly from the server containing the actual object.

By allowing applications to share objects across requests and users, Object Caching greatly reduces the bandwidth used to retrieve content, as well as the latency associated with user requests

4. Browser Cache – When your page is opened, there are some files transferred from a web server to your browser. Transferring those files takes time. Since there are files or page that change rarely, it would be better for them to be saved it on your computer.

Thus next time the same page is opened, the saved files will be used instead. It’s more efficient, thus increases speed.

5. CDN – Content Delivery Network. It’s a network of servers across the globe whose job is to clone your blog and serve your readers from the nearest server. Thus it cuts the distance that the data need to travel. As the result your speed increases.

The servers owned by a CDN company.

6. Relic monitor – It’s an analytic company monitoring software engagement

8.2. Page cache

General

  1. Tick – Cache posts page
  2. Untick – Don’t cache front page
  3. Tick – Cache feeds: site, categories, tags, comments
  4. Tick – Cache SSL (https) requests
  5. Tick – Cache URIs with query string variables
  6. Tick – Cache 404 (not found) pages
  7. Tick – Cache requests only for the-gudang.org site address
  8. Tick – Don’t cache pages for logged in users
  9. Tick – Disabling this option is not recommended.

Cache preload

Untick all

Purge policy: page cache

Specify the pages and feeds to purge when posts are created, edited, or comments posted. The defaults are recommended because additional options may reduce server performance:

  1. Tick – Post page
  2. Tick – Blog feed
  3. Untick the rest of the options

Specify the feed types to purge:

  1. Tick – rss2 (default)
  2. Untick the rest of options

Purge Limit: 0

Purge sitemaps: ([a-z0-9_\-]*?)sitemap([a-z0-9_\-]*)?\.xml

Advanced

Late initialization: Disable
Garbage collection interval: 3600
Comment cookie lifetime: 1800
Accepted query strings: (Empty)

Rejected user agents:
SonyEricsson
Symbian
Symbian OS
SymbianOS
TS21i-10
Toshiba
Treo
UP.Browser
UP.Link
UTS
Vertu
WILLCOME
WinWAP
Windows CE
Windows.CE
Xda
ZTE
dopod
hiptop
htc
i-mobile
nokia
portalmmm
vodafone
ipad

Rejected cookies: wptouch_switch_toggle

Never cache the following pages:
wp-.*\.php
index\.php

Cache exception list:
wp-comments-popup.php
wp-links-opml.php
wp-locations.php

Non-trailing slash pages:
sitemap(_index)?\.xml(\.gz)?
[a-z0-9_\-]+-sitemap([0-9]+)?\.xml(\.gz)?

Specify page headers:
Last-Modified
Content-Type
X-Pingback
P3P

8.3 Minify

General

  1. Untick – Rewrite URL structure
  2. Tick – Disable minify for logged in users
  3. Minify error notification: Disabled

HTML & XML

  1. HTML minify settings:
    1. Tick – Enable
    2. Tick – Inline CSS minification
    3. Tick – Inline JS minification
    4. Untick – Don’t minify feeds
    5. Tick – Line break removal
  2. Ignored comment stems:
    google_ad_
    RSPEAK_

JS

  1. JS minify settings
    1. Tick – Enable
    2. Click – Minify
    3. Choose – Default (blocking)
  2. Tick – Preserved comment removal (not applied when combine only is active)
  3. Tick – Line break removal (not safe, not applied when combine only is active)

CSS

CSS minify settings:

  1. Tick – Enable
  2. Untick – Combine only
  3. Tick – Preserved comment removal (not applied when combine only is active)
  4. Tick – Line break removal (not applied when combine only is active)
  5. @import handling: None

Advanced

  1. Tick – Disable minify automatic file name length test
  2. Filename length: 150
  3. Update external files every 86400 seconds
  4. Garbage collection interval: 86400 seconds
  5. Never minify the following pages: (empty)
  6. Never minify the following JS files:
    wp-includes/js/jquery/jquery.js
    wp-includes/js/jquery/jquery-migrate.min.js
  7. Never minify the following CSS files: (empty)
  8. Rejected user agents: (empty)
  9. Include extrenal files/libraries:
    https://ajax.googleapis.com

8.4 Database Cache

General

Tick – Don’t cache queries for logged in users

Advanced

  1. Maximum lifetime of cache objects: 180
  2. Garbage collection interval: 3600
  3. Never cache the following pages: (empty)
  4. Ignored query stems:
    gdsr_
    wp_rg_
    _wc_session_
  5. Reject query words:
    ^\s*insert\b
    ^\s*delete\b
    ^\s*update\b
    ^\s*replace\b
    ^\s*create\b
    ^\s*alter\b
    ^\s*show\b
    ^\s*set\b
    \bautoload\s+=\s+’yes’
    \bsql_calc_found_rows\b
    \bfound_rows\(\)
    \bw3tc_request_data\b

8.5 Object cache

Advanced

  1. Default lifetime of cache ojects: 180 seconds
  2. Garbage collection interval: 3600
  3. Global groups:
    users
    userlogins
    usermeta
    user_meta
    site-transient
    site-options
    site-lookup
    blog-lookup
    blog-details
    rss
    global-posts
  4. Non persistent groups:
    comment
    counts
    plugins

8.6 Browser cache

General

  1. Tick – Set Last-Modified header
  2. Tick – Set expires header
  3. Tick – Set cache control header
  4. Tick – Set entity tag (eTag)
  5. Tick – Set W3 Total Cache header
  6. Tick – Enable HTTP (gzip) compression
  7. Untick – Prevent caching of objects after settings change
  8. Prevent caching exception list: (empty)
  9. Untick – Don’t set cookies for static files
  10. Tick – Do not process 404 errors for static objects with WordPress
  11. 404 error exception list:
    robots\.txt
    sitemap(_index)?\.xml(\.gz)?
    [a-z0-9_\-]+-sitemap([0-9]+)?\.xml(\.gz)?

CSS & JS

  1. Tick – Set Last-Modified header
  2. Tick – Set expires header
  3. Expires header lifetime: 31536000 seconds
  4. Tick – Set cache control header
    Cache control policy
    cache with max-age (“public, max-age=EXPIRES_SECONDS”)
  5. Tick – Set entity tag (ETag)
  6. Tick – Set W3 Total Cache header
  7. Tick – Enable HTTP (gzip) compression
  8. Untick – Prevent caching of objects after settings change
  9. Untick – Disable cookies for static files

HTML & XML

  1. Tick – Set Last-Modified header
  2. Tick – Set expires header: 3600 seconds
  3. Tick – Set cache control header
  4. Cache Control policy: cache with max-age (“public, max-age=”EXPIRES_SECONDS”)
  5. Tick – Set entity tag (ETag)
  6. Tick – Set W3 Total Cache header
  7. Tick – Enable HTTP (gzip) compression

Media & Other Files

  1. Tick – Set Last-Modified header
  2. Tick – Set expires header
  3. Expires header lifetime: 31536000 seconds
  4. Tick – Set cache control
  5. Tick – Set cache control header
  6. Cache Control policy: cache with max-age (“public, max-age=”EXPIRES_SECONDS”)
  7. Tick – Set entity tag (ETag)
  8. Tick – Set W3 Total Cache header
  9. Tick – Enable HTTP (gzip) compression
  10. Untick – Prevent caching of objects after settings change
  11. Untick – Disable cookies for static files

Final word

Now, tell me how it goes. Does you blog gets better score? Does it load faster? Share your experience here.

Is there anyone you know that might benefit from this post. Please share it to them, especially if you backlink it, that will pay off the hard work I’ve put into this post.

Leave a Reply