Always Twisted

{ Slightly Bizarre Ramblings Of A Front-End Developer }

Case Study: The Up Group Website Performance

I was recently contacted by Manne from The Up Group. He wanted me to take a look at their site (built on ModX) to see what was making the site (and it’s homepage predominantly) load slowly and what could be done to improve the performance of their website www.theupgroup.com.

Preliminary Review

Before moving straight into the codebase to see what I could glean from it I ran several tests to using some web page performance applications.

The tools I used were Google’s PageSpeed Chrome DevTools extension, a test on WebPageTest and a test on GTMetrix.

The initial resulting score from GTMetrix was -

 UpGroup Performance Statistics Before

On average it took the sites homepage 4.3 seconds to download and have a time to first byte at a very slow average of 2.4 seconds so was lots of room for improvement.

In the review I noted that to improve the pages download speed and time there was oppurtunity to reduce HTTP requests, make the CSS and JavaScript filesizes smaller, removing anything that’s no longer needed and optimising the images used.

Asset location and HTTP requests

Looking at the HTML the JavaScript was being called at the top of the page. This was blocking the rest of the page from being loaded (the HTML at minimum) whilst the JavaScript had downloaded and run.

There were also 5 separate JavaScript files being called as well as 3 different CSS files being called on the page. Concatenating these into fewer HTTP requests would mean the site isn’t having to connect to the server more times than it needs to to load the page.

Duplication of file requests

Going through the page I noticed there were two calls to the favicon.ico and also two calls to the Google Analytics code. Removing these reduced two unneeded HTTP request. A nice and simple quick win.

Minify & GZip

With the JavaScript and CSS now taking fewer HTTP request to get to the browser it was time to look out squashing every byte out to make them as small as possible.

To that end minifying both the CSS and JS files gave a saving of around 80kb on the total page weight.

I also edited the .htaccess file to GZip the JavaScript and CSS files to reduce the file sizes a little bit more too.

Image Optimisation

The site has a logo and two social icons in the header, on the homepage there is a black and white image of a man hold the company ident as well as 20 logos from companies that The Up Group has worked with. I used ImageOptim to squeeze the file size of the site logo, icons and ‘man’ as well as the group of logos used.

For the logos I also put them into one image sprite sheet and used CSS to save 19 separate HTTP requests for the page.

Caching

Once all these were done I went back to the .htaccess file to extend the caching period of the files so that the browser would keep them in the hope the next time the visitor goes to the site they wouldn’t have to download everything all over again.

Improvements

In doing all these things above I then ran the site through the tests above again and found that there was a significant improvement. Both the download time and the time to first byte were improved as were the scores -

UpGroup Site Performance After

I don’t think that’s a bad effort for around a days work. I also gave the sites homepage a facelift, but I’ll keep that for another blogpost.

UpGroup Redesign

 

(note: the site has had a complete redesign by others since I did this work. The results may vary differently if you tested now).

Categories

CSS Reviews HTML Performance Did you like this post? Hire me.
blog comments powered by Disqus