Optimera din sidladdning - en djupdykning i prestanda på webben

50 %
50 %
Information about Optimera din sidladdning - en djupdykning i prestanda på webben
Technology

Published on February 8, 2014

Author: valtechsweden

Source: slideshare.net

Description

Jesper Petersson, Valtech
Jesper, som jobbar med prestanda på webben, reder ut begreppen och går till botten med hur vi kan optimera vår prestanda.

Optimera din sidladdning En djupdykning i prestanda på webben Jesper Petersson @PeterssonJesper

Varför bry sig?

Prestanda i siffror • 25% lämnar sidan om laddningstiden > 3s • 80% av de skulle inte komma tillbaka igen • 40% av de skulle berätta för andra om den dåliga upplevelsen http://www.strangeloopnetworks.com/web-performance-infographics/

En studie om stress • 95% av våra beslut bygger på känslor • 4 olika hemsidor • Ombads hitta en produkt och checka ut • 500 ms fördröjning • Visste ej om att prestanda studerades

En studie om stress • 95% av våra beslut bygger på känslor • 4 olika hemsidor

Resultat • 12-25% mer frustrerade • No shit? http://www.slideshare.net/Radware/velocity-mobile-webstressperformanceux

Agenda • Nätverk • Laddning av resurser • Framtiden

Hur snabbt behöver det gå? Fördröjning Användarupplevelse 0-100 ms Omedelbar 100-300 ms Långsam, trög 300-1000 ms Datorn jobbar... 1000+ ms Börjar tänka på annat

Hur snabbt går det? 40% 30% 20% 10% 0% 0-1 Mobil 1-3 3-7 Desktop 7-13 13-21 Sidladdning [s] http://analytics.blogspot.se/2012/04/global-site-speed-overview-how-fast-are.html 21-35 35-60 60+

Det löser sig, right?

Bandbredd 3200 Sidladdning [ms] 2400 1600 800 0 1 2 3 4 5 6 Bandbredd [Mbps] http://www.akamai.com/stateoftheinternet/ 7 8 9 10

Responstid 4000 Sidladdning [ms] 3000 2000 1000 0 240 220 200 180 160 140 120 100 RTT [ms] http://www.akamai.com/stateoftheinternet/ 80 60 40 20 0

Minimera laddningstid • Stockholm - New York • Förbättra bandbredden? • “Enkelt” - Gräv en kabel till • Förbättra responstiden? • Ljusets hastighet begränsar oss • ~21 ms • Ljusets hastighet i fiber ~ 0,6c

Mobila nätverk • 802.11 a/b/g/n/ac/ad (Wifi) • W-CDMA, UMTS (3G) • HSPA, HSPA+, LTE (3.5G) • LTE advanced, HSPA+ rev 11 (4G) • ...

Wifi • RAC - Random Access Channel • 1. Är det ledigt? • 2. Skicka data • 3.Vänta på ACK • Fungerar bra för ett mindre antal klienter • Inga garantier

3G, 3.5G, 4G • Annan designfilosofi • Nödsamtal, prioriterad data, batteritid • RRC (Radio Resource Controller)

3G, 3.5G, 4G • Annan designfilosofi • Nödsamtal, prioriterad data, batteritid • RRC (Radio Resource Controller) En förenklad bild av verkligheten

SYN SYN+ACK GET /index.html HTTP/1.1 <html>...</html> Webbläsare! Webbserver

TCP slow start • Hur mycket data ska vi skicka? • Nätverket kan vara överbelastat • Lösning: Congestion control

TCP slow start 70 60 50 40 30 20 10 0

TCP slow start • cwnd kontrolleras på servern • Ökning från 4 till 10 i 2.6.39 • Från ~5,8 kB till ~14,6 kB • Uppdatera kerneln på servern!

Laddning av resurser • Ordningen spelar roll • CSS i <head> • Javascript precis innan </body> • Modernizr inline i <head>

Laddning av resurser <!DOCTYPE html>! <html>! ! <head>! ! ! <link rel="stylesheet" href="style.css" type="text/css" />! ! ! <script src="modernizr.js"></script>! ! ! <script src="main.js"></script>! ! </head>! ! <body>! ! ! <img src="dog.jpg" />! ! </body>! </html>!

Laddning av resurser <!DOCTYPE html>! <html>! ! <head>! ! ! <link rel="stylesheet" href="style.css" type="text/css" />! Ordningen spelar roll ! ! <script> window.Modernizr = …</script>! ! </head>! CSS i <head> ! <body>! ! ! <img src="dog.jpg" />! Javascript precis innan </body> ! ! <script src="main.js"></script>! Modernizr inline i <head> ! </body>! </html>! • • • •

Quick fixes • Konkatenering av Javascript / CSS • Minifiering av Javascript / CSS / HTML • Spriting av bilder • base64-enkodning av bilder • gzip • (LZ77 + huffmankodning)

Quick fixes • Konkatenering av Javascript / CSS • Minifiering av Javascript / CSS / HTML • Spriting av bilder <html></html>! • base64-enkodning av bilder A = html>! gzip • <A</A • (LZ77 + huffmankodning) !

Hämtning av resurser • Cache-headers • Cookie-fria domäner • CDN • Max 6 parallella requests per domän • Domain sharding • Extra DNS-uppslag som straff

Hämtning av resurser • Cache-headers • Cookie-fria domäner • CDN • Max 6 parallella requests per domän • Domain sharding • Extra DNS-uppslag som straff

Att mäta prestanda • Tid till rendering bör prioriteras! • Mät i RTTs istället för sekunder

Att mäta prestanda RTT TCP handshake 1 TLS/SSL handshake 2 Data S ln2 (1 + ) 14.6 S - Storlek i kB av datan som skall överföras

Framtiden

HTTP 2.0 • Använder en enda TCP-anslutning • Pusha ut resurser • Ingen konkatenering av CSS/JS • Inga mer sprites • Ingen domain-sharding

HTTP 2.0 • IE11+ (~56%) * • Alla webbläsartillverkare gillar det! • Planeras vara klart november 2014 • Google, Facebook, Twitter, m.fl. använder det redan * http://caniuse.com/#feat=spdy

Nya bildformat • I snitt 1 MB bilder per sida * • Nuvarande bildformat är från 90-talet • Nya bildformat • Webp och JPEG XR http://httparchive.org/interesting.php#bytesperpage

Nya bildformat Webp JPEG XR Storlek relativt JPG ~30% mindre ~40% mindre Lossless (tänk png) Ja Ja Lossy (tänk jpg) Ja Ja Animationer Ja (wohoo!) Nej Progressiv dekodning Nej Ja Webbläsarstöd Chrome och Opera! (~40% *) IE (9+)! (~16% **) * http://caniuse.com/#feat=webp ** http://caniuse.com/#feat=jpegxr

Nya bildformat • Webp + JPEG XR = Sant • Accept image/webp • ~56% tillsammans, tappar Firefox och mobile Safari • Abstrahera logik till CDN • Akamai stödjer redan detta

Framtiden Nutiden

Add a comment

Related presentations

Related pages

Optimera din sidladdning - En djupdykning i prestanda på ...

Eventbrite - Valtech presents Optimera din sidladdning - En djupdykning i prestanda på webben - Thursday, February 6, 2014 at Inspirationslunch@Valtech ...
Read more

Inspirationslunch - Optimera din sidladdning - En ...

Inspirationslunch - Optimera din sidladdning - En djupdykning i prestanda på webben. ... Jesper Petersson, som jobbar med prestanda på webben, ...
Read more

Båttillbehör på webben - Documents

Optimera din sidladdning - en djupdykning i prestanda på webben Jesper Petersson, Valtech Jesper, som jobbar med prestanda på webben, ...
Read more

Events - Valtech

Här är ständigt saker på gång för den som ... Optimera din sidladdning - En djupdykning i prestanda på ... Inspirationslunch: App, webb eller ...
Read more

I huvudet på en rekryterare - Documents

I huvudet på en rekryterareSinisa Strbac, ... Optimera din sidladdning - en djupdykning i prestanda på webben ... som jobbar med prestanda på webben, ...
Read more

Optimera prestanda - Adobe Support

Aktivera JavaScript i din webbläsare för att få en ... Du kan huvudsakligen påverka Lightrooms prestanda på tre sätt: Optimera ... Skriv ut och Webb.
Read more

Photoshop Tutorial: Optimera bilder för webben - GFD ...

... på din webbsida? Med vår enkla Photoshop tutorial lär du dig snabbt att optimera dina bilder för webben. ... en bild till webben är det ...
Read more