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

@_tobibp

tbp@digicure.dk

Webperformance.nu

Performancekonsulent i Digicure

Front End udvikler (.NET)

dk.linkedin.com/in/tobiasbp

www.digicure.dk

• 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

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

Hvorfor optimere web performance?

Websites bliver langsommere og langsommere…

Danske webshops Danske kommuner

Web performanceHvordan står det til i dag?

Kilde: http://www.digicure.dk/performance.html

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

• 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

1.5 seconds == SLOW

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

Web performance – Hvorfor?Search Engine Optimization (SEO)

De besøgendes forventninger

Højere krav til performance

2006 = <4 sekunder

2009 = <2 sekunder

2013 = <1 sekund

1960 = <10 sekunder

Web performance optimering

Båndbredde og svartider

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

Båndredde og latency

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

Fra Danmark

Latency == transporttiden fra A til B

Båndbredde

Fra Danmark

Båndbredde og svartiderFra Danmark Fra Australien

Fra Danmark Fra Australien

Streaming er begrænset af båndbredde

Web browsing er begrænset af latency

Hvordan indlæserbrowseren et website

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

Ekstra info:

• CSS filer• JavaScript filer

Dit websites svartider skal være hurtigere

Hvilke typer værktøjer har man behov for?

Hvilke typer af værktøjer har man behov for?

Udvælg de rigtige værktøjer

Monitorering

Optimering

• Svartider

• Tilgængelighed

• IKKE kun ping

• Brugernes oplevelse udefra

• 3. part monitorering

Monitorering

Testværktøjer – Web performance

Ikke i blinde!

Du kan ikke forbedre det du ikke måler på!

• 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

• Lokalisér potentielle optimeringstiltag

• Udbedre ’flaskehalse’

• Reducér svartider

• Reducér båndbreddeforbrug

• Reducér belastning på it-infrastruktur

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

Værktøjet som bliver benyttet

Værktøjerne er på

plads!

“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

Optimér websitet – Køb ikke mere hardware

500 kb90 req.

250 kb45 req.

Gør som Seatwave

Reducér antalletaf forespørgsler

Top 10 tips og tricks til at øge performance niveauet

Combinable JavaScript/CSS files

• 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

Hvor gode er I?

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?

Reducér forespørgsler:Domain Sharding

www.browserscope.org

Caching (Expire Headers)

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

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

“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

Hvor gode er I?

Reducér indhold

Activate HTTP Compression

• 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

Hvor gode er I?

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

Unoptimized 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:Unoptimized Images - JPEG

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)

JPEG Candidate Images

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 %

High Quality JPEG Image

Reducér indhold:JPEG Candidate Images

• JPEG Quality 100 JPEG Quality 75

• Reducering i størrelse

Ulemper:• Dårligere kvalitet

ImageMagick.org

Optimér rendering

CSS in top / JavaScript at bottom

JavaScript i bunden

JavaScript i toppen

CSS i toppen

Optimér rendering:CSS in top and JavaScript at bottom

Hvor gode er I?

Apply Image Tag Dimensions

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>

11) Ekstra

Prioritize visible content

Optimér rendering:Prioritize visible content

12) – Ekstra

Avoid 3. party SPOF (scripts)

Load Balancers App Servers

Read-only DB

Master DB

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

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?

13) – Ekstra

CDNPerf.com

Optimér rendering:3. Party JavaScript Libraries

www.cdnperf.com

Optimér rendering:3. Party JavaScript Libraries

14) – Ekstra

Embedded YouTubes

Optimér rendering:Embedded YouTubes

www.webperformance.nu

400 KB!!

3 KB!!

Ikke optimeret

Optimeret

Opsummering

Combinable JavaScripts 8 8Domain Sharding 4 12Caching 7 9HTTP Compression 11 5CSS i top / JS i bund 8 83. part SPOF 10 6

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 % --

Og husk nu…

Performance optimering som en løbende proces

Performance optimering - som en løbende proces

Mobil performance optimering

Fremtiden indenfor web performance

Mobil performance

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

Adgang fra flere forskellige enheder

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”

Båndbredde og mobilnetværket

Det mobile netværk

Båndbredde

Latency

Fra Holland Fra Australien

Hvad kan optimeres på dit website

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’

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

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

• 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

Performance optimering

Testværktøjer Mobil performance

Performance værktøjer

Testværktøjer Mobil performance

142www.webpagetest.org

143Mobitest.akamai.com

144Httpwatch.com

145Google.dk/chrome

146Google.dk/chrome

147Google.dk/chrome

148Google.dk/chrome

149Digicure.dk

150Digicure.dk

151Digicure.dk

152Digicure.dk

153Digicure.dk

Optimering af mobile websites

Eleminate software latency

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/

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/

InstantClick.io

Kilde: http://instantclick.io/

kortlink.dk/e9k2

DemoFast-Click

Turn Off Autocorrect and Autocapitalize

HTML5 input typer

<input type=”url”

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

HTML5 input typer

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

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

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

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

Content Delivery Network (CDN)

Når forretningen bliver global

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

Hvor er vi på vej hen?

Højere krav til performance

2006 = <4 sekunder

2009 = <2 sekunder

2013 = <1 sekund

1960 = <10 sekunder

Performance budgettet

”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

• Forespørgsler og indhold skal reduceres

• 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

HTTP 2.0

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

’Streaming’ af data

’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

’Server push’ events

’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

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 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)

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

Gamle vaner skal ud• Domain sharding (Vigtig)• Combinable JavaScript/CSS• Image Spriting• Inlining • Data URIs

HTTP 2.0 eller HTTP 1.1?

Gratis scanning af forside

Tobias Borg Petersen,

mail: tbp@digicure.dkwww: digicure.dk

Hvem er jegTobias Borg Petersen

@_tobibp

tbp@digicure.dk

Webperformance.nu

Performancekonsulent i Digicure

Front End udvikler (.NET)

dk.linkedin.com/in/tobiasbp

Digicure seminar i Jylland | Session 2, web performance optimering

Technology

Optimering av hålltidstabeller vid Normaliseringsugnendu.diva-portal.org/smash/get/diva2:517781/FULLTEXT01.pdf · Optimering av hålltidstabeller vid Normaliseringsugnen Optimization

Suniweb webbanalys & optimering

Speed is Essential for a Great Web Experience (Digicure - Copenhagen)

Optimering af intern værdikæde

Midtbus Jylland A/S - Rejsekatalog 2011

Optimering av befintliga värmeväxlare i …941925/FULLTEXT01.pdfmaskinteknik vid Linnéuniversitetet i Växjö. Detta examensarbete ”Optimering av värmeväxlare” har genomfört

Temperatur optimering

Digicure seminar i Jylland | Session 1, web performance monitorering

Akutlægehelikopter i Jylland - VIVE · Anne Brøcker (ed.) · Susanne Reindahl Rasmussen (ed.) Marie Brandhøj Wiuff · Iben Emilie Christensen Akutlægehelikopter i Jylland Evaluering

OPTIMERING AV BALKTVÄRSNITT MED AVSEENDE PÅ …

Framtidens strålskydd - från optimering till ?

Livscykelanalys och optimering av isoleringstjocklek för

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

MEDIA INFORMATION 2017 - Horisont Gruppen a/shorisontgruppen.dk/.../Medieinformation_SCM_2017_UK.pdf · 2017-11-01 · 10% 38% 17% 16% North Jylland Copenhagen/Sjælland Central Jylland

Optimering av listhantering i telekomapplikation

OPTIMERING AV BALKTVÄRSNITT MED AVSEENDE PÅ BÄRFÖRMÅGA · optimering av balktvÄrsnitt med avseende pÅ bÄrfÖrmÅga. ... optimering av balktvÄrsnitt med avseende pÅ bÄrfÖrmÅga

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

Ovre i Jylland: Diskussionen om nørrejydernes nationale sindelag … · 2016-02-09 · Steen Bo Frandsen Ovre i Jylland: Diskussionen om nørrejydernes nationale sindelag under krigen

Sök optimering/Google