Increase the performance of your responsive website(blog.netdna.com)
blog.netdna.com
Increase the performance of your responsive website
http://blog.netdna.com/developer/2-advanced-techniques-to-dramatically-increase-the-performance-of-your-responsive-website/
1 comments
The big killer here, especially on 3G/LTE, is latency not throughput. Here in Vancouver, I can get 40Mbit down on LTE, but my ping is in the 300s.
Here's a pretty good post on how latency dominates page load speed after a certain point: http://www.igvita.com/2012/07/19/latency-the-new-web-perform...
By bundling resources, we reduce the number of requests, and the number of round trips.
Disclaimer: I work at Mobify with Peter who authored the post.
Here's a pretty good post on how latency dominates page load speed after a certain point: http://www.igvita.com/2012/07/19/latency-the-new-web-perform...
By bundling resources, we reduce the number of requests, and the number of round trips.
Disclaimer: I work at Mobify with Peter who authored the post.
But wouldn't 300ms for one request and 300ms for 6 concurrent requests all have the same latency?
In the ideal case, sure.
However, according the HTTP archive websites make about ~90 requests per page [1]. The average browser does about 6 requests per hostname, and 15-20 total [2]. In this situation, our critical path has at least 4 requests, thus we are paying 4xRTT in just latency.
edit: formatting
[1] http://httparchive.org/trends.php
[2] http://www.browserscope.org/results?o=xhr&v=top&cate...
However, according the HTTP archive websites make about ~90 requests per page [1]. The average browser does about 6 requests per hostname, and 15-20 total [2]. In this situation, our critical path has at least 4 requests, thus we are paying 4xRTT in just latency.
edit: formatting
[1] http://httparchive.org/trends.php
[2] http://www.browserscope.org/results?o=xhr&v=top&cate...
Your example may be true, but many sites are actually 100x100kb, spread over 3-5 domains (tracking, ads, etc) and browsers limit the number of concurrent requests to any one domain.
The recommendations here are actually pretty simple (though the image responsiveness can become complex) and are in line with Google's recommendations (https://developers.google.com/speed/pagespeed/), which are also pretty much the same as Yahoo's (http://developer.yahoo.com/performance/rules.html).
Ideally, you'd be doing JavaScript and CSS minification as part of your build or release process and push to a CDN, though some packages do it on the fly and cache the output. It's a surprisingly interesting practice.
The recommendations here are actually pretty simple (though the image responsiveness can become complex) and are in line with Google's recommendations (https://developers.google.com/speed/pagespeed/), which are also pretty much the same as Yahoo's (http://developer.yahoo.com/performance/rules.html).
Ideally, you'd be doing JavaScript and CSS minification as part of your build or release process and push to a CDN, though some packages do it on the fly and cache the output. It's a surprisingly interesting practice.
> Browsers do multiple requests at once
Generally only up to 6 at a time though, per hostname.
http://www.browserscope.org/results?o=xhr&v=top&cate...
Generally only up to 6 at a time though, per hostname.
http://www.browserscope.org/results?o=xhr&v=top&cate...
Browsers do multiple requests at once, so trying to squeeze everything into as few requests as possible could make things slower as you lose the parallelism.
I would think it would be better to try and make all your requests a similar size. 3x100kb will probably be faster than 1x300kb