Performance auditThe website that we wanted to run the speed audit for is very large. It includes multiple tools and directories for the visitors as well as reports, press releases, and
articles. This made it hard to determine how slow the site actually is and what elements to prioritize in our performance improvements. In order to do the audit effectively, we broke the process into two phases/questions:
- Is the site slower than similar sites?
- What site improvements will have the most impact?
Defining the benchmarksThe first step is to come up with a list of sites to compare your site speed to, which will give us a metric to determine whether we are doing well or poorly compared to similar sites. Site speed depends on what type of website you have. For example, a photography website that includes high resolutions photographs will most likely be slower than a Wikipedia page that is mostly text.
|Website||A photography website||Wikipedia page about photography|
Choosing and analyzing the pagesThe main goal of site speed optimization is to improve the user experience and ensure fast access to the content site visitors find most interesting. That is why our next step was to go through our client’s Google Analytics account and compile a list of the 10 most viewed pages. For our client, we found that their reports – which are long pages with lots of content, advanced functionality, and images – were most popular. So we knew this section of the site should be analyzed and optimized first. Once you know your priorities, it’s time to check the speed of each page. To do this we used WebPageTest. WebPageTest is an leading platform for speed tests, free to use, with parameters that are easy to adjust. To get the most precise results from WebPageTest, the tester needs to adjust these parameters:
- Connection: You can choose if you are running this test for desktop or mobile, wifi or cable. We used cable.
- Number of Tests to Run: The test will run the number of times provided by the tester. When we ran our tests we got the best accuracy by setting the tests to run 6 to 9 times.
- Repeat View: If the First View and Repeat View is chosen the platform will test the page as if it is loaded for the first time and it’s cached version as well. In our tests we kept the repeat view as it provided more in depth details.
- Capture Video: Should videos also be considered in the test? This can be left unchecked. Checking for videos will dramatically alter the site speed stats due to the large size of video files.
- Label: Add a label to the test for future review.
Performance improvementsOnce you’ve determined your benchmarks and identified what pages to focus on, it’s time to take steps to improve your speed. Our client’s site was built using the content management system Drupal. While there are many things you can do to improve your site speed, we focused on three tactics that would be easy to implement in Drupal:
- CSS and JS file aggregation
- Lossless image compression
Enable cacheThe simplest way to improve a website’s performance is to cut the number of requests sent and received from the server via caching. In Drupal, it is easy to make basic caching adjustments. To do this, navigate to the Performance page: Administration > Configuration > Development > Performance. Below is a screenshot of the performance page in Drupal. There are also options to enable caching for blocks and pages for anonymous users, which reduces the dynamic SQL queries performed by Drupal.
JS and CSS aggregationOne of the main factors in a website performance is the number of CSS and JS files requested when accessing the site. To view the number of CSS and JS files loaded, you can either check the source code after loading the page or go to the “Content Breakdown” on WebPageTest after running your test. This tab will show how many requests were made as well as the total file size. Drupal makes it easy to reduce the size and number of CSS and JS files requested by the server. After accessing the Performance page ( Administration > Configuration > Development > Performance), under Bandwidth Optimization check the boxes for both:
- Aggregate CSS files