Website Performance Optimization Project – Part 1 – LoadStorm

I had just started working at LoadStorm when I was contacted by Jessica, an associate from Yottaa.com, which is a company that specializes in web optimization products and services. She asked what I did here and mentioned that our website pricing page was loading slowly, wondering if she could be put in contact with our webmaster. Embarrassed, I explained how I had only just started working as a performance engineering intern here at LoadStorm, thanked her for letting me know about the problem, and then promptly began investigating what to do about the website.

Working with our team leader Michael, we ran several tests with a free page speed testing tool provided by webpagetest.org. This tool determines web page performance and provides information about HTTP requests and page resources. After running several tests we noticed that our pricing page was in fact running slower than we had previously thought.

Being a load testing tool provider and software company in the web performance industry, we felt discordant. What was wrong with our site? We all knew we were capable of maintaining an efficient, high-performance website! From there our team knew we needed to improve the site, which was engineered with WordPress, so we began our optimization project. Obviously wanting professional and reliable results, we held a team meeting in order to come up with a plan and decided to document our experiment while formally following the scientific method.

Planning and Research

We identified our main goal as increasing the speed and overall performance of our primary site LoadStorm.com, which was developed with WordPress. The site needs to respond quickly: Our target was for any given page on our site to have a load time of under 2 seconds.

To achieve this goal I did quite a bit of research on techniques for optimizing websites, and specifically researched best practices for optimizing WordPress websites. Many of the resources I read suggested reducing the size of several resources and files on the site as well as implementing server side performance optimizations. Here is a short list I compiled of standard optimizations that are highly recommended for optimizing a WordPress site:

1. Minimize the number of HTTP Requests – Reduces the strain put on the server.
2. Use a Content Delivery Network – A server that caches web page data and responds to requests on behalf of the web server. Usually several proxy cache servers exist in different geographic locations so the server closest in proximity to the user can respond first. Generally the closest server can respond the fastest.
3. Add a Keep-Alive or Cache-Control Header – Keep content cached as long as possible.
4. Optimize Images – Smaller images are transferred faster.
5. Enable Resource Compression – Compressed files are transferred faster than uncompressed files.
6. Minify HTML, CSS, and JavaScript – Smaller files are transferred faster.
7. Optimize the order of styles and scripts – Scripts can block other resources from downloading until it has finished running. Putting resources in the most efficient order can speed up rendering speed which enables pages to appear much faster.
8. Enable W3 Total Cache – A helpful WordPress plugin that allows a user to easily implement many performance optimizations, including enabling caching.

With some preliminary research completed, the team was ready to move on to data collection and analysis. After finishing the investigation of what problems our website faces, we hope to implement the best possible solutions.

Benchmarking

Using Google Analytics, we determined what our top 10 most viewed web pages were. We then ran some initial benchmarking tests with webpagetest.org to get some preliminary testing metrics which included:

• Content Download Time
• Rendering Speed
• Overall Page Speed
• Overall Load Time

We conducted these tests using the three most common web browsers in use today: Mozilla Firefox, Google Chrome, and Internet Explorer 9, as well as running the tests with both Cable and DSL connections. We collected roughly 3 tests per page with each browser using both Cable and DSL connections. This gave us a total of roughly 180 web page performance tests for our benchmark analysis, or 18 tests per web page.

To further understand our site performance we ran a load test with our load testing tool LoadStorm, and were able to simulate 250 users accessing the site at once. This test provided us with other key metrics including:

• Average/Peak Response Time
• Average/Peak Throughput
• Total Number of Requests
• Requests/Second

Below are the summarized results of the benchmarking load test prior to performing any optimizations.

With all this data finally collected, we were ready to begin making some modifications to the site. Our key question at this point in the process was, ‘Which changes will make the performance improvements that we need?’

Brainstorming Modifications

Our team had a brainstorming session to discuss different optimization techniques that each member knew about. After looking over and analyzing the test results we had a pretty good idea of what modifications needed to be made. Another very helpful tool that we took advantage of was a free service provided by Google called Insights. This tool runs an analysis of any website you provide and recommends modifications you can make to improve site performance. The Insights tool, which is available as a browser plugin for Chrome and Firefox, is also available as a standalone web app. It even provides an estimate as to how much improvement the modifications it has recommended will make. Yahoo also has a similar tool which they implemented exclusively as a browser plugin called YSlow. These tools can be very helpful, and not just for someone like me who hadn’t previously had any experience in modifying a website for performance improvement purposes, but also for experienced web developers to ensure that nothing is overlooked.

We also decided that after applying each incremental change, we would run 2-3 performance tests with webpagetest.org to determine any improvements in addition to tracking our progress through the experiment. We continued to use both Cable and DSL connections, as well as the same three browsers.

Summary

Optimizing your website can include many different aspects. Modifying server configurations, optimizing various image and file resources, modifying CSS and JavaScript files and the order in which these resources are called upon, and the list goes on and on. This task can turn into a full time project faster than you might think. That’s why it is so important to have a plan before beginning your project. Run preliminary tests so you know how the site is currently performing. This will also help you determine what you will need to optimize. Make sure you have identified the goals you want to achieve, and know what you will need to do to succeed at making these a reality.

In Part 2 of this series, we will go over the modifications our team made to the website as well as the tests we performed, and the results of our experiment. We will compare the preliminary tests to the post-optimization tests we’ve collected, and I will highlight various statistics and their respective performance outcomes.