In the previous posts (Part I, Part II, & Part III) we learned all about latency on a mobile devices, avoiding redirects, and eliminating render blocking resources and prioritize visible content. Now we are going to learn about how to test everything.
Have a platform to performance test the sites you develop is key to ensuring that you are hitting desired benchmarks consistently. A great resource for testing the speed of certain sites is by using http://www.webpagetest.org/. This website has a plethora of different options which include using most browsers, setting up certain network parameters like latency, a number of great views for seeing in detail where the time for the sites are spent, and much much more. An example of the waterfall chart:
The information that webpagetest.org gives you is very detailed. You are able to drill down to each resource to see how long each one it taking to load as well as when those resources are available to to the browser for use
Using this site in conjunction with other browsers development tools such as Chrome’s network tab can really help in narrowing down the bottlenecks of a site which can help in gaining the most performance possible.
I hope you have gotten something out of these last few blog posts. If you have any comments or questions, feel free to drop me a line in the comments section.