Digicure seminar | Mobil web performance optimering

Web performance seminar21. november 2013

Mobil web performance optimering

Den mobile platform er en stor udfordring

Tobias Borg Petersen,Performancekonsulent fra Digicure A/S

www.digicure.dk

Hvem er jegTobias Borg Petersen

2

@_tobibp

[email protected]

Webperformance.nu/blog

Performancekonsulent i Digicure

Front End udvikler (.NET)

dk.linkedin.com/in/tobiasbp

www.digicure.dk

3

• Stiftet i 2003

• 20 medarbejdere

• Beskæftiger os med analyse og rådgivning• It-sikkerhed• Web performance

• It-sikkerhedsuddannelser • CISSP• CEH – Ethical hacker• CVSE – Vmware Hacking / Advanced Security

DispositionTobias Borg Petersen

4

• Brugernes forventninger til svartider på mobile enheder. Er de mere tålmodige?

• Det mobile netværk - Hvorfor er det langsomt?

• Latency er den store synder

• Er 4G løsningen på problemet? Nej. Hør hvorfor!

• Top 10 optimerings tiltag til mobil web performance

•Hvordan monitorerer vi mobil performance?

• Hvilke værktøjer findes der indenfor monitorering af mobil performance?

• Responsive Web Design (RWD) er ikke en gylden løsning

• ’Performance budgettet’

5

Fokus på web performance

6


7


Alt bliver hurtigere

Og brugerne bliver mere og mere utålmodige

8

Websites bliver langsommere og langsommere…

9

Danske webshops Danske kommuner

Web performanceHvordan står det til i dag?

10Kilde: http://httparchive.org

400000

800000

1200000

1600000

2000000International

1.551 KB

Danskekommuner

991 KB

FDIHmedlemmer

1.229 KB


11

Flash1%

CSS5% HTML

3%

JavaScript20%

Andet4%Billeder

67%

Flash2%

CSS4% HTML

5%

JavaScript22%

Andet3%

Billeder64%


Danske webshops Danske kommuner

12

13

20 %.. mindre trafik blot ved at øge svartiden med 500 ms.

Web performance – Hvorfor? Lavere bruger engagement

Kilde: http://blog.kissmetrics.com/speed-is-a-killer/

14Kilde: 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

• 52 % af de adspurgte brugere mener at hurtige sidevisninger er vigtigt for websites loyalitet

Web performance – Hvorfor?Lavere bruger engagement

15

GlassesDirect.co.uk

Kilde: http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions/

Web performance – Hvorfor?Økonomiske gevinster

16

• 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

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

Nedetider kan koste dyrt

Web performance – Hvorfor?Nedetider

18

1.5 seconds == SLOW

Kilde: http://www.qubitproducts.com/wp-content/uploads/2012/04/Site-Speed-Whitepaper1.pdf

Web performance – Hvorfor?Search Engine Optimization (SEO)

19

Web performance – Hvorfor?Search Engine Optimization (SEO)

‘Google Recommends Mobile Websites Load in One Second or Less’

Nu også på mobile websites

Kilde: http://www.cmswire.com/cms/customer-experience/google-recommends-mobile-websites-load-in-one-second-or-less-022080.php

20

De besøgendes forventninger

21

Højere krav til performance

2006 = <4 sekunder

2009 = <2 sekunder

2013 = <1 sekund

1960 = <10 sekunder


22


23Kilde: http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?pagewanted=all&_r=0


24Kilde: http://www.nytimes.com/2012/03/01/technology/impatient-web-users-flee-slow-loading-sites.html?pagewanted=all&_r=0

Forsinkelse Brugerens reaktion 0 – 100 ms. Instant/øjebklikkelig

100 – 300 ms. En mindre forsinkelse

300 – 1000 ms. Fortsat fokus på opgave

1 sek. + Mental fokus forsvinder

10 sek. + ”Jeg kommer tilbage senere..” – hvis det sker


25

Hvis dit website er længere end 1 sekund om at blive vist, taber du allerede besøgende nu


26

Det mobile internet

27

Fremtiden indenfor web performance

Fra desktop PC til..

28

Fremtiden indenfor web performance

Mobil performance

29Kilde: http://www.businessinsider.com/mobile-will-eclipse-desktop-by-2014-2012-6

30

Land Mobile-only brugere

Egypten 70 %

Indien 59 %

Sydafrika 57 %

Indonesien 44 %

USA 25 %

Kilde: onDevice Research

31

”Der er flere der har adgang til mobiltelefon, end adgang til rindende vand og tandbørster”

Kilde: http://blogs.worldbank.org/africacan/more-cell-phones-than-toilets

32

33

Er de mobile brugere mere tålmodige?

34

”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/

35

36

37

”75 % af de mobile bruger vil forlade et website, hvis det tager længere end 5 sekunder at få indholdet vist”

38

Performance er en fundamental del af brugeroplevelsen på websitet!

Brugeroplevelsen



39

”Facebook sucks!”

• Intuitive navigering

• Timelines elegance

• Svartiden!


Brugeroplevelsen


40

Performanceis about respect

”Respect your user’s time and they will be more likely to walk away with a positive experience.”

Brat Frost

Kilde: http://bradfrostweb.com/blog/post/performance-as-design/


41

Performance bør være højt prioteret

42

43

Båndbredde og svartider

44


45


• Båndredde og latency

• Båndbredde == “Tykkelsen”

• Latency == Transporttiden

46


47


Latency

48

Hvad kan optimeres på dit website

49

Fra Holland Fra Australien


50



51


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

Belastning på radiomast

Vejret

Retning mod radiomast

Afstand

52



4G Netværket - ’Under the hood’

53



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

LTE/4G 3G

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

Forbundet < 5 ms <50 ms

54




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

55



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


56

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

NEJ!


57



• 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

58



Speedtest.net

Speedtest app (Android + iOS)

59

Optimering af mobile websites

60

Hvordan indlæserbrowseren et website

61Link: http://www.websiteoptimization.com/secrets/metrics/10-21-http-request.html

http://www.websiteoptimization.com/secrets/metrics/10-21-http-request.html

62

63

64

Ekstra info:

• CSS filer• JavaScript filer

65

66

Dit mobile websites svartider skal være hurtigere!

Hvor skal jeg fokusere mine optimeringer?

67

Dit website skal på slankekur..


68

“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

• Priotér indholdet


70

Optimér websitet – Køb ikke mere hardware

500 kb90 req.

250 kb45 req.


71

Gør som Seatwave


72

Hvilke værktøjer findes derinden for (mobil) web performance

optimering?

73

Udvælg de rigtige værktøjer

Monitorering

Test

Optimering

Testværktøjer

74

• Svartider

• Tilgængelighed (desktop + mobil)

• IKKE ping

• Brugernes oplevelse udefra

• 3. part monitorering

Monitorering

Testværktøjer – Web performance

75


Real User MonitoringSynthetic Monitoring

• Data fra brugernes browsers

• Stor mængde data

• IKKE fra Safari, Opera, IE8, Blackberry og Android 2.3

• Man har ingen indflydelse på:• Netværk• Hardware• Andet software installeret hos

brugerne

• Ingen data når brugerne sover

• Trend spotting

• Fast testopsætning:• Software• Hardware• Netværk

• Alarmer

• Simulering af user-flow

• Tilgængeligheds monitorering

76


Real User Monitoring

77


<script>_gaq.push(['_setAccount','UA-XXXX-X']);

_gaq.push(['_setSiteSpeedSampleRate', 100]); // #protip

_gaq.push(['_trackPageview']);</script>

Google Analytics >> Content >> Site Speed

● Automatisk opsamling af data – standard er kun 1% af besøgene● Maksimalt 10.000 sidevisninger/day

Real User Monitoring

78


Synthetic Monitoring

79


Synthetic Monitoring

• Flere typer målinger• MOBIL• Citrix, FTP, SMTP, Ping,

brugerflows• Alarmering• Support• Indtastning af SLA

80


Synthetic Monitoring+ Real User Monitoring

81

• 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


82

Performance optimering


83

Performance værktøjer


84www.webpagetest.org


85www.webpagetest.org


86Mobitest.akamai.com


87Httpwatch.com


88Google.dk/chrome


89Digicure.dk


90Digicure.dk


91Digicure.dk


92


93

Værktøjerne er på

plads!

Udvælg dine testværktøjer

94

Reducér antalletaf forespørgsler


95

1)

Domain Sharding

96

Reducér forespørgsler:Domain Sharding

• 6 åbne forbindelse ad gangen

• Per domæne

• Statiske komponenter

• Cookie-less domæner


97


98

Hvor gode er I?

99

2 2

100

2)

Combinable JavaScript/CSS files

101URL: http://www.smartguy.dk

• Dyre HTTP forespørgsler• Latency!• Længere svartider• Større belastning på

infrastrukturen

• Effektiv komprimering

Reducér forespørgsler:Combinable

JavaScript/CSS files


http://www.smartguy.dk/

102


103

Hvor gode er I?

104

2 2

105

3)

Caching (Expire Headers)

106

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

Reducér forespørgsler:1) Caching (Expire Headers)


107

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

Kilde: http://mobil.httparchive.org/


• Caching Headers

• Pas på med dynamiske komponenter!

• Indfør versionsnumreo Javascript_v01.jso Javascript_v02.js

• Last-Modified løser næsten problemet


http://mobil.httparchive.org/

http://mobil.httparchive.org/

108



109



110

Hvor gode er I?

111

2 2

112

4)

Content Delivery Network (CDN)

113


Reducér forespørgsler:Content Delivery Network (CDN)

114

• Smart-route teknologi

• Komponenter placeret geografisk tættere på brugeren

• Typisk statiske

Fordele:

• Reducering af trafik

• Større skalérbarhed


115



116



117



118



119

www.cloudflare.com



120

Reducér indhold


121

5)

Activate HTTP Compression

122

• Komprimering af: HTML, CSS og JavaScript

• Ikke billeder, videoer eller PDF’er

• Konfiguration på webserver

• Load balancer problem

Uden gzip/deflate

Med gzip/deflate

Reducér indhold:HTTP Compression


123

Reducér indhold:HTTP Compression


124

Hvor gode er I?

125

1½ 2½

126

6)

Minify JavaScript/CSS-files

127

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


128

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

129

7)

Optimise images

130

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:Optimise images - JPEG


http://jpegclub.org/jpegtran/

http://jpegclub.org/jpegtran/

131

Reducér indhold:Optimise images - PNG


132

URL: http://www.tryg.dk/media/boerneulykke-kampagne_220x420_75-15831.png

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.tryg.dk/media/boerneulykke-kampagne_220x420_75-15831.png

http://www.tryg.dk/media/boerneulykke-kampagne_220x420_75-15831.png

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

133

Optimér rendering


134

8)

Prioritise visible content

135

Optimér rendering:Prioritize visible content


136



137



138



139

9)

Avoid 3. party SPOF (scripts)

140

DNS

Load Balancers App Servers

Read-only DB

Master DB

Optimér rendering:Avoid 3. party SPOF (scripts)


141



142



143



144



145



DEMO

Kilde: http://jyllands-posten.dk/politik/ECE6261207/radiotavshed-om-ministers-afbrudte-rejse/

146



147


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

148



149



Facebook buttons == 270 Kb!

Parametre:

u : Sidens URL

150



151



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

152



153


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

154

Hvor gode er I?

155

2 2

156

10)

Eleminate software latency

157


Kilde: http://venturebeat.com/2013/09/19/apples-iphone-5-touchscreen-is-2-5-times-faster-than-android-devices/

158

Fast-Click


300 ms. forsinkelse

Dobbelt-klik

Løsningen findes!

159

Fast-Click


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

160

http://kortlink.dk/d6h4

161

11) ekstra

Turn Off Autocorrect and Autocapitalize

162


163

164


165

Opsummering

Domain Sharding 2 2Combinable JavaScripts 2 2Caching 2 2

HTTP Compression 1½ 2½3. part SPOF 2 2

166

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

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 %

175

ResponsiveWeb

Design (RWD)

176

Det her er ikke internettet

177

Det her er internettet

178

Det her bliver internettet

179

Adgang fra flere forskellige enheder

180

181

”If your website is 15mb, it’s not HTML5 or RWD. It’s

stupid”- Christian Heilmann

182

Er RWD sites mindre på mobile enheder?

Kilde: http://www.guypo.com/uncategorized/real-world-rwd-performance-take-2/

183



184



185

Hvilke udfordringer findes der ifm. RWD?

Download og gem væk

Download og formindsk

Overdreven brug af DOM


Responsive Images

186

Fremtiden inden for web performance

Hvor er vi på vej hen?

187

”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/


188

• Fokus på forespørgsler

• Fokus på websites indhold

• Nedsættes!

• Ikke svartider og tilgængelighed



189


• Sætter et budget

• Må ikke overskrides

• Antal forespørgsler og websites indhold


190


Eksempel:Instantalarm.dk

Antal forespørgsler: 30

Websites indhold: 350 KB


191


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


192

Og husk nu…

193

Performance optimering som en løbende process

194

Performance optimering - som en løbende proces

195


196

Opsummering

• Fokus på forespørgsler og websites indhold

Tak for i dag!

Tobias Borg Petersen,

mail: [email protected]: digicure.dk

198

Technology

Digicure seminar | Mobil web performance optimering