How to make your boss speed-curious and other webperf tricks - coldfront2014

How to make your boss speed-curious and other #webperf tricks
Peter Hedenskog

The Performance Golden Rule!

80-90% of the end-user response time is spent on the
frontend.

front end dev

With great power …

comes great responsibility!

How to be really fast

The boss

World fastest web page

Start render: 0,2 s Visually Complete: 0,2 s

What can we learn?

What CDN are you using?

We know the Golden rule!

The rendering path

1. Download HTML

2. If CSS files then download

3. If JS files then download

4. DOM + CSSOM = render tree

5. Paint

Optimize the rendering path

“I like thinking big.” Donald Trump

“Think small” Peter Hedenskog

super computers

super fast internet

remember

mobile phones

the city

magic number

14:ish kb

High Performance Browser Networking - Ilya Grigorik Paul Irish

above the fold

“Think small” Peter Hedenskog

Overall

minimize

combine

avoid requests

no requests

DOM node depth

inline

<head> ... <style> body { background: #fff; } ... </style>
</head> <body>

https://github.com/filamentgroup/loadCSS

Avoid reflow and repaint

Javascript

JAVASCRIPT CAN BE EVIL

JAVASCRIPT IS EVIL* *inside your rendering path

Synchronously loaded Javascript blocks the rendering path!

Example of non working

use async <script src=“/js/calculate.js” async></script> https://www.igvita.com/2014/05/20/script-injected-async-scripts-considered-harmful/

measure above the fold

User Timing API

window.performance. mark(‘logoLoaded’);

window.performance. measure(‘logoTiming’, ‘navigationStart’, ‘logoLoaded’);

var items = window.performance .getEntriesByType(' measure');

There’s a polyfill for that!

https://gist.github.com/pmeenan/5902672

front end dev

The boss

2 kinds

http:// www.peterhedenskog.com/ blog/2014/09/more-speed- more-money/

end user Be kind to your users! Mother Theresa

< 0.1 second - instant < 1.0 second - flow
=>10 seconds - lost ! Robert B. Miller - Response Time in Man-Computer Conversational Transactions (1968) The brain

Visualize

Your boss understands red, yellow and green

1200 ms

red 1200 ms

yellow 1200 ms

green 1200 ms

we are 12% slower than …

summary

front end dev

•Peter in Denmark - Lars Von Trier •Donald Trump -
Gage Skidmore •Super computer - Zdjęcia Arkadiusz Sikorski •Monkey with iphone - Marsel Van Oosten •The house - Bert Kaufmann •Stop light peppers - Dennis S Hurd •What is this? - Jeff Carson •Corcovado jesus - Doug88888 •Developers - Austin Wordpress Camp •The evil king - HBO •Pippi Longstocking - Ingrid Vang Nyman •Montgomery Burns - Matt Groening •The dog - Emiliano •Paint over - franziska •Super heroes - Marvel •Vee - Netflix Image credits

Thank you! Peter Hedenskog peter@soulgalore.com @soulislove

How to make your boss speed-curious and other w...

How to make your boss speed-curious and other webperf tricks - coldfront2014

More Decks by Peter Hedenskog

Other Decks in Technology

Featured

Transcript