Performance Analysis of Fizzle.co

As part of a new approach to my business I have decided to start analyzing popular websites for performance in a bid to encourage them to improve upon it. By improving performance and efficiency they can then leverage that data in a case study to find out if indeed maximum performance and efficiency improves rankings and user satisfaction.

My first performance analysis will be focusing on a popular blog known as fizzle.co.

Fizzle.co Metrics

As of writing fizzle.co is rank 16,905 and has a page rank of 5.

The front page is where I will be testing the performance of the site as this is a page that generally remains unchanged and so it is a good place to measure performance as well as it being a key entrance page to any website.

I will be using Gtmetrix to generate the report as it measures both Page Speed and Yslow.

After several Tests the sites metrics were:

Page load time: 4 – 5s (average)
Total page size: 1.16MB
Total number of requests: 73
Page Speed Grade: B (80/100)
Yslow Grade: C (72/100)

fizzle.co gtmetrix report

What could be done to improve performance?

A number of issues could be fixed to improve the performance and efficiency rating of this site. Google states that Page Speed Grade (which is a measure of efficiency) as well as load times effect your websites ranking. By how much is not clearly know as Google is generally vague about these sorts of things.

Below I will list each issue and a potential fix.

Obese Images

As always images play a critical role in presenting information or reinforcing ideas, you have all heard the saying “images speak a thousand words”.

That said almost all sites I come across have images that are considerably larger than they should or could be. I am talking about images that are used for presentation or as part of the Theme in general.

This image on the front page of Fizzle.co is 441.7 KB

homepage_hero_image

However after optimizing it, it was just 113.8 KB which is a 74% reduction. Once I matched it to the background of the current site I couldn’t tell the difference and this is often the case with Images. The Image above has been resized which is why the edges look more jagged.

Our eyes are not as good as we think. We see in color, but our eyes are not sensitive enough to notice subtle changes performed at a micro level and so we can lower the resolution for Chroma Information as well as some compression which results in smaller image sizes for .jpg.

For .png we can compress them to (on average) 50% of their current size without noticeable differences using this online tool.

The images under Popular Courses further down the front page could on average be reduced by 30% which equals to around  50 – 60KB reduction.

So from images alone on the front page we could save around 380 – 390KB which is almost 33% of the current page size.

Image Dimensions

It is often said that adding image dimensions to an <img> tag prevents images from adjusting their size for responsive websites and frankly that’s a load of BS.

A simple CSS rule will overcome those image dimensions once the screen size reaches a size smaller than the image.

img {
    height: auto;
    width: 100%;
}

When an image loads without dimensions added to its attributes it creates two problems.

  • It can cause your site to reflow
  • It causes your site to load slower because of the above.

Here is Google’s definition of reflow.

Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document, for the purpose of re-rendering part or all of the document. Because reflow is a user-blocking operation in the browser, it is useful for developers to understand how to improve reflow time and also to understand the effects of various document properties (DOM depth, CSS rule efficiency, different types of style changes) on reflow time. Sometimes reflowing a single element in the document may require reflowing its parent elements and also any elements which follow it.

In simpler terms it means that when a browsers loads your website and reaches images without dimensions it will continue to render the rest of the page – then it has to go back and re-render once the images load.

Think about it like this – an artist paints a picture only to find a part of his image is scaled incorrectly and so he has to go back and repaint that part. But that’s not all, he also has to adjust the surrounding area so that it blends in and looks correct which of course costs time.

On fizzle.co all the images under Popular Courses are missing these attributes and that lead me to run a test to see how much time could be saved by including these attributes. I used the same images from fizzle.co’s Popular Courses.

The test was performed 10 times each and an average calculated – this is because of inconsistencies with the web in general.

All time is measured in seconds.

Test Number Without Dimensions With Dimensions
1 1.19 1.46
2 1.32 1.03
3 1.53 1.50
4 2.17 1.31
5 1.44 1.56
6 1.29 1.36
7 2.65 1.40
8 1.22 1.10
9 1.40 1.14
10 1.58 1.26
Average 1.579 1.312

 

The results show a difference of 0.267 seconds (267ms) on average which is 0.024 seconds (24ms) of extra load time – per image.

While this may not seem much – just bare these thoughts in mind:

  • Google expects your site to respond in 200ms or less – that means it should start sending data within that time.
  • Amazon loses 1% of its sales for every additional 100ms of loading time – when you consider the numbers it’s staggering.
  • Google calculated that an extra 400ms in loading time on its search engine would cost it 8 million searches a day.
Note: A site can take a reasonable amount of time to load completely – what is important is that the user sees something and can interact with the site quickly.

Combining Resources

Websites load multiple resources and together they generate what you see. Each resource amounts to a single request and given that a browser can only download on average 6 resources in parallel – it is important to try to reduce the total number of requests where possible.

Combining resources can save requests which in turn leads to fewer round trips to your server.

Not only does this speed up the rendering time of your site it can also increase the overall capacity of your server.

Combine CSS

On fizzle.co I can see three stylesheets that could be combined into a single stylesheet saving 2 requests.

The number 1 cause of additional resources on WordPress sites is plugins. Plugins almost always come with additional stylesheets and they often contain a tiny amount of CSS like this.

@media print {

.pmpro_a-print {display: none; position: absolute; left: -9999px; }	

}

I would recommend using a function to de-register it and then copy the CSS to the main stylesheet.

Most stylesheets come with an ID like this.

<link rel='stylesheet' id='pmpro_print-css'  href='#' type='text/css' media='print' />

You can remove these extra stylesheets by using their handle (ID) to deregister them by adding the following function to your functions.php or custom.php if you are using Thesis 2.

add_action( 'wp_print_styles', 'my_deregister_styles', 100 );

function my_deregister_styles() {
    wp_deregister_style( 'pmpro_print-css' );
}

The above function assumes the stylesheet was register correctly.

Fizzle.co could also do the same for their membership stylesheet.

Combining JavaScript

JavaScript is a little more tricky to combine as it often has dependencies which means they are required to load in a certain order.

An alternative to combining JavaScript is to control when and where it loads.

One example of this for fizzle.co is Disqus. It is only required on posts and so it should only be loaded on those pages rather than on every page as is the case at the time of writing.

Combining Images

Websites often come with lots of little icons and images scattered about the place serving various purposes. These images are often tiny but if you load them all individually you will find that the time it takes to load them is unjustifiably too long.

A solution to this problem is to combine them together as a single image (sprite) and then use CSS to position them.

I performed another test to show you the difference between loading all background images separately and as a single image.

I created a simple HTML page and only added the images and basic HTML syntax.

Unsprited Images

unsprited images

Sprited Images

sprited images

As you can see the sprited image loads faster – and is in fact smaller in general.

But that is not all, as mentioned above, browsers can only load on average 6 resources at the same time over a single connection. In the case of fizzle.co – I used 6 background images for this example and while those images are loading – other resources have to wait for an open spot. So the benefits here are two fold:

  • Reduced load time (over 50% in this case).
  • Allows other resources to load in parallel which also improve total render time.

There are more than 6 images used on fizzle.co – so the benefits would be greater than shown above.

Note: The Page Speed Grade D is because of the lack of dimensions which would normally not be present for background images. The test just shows the difference between 6 images and 1.

Enable Keep Alive

Assuming the server has a good amount of RAM relative to the amount of traffic – this site could take advantage of “Keep Alive” which can improve website performance and reduce latency by keeping HTTP sessions open for longer.

Without “Keep Alive” a request to your server opens up a connection to transfer the relevant data and once completed the connection is closed and ready to accept a new one.

Keep Alive on the other hand keeps that connection open to transfer multiple files over the same connection.

Note: enabling Keep Alive will increase the amount of RAM used by your server so ensure you have a good amount of RAM available relative to how busy your server is

Predicted Performance After Changes

With the above changes I would predict that the site would achieve a Page Speed Grade A.

It will load in at least half the time it currently takes.

The number of requests will be reduced potentially by at least 10 or more.

Response time will be reduced result in faster time to first byte.

Are you Looking to get Optimized?
Performance Analysis

About the Author

Matthew Horne

Matthew Horne is an Optimization Specialist whose passion lies in making the web a faster and more efficient place. He has been fighting an uphill battle to change the minds of the masses.

5 comments… add one

  • Raaj Trambadia December 9, 2013, 7:51 pm

    Hey Matt
    Great analysis. I had a question in mind – maybe you can answer.

    In your opinion, what’s a better choice between Font Icon (one font family) & a Sprite Image (that contains all the icons needed on the site)?

    Raaj Trambadia

    • Matthew Horne December 11, 2013, 8:28 am

      Hi Raaj, it depends on the site – icons only account for general icons we see around the web – so custom icons might not be available and in that case spriting those images is a better option.

      However people should use font based icons where possible. I use fontello for sites that I create as they are much faster than images.

    • Chris Pearson December 11, 2013, 4:00 pm

      Raaj, I’d go with an icon font because this allows the icons to be scaled to different sizes in a way that sprites cannot.

      This is a bigger concern with Skins, obviously, where you’re trying to accommodate a variety of user inputs and preferences. With a static site (such as one you’d build for a client), you might consider a sprite if it lowers the overall kB footprint of the site.

  • Steve Fort December 11, 2013, 9:37 am

    Hey Matthew, as you mention the analysis process with images and improvement quotes are very useful for new comer in this analysis world.

  • Nacho January 26, 2014, 3:52 pm

    Matt, your blog is pure gold.

    Is there any amazing tutorial for combining the javascripts?

    Also, have you written something about understanding and reducing “Time to First byte“? Lately I see my sites being seriously affected…

    Thanks!

Leave a Comment