When we started Shadows Galore, it was basically a blogger blog with a custom domain name and so in a way it was being backed by the robust infrastructure of Google. We had a free theme and there was zero cost involved in running the blog. However, the free package came with its own limitations and so we decided to go hosted. We bought the cheapest shared hosting available on internet, bought a beautiful theme, added a lot of new functions like Galleries, Forums, Download Managers etc. Life was beautiful !
It was a while before we realized that all the jazzing up came with a price. The website was slowing down and at a point it became so slow that it would take between 20 seconds to sometimes over a minute before the homepage would load. In fact, we even started getting complaints from our readers about this issue.
Consider these stats:
- 47% of the users expect a site to load within 2 seconds
- 40% of the users abandon a site if it takes more than 3 seconds to load
- A 1 sec delay in page load can cause 7% decline in readership
The final nail in the coffin came by the confirmation that Google considered Page speed while determining the Search Engine rankings of a page or an article. The traffic search engines took a hit and threatened to hit zero. It was getting so critical that we were forced to decide in favour of performance over looks. Slowly and sometimes painfully, we started doing research and worked on the bottlenecks.
Shadows Galore on a bad day – 21 seconds
A few days back, we were overjoyed to see the site loading within a second, something which was a dream one year back. The best time which we have noticed so far is 647 ms. About time we showcase our achievement with pride and show you how we did it, with the hope that the information is useful to you.
It is going to be a long article but if you love your blog as much as we do, we are sure you will find time to read it. Please note that the information provided here is not from a WP expert but by an average person who has found his way through this amazing platform by trial and error (the latter being many). The steps mentioned are not in order of their importance but in a chronological way, as we implemented them.
Problem Statement
Make the Shadows Galore homepage load within acceptable time (our earlier target was 3 seconds)
Constraints: Almost zero knowledge of PHP, CSS, WordPress, SQL
Option 1: Change the Hosting
As mentioned before, we use a Shared hosting which costs us around $100 a year. However, a shared hosting has its own limitations, the most important being that the resources are shared among many users. Due to its constraints, the shared hosting cannot be ideal for big websites or the ones that require great performance.
The options we had was VPS or Managed Hosting. Out of these two, Managed Hosting looked like a better choice, but there was one drawback. It would cost us around $29 a month for a single site, much more than what we are paying for 5 sites currently. After lot of brooding, we decided that we could not afford this and would need to look at the other option.
Option 2: Do Everything Else You Can
1. Measure and Analyze
The first step in understanding a problem is to measure it and analyze. In our case, we needed to measure how much time was the site taking and then analyze the various components of this time taken. Though GT Metrix is a great WordPress plugin to measure site speeds, the one which is our absolute favourite is Pingdom. This amazing website measures your site loading speeds for free and comes up with a detailed analysis to help you understand the pain points. Using this tool we were able to decide that it was the images, CSS and jqueries which were taking the biggest chunk of time. The homepage was quite heavy at around 4 MB and now we knew where to start.
2. Optimize Images
How much is the size of a normal DSLR photograph? In our case, it varies from 2 MB to 5 MB. In the beginning, we were wise enough to upload the full-size images into the blogs, leaving it to WordPress to get the correct size image, not the best process. As a result, the images accounted for nearly 80% of total weight of the page. So the first thing which we needed to do was take out each of those 1800 odd images in a slow and painful process and re-sized each one of them to a more realistic size of 50-60 KB. Nowadays, before uploading each image, we make it run through a 2-way process:
- Re-size image: A 3000 px wide image is not required for websites when the normal screen width is 1300 px. Therefore I first re-size the images to be uploaded using the simple Windows tool called MS Office Picture Manager. The images in Shadows Galore are usually of 600 px width.
- Further optimization: There is a lot of metadata embedded in each photograph which can be stripped to make it lighter, this process is known as image compression. Compression is of two types – lossy and lossless. We prefer the lossless compression, and for my jpeg images use a tool called JPEGmini, which lowers the size of images by 1.5-3 x. A desktop version of this tool is also available which can process up to 20 images in the free version.
Though jpeg images are the lightest, sometimes one needs to use other image formats. We generally avoid gif images but when png needs to be used, TinyPNG is a great online resource.
3. Improve Design
There were many changes to the design which were implemented. The effort was directed towards keeping the homepage as light as possible, with lesser number queries, minimize request size, a lesser number of CSS files and so on. Background images were removed and a large chunk of the homepage was made static. We also did a W3C markup validation and followed up on the errors found with the theme developers. Tried to carry out CSS sprite but it is a little too technical.
4. Remove Unnecessary Plugins
Too many plugins!
The biggest pro for self-hosted WordPress is the vast treasure trove of plugins for all your needs. However, sometimes it also becomes a con when one gets obsessed with plugins and keeps installing more and more to the website. Each plugin consumes some resources and adds to the loading time of the site.
In our case, we did an audit of how much load time was being added by the plugins using a plugin (ironic ?) called Plugin Performance Profiler and found the results to be worrying. Nearly one-fourth of the load time was contributed by the plugins. One example was a plugin which would post your old posts on Twitter on a regular basis, it slowed down the website by nearly 5 seconds. The next step was to remove all the plugins which can be done without and keep only those which take the least resources or are deemed necessary.
5. Cloudflare
Cloudflare
Cloudflare is a useful application for your website. It not only compresses the website elements by gzip compression but also improved the site load speed. By routing most of the elements through its own servers, it also decreases the load on your shared servers, thus reducing the chances of failure in case of high traffic load. I have been a big fan of Cloudflare for a long time and host all my websites with its help.
PS: Recently while moving my websites to another host, I also found that with Cloudflare one doesn’t need to update the DNS of the domain with the new nameservers. Since the nameservers point to Cloudflare, all one needs to do is to update the IP of the new host in the Cloudflare A records. The DNS takes just 2 minutes to resolve, thereby reducing the downtime to a great extent.
6. Caching
Caching is a very important tool to cut the load time of the website. It basically caches the static elements of the page and renders them every time a user visits the page. Though there are many cache plugins available for WordPress, I decided to go with W3 Total Cache. It goes well with CDN and Cloudflare and decreases the site load time significantly. A word of caution though: W3TC is a very powerful plugin, and configured incorrectly, it can pretty much screw up your site. So make sure you go through the installations guidelines properly before the installation. Some good articles can be found here.
For those who want a simpler and more benign caching plugin, I would strongly recommend WP Supercache.
7. CDN
MaxCDN
CDN – Shadows Galore is a travel and photography website and is naturally heavy with loads of images. If your host server is only what your website uses to render images in the browser, everything comes via a single channel (Imagine a big volume of water forced to pass through a tiny tube). To increase the speed of your website, you should include a parallelized rendering of images (and code). It is here that a CDN (Content Delivery Network) comes into the picture. A CDN basically takes all the elements on your website to its data-centres and renders them via parallel channels. In Shadows Galore, for instance, while images are rendered via cdn4.shadowsgalore.com, code is rendered via cdn.shadowsgalore.com
My choice for CDN was MaxCDN, the simple reason being that it was the most economical with a $40 annual package. Rackspace is another popular CDN. If you are not willing to pay any money, consider activating the Photon module under Jetpack plugin.
8. Optimize Database
With time, WordPress keeps accumulating redundant stuff in the form of saved drafts, pingbacks and trackbacks, transient options etc which cause the database to get bloated. Hence it is always a good idea to optimize the WP database from time to time to keep it in good shape. Since going to the DB directly and trying to optimize is not easy, there is a wonderful plugin available called WP Optimize. Install it and schedule it to run once a month and your DB headaches will be lessened to a great extent.
When you uninstall a plugin and remove it, normally it should do clean its database by itself. However, not all plugins are this efficient and many of them leave their tables in the WP database even after they have been deleted, in time causing the database to become bloated with redundant tables. A plugin called DB Spring Clean can be used to delete those leftover tables unnecessary.
A word of caution: You should be very careful of what you are going to remove. It will be a good idea to create a backup of the DB before doing the spring cleaning.
9. Subdomains for Non-Core Functions
If one has forums/download portlets, they need specific plugins which consume resources from the main website without being a core function. We have installed bbpress, download manager, directory and supporting plugins for these roles. If we install them on a different sub-domain with their own separate installs then they will load only when the users need them. We have implemented this so far for the blog directory (ex: dir.shadowsgalore.com) with good results and are going to migrate the forums etc soon.
10. New Theme
This was the last step which we took, a difficult decision because the theme we were using was a beautiful one with loads of useful inbuilt functions. The only problem it had been that it was too slow. When the user tried to use the page, a black blank screen would show up for a few seconds while the jqueries loaded. So after a lot of thinking, we decided to switch to a new theme and started working on the one we have now. The new version of Shadows Galore has a simple look, loads much faster and has a lazy load, a function which loads images only when the user reaches that part of the page.
This is what we finally achieved
Result
The result is in front of you. Google uncle was quick to reward and the articles which were going down in SERP have climbed up the ladder again. The best reward is that reading our stories have become a simpler and easier experience for our readers like you. Was the transformation easy? It is up to you to decide. We will be glad to know about your experience.
Disclaimer: We have mentioned a lot of resources, websites, plugins etc in this article. The references are based on our experience with them and we receive no benefits for mentioning them. Please be judicious before making any changes to your website and always take backups.