3

I am currently evaluating adding CDN capability to our website. I know however I do not want to go through the effort, or pay the cost associated unless I can measure the improvements. So therefore, I need to make a measurement of the time to load the images on our site, before and after. Also some sort of indication of what to expect or a way to decide if I should even move forward and try integrating a CDN in the first place.

Right now I am taking all the different page types on our website, and taking note of the load time (cached, and non-cached) from the bottom right view on Firebug in the Net tab using the Images filter and recording it in notepad. After I get the CDN setup I will go back and review the results again. I also have a Google Analytics view grouped by the page type, and Avg page load time.

What I need to know if this method is consistent/robust/sound and/or prone to return inaccurate results.

Devin

1

You need to consider your target audience first. If you have a solid server with good connectivity to your target customers (e.g. server in London and 99% of your visitors comes from UK), then most likely benefits of CDN will be low.

If you have global audience and server with poor connectivity, the payoffs might be dramatic.

There are lots of tools that can help you measure page load performance, and you can apply before/after measurement to see the difference.

Most notable tools suitable for your approach are:

WebPageTest.org - will do a full page load from specific location. You need to request one-off test and repeat procedure for all locations you need. (Free)

Speedchecker Cloudperf - will do full page load from multiple locations as well as automatically upload your website to multiple CDNs in few clicks so you can measure the difference without spending time on getting CDN accounts (Partially free)

1

I recently wrote a code lab for Google I/O that discusses how you can use Google Analytics to measure the load times for various resources on your page for this exact purpose.

https://codelabs.developers.google.com/codelabs/performance-analytics/

In regards to images, the most important thing to understand is that how long it takes the images to load is not necessarily a good metric to measure. JavaScript and CSS assets, depending on how they're loaded, can block the parsing and construction of the DOM, but they do not prevent the browser from fetching assets.

What this means is that even if your images take a long time to load, if you have other blocking assets on your page, moving your image to a CDN so they load faster won't necessarily improve the perceived performance from the user's point of view.

The metric to measure is not how fast do your images load, it's how fast are they loaded and rendered on the screen. In other words, how long does it take until the user can see the images?

To determine when an image is visible, you take the max of the point when the image was loaded and the point when it was added to the DOM.

Here's an example that creates a performance mark when the image is loaded as well as when its DOM node is constructed. It then logs both marks to the console. Whatever mark occurs second is the point at which the image is visible:

<img onload="performance.mark('img:visible')" src="http://lorempixel.com/380/200/animals/1/">
<script>performance.mark('img:visible')</script>

<script>
window.onload = function() {
  console.log(performance.getEntriesByName('img:visible'));
};
</script>

Here's a JSBin of the above code: http://jsbin.com/riyiyulide/edit?html,console,output

The Code Lab above goes into much greater detail, so I recommend reading through it.

  • 1
    I haven't read through this yet, but I am on the 5th page and I have to say it reads quiet nicely and is easy to follow at first sight. – Devin Gleason Lambert May 31 '16 at 19:53
  • Philip you don't mention the performance impact of the actual recording of data into Google Analytic, I could assume that it is negligible, but did you actually do any assessment to verify you weren't adding extra bottleneck to performance by tracking the timing? – Devin Gleason Lambert Jun 1 '16 at 15:45
  • The sending of data to GA happens after page load, so there's no impact to load performance. The performance.mark() calls have negligible impact. – Philip Walton Jun 1 '16 at 17:32
  • I am looking at your onload event on img tags. If I wanted to use a Jquery to run performance.mark on all the img tags, would you see any issue in perfomance by doing it this way? – Devin Gleason Lambert Jun 1 '16 at 17:34
  • That's too broad of a question to answer in comments and without seeing your code. You should either update your question here or ask a new question, and make sure to show the code so folks can give concrete answers. – Philip Walton Jun 1 '16 at 17:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy