Portfolio Web Wordpress

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


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.


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.


Do small non-profits get IT?

After 5 years of working with Australian Canoeing I thought I would look back on what has worked for us and what has not in our provision of Information Technology .

Australian Canoeing is the organisation in charge of paddle sports in Australia. It has between 6,000 and 8,000 members via its 6 affiliated State organisations.

I have been in charge of the information technology needs of the organisation for the last 5 years and I feel that I am only now beginning to understand the unique challenges that come with the job. This is partly because I am only employed part-time (of which only part of my time is focused on IT) but also partly because of the diverse needs of an organisation that not only has 6 State affiliates but also has 10 different canoeing disciplines to look after.


Moving to Online Conferencing

I thought this one would be a no-brainer. I looked at gotomeeting and saw that it was a cheap video conferencing tool with iphone apps, good online documentation, screen sharing, fall back phone numbers in case the internet was not working. #fail I tried for 6 months to get adoption of this but every meeting came back with stories about how someone could not log on or it was not set up properly.

I could not set aside enough time from my job to help people to resolve these issues. The problem was that the issues were not with the video conferencing tool itself but with people’s IT knowledge. In my experience, helping people with those sorts of issues is a black hole of time for little discernible benefit. In the end we cancelled our subscription and went back to teleconferencing. There were just bigger issues to deal with.

Online registration

This was another item that I thought would have fantastic adoption but has not really taken off yet. I think when we first released it we did not do enough of a “hard sell”. Membership is our organisation’s “bread and butter” and if it grows, we grow and so making it as easy as possible to become a member makes sense.

I am still not sure of the right strategy for this but I would like to have tried mandating that all clubs must provide online registration and then setting this up for them. I am sure we would have had a backlash but I think we would be in a better position now.


Sprint Regatta Results System

We have been incredibly lucky with our RP7 software and online portal developed by Stephen Croot. It was primarily created for rowing but Stephen has adapted it fantastically for Sprint.

It is everything I wish all our projects had:

  • fantastic and conscientious support
  • reasonably priced
  • exactly the features we need

I know that this sort of perfect match is not always or even often possible but it does restore faith that there are options out there that can be a really positive experience. It has also taught me not be afraid of committing to a one person company in case they quit the business but to embrace a good solution when and if it comes along.

Putting everything in the cloud

We are a small office and the less manual work we have to do the better. We have managed to automate our membership card process and also the email out of most of our education certificates giving us more time to focus on projects.

We have also recently moved to google apps as our email provider. This caused a few issues with the transition of emails and the different mail clients people use but now, all our emails are always backed-up and if a person leaves the organisation we can provide continuity by maintaining their emails.

Thoughts for the future

As simple as possible

I know this will come as no surprise but without a significant IT training budget everything needs to be kept as simple as possible. What is a surprise (to me at least) is the level of simplicity required.

Without having a step-by-step guide to everything and

Change for all

When it comes time for a change make sure it happens quickly and that you change it for everyone.

I have been stuck supporting legacy systems for some states because I listened to their feedback and wanted to do the best thing for them. This appeasement made my life easier in the short-term but in the medium to long term it has caused extra work and hassle for both me and the State organisations.

Email is the only worthwhile support

I know that it is great to hear people’s voice on the phone and to be reassured that the problem on your screen is not your fault but it is incredibly hard to diagnose a problem on the phone and very time-consuming as one issue often leads to another and then a question about their daughter ipad. The important thing you have to build up a trust that a person’s issue will be responded to quickly via email otherwise they will always resort to calling you for urgent matters.


Without a large budget and with a small staff, IT provision is a struggle. However if you target certain areas such as reducing manual processing and adapt to new technologies quickly you can make massive gains quickly.


The Content Revolution

For what seems like years now, it has been reported that the once mighty printed word has been overthrown by online content.

Despite being heavily involved in online content I have had trouble in understanding this point of view. I read the majority of my news online but that is really only for convenience sake, if there was a newsagent next door I would probably get most of my news from the newspaper. To me there was very little difference between a news article on a website to in a newspaper. The formula is very similar, they both have headlines, usually a photo or two and then content.

That was my thinking until a few days a go when my Dad shared a story with me from the New York Times. It was my “ah-ha” moment. The story outlines an Avalanche and how it effected the people caught up by it. Although the content is very interesting in itself, the way that the authors intertwined video, dynamic images and flyover maps made it fun to read and gave you a feeling of being on a journey of discovery. I felt like I was a small child again, discovering the wonders of pop-up books!

I was so inspired that I wanted to try out some of the techniques they used in the story in my own site. Most of my site is just text and about as close to a journey of discovery as a algebra textbook (apologies to the one person out there who enjoys algebra). I had to start somewhere and so I thought the “About Me” page was as good a place as any.

Unsurprisingly, pretty early on I realised that engaging the user in the way the Times article engaged me, was pretty tricky. I persevered and through the use of Google Earth, HTML5 charts and a JQuery plugin called “Parralax” I was able to hopefully bring the page if not to life, then at least to semi-consciousness by amongst other things, making my photos move around, video that fades in and automatically plays when you scroll to a certain point.

I do not pretend that I have got to the level of the Times article but it was a start and it will certainly inform my future work. From my own perspective, engaging the user is the key, making not just pretty design but new content reveal when a user interacts with a page by scrolling, hovering over a certain point, or even stayed on a certain point of a page for a long time is usually regarded as a bad thing from an accessibility stand-point but if the web is to truely cement the revolution from the printed word and achieve the holy-grail of getting users pay for content online, I believe that these tools must be fully embraced to give the user a unique experience that they could not get from picking up a newspaper.

Like all revolutions these new techniques cannot just need be embraced in one or two “cool” projects but need to proliferate throughout all content so that eventually articles will not just be read, they will be engaged with.

Vive le Revolution


View the New York Times story

Other tools I used:

  • imovie – I used some simple video editing to put together the map.
  • Miro Video Converter – I used Miro to convert the video in to the various different video types that are needed for HTML5 Video – .mp4, .ogv, .webm. It is a free software that is very easy to use.
  • MediaElement.js – Although HTML5 video is ok on its own, it does not have great styling at the moment, also it cannot deal with fallback if the video types are not supported. MediaElement helps with both of these.
  • Scollspy Jquery plugin – A plugin that helps you tell where on the page a user is. I used this to hide and show the video depending on position of the page.
Portfolio Web Wordpress

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, 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, 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


Portfolio Web Wordpress

Plain Huts

Plain Huts are a new company. I worked with them to create their website based on a wordrpess theme.

The project challenged me to portray the vision and style of the company which was developing and discovering this for themselves as the project progressed.

View the website

Portfolio Web

Australian Canoeing

I have designed and run the front end of Australian Canoeing website for the last 7 years as well as administering the back-end.

During this time I have also been responsible for creating the State Canoeing Associations websites and maintaining branding and design across the sites.

View the website.

Portfolio Web

Over Training (Sports Medicine Australia)

Working with the University of NSW and Sports Medicine Australia, I developed a tool for young athletes to assess if they are over training. This included a number of quick tests which gave instant feedback to the user.

View the website.

Portfolio Web

Horizon Line Canoes

The Horizon Line website has developed over the years to the current online shop. I utilised Open Cart to create what is hopefully an easy and enjoyable shopping experience.

View the website.

Portfolio Web

Canoe Slalom Rankings

This was my most ambitious site. The site includes the ability to import spreadsheets with results and put them into the database from which points, percentage from winner and more are calculated.

View the website.