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

@_tobibp

tbp@digicure.dk

Webperformance.nu/blog

Performancekonsulent i Digicure

Front End udvikler (.NET)

dk.linkedin.com/in/tobiasbp

www.digicure.dk

• 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

• 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’

Fokus på web performance

Alt bliver hurtigere

Og brugerne bliver mere og mere utålmodige

Websites bliver langsommere og langsommere…

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

Flash1%

CSS5% HTML

JavaScript20%

Andet4%Billeder

Flash2%

CSS4% HTML

JavaScript22%

Andet3%

Billeder64%

Danske webshops Danske kommuner

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

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

• 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

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)

‘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

De besøgendes forventninger

Højere krav til performance

2006 = <4 sekunder

2009 = <2 sekunder

2013 = <1 sekund

1960 = <10 sekunder

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

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

Det mobile internet

Fremtiden indenfor web performance

Fra desktop PC til..

Fremtiden indenfor web performance

Mobil performance

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

Land Mobile-only brugere

Egypten 70 %

Indien 59 %

Sydafrika 57 %

Indonesien 44 %

USA 25 %

Kilde: onDevice Research

”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

Er de mobile brugere mere tålmodige?

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

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

Performance er en fundamental del af brugeroplevelsen på websitet!

Brugeroplevelsen

”Facebook sucks!”

• Intuitive navigering

• Timelines elegance

• Svartiden!

Brugeroplevelsen

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/

Performance bør være højt prioteret

Båndbredde og svartider

• Båndredde og latency

• Båndbredde == “Tykkelsen”

• Latency == Transporttiden

Latency

Hvad kan optimeres på dit website

Fra Holland Fra Australien

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

Belastning på radiomast

Vejret

Retning mod radiomast

Afstand

4G Netværket - ’Under the hood’

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

LTE/4G 3G

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

Forbundet < 5 ms <50 ms

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

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

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

• 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

Speedtest.net

Speedtest app (Android + iOS)

Optimering af mobile websites

Hvordan indlæserbrowseren et website

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

Ekstra info:

• CSS filer• JavaScript filer

Dit mobile websites svartider skal være hurtigere!

Hvor skal jeg fokusere mine optimeringer?

Dit website skal på slankekur..

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

• Reducering af antal HTTP forespørgsler

• Reducering af website indholdet

• Priotér indholdet

Optimér websitet – Køb ikke mere hardware

500 kb90 req.

250 kb45 req.

Gør som Seatwave

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

optimering?

Udvælg de rigtige værktøjer

Monitorering

Optimering

Testværktøjer

• Svartider

• Tilgængelighed (desktop + mobil)

• IKKE ping

• Brugernes oplevelse udefra

• 3. part monitorering

Monitorering

Testværktøjer – Web performance

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

Real User Monitoring

_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

Synthetic Monitoring

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

brugerflows• Alarmering• Support• Indtastning af SLA

Synthetic Monitoring+ Real User Monitoring

• 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

Performance optimering

Performance værktøjer

84www.webpagetest.org

85www.webpagetest.org

86Mobitest.akamai.com

87Httpwatch.com

88Google.dk/chrome

89Digicure.dk

90Digicure.dk

91Digicure.dk

Værktøjerne er på

plads!

Udvælg dine testværktøjer

Reducér antalletaf forespørgsler

Domain Sharding

Reducér forespørgsler:Domain Sharding

• 6 åbne forbindelse ad gangen

• Per domæne

• Statiske komponenter

• Cookie-less domæner

Hvor gode er I?

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

Hvor gode er I?

Caching (Expire Headers)

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

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

“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

Hvor gode er I?

Content Delivery Network (CDN)

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

• Smart-route teknologi

• Komponenter placeret geografisk tættere på brugeren

• Typisk statiske

Fordele:

• Reducering af trafik

• Større skalérbarhed

www.cloudflare.com

Reducér indhold

Activate HTTP Compression

• 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

Hvor gode er I?

1½ 2½

Minify JavaScript/CSS-files

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

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

Optimise images

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

Reducér indhold:Optimise images - PNG

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 %

Optimér rendering

Prioritise visible content

Optimér rendering:Prioritize visible content

Avoid 3. party SPOF (scripts)

Load Balancers App Servers

Read-only DB

Master DB

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

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

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

Facebook buttons == 270 Kb!

Parametre:

u : Sidens URL

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

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

Hvor gode er I?

Eleminate software latency

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

Fast-Click

300 ms. forsinkelse

Dobbelt-klik

Løsningen findes!

Fast-Click

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

http://kortlink.dk/d6h4

11) ekstra

Turn Off Autocorrect and Autocapitalize

Opsummering

Domain Sharding 2 2Combinable JavaScripts 2 2Caching 2 2

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

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

Perceived Performance vs. Actual Performance

Loading…

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

Loading…

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 %

ResponsiveWeb

Design (RWD)

Det her er ikke internettet

Det her er internettet

Det her bliver internettet

Adgang fra flere forskellige enheder

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

stupid”- Christian Heilmann

Er RWD sites mindre på mobile enheder?

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

Hvilke udfordringer findes der ifm. RWD?

Download og gem væk

Download og formindsk

Overdreven brug af DOM

Responsive Images

Fremtiden inden for web performance

Hvor er vi på vej hen?

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

• Fokus på forespørgsler

• Fokus på websites indhold

• Nedsættes!

• Ikke svartider og tilgængelighed

• Sætter et budget

• Må ikke overskrides

• Antal forespørgsler og websites indhold

Eksempel:Instantalarm.dk

Antal forespørgsler: 30

Websites indhold: 350 KB

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

Og husk nu…

Performance optimering som en løbende process

Performance optimering - som en løbende proces

Opsummering

• Fokus på forespørgsler og websites indhold

Tak for i dag!

Tobias Borg Petersen,

mail: tbp@digicure.dkwww: digicure.dk

Digicure seminar | Mobil web performance optimering

Technology

Transcript of Digicure seminar | Mobil web performance optimering

Statistisk optimering af moniteringsprogrammer på · PDF fileDatablad Titel: Statistisk optimering af moniteringsprogrammer på miljøområdet Undertitel: Eksempler fra NOVA-2003

Optimering av operationsprioritering i ...

Suniweb webbanalys & optimering

[FREMDRIVNINGS OPTIMERING] - Aarhus Maskinmesterskolecampus.aams.dk/pluginfile.php/3581/mod_data/content/4517/Bachelor projekt af Jim...Fremdrivnings optimering Side 7 af 44 Skibet

Optimering av tätorts- och citydistribution med …214918/FULLTEXT… · · 2009-05-06Avdelningen för elektroteknik vid Institutionen för teknik nätnyttomodellen ... Optimering

Produktark Optimering af intern logistik og service

OPTIMERING AV BALKTVÄRSNITT MED AVSEENDE PÅ BÄRFÖRMÅGAlup.lub.lu.se/student-papers/record/3566759/file/3957774.pdf · optimering av balktvÄrsnitt med avseende pÅ bÄrfÖrmÅga.

Perioperativ optimering af akutte højrisiko ... · Perioperativ optimering af akutte højrisiko abdominalkirurgiske patienter Erfaringer med en systematisk tilgang til kvalitetsforbedring

Miljømæssig optimering af termiske oprensningsmetoder

Temperatur optimering

Optimering av Cellkonfiguration och Robotarmssekvensering ...publications.lib.chalmers.se/records/fulltext/219263/219263.pdf · Optimering av Cellkonfiguration och Robotarmssekvensering

OPTIMERING MED PROGRAMMERING - mathivation.org

Digicure seminar | Web Performance Monitorering

Utvärdering och optimering av filtreringstekniker i …...RAPPORT Utvärdering och optimering av filtreringstekniker i reningsverk för att separera skadliga nanopartiklar För Åforsk

Digicure seminar i Jylland | Session 2, web performance optimering

Potentialet i optimering af markvandingsanlæg

Digital optimering - teknologisk.dk optimering.pdf · Side 3 | Digital optimering TEKNOLOGISK INSTITUT Forord Digitalisering, Industri 4.0 og Big Data er buzzwords, der jævnligt

instant@larm workshop | Digicure

Optimering af E-handel - Sælg mere online

Matematik H2 ANALYSE OG OPTIMERING 1999 ... - web.math.ku.dkweb.math.ku.dk/noter/filer/h2.pdf · Matematik H2 ANALYSE OG OPTIMERING 1999 Indhold Talf˝lger, rˆkker og komplekse tal,