Measuring the speed of resource loading with JavaScript and HTML5

This is a follow up article to Measuring site performance with JavaScript on mobile, I suggest you read it before you continue. In the previous article I talked about the Navigation Timing spec, here I will talk about the Performance Timeline and Resource Timing specs and how they work in IE10, the first browser to implement them. I created a page that shows some of the data available and a library that generates a HAR that you can later analyse.

Continue reading “Measuring the speed of resource loading with JavaScript and HTML5”

Measuring site performance with JavaScript on mobile

There is a lot of talk around responsive Web design being too slow or too resource intensive and that other methodologies can achieve better performance. I don’t want to go into the details of which approach is better because I think different scenarios require different solutions. What is certainly true in all cases is that a Web site or app that loads faster is better than one that is slow.¬†Companies like Google, Gomez and Akamai have all published papers and survey results showing how speed affects user perception of a service from your desktop computer and even more on a mobile device (KISSmetrics has also drawn a nice infographic for the lazy ones). This is the first article and another one will follow shortly. Continue reading “Measuring site performance with JavaScript on mobile”

Responsive images and tinySrc

Producing images of the perfect size, when you create a Web site that targets multiple device classes with very different screen sizes is always a problem. There are a number of solutions out there, but they all require some kind of server-side detection and image wrangling. tinySrc is a nice and simple solution that takes away most if not all of the legwork. Possibly the only downside of tinySrc is that it relies on server-side detection itself. A lot of developers that worked with browsers like Chrome, Firefox and Opera advocate for client-side detection where it’s the browser that tells you about its capabilities instead of relying on a static database. I will not go into the details of why and when one is better than the other, let’s just say that tinySrc already gives you the power of the server-side, with my little software you can also benefit from the power of the client. Continue reading “Responsive images and tinySrc”

Sorting User-Agent strings out

It is very common that over the years something gets more and more cluttered, until at some point someone comes in and decides it’s time to clean up and start fresh, based on current and up-to-date needs. User-Agent strings, part of the HTTP request headers, are no different and between desktop and mobile browsers, the history is long and the amount of text (some might say useless text) has just kept growing. I am going to try and write down what is important today and why.
Continue reading “Sorting User-Agent strings out”