Doubling WordPress speed in an hour

I have recently had to start considering website performance. My main job the new wordpress multisite install has been great but really slow. As a result I had to do lots of research and trial and error in an attempt to speed up the site.

I learnt a lot through that process and I thought that I could apply what I learnt to the Clyde Street blog and outline the tools I used.

1. Test the current speed

First things first, if you want to improve the performance of your site you need to take benchmarks of what the current performance is. I used three tools to achieve this:

  • YSlow plugin for Firebug on Firefox: This tool gives useful feedback about the areas that are slowing down your site and also gives you a grade and a mark out of 100.
  • Google PageSpeed Insights: Part of the Google search algorithm is how fast your page loads. Google allows you to see how well your page does in this speed test. The result is marked out of 100.
  • P3 – Plugin Performance Profiler: On WordPress it can often be the plugins that you have installed that are slowing your site down, this plugin allows you to run a report and find what plugins are taking up the most resources.

After running these three tools I found that although the plugins were not slowing down the site too much the results of the site were very poor:

Clyde Street Yslow (before) Clyde Street Page Insights Desktop (before) Clyde Street Page Insights Mobile (before)

 

2. Fixes using Plugins

Caching

This is an area I have ignored for a long time but caching is really the easiest way to improve your site speed. A static version of the site is created and served to visitors. I used “WP Super Cache” plugin and ensured I checked the box that rebuilds the page after you add something new to ensure that your visitors see the latest content.

Image Optimisation

Google places a lot of emphasis on this. The images that you upload need to be optimised. I reduced the size of the Clyde Street page by about 5mb (a lot) and this alone bumped my google score up by around 40 points.

To do this I used “EWWW Image Optimizer” plugin (there are other tools that can do this just as well). I purchased a API key for cloud optimisation. This cloud option reduces load on your server and does a better optimisation job. It costs $3 a month. I normally won’t pay for plugins but this saved so much hassle (and did such a good job) that I thought it was worth it.

I ran a bulk optimisation job to reduce image size.

There were a few images that google said could be better optimised and so I downloaded these and uploaded them to tinyjpg which is a website that specialises in reducing image size. I then re-uploaded these images and that made google happier, although to be perfect you would also downsize all your images to the exact size required. This may be possible for some sites but for most this is just a bit too much work.

3. Fixes for the theme

The areas that are harder to fix are inbuilt problems within the WordPress Theme you have chosen. Some themes use a lot of javascript and a lot of css and the impact of this on the performance of the site is difficult to fix.

Tip: Run speed tests on your theme before you buy it to check if it is optimised for speed.

There was some other tweaking I did based on the recommendations from the speed test. I reduced the number of google fonts that were used (reducing the number of font files being loaded). I also reduced the number of posts that are displayed on the home page thereby reducing the number of images displayed and the time it takes to load them.

4. Test the results

Following this work (and during) I checked the results of my work and despite there being areas for improvement, the result for the site had improved dramatically from 6/100 to 70/100 in Page Insights and from 65 to 81 in YSlow. These are great improvements that significantly speed up the speed of the website and therefore improving the experience for users and reducing load on your server.

Clyde Street Yslow (after)

5. Things that did not work

I have read a fair bit about “lazy loading”, this is where the images are only loaded on to the page when the user scrolls down to the point where the image will be displayed. This reduces initial load time. I tried a few plugins to accomplish this but I was not successful. It may have been because the plugin was conflicting with the javascript of the site. As I wanted this to be a quick project, I abandoned this but it may be worth trying for you or if you have a bit more time.

6. Areas for future investigation

As with everything, you could spend your entire career dedicated to this area and there are always performance tweaks that can be made. I think the next thing that I will try is using a CDN (content delivery network) to deliver the images to people. CDNs have distributed servers that deliver your website content from a location nearest to the user. Currently all the Clyde Street data comes from a server in the U.S. but if I used a CDN, the static content (images, css and javascript) would get to the user from the closest server be that in Sydney, London or South Africa. Apparently this is a big improvement but as I haven’t tested it, I am yet to find out how it works for me.

Conclusion

I ignored website performance for a long time. I assumed it would be really tricky and boring but actually, if you are using WordPress is is something you can fix very quickly and easily. My goal was not to make the website amazingly fast, for this sort of optimisation you would need skills better than mine (and lots of time) but in an hour I halved the load time of Clyde Street and the site is now ranked respectably by Google in its Page Speed tests and so I know that the website speed won’t be holding the site back. I would suggest that if you devote a small amount of time to your website’s performance you will start to see and feel the benefits.

Clyde Street

Like many projects around the home which linger in the background, I had been putting off updating Keith’s website for too long. When the Christmas break came around, I finally had the time and more importantly, the inclination, to make a start.

Having read the Clyde Street blog for many years, I felt I had a pretty good understanding of what we should be aiming for in any redesign but I forced myself to sit down and think formally about what these aims were. I came up with the following:

  • Simple – Clyde Street is a place where people come to read. The articles vary in length and complexity so we needed to make the layout uncluttered and the reading experience as nice as possible.
  • Modern – As an “educational technologist”, Keith’s blog needed to utilise current web standards (such as html 5 and css 3) as well as embrace open source tools.
  • Reflect – I have often heard people say that this blog was a “journey of discovery”. Prior to the redesign it had very little personality in terms of branding to reflect this. Without going overboard we wanted to change that.

With these goals in mind I set off on the redesign.

The blog had been previously been hosted on wordpress.com, the official hosted version of WordPress. This is an excellent service but limits your ability to extend the blog with custom plugins and designs. I therefore made the decision to transfer the blog to wordpress.org, the open-source version of the WordPress platform.

As the platforms are analogous it made the export and import of the blog including all pages, posts and attachments fairly simple, although with 1.5GB of media the transfer process was a little on the slow side.

In order to save time in the production of websites, I often espouse the use of frameworks or templates. Unless the website you are creating is trying to be groundbreaking I often feel the time taken to create exactly the same resource that is already out there is better spent customising content or enjoy time with your family.

With the goals that I had established for the site I searched several WordPress Template sites and narrowed the choice down to the “Fixed” theme by Okay Themes via Themeforest. The simple design is responsive (scales to fit the device you are viewing it on) and also was compatible with retina screens (where the resolution of each image is twice that of a “normal” image), this optimisation for retina is becoming more important with the increased prevalence of new Ipads, Iphones and now laptops that all have this increased resolution. Images that are not optimised for retina can appear blurry on the new screens however the increased image size can lead to it taking longer for a page to load and so there are definitely pros and cons to this.

After uploading the purchased theme to the website I set about customising it to fit with the vision for the website. I had the brain wave that Clyde Street was a good station name and that the station metaphor was a great fit for the “journey of learning” that this blog provides. After playing around with several concepts of logos and attempts to code it I finally managed to get to the finished product.

I have been lucky enough to absorb some of Keith’s teaching about Performance Analysis over the years and one lesson in particular which was, “there is no point in having new equipment, if you do not know how to use it and/or it does not add to what you are already doing”.

Keith’s knowledge of the web is already excellent but I in order to avoid the above philosophy being relevant here, I talked to him about a couple of ways that in creating his content he can make it easier for people to read, such as:

  • where there is a list, always using bullet points or numbers (depending if it was an un-ordered or ordered list)
  • ensuring that the headings correctly cascade down a page, a “Heading 1” or <h1> tag is normally used for the page title or site title, “heading 2” for the title of the page, “heading 3” for sub heading and so on.

These small formatting tasks may appear to be annoying but they all add up to improved readability for users and more importantly for people using screen readers.

In the end, a blog is driven by its content, people do not keep coming back to see a fancy design, they keep coming back to read new ideas. My aim was to make it is as easy as possible for people to get to those ideas.

Tools I used to create the website

  • Codepen – I use codepen to play around with css and see the results live, it is also a great place for inspiration.
  • Contact Form 7 – A simple contact form plugin for wordpress.
  • Jetpack – A plugin with lots of great tools like visitor statistics and the ability to log in via social media to place comments.
  • Sublime Text 2 – A code editor for mac, that has a beautiful and customisable layout.
  • Transmit – An FTP client for mac that makes it very easy to sync local and remote (on the web) files.
  • Tower – A version control tool, which basically means if I make a mistake in my coding or design, I can go back to the point before I made the mistake.
  • Adobe Illustrator – A graphics creation tool (similar to photoshop but more drawing based)

View the website