Web performance & user experience
http://xiw.cx/1pMdDwB
WEB ASSETS
HTTP requests
Browsers only allow a certain number of concurrent requests
| Browser* | Max |
| Chrome | 6 |
| Internet Explorer | 8 |
| Firefox | 6 |
| Opera | 6 |
| Safari | 6 |
* most recent version, bit.ly/1n8fvOt
Concatenation
scripts and stylesheets should be concatenated
styleA.css
body {
color: red;
}styleB.css
p {
color: blue;
}style-concatenated.css
body {
color: red;
}
p {
color: blue;
}Minification
scripts and stylesheets should be minified
style-concatenated.css
body {
color: red;
}
p {
color: blue;
}
style-minified.css
body{color:red;}p{color:blue;}
Optimization
images should be optimized
some recent examples:
1.7MB -> ~150KB
47KB -> 90 byte
<picture> Element
full size images should not be scaled down for smaller screens
<picture>
<source
srcset="opera-1x.webp 1x,
opera-2x.webp 2x,
opera-3x.webp 3x"
type="image/webp">
<img
src="opera-1x.jpg" alt="The Oslo Opera House"
srcset="opera-2x.jpg 2x,
opera-3x.jpg 3x">
</picture>
find out what you could be saving: http://sizersoze.org/
find out how it works: http://dev.opera.com/articles/responsive-images/,
use the polyfill: https://github.com/scottjehl/picturefill
Use videos from the platform
They will load optimizied.
Examples in the boilerplate:
ScriptS & ASYNC
Load scripts right before the close of the <body> element instead of in the <head>
<script async="" src="http://third-party.com/resource.js"></script>If you have to load third party scripts in the <head>, use the
async attributePOSTPONE
Won't load an image until it's in or near to the visible window.
<img data-src="http://i.imgur.com/kDtVsrE.gif" postpone>
TOOLS
Speed Tests:
Network Throttlers:
full list:
WHY?
our "mobile" traffic is increasing rapidly
JULY 2013
JULY 2014
Small delays have a big impact
Normal Page Load
500ms Delay Page Load
SMALL DELAYS HAVE A BIG IMPACT
