Performance-notebook.md

1. Network

1. Avoid 301, 302 redirects
2. Reduce DNS lookups
3. Reduce the number of HTTP requests
4. No 404 errors

• Always have a favicon.ico

5. DNS Prefetching (?)

2. Caching

1. Static assets (example: JS, CSS, images): "Never expire" policy by setting far future Expires header
2. Dynamic assets (webpages): set appropriate cache controle headers
3. Gzip

Notes

• Flight image types ?
• Etags: unique identifier zo check if asset has changed, can be used instead of last-modified
• Can we make a big Apache config for all of this?
• HTTP Headers article: https://developers.google.com/speed/articles/caching

3. HTML

1. Specify a charcter set (so the browser doesn't have to guess)

4. JS

1. Concatenate JS assets
2. Minify JS assets
3. Uglify JS assets
4. <script async> in the bottom
5. Do not include inline JavaScript between external CSS and other resources

Notes

• Use async attribute or the script-injected way?
  • Optimised async loading of cross-domain scripts: https://gist.github.com/necolas/1025811

5. CSS

1. CSS completely on top
2. Avoid repaint by using only one CSS file and no further inline CSS
3. Simple CSS rule definition, avoid *, >
4. Remove unused rules (unsued-css.com) (FF: Dust me selection)
5. Avoid reflow (making elements bigger)
6. DON'T use @import. Use multiple elements for async downloading.

Repaint: changing the color of an element. Reflow: changing the size of an element. (test with: --show-paint-rects)

Notes

• Put essential CSS in the head and async load secondary CSS ?

6. HTTP2 / spdy

1. Kan meerdere request tegelijk afvuren.

• Niet meer nodig om alles te concateneren ?

References:

• Help your browser to perform at the best (Fronteers): https://vimeo.com/channels/fronteersbijeenkomsten/98466383
• Google Developers: SPDY: https://developers.google.com/speed/spdy/
• Front-end performance for front-end developers (CSS Wizardry): http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/
• Think async (CSS Tricks): http://css-tricks.com/thinking-async/
• Script-injected "async scripts" considered harmful: https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/
• Browserdiet: http://browserdiet.com/en/
• Google Speed: https://developers.google.com/speed/