In my first post I introduced our LoadStorm team’s website optimization project. We discussed the planning, initial testing, and benchmarking stages, as well as some of the potential modifications that are commonly recommended for optimization of websites and WordPress sites in particular.
This post will discuss the modifications our team decided to perform on our site, look at the post-optimization tests and how they compare to our benchmarks, and explain the project results. Lastly I would like to highlight the gains in performance the site has achieved and offer suggestions for your own website optimization projects.
Implementation of Modifications & Optimizations
Based on our analysis of the testing results and recommendations generated from Google Insights, the team came up with the following list of optimizations to implement:
- Minify CSS, JavaScript, and HTML – Smaller files allow for faster download speeds.
- Compress images.
- Crop, optimize, and upload smaller versions of the image.
- Create single image sprites instead of loading several images separately.
- Ensure all resources are served from a single URL (or domain) – This prevents downloading the same resource twice.
- Enable resource compression – The server will send a gzip compressed file to a compression-enabled browser.
- Activate the W3 Total Cache plugin for WordPress sites.
- Modify the .htaccess file to implement caching.
- Optimize the order that CSS and JavaScript files are requested.
- Specify a Vary: Accept-Encoding Header – This describes what information “uniquely” identifies a request, and the resource encoding supported (i.e. gzip).
- Configure a CDN (Content Delivery Network).
Implementing all of the changes recommended for your site isn’t always easy. I understand that not everybody has the time, resources, and ability nor even the desire to configure something like their own content delivery network. This may look like quite the task at the beginning of the project, but remember that everything doesn’t need to be completed at once.
Making incremental changes is a great way to gradually improve your site. This was the strategy our team employed as we sought out our next steps and performed incremental tests.
This approach allowed us to find out what the biggest problems were and enabled us to research the optimizations that would best eliminate these bottlenecks. With the help of several free tools, two load tests, and a decent amount of web performance research, we were able to implement many optimizations the site needed, and succeeded in significantly speeding up our site.
Our team took advantage of several free tools and applications available on the internet to test and improve our site. I mentioned in my last post the great help that Google Insights provided us in analyzing the site. Another handy application I found is a tool called ImageOptim, which is free to download and use. It was specifically built to improve website performance and user experience by optimizing web images with the intent to reduce file sizes while still allowing the best possible visual quality.
A modification that can make a surprisingly significant impact on page load times is minifying the CSS, JavaScript, and HTML code on your site. Often times these files contain a huge amount of unnecessary data in the form of white space characters and unnecessary semicolons. There are is a plethora of different optimization tools out there on the web to choose from. Several of them actually ended up breaking our code, so it is critically important to use quality tools and test your code before allowing your modified files to go live. Google provides several minification tool recommendations on their Insights page, and this optimization is also available through a tool within the WordPress W3 Total Cache Plugin.
The most powerful single optimization we made to the site was implementing W3 Total Cache. This plugin actually includes many different features including several caching tools, minification tools, and CDN support. Not only did this plugin easily allow us to turn on page caching and browser caching, but we also easily enabled gzip compression for the compression of multiple resources. The plugin works seamlessly with our site, and almost immediately after turning it on we saw a dramatic decrease in page load times.
Testing & Results
I am thankful our team decided to take our time on this project which allowed for careful testing and documentation because now we are able to compare our final results with previous tests and find out just how much of an improvement we have made to the site.
Our team was very happy with the results we have achieved thus far. Our learning center page is great example of the improvements we have made throughout the site. If you look below, you will see two performance summary charts from testing our learning center page. The first is the results from our benchmark tests before we implemented any optimizations, and the second chart is the results summary we achieved after implementing the optimizations discussed above. As you can see, the preliminary test had a page load time of 4.855 seconds, while the page load time results after optimization had improved to just 0.716 seconds. Our page had completely finished loading before even one second had come and gone! This page is now loading over 5 times faster than it was before we had implemented these optimizations!
Results before optimization, using Mozilla Firefox and a cable connection.
Results after optimization, using Mozilla Firefox and a cable connection.
On average, 80% of our web pages load in under 1 second when using a cable service provider. The site also saw an average speedup of roughly 5 seconds per page with DSL service, over 1 second per page with cable service, and is on average 3 times faster overall with a cable connection using Google Chrome, Mozilla Firefox, and IE9. In fact, Mozilla Firefox improvement alone was about 4.5 times faster post-optimization.
Conclusions
Our team was very happy with the gains our site made after implementing the optimizations discussed earlier, and as a reminder, these results are prior to implementing our CDN (Content Delivery Network). As you can see, optimizing your website for performance can make a huge difference. Based on these results, our web page will be able to retain user interest much more effectively than prior to optimization which will definitely boost user experience, and has the potential to boost our sales as well, and these are two things we are always happy to improve upon. Not only was this project much easier than initially expected, it was essentially free because we took advantage of multiple free resources online, and we did the work ourselves rather than paying an expert several hundred dollars to make the same changes.