'

Your WebPerf Sucks

Понравилась презентация – покажи это...





Слайд 0

Your WebPerf is ! Holger Bartel | @foobartel | HK CodeConf 23/10/2015


Слайд 1

So, why?


Слайд 2


Слайд 3

42 requests, 6.3 MB


Слайд 4


Слайд 5

250 requests, 6.7 MB


Слайд 6

"


Слайд 7


Слайд 8

86 requests, 10.2 MB


Слайд 9

Performance is a thing.


Слайд 10

Expectations Users expect ~2-3 seconds to load a site…


Слайд 11

Expectations Users expect ~2-3 seconds to load a site… That’s the definition of ‘fast’ We’re even aiming to deliver something in even less


Слайд 12

Expectations 50% of people say they'll abandon a page that takes longer than 4 seconds to load


Слайд 13

Faster is Be er!


Слайд 14

So, why?


Слайд 15

The Real World (and why you should care)


Слайд 16

40% of surveyed online shoppers will abandon a page that takes more than 3 seconds to load.
 — Akamai (2009)


Слайд 17

Speeding up a fundraising site by 60% increased donations by 14%.
 — Kyle Rush, Obama Campaign (2012)


Слайд 18

Adding half a second to a search results page can decrease traffic and ad revenues by 20 percent
 — Google


Слайд 19

Every additional 100 milliseconds of load time decreased sales by 1 percent.
 — Amazon


Слайд 20

Images - The Big Evil (and an easy fix)


Слайд 21


Слайд 22

Original 2 MB @ 298 x 530 ImageOptim App Optimised 73 KB


Слайд 23

01 Oct 2012 - 15 Oct 2014 http://httparchive.org/interesting.php


Слайд 24

01 Oct 2014 - 01 Oct 2015 http://httparchive.org/interesting.php


Слайд 25

Performance is Design


Слайд 26

Performance is Design Design is Performance


Слайд 27

Performance is Design Design is Performance Design directs Performance


Слайд 28

“Performance is a compromise between design and performance. You can only be as fast as the design allows.” — Ian Feather


Слайд 29

Breaking Silos Collaboration & communication between designers and developers nowadays is essential and more important than ever before.


Слайд 30

Get designs into the browser as soon as possible, so you, your team and your client can get a be er feel for what it will be like in the real world.


Слайд 31

If your website is 15MB it’s not HTML5, it’s stupid. 
 — Christian Heilmann


Слайд 32

Ask yourself: What's the gain? What do you want to achieve?


Слайд 33

A carousel with 7 images is it really worth the load time or just pre y to look at?



Слайд 34

Whereas it's questionable if images 3-7 will be seen in the first place.


Слайд 35

Building for Performance


Слайд 36

Rendering Pages


Слайд 37

Render-Tree Construction, Layout & Paint Waiting for DOM and CSSOM to build the render tree. Render tree contains nodes to render the page. Layout computes the exact position and size. Paint turns the render tree into pixels on screen.


Слайд 38

Render Blocking CSS Wait for CSS Avoids “Flash of Unstyled Content” (FOUC)


Слайд 39

Render Blocking JavaScript The parser has to stop for scripts before continuing to parse HTML. JavaScript can query and modify DOM and CSSOM. JavaScript blocks DOM construction unless explicitly declared as async.


Слайд 40

Loading Assets Every request fetched inside of HEAD, will postpone the rendering of the page


Слайд 41

Limit HTTP Requests Every request takes roughly ~200ms Avoid unnecessary redirects


Слайд 42

Critical Rendering Path Critical Resource Critical Path Length Critical Bytes


Слайд 43

Optimising the Critical Rendering Path Optimising the dependency graph between HTML, CSS, and JavaScript.


Слайд 44

Optimising the Critical Rendering Path = Ge ing ! on the screen fast


Слайд 45

To get our li le friend ! on the screen fast…


Слайд 46

Minimise the number of critical resources. Minimise the number of critical bytes. Minimise the critical path length. A critical resource is a resource that can block initial rendering of a page.


Слайд 47

Analyse and characterise: number of resources, bytes, length. Minimise number of critical resources. Optimise order of remaining critical resources being loaded: download critical assets as early as possible. Optimise the number of critical bytes to reduce the download time (number of roundtrips).


Слайд 48


Слайд 49


Слайд 50

Tools


Слайд 51

Performance Testing http://www.webpagetest.org


Слайд 52

Performance Testing http://tools.pingdom.com/fpt/ https://developers.google.com/speed/pagespeed/ https://developer.yahoo.com/yslow/


Слайд 53

Chrome Dev Tools


Слайд 54

Perf-Tooling Today http://perf-tooling.today


Слайд 55

Perf Rocks http://perf.rocks


Слайд 56

Perf School github.com/bevacqua/perfschool


Слайд 57

With achieving fast page load time, people can quickly use your site and accomplish what they want.


Слайд 58

People will appreciate it and end up being happier users.


Слайд 59

Happier users mean be er conversion rates. Be er conversion rates can be increased revenue, more signups, returning visits, or downloads.


Слайд 60

So… Let’s make the web less !


Слайд 61

Thanks! Holger Bartel | @foobartel | HK CodeConf 23/10/2015


Слайд 62


×

HTML:





Ссылка: