Download pptx - Digicure seminar i Jylland | Session 2, web performance optimering

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

[email protected]

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

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

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

http://blog.kissmetrics.com/loading-time/

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

http://www.nccgroup.com/media/19242/seatwave_our_optimisation_story.pdf

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


15

Web performance optimering

16

Båndbredde og svartider

17

Vil den stigende hastighed på båndbreddelinjerne løse vores problemer?

NEJ!


18


19


Båndredde og latency

• Båndbredde indikerer ‘tykkelsen’• Latency indikerer transporttiden • Transporttiden fra A til B == Latency

Fra Danmark

20


21

Latency == transporttiden fra A til B

Båndbredde

Fra Danmark

22


23

Båndbredde og svartiderFra Danmark Fra Australien

24


Fra Danmark Fra Australien

25


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

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


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å!


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


37

Performance optimering

• Lokalisér potentielle optimeringstiltag

• Udbedre ’flaskehalse’

• Reducér svartider

• Reducér båndbreddeforbrug

• Reducér belastning på it-infrastruktur


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


39


Værktøjet som bliver benyttet

40

Værktøjerne er på

plads!


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/


http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/

• Reducering af antal HTTP forespørgsler

• Reducering af website indholdet


43

Optimér websitet – Køb ikke mere hardware

500 kb90 req.

250 kb45 req.


44

Gør som Seatwave


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


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


53


54

Hvor gode er I?

55

4 12

56

Reducér forespørgsler:Domain Sharding


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)


59

“The fastest HTTP request is the one not made.”


• Caching Headers

• Pas på med dynamiske komponenter

• Indfør versionsnumreo Javascript_v01.jso Javascript_v02.js

• Last-Modified løser næsten problemet


60



61



62

Hvor gode er I?

63

7 9

64

Reducér indhold


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


67

Reducér indhold:HTTP Compression


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


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


http://developer.yahoo.com/yui/compressor/





http://csstidy.sourceforge.net/

http://csstidy.sourceforge.net/

http://www.digicure.dk/webperformance-x-ray.html

http://www.digicure.dk/webperformance-x-ray.html

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


http://jpegclub.org/jpegtran/

http://jpegclub.org/jpegtran/

75

Reducér indhold:Unoptimized Images - JPEG


76

Reducér indhold:Unoptimized Images - PNG


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 %


http://www.imagemagick.org/script/index.php

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


ImageMagick.org

http://www.imagemagick.org/script/index.php

81

Optimér rendering


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


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>


88

11) Ekstra

Prioritize visible content

89

Optimér rendering:Prioritize visible content


90



91



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)


94



95



96



97



98



99



100

Se dig for når du implementerer 3. part JavaScript til social widgets


101


Facebook buttons == 270 Kb!

Parametre:

u : Sidens URL


102



103


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


104



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


106

Hvor gode er I?

107

10 6

108

13) – Ekstra

CDNPerf.com

109

Optimér rendering:3. Party JavaScript Libraries

www.cdnperf.com


110


Optimér rendering:3. Party JavaScript Libraries

111

14) – Ekstra

Embedded YouTubes

112

Optimér rendering:Embedded YouTubes

www.webperformance.nu


400 KB!!

113




3 KB!!

114




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


Det mobile netværk

Båndbredde

Latency

131


Latency

132

Fra Holland Fra Australien

Hvad kan optimeres på dit website

133


Kilde: http://www.webperformancetoday.com/2013/08/06/8-mobile-performance-assumptions/

Belastning på radiomast

Vejret

Retning mod radiomast

Afstand

134



4G Netværket - ’Under the hood’

135

Men er 4G ikke løsningen på vores problemer?

NEJ!


136



4G Netværket - Vil gøre livet nemmere

LTE/4G 3G

’Idle’ tilstand < 100 ms < 2,5 sek.

Forbundet < 5 ms <50 ms

137




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



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


139



• 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


143Mobitest.akamai.com


144Httpwatch.com


145Google.dk/chrome


F12

146Google.dk/chrome


147Google.dk/chrome


148Google.dk/chrome


149Digicure.dk


150Digicure.dk


151Digicure.dk


152Digicure.dk


153Digicure.dk


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!


158

Fast-Click

Kilde: http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/


159

InstantClick.io

Kilde: http://instantclick.io/


160

kortlink.dk/e9k2

DemoFast-Click


http://kortlink.dk/e9k2

161

DemoFast-Click


162

16)

Turn Off Autocorrect and Autocapitalize

163

<input type=”text” autocapitalize=”off” autocorrect=”off”>

HTML5 input typer


164

165

<input type=”text”>

<input type=”url”

<input type=”email”>

<input type=”text” pattern=”[09]*”

HTML5 input typer


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


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



169



170



171

Loading…


172

Loading…

Kilde: http://www.lukew.com/ff/entry.asp?1797=


173

Loading…


174

Loading…


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 %


176

18)

ResponsiveWeb

Design (RWD)

177

Det her er ikke internettet


178

Det her er internettet


179

Det her bliver internettet


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/






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)


187

• Smart-route teknologi

• Komponenter placeret geografisk tættere på brugeren

• Typisk statiske

Fordele:

• Reducering af trafik

• Større skalérbarhed


188



189



190



191



192

www.cloudflare.com



193


Hvor er vi på vej hen?

194

Højere krav til performance

2006 = <4 sekunder

2009 = <2 sekunder

2013 = <1 sekund

1960 = <10 sekunder


195

Performance budgettet

196


”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



198



• Sætter et budget

• Må ikke overskrides

• Antal forespørgsler og websites indhold

199



Eksempel:Instantalarm.dk

Antal forespørgsler: 30

Websites indhold: 350 KB

200



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


’Streaming’ af data

204


’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


’Server push’ events

206


’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


Komprimering af HTTP Headers• 500-800 bytes + cookie info

• ’Header tables’ – Undgå identiske HTTP Headers• ’Header tables’ udløber når forbindelsen lukkes

208


209


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


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


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


Tobias Borg Petersen,

mail: [email protected]: digicure.dk

Hvem er jegTobias Borg Petersen

216

@_tobibp

[email protected]

Webperformance.nu

Performancekonsulent i Digicure

Front End udvikler (.NET)

dk.linkedin.com/in/tobiasbp