Upload
tobias-borg-petersen
View
29
Download
6
Embed Size (px)
Citation preview
www.digicure.dk
God performance er god kundeservice
7. maj 2014
Session 2 – ”Sådan får du et hurtigt website”
Tobias Borg Petersen,Performancekonsulent fra Digicure A/S
Hvem er jegTobias Borg Petersen
2
@_tobibp
Webperformance.nu
Performancekonsulent i Digicure
Front End udvikler (.NET)
dk.linkedin.com/in/tobiasbp
www.digicure.dk
3
• Stiftet i 2003
• Kontor i Lyngby
• 22 medarbejdere
• Beskæftiger os med analyse og rådgivning• It-sikkerhed• Web performance
• It-sikkerhedsuddannelser • CISSP• CEH – Ethical hacker• CVSE – Vmware Hacking / Advanced Security
AgendaTobias Borg Petersen
4
• Hvilke typer værktøjer har jeg behov for?
• Top 10 tips og tricks til at øge performance niveauet
• Mobil performance optimering – de mobile sites kræver opmærksomhed
• Når forretningen bliver global, sætter det store krav til performance
• Web performance optimering som en løbende proces
• Hvad byder fremtiden på? Hvilke udfordringer kommer vi til at stå med?
5
6
Hvorfor optimere web performance?
7
Websites bliver langsommere og langsommere…
8
Danske webshops Danske kommuner
Web performanceHvordan står det til i dag?
Kilde: http://www.digicure.dk/performance.html
9
20 %.. mindre trafik blot ved at øge svartiden med 500 ms.
Web performance – Hvorfor? Lavere bruger engagement
Kilde: http://velocityconf.com/velocity2009/public/schedule/detail/8523
10Kilde: http://blog.kissmetrics.com/loading-time/
• 47 % af de adspurgte brugere forventer at et website er vist indenfor 2 sekunder
• 40 % af de adspurgte brugere vil forlade et website der er mere end
3 sekunder om at blive vist
Web performance – Hvorfor?Lavere bruger engagement
11
• Svartider –50-70 %
• Båndbredde forbrug –43 %
• DB CPU –75 %
• Samtidige brugere +300 %
Kilde: http://www.nccgroup.com/media/19242/seatwave_our_optimisation_story.pdf
Web performance – Hvorfor?Tekniske gevinster
12
1.5 seconds == SLOW
Kilde: http://www.nccgroup.com/media/19242/seatwave_our_optimisation_story.pdf
Web performance – Hvorfor?Search Engine Optimization (SEO)
13
De besøgendes forventninger
14
Højere krav til performance
2006 = <4 sekunder
2009 = <2 sekunder
2013 = <1 sekund
1960 = <10 sekunder
De besøgendes forventninger
15
Web performance optimering
16
Båndbredde og svartider
17
Vil den stigende hastighed på båndbreddelinjerne løse vores problemer?
NEJ!
Båndbredde og svartider
18
Båndbredde og svartider
19
Båndbredde og svartider
Båndredde og latency
• Båndbredde indikerer ‘tykkelsen’• Latency indikerer transporttiden • Transporttiden fra A til B == Latency
Fra Danmark
20
Båndbredde og svartider
21
Latency == transporttiden fra A til B
Båndbredde
Fra Danmark
22
Båndbredde og svartider
23
Båndbredde og svartiderFra Danmark Fra Australien
24
Båndbredde og svartider
Fra Danmark Fra Australien
25
Båndbredde og svartider
Streaming er begrænset af båndbredde
Web browsing er begrænset af latency
26
Hvordan indlæserbrowseren et website
27Link: http://www.websiteoptimization.com/secrets/metrics/10-21-http-request.html
28
29
Ekstra info:
• CSS filer• JavaScript filer
30
31
Dit websites svartider skal være hurtigere
Hvilke typer værktøjer har man behov for?
32
Hvilke typer af værktøjer har man behov for?
33
Udvælg de rigtige værktøjer
Monitorering
Test
Optimering
Hvilke typer af værktøjer har man behov for?
34
• Svartider
• Tilgængelighed
• IKKE kun ping
• Brugernes oplevelse udefra
• 3. part monitorering
Monitorering
Testværktøjer – Web performance
35
Ikke i blinde!
Du kan ikke forbedre det du ikke måler på!
Testværktøjer – Web performance
36
• Load test• Hvor meget kan websitet
holde til
• Stress test• Hvor meget kan websitet
holde til under en stor belastning
• Endurance test• Hvordan opfører websitet
sig under en længere vedvarende belastning
Performancetest
Testværktøjer – Web performance
37
Performance optimering
• Lokalisér potentielle optimeringstiltag
• Udbedre ’flaskehalse’
• Reducér svartider
• Reducér båndbreddeforbrug
• Reducér belastning på it-infrastruktur
Testværktøjer – Web performance
38
YSlow plugin PageSpeed plugin Webperformance X-ray
Antal performance checks 23 31 400+
Mobil specifikke performance checks
Nej Nej Ja
Omfang 1 URL 1 URL Hele websitet
Administrationsmodul Nej Nej Ja, op til flere brugere
PDF rapporter Nej Nej Ja, 14 forskelligeSammenligning af scanninger
Nej Nej Ja
API Ja Ja JaDansk support Nej Nej Ja
Testværktøjer – Web performance
39
Testværktøjer – Web performance
Værktøjet som bliver benyttet
40
Værktøjerne er på
plads!
Hvilke typer af værktøjer har man behov for?
41
“80-90% of the end-user response time is spent on the frontend. Start there.” – Steve Sourders, Google
20 % BE = Time To First byte (TTFB)• Database opslag• Web service kald• HTML generering
80% FE = Download af indholdet:• Billeder• CSS• Scripts• Flash
Kilde: http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
Hvilke typer af værktøjer har man behov for?
• Reducering af antal HTTP forespørgsler
• Reducering af website indholdet
Hvilke typer af værktøjer har man behov for?
43
Optimér websitet – Køb ikke mere hardware
500 kb90 req.
250 kb45 req.
Hvilke typer af værktøjer har man behov for?
44
Gør som Seatwave
Hvilke typer af værktøjer har man behov for?
45
Reducér antalletaf forespørgsler
Top 10 tips og tricks til at øge performance niveauet
46
1)
Combinable JavaScript/CSS files
47
• Dyre HTTP forespørgsler• Længere svartider• Større belastning på
infrastrukturen
• Effektiv komprimeringReducér forespørgsler:Combinable
JavaScript/CSS files
Top 10 tips og tricks
48
Top 10 tips og tricks
49
Hvor gode er I?
50
8 8
51
2)
Domain Sharding
52
Reducér forespørgsler:Domain Sharding
• 6 åbne forbindelse ad gangen
• Per domæne
• Statiske komponenter
• Cookie-less domæner
Top 10 tips og tricks
53
Top 10 tips og tricks
54
Hvor gode er I?
55
4 12
56
Reducér forespørgsler:Domain Sharding
Top 10 tips og tricks
www.browserscope.org
57
3)
Caching (Expire Headers)
58
“The fastest HTTP request is the one not made.” - Steve Souders
Reducér forespørgsler:Caching (Expire Headers)
Top 10 tips og tricks
59
“The fastest HTTP request is the one not made.”
Reducér forespørgsler:Caching (Expire Headers)
• Caching Headers
• Pas på med dynamiske komponenter
• Indfør versionsnumreo Javascript_v01.jso Javascript_v02.js
• Last-Modified løser næsten problemet
Top 10 tips og tricks
60
Reducér forespørgsler:Caching (Expire Headers)
Top 10 tips og tricks
61
Reducér forespørgsler:Caching (Expire Headers)
Top 10 tips og tricks
62
Hvor gode er I?
63
7 9
64
Reducér indhold
Top 10 tips og tricks
65
4)
Activate HTTP Compression
66
• Komprimering af: HTML, CSS, JavaScript, Fonts, og ICO-filer
• Ikke billeder, videoer eller PDF’er
• Konfiguration på webserver
• Load balancer problem
Uden gzip/deflate
Med gzip/deflate
Reducér indhold:HTTP Compression
Top 10 tips og tricks
67
Reducér indhold:HTTP Compression
Top 10 tips og tricks
68
Hvor gode er I?
69
11 5
70
5)
Minify JavaScript/CSS-files
71
Reducér indhold:Minify JavaScript/CSS-files
/* Highlight */ #content table tr.sfhover, #content table tr.sfhover td {
background-color: #b5dff3;color: #000
} /* Selected */
/* This always takes precedence over highlight color! */ #content table.ledger tr.selected td, #content table tr.selected td { background-color: #4775d1;
color: #fff; border-left: 1px solid #346dbe; border-bottom: 1px solid #7daaea
}
#content table tr.sfhover,#content table tr.sfhover td{background-color:#b5dff3;color:#000}#content table.ledger tr.selected td,#content table tr.selected td{background-color:#4775d1;color:#fff;border-left:1px solid #346dbe;border-bottom:1px solid #7daaea}
Minified
Not Minified
Top 10 tips og tricks
72
Reducér indhold:Minify JavaScript/CSS-files
• YUI Compressor, Java baseret command line - developer.yahoo.com/yui/compressor/• CSS Tidy - http://csstidy.sourceforge.net/ • Webperformance X-ray - http://www.digicure.dk/webperformance-x-ray.html
Top 10 tips og tricks
73
6)
Unoptimized Images
74
JPEG-filer kan indeholde: • Embedded thumbnail images• EXIF metadata• Adobe XMP metadata• Camera information and settings• Geographical and timing data• ICC color profile data• Comments
• Kan ikke komprimeres med HTTP Compression!
• Benyt JPEGTran - http://jpegclub.org/jpegtran/
• Webperformance X-ray
Reducér indhold:Unoptimized Images - JPEG
Top 10 tips og tricks
75
Reducér indhold:Unoptimized Images - JPEG
Top 10 tips og tricks
76
Reducér indhold:Unoptimized Images - PNG
Top 10 tips og tricks
PNG-filer kan indeholde: • Comments
• EXIF metadata
• Unused color or paletta data
• Compressed with an unoptimized DEFLATE compressor (Level 1-9)
77
7)
JPEG Candidate Images
78
Reducér indhold:JPEG Candidate Images
879 kb
ImageMagick.org
• PNG/GIF filer JPEG filer
• Reducering i størrelse
Ulemper:• Skarpe hjørner (logoer
eller grafer)
45 kb~94 %
Top 10 tips og tricks
79
8)
High Quality JPEG Image
80
Reducér indhold:JPEG Candidate Images
• JPEG Quality 100 JPEG Quality 75
• Reducering i størrelse
Ulemper:• Dårligere kvalitet
Top 10 tips og tricks
ImageMagick.org
81
Optimér rendering
Top 10 tips og tricks
82
9)
CSS in top / JavaScript at bottom
83
JavaScript i bunden
JavaScript i toppen
<head> <link rel=”stylesheet” href=”style.css” type=”text/css”/> …</head>
CSS i toppen
Optimér rendering:CSS in top and JavaScript at bottom
Top 10 tips og tricks
84
Hvor gode er I?
85
8 8
86
10)
Apply Image Tag Dimensions
87
Optimér rendering:Apply Image Tag Dimensions
<html> <title>Funny Birds</title> <p> ... ... lots of content about birds ... ... </p> <img src="bird.jpg" /> <p> ... ... more content about birds ... ... </p> </html>
<html> <title>Funny Birds</title> <p> ... ... lots of content about birds ... ... </p> <img src="bird.jpg“width="30" height="20" /> <p> ... ... more content about birds ... ... </p> </html>
Top 10 tips og tricks
88
11) Ekstra
Prioritize visible content
89
Optimér rendering:Prioritize visible content
Top 10 tips og tricks
90
Optimér rendering:Prioritize visible content
Top 10 tips og tricks
91
Optimér rendering:Prioritize visible content
Top 10 tips og tricks
92
12) – Ekstra
Avoid 3. party SPOF (scripts)
93
DNS
Load Balancers App Servers
Read-only DB
Master DB
Optimér rendering:Avoid 3. party SPOF (scripts)
Top 10 tips og tricks
94
Optimér rendering:Avoid 3. party SPOF (scripts)
Top 10 tips og tricks
95
Optimér rendering:Avoid 3. party SPOF (scripts)
Top 10 tips og tricks
96
Optimér rendering:Avoid 3. party SPOF (scripts)
Top 10 tips og tricks
97
Optimér rendering:Avoid 3. party SPOF (scripts)
Top 10 tips og tricks
98
Optimér rendering:Avoid 3. party SPOF (scripts)
Top 10 tips og tricks
99
Optimér rendering:Avoid 3. party SPOF (scripts)
Top 10 tips og tricks
100
Se dig for når du implementerer 3. part JavaScript til social widgets
Top 10 tips og tricks
101
Optimér rendering:Avoid 3. party SPOF (scripts)
Facebook buttons == 270 Kb!
Parametre:
u : Sidens URL
Top 10 tips og tricks
102
Optimér rendering:Avoid 3. party SPOF (scripts)
Top 10 tips og tricks
103
Optimér rendering:Avoid 3. party SPOF (scripts)
Parametre:
url : Sidens URLtext : Valgfri teksthashtags : Kommaseparerede hashtagsVia : Via tekst
https://twitter.com/intent/tweet?url=http://www.eksempel.dk
&text=Performance
%20analyse&hashtags=fdih,digicure,webperf&via=digicuredk
Top 10 tips og tricks
104
Optimér rendering:Avoid 3. party SPOF (scripts)
Top 10 tips og tricks
105
https://plus.google.com/share?url=http://digicure.dk
http://www.linkedin.com/shareArticle?mini=true&url=http://www.digicure.dk&title=Performance analyse&source=Digicure&summary=I analysen har Digicure udf%F8rt performance-checks p%E5 505 FDIH medlemmers websites forside, og benchmarket dem ift. hinanden.
Parametre:
mini=true : Påkræveturl: URLtitle : Valgfri titelsource : Valgfri kildesummary : Valgfrit resumé
Parametre:
url : URL
Top 10 tips og tricks
106
Hvor gode er I?
107
10 6
108
13) – Ekstra
CDNPerf.com
109
Optimér rendering:3. Party JavaScript Libraries
www.cdnperf.com
Top 10 tips og tricks
110
Top 10 tips og tricks
Optimér rendering:3. Party JavaScript Libraries
111
14) – Ekstra
Embedded YouTubes
112
Optimér rendering:Embedded YouTubes
www.webperformance.nu
Top 10 tips og tricks
400 KB!!
113
Optimér rendering:Embedded YouTubes
www.webperformance.nu
Top 10 tips og tricks
3 KB!!
114
Optimér rendering:Embedded YouTubes
www.webperformance.nu
Top 10 tips og tricks
Ikke optimeret
Optimeret
115
Opsummering
Combinable JavaScripts 8 8Domain Sharding 4 12Caching 7 9HTTP Compression 11 5CSS i top / JS i bund 8 83. part SPOF 10 6
116
Performance analyse
Seminar Jylland
Seminar KBH
WebshopsOkt 2013
International(httparchive.org)
Forespørgsler 81 req. 82 req. 80 req. 94 req.
Størrelse 1366 KB 1639 KB 1.229 KB 1590 KB
Potentiel Besparelse (størrelse)
15,73 % 20,5 % 19 % --
117
Og husk nu…
118
Performance optimering som en løbende proces
119
Performance optimering - som en løbende proces
120
Mobil performance optimering
121
Fremtiden indenfor web performance
Mobil performance
122Kilde: http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6
123
Adgang fra flere forskellige enheder
124
125
Er de mobile brugere mere tålmodige?
126
”85 % af de mobile bruger forventer at mobile sites loader lige så hurtigt eller hurtigere end desktop sites”
Kilde: http://www.strangeloopnetworks.com/web-performance-infographics/
127
128
”75 % af de mobile bruger vil forlade et website, hvis det tager længere end 5 sekunder at få indholdet vist”
129
Båndbredde og mobilnetværket
130
Fremtiden indenfor web performance
Det mobile netværk
Båndbredde
Latency
131
Båndbredde og svartider
Latency
132
Fra Holland Fra Australien
Hvad kan optimeres på dit website
133
Båndbredde og svartider
Kilde: http://www.webperformancetoday.com/2013/08/06/8-mobile-performance-assumptions/
Belastning på radiomast
Vejret
Retning mod radiomast
Afstand
134
Fra Holland Fra Australien
Båndbredde og svartider
4G Netværket - ’Under the hood’
135
Men er 4G ikke løsningen på vores problemer?
NEJ!
Båndbredde og svartider
136
Fra Holland Fra Australien
Båndbredde og svartider
4G Netværket - Vil gøre livet nemmere
LTE/4G 3G
’Idle’ tilstand < 100 ms < 2,5 sek.
Forbundet < 5 ms <50 ms
137
Fra Holland Fra Australien
Båndbredde og svartider
4G Netværket - Vil gøre livet nemmere
4G 3G Edge
AT & T – Core network latency 40-50 ms 50-200 ms 600-750 ms
Kilde: https://docs.google.com/presentation/d/1wAxB5DPN-rcelwbGO6lCOus_S1rP24LMqA8m1eXEDRo/present#slide=id.g11c1373c5_5_0
138
Fra Holland Fra Australien
4G Netværket - Vil gøre livet nemmere
Radio Access Core Network External Network Samlet latency ‘Idle’
Edge 50 ms 600-750 ms 10-30 ms 670-830 ms +2,5 sek.
3G 50 ms 50-200 ms 10-30 ms 120-280 ms +2,5 sek.
4G 5 ms 40-50 ms 10-30 ms 65-86 ms +100 ms
Desktop - - 10-30 ms 10-30 ms -
Kilde: https://docs.google.com/presentation/d/1wAxB5DPN-rcelwbGO6lCOus_S1rP24LMqA8m1eXEDRo/present#slide=id.g11c1373c5_5_0
Båndbredde og svartider
139
Båndbredde og svartider
4G Netværket - Vil gøre livet nemmere
• 4G er ikke tilgængelig for os alle endnu
• 3G netværket forsvinder ikke foreløbigt
Hvad kan vi gøre ved det?• Websites størrelse• Antal forespørgsler (VIGTIG)
Løsninger: • Reducér mængden af data• Reducér antallet af forespørgsler• Komprimering• Caching
140
Performance optimering
Testværktøjer Mobil performance
141
Performance værktøjer
Testværktøjer Mobil performance
142www.webpagetest.org
Testværktøjer – Web performance
143Mobitest.akamai.com
Testværktøjer – Web performance
144Httpwatch.com
Testværktøjer – Web performance
145Google.dk/chrome
Testværktøjer – Web performance
F12
146Google.dk/chrome
Testværktøjer – Web performance
147Google.dk/chrome
Testværktøjer – Web performance
148Google.dk/chrome
Testværktøjer – Web performance
149Digicure.dk
Testværktøjer – Web performance
150Digicure.dk
Testværktøjer – Web performance
151Digicure.dk
Testværktøjer – Web performance
152Digicure.dk
Testværktøjer – Web performance
153Digicure.dk
Testværktøjer – Web performance
154
Optimering af mobile websites
155
15)
Eleminate software latency
156
Hvad kan optimeres på dit mobile website
Kilde: http://venturebeat.com/2013/09/19/apples-iphone-5-touchscreen-is-2-5-times-faster-than-android-devices/
157
Fast-Click
300 ms. forsinkelse
Dobbelt-klik
Løsningen findes!
Hvad kan optimeres på dit mobile website
158
Fast-Click
Kilde: http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/
Hvad kan optimeres på dit mobile website
159
InstantClick.io
Kilde: http://instantclick.io/
Hvad kan optimeres på dit mobile website
160
kortlink.dk/e9k2
DemoFast-Click
Hvad kan optimeres på dit mobile website
161
DemoFast-Click
Hvad kan optimeres på dit mobile website
162
16)
Turn Off Autocorrect and Autocapitalize
163
<input type=”text” autocapitalize=”off” autocorrect=”off”>
HTML5 input typer
Hvad kan optimeres på dit mobile website
164
165
<input type=”text”>
<input type=”url”
<input type=”email”>
<input type=”text” pattern=”[09]*”
HTML5 input typer
Hvad kan optimeres på dit mobile website
166
17)
Perceived Performancevs.
Actual Performance
167Kilde: http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?pagewanted=all&_r=0
Hvad kan optimeres på dit mobile website
Perceived Performance vs. Actual Performance
168Kilde: http://www.nytimes.com/2012/08/19/opinion/sunday/why-waiting-in-line-is-torture.html?pagewanted=all&_r=0
Hvad kan optimeres på dit mobile website
Perceived Performance vs. Actual Performance
169
Hvad kan optimeres på dit mobile website
Perceived Performance vs. Actual Performance
170
Hvad kan optimeres på dit mobile website
Perceived Performance vs. Actual Performance
171
Loading…
Hvad kan optimeres på dit mobile website
172
Loading…
Kilde: http://www.lukew.com/ff/entry.asp?1797=
Hvad kan optimeres på dit mobile website
173
Loading…
Hvad kan optimeres på dit mobile website
174
Loading…
Hvad kan optimeres på dit mobile website
175
Hvornår bør man benytte en spinner?
<100 ms = Ingen spinner
100-1000 ms = Spinner
1000+ ms = Ingen spinner
Sørg for at ‘Loading’-bjælken starter på ca. 10 %
Hvad kan optimeres på dit mobile website
176
18)
ResponsiveWeb
Design (RWD)
177
Det her er ikke internettet
Hvad kan optimeres på dit mobile website
178
Det her er internettet
Hvad kan optimeres på dit mobile website
179
Det her bliver internettet
Hvad kan optimeres på dit mobile website
180
”If your website is 15mb, it’s not HTML5 or RWD. It’s
stupid”- Christian Heilmann
181Kilde: http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Hvad kan optimeres på dit mobile website
182Kilde: http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Hvad kan optimeres på dit mobile website
183Kilde: http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/
Hvad kan optimeres på dit mobile website
184
Hvilke udfordringer findes der ifm. RWD?
Download og gem væk
Download og formindsk
Overdreven brug af DOM
Er RWD sites mindre på mobile enheder?
Responsive Images bør benyttes
185
Content Delivery Network (CDN)
Når forretningen bliver global
186
Reducér forespørgsler:Content Delivery Network (CDN)
Top 10 tips og tricks
187
• Smart-route teknologi
• Komponenter placeret geografisk tættere på brugeren
• Typisk statiske
Fordele:
• Reducering af trafik
• Større skalérbarhed
Top 10 tips og tricks
188
Reducér forespørgsler:Content Delivery Network (CDN)
Top 10 tips og tricks
189
Fra Holland Fra Australien
Top 10 tips og tricks
190
Fra Holland Fra Australien
Top 10 tips og tricks
191
Reducér forespørgsler:Content Delivery Network (CDN)
Top 10 tips og tricks
192
www.cloudflare.com
Reducér forespørgsler:Content Delivery Network (CDN)
Top 10 tips og tricks
193
Fremtiden indenfor web performance
Hvor er vi på vej hen?
194
Højere krav til performance
2006 = <4 sekunder
2009 = <2 sekunder
2013 = <1 sekund
1960 = <10 sekunder
De besøgendes forventninger
195
Performance budgettet
196
Fremtiden indenfor web performance
”Performance budgettet”
• Tim Kadlec, www.timkadlec.com
• Inddrag performance tidligt i et projekt
• Ender med et langsomt website med tungt indhold
• Kontrol
• ”Performance budgettet”
Kilde: http://timkadlec.com/2013/01/setting-a-performance-budget/
197
• Fokus på forespørgsler
• Fokus på websites indhold
• Forespørgsler og indhold skal reduceres
• Ikke svartider og tilgængelighed
Fremtiden indenfor web performance
”Performance budgettet”
198
Fremtiden indenfor web performance
”Performance budgettet”
• Sætter et budget
• Må ikke overskrides
• Antal forespørgsler og websites indhold
199
Fremtiden indenfor web performance
”Performance budgettet”
Eksempel:Instantalarm.dk
Antal forespørgsler: 30
Websites indhold: 350 KB
200
Fremtiden indenfor web performance
”Performance budgettet”
Eksempel:Instantalarm.dk
• Optimér eksisterende features eller komponenter på websitet
• Fjern eksisterende features eller komponenter på websitet
• Lad være med at tilføje den nye feature eller komponent
201
HTTP 2.0
202
Hvad kommer HTTP 2.0 til at have af betydning?
Performance og HTTP 2.0• Reducér latency• Priotering af forespørgsler• Server-push events• Komprimering af HTTP Headers• ’Streaming’ af data• Løsning på Head-of-line-blocking
HTTP 2.0 ændrer ikke på data strukturen i vores HTTP Headers
203
Hvad kommer HTTP 2.0 til at have af betydning?
’Streaming’ af data
204
Hvad kommer HTTP 2.0 til at have af betydning?
’Streaming’ af data• Streaming af data via en enkel TCP fobindelse• Elimenering af Head-Of-Line-Blocking• Priotering af forespørgsler/filtyper• Lavere CPU og Memory forbrug• Færre TCP forbindelser == flere samtidige brugere• Mindre tid på TCP slow-start • Hurtigere TCP congestion/loss recovery
205
Hvad kommer HTTP 2.0 til at have af betydning?
’Server push’ events
206
Hvad kommer HTTP 2.0 til at have af betydning?
’Server push’ events• Fungerer som inlining og data URIs• Reducerer latency • ’Pushed’ filer kan blive cached• ’Pushed’ filer kan genbruges på flere sider• ’Pushed’ filer kan prioteres af serveren
207
Hvad kommer HTTP 2.0 til at have af betydning?
Komprimering af HTTP Headers• 500-800 bytes + cookie info
• ’Header tables’ – Undgå identiske HTTP Headers• ’Header tables’ udløber når forbindelsen lukkes
208
Hvad kommer HTTP 2.0 til at have af betydning?
209
Hvad kommer HTTP 2.0 til at have af betydning?
Komprimering af HTTP Headers• 500-800 bytes + cookie info
• ’Header tables’ – Undgå identiske HTTP Headers• ’Header tables’ udløber når forbindelsen lukkes
• Komprimering af data (CRIME sårbarhed løst)
210
Hvad kommer HTTP 2.0 til at have af betydning?
Store krav til TCP forbindelse• TCP cwnd == 10 segments• Support TLS med ALPN negotiation (NPN for SPDY)• Support af TLS resumption
Læs High Performance Browser Networking
211
Hvad kommer HTTP 2.0 til at have af betydning?
Gamle vaner skal ud• Domain sharding (Vigtig)• Combinable JavaScript/CSS• Image Spriting• Inlining • Data URIs
212
HTTP 2.0 eller HTTP 1.1?
Gratis scanning af forside
214
Fremtiden indenfor web performance
Tobias Borg Petersen,
mail: [email protected]: digicure.dk
Hvem er jegTobias Borg Petersen
216
@_tobibp
Webperformance.nu
Performancekonsulent i Digicure
Front End udvikler (.NET)
dk.linkedin.com/in/tobiasbp