a web page to load in 2 seconds or less. ★ 40% of people abandon a website that takes more than 3 seconds to load. (http://blog.kissmetrics.com/loading-time/)
a web page to load in 2 seconds or less. ★ 40% of people abandon a website that takes more than 3 seconds to load. ★ That was 2011. What’s changed? (http://blog.kissmetrics.com/loading-time/)
// Wait for everything to load window.addEventListener('load', load); // Wait for DOM + scripts to load document.addEventListener('DOMContentLoaded', load);
// Wait for everything to load window.addEventListener('load', load); // Wait for DOM + scripts to load document.addEventListener('DOMContentLoaded', load);
100 Cookie: [...] Host: www.example.com ... HTTP/1.1 200 OK Content-Type: text/css; charset=UTF-8 Content-Length: 500 Cookie: [...] ★ Every request has headers ★ Keep an eye on that Cookie !
100 Cookie: [...] Host: www.example.com ... HTTP/1.1 200 OK Content-Type: text/css; charset=UTF-8 Content-Length: 500 Cookie: [...] ★ Every request has headers ★ Keep an eye on that Cookie ! ★ Batch overhead where possible
requests // use up four connections in a hurry <script async src="a.js"></script> <script async src="b.js"></script> <script async src="c.js"></script> <script async src="d.js"></script>
requests // use up four connections in a hurry <script async src="a.js"></script> <script async src="b.js"></script> <script async src="c.js"></script> <script async src="d.js"></script> $ cat a.js b.js c.js d.js > abcd.js // one request to serve them all <script async src="abcd.js"></script>
uglifyjs > abcd.js ---- // Include concatenated file <script async src="abcd.js"></script> ★ uglifyjs is pretty good ★ closure compiler is really good ★ Hint: build tools support these