Weight Loss Alpharetta is a website that Blueprint worked on for a chiropractor client. Blueprint worked on the initial design and development. However, as the content grew and various people worked on this website, some parts of the website became bloated, making the website load extremely slowly. Having a short loading time is important for a few reasons, but the most important to clients is that a shorter page load time will improve usability and result in a lower bounce rate, leading to a potentially higher conversion rate. Sarah, a fellow developer here at Blueprint, wrote about how to improve site loading time last week. Today, I will be doing a case study, a detailed description of what I did for Weight Loss Alpharetta website.

Results

For the sake of this case study, I will compare the results I got from Google’s PageSpeed Insights tool. When I tested the site initially, Weight Loss Alpharetta received the score of 67. However when I worked on improving the page speed, the highest score Weight Loss Alpharetta received was a 94.

Solutions

1. Optimize images

One of the first things I did is make sure that images are optimized and scaled accordingly. For example, Weight Loss Alpharetta had an image that was intended for print (at least 1000px tall and wide) scaled down to about 200px in height. That is a huge no-no, and when I took the offending image off of the page, it helped with the loading time. To reduce image sizes, you could edit images in Photoshop or Fireworks.

2. Reduce the number of HTTP requests

I made sure to use CSS sprites to reduce the number of server requests being made. I also made sure to combine some CSS files together to reduce the requests. Another thing I did is to get rid of some JavaScript. There was jQuery UI embedded in the page, and that was slowing the page. It was being used for only one element on the page, so I got rid of jQuery UI. As a result, I had to make some sacrifices in terms of the looks and how that element behaved, but in the end it helped in reducing the page load time. I also got rid of some leftover JavaScript for social buttons that were no longer there.

3. Serve resources from a consistent URL

I discovered that some images were hosted on another client website. When I fixed this, the page load time improved.

4. Put JavaScript at the bottom of the page

It is good practice to put JavaScript at the bottom of the page because a web page is processed from top to bottom, and when the browser encounters JavaScript at the top of the page, it loads the JavaScript first before rendering the rest of the page. When I put whatever JavaScript I could at the bottom of the website, the page load time improved.

5. Minify CSS

It is good to use tabs and spaces for readability in the development process. However, those tabs and spaces make the file size larger, slowing the page load time. I minified CSS by removing those tabs and spaces, and the file size was reduced.

6. Gzip compression

Gzip is a popular method for compressing the files that are being served on the website. Gzip compression is usually done by editing the htaccess file. It generally reduces the response size by 70%, and in the case of Weight Loss Alpharetta, when gzip was enabled, the response size was compressed by 67.9%.

7. Leverage browser caching

This method also involves editing the htaccess file, and to leverage browser caching, expires headers need to be put in the file. Expires headers tells the browser to use the files from the cache rather than making new requests. So when a user visits the website after their first time, the website will load faster.

Conclusion

With page speed tests, there may be inconsistencies. For example, for Google’s PageSpeed Insights, sometimes has issues with recognizing gzip compression, which I have put in place for Weight Loss Alpharetta. However, the website does load noticeably faster on all the machines I tested it on, including mobile devices. 67 is a pretty dismal score, but the page score definitely improved. I think the overall results show that this was a successful venture in reducing page load time.

By: Blueprint