The Need for Speed

Johan Terpstra

FAS 25/03/2011

johan.terpstra@gmail.com

Turbo-charge je website...

Wie is Johan Terpstra?

• 29 Jarige Fries te Londen• Operations Director @ Intus Healthcare• In E-Commerce sinds 2003• 60,000+ Transacties• Paar Miljoen Omzet• 4 E-Commerce Systemen• 17 Online Winkels• Vele FOSS Code Contributies• 100,000+ Regels PHP• Brin & Page Rijk Gemaakt• Door klanten met de dood bedreigd• Maar ook klanten hun leven/huwelijk/carriere gered!

Heeft hij hier wel verstand van?

Programma

Waarom is websitesnelheid belangrijk? Feiten & case studies.

Hoe werkt het internet eigenlijk? Wat maakt een webpagina?

Hoe kun je meten hoe snel je webpagina's zijn? Wat beinvloedt die snelheid?Hoe verbeteren we die snelheid?

Discussie / kliniek.

Weekend!

Waarom snelheid cruciaal is...

Om bezoekers aan te trekken - ranking factor

Om bezoekers te behouden - voldoen aan verwachting

Om bezoekers terug te laten komen - indruk achterlaten

Omdat het kan / een nerd dat fascineert :blush:

= Blije Bezoeker = Geld!

Snelheid Toegang tot InformatieVroeger:

    Img: Kevin O'Mara @ Flickr

5-10 Jaar Geleden

Img: mpclemens @ Flickr

Snelheid Toegang tot InformatieNu:

    Img: www.seomoves.org

2020 ???

 Img: Minority Report - 20th Century Fox

1 GB Downloadenhttp://www.onlyinfographic.com/2010/download-speeds-through-the-years/

1985 308 Dagen 16 Uren 5 Minuten 26 Seconden  .3 kb/s

1990 9 6 13 20 10 kb/s -97%

1995 2 19 1 24 33 kb/s -70%

2000 2 13 20 1,000 kb/s -97%

2005 26 40 5,000 kb/s -80%

2010 1 20 100,000 kb/s -85%

2015 ??? 24 330,000 kb/s -70%

Grootte Webpagina

Gemiddeld 320kb Volgens Google 1

 Vervijfvoudigd tussen 2003 en 2009 2

 1. http://code.google.com/speed/articles/web-metrics.html

2. http://www.websiteoptimization.com/speed/tweak/average-web-page/

 

 

Trend

Straks ligt het aan de internetverbinding niet meer

Bottleneck is hardware, zowel server als client-side

Server kan het zo snel niet leveren

Client browser kan het zo snel niet renderen

Slimme pagina-opbouw kan daarbij helpen!

Waarom snelheid?

Om bezoekers aan te trekken!

Google Aankondiging 9-4-2010http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html

Snelheid als SEO Factor

• Ondergeschikt aan relevantie• Toen slechts 1% van US queries• Niet duidelijk in hoeverre dat uitgebreid is• Meer een teken van wat komen gaat• Kwaliteit is een ervaring

  Ook indirect effect, meer links naar je site = betere SEO Allicht ooit onderdeel van AdWords Quality Score

Snelheid & Verwachtingen

Oftewel snelheid vs "het laatje"

Snelheid van pagina's heeft een directe invloed op bezoekersgedrag

Site eenmaal gevonden, verwacht men een rappe ervaring

Mensen worden steeds ongeduldiger!

Onderzoek naar SnelheidBing:     2 sec. vertraging = 1.8% minder queries per user    Ook 4.3% minder omzet per user

Google:    400ms vertraging = -0.59% queries per user    Na verwijderen vertraging nog steeds -0.21% lange termijn effect

AOL:     7.5 Pagina's/bezoek voor top 10% snelle sites    6 P/b voor sub-top    5 P/b voor de langzaamste

Shopzilla:    Van 7 sec naar 2 sec = +25% pageviews    En +7-12%  Omzet    En -50% Hardware kostenBron: http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html

Onderzoek naar Snelheid

Akamai 2009 2 Seconden is het nieuwe tolerantieniveau (was 4)40% van bezoekers tolereren 3 seconden niet in online winkel

79% komt niet weer terug na langzame ervaring

27% komt ook niet meer naar fysieke winkel

        Bron: http://www.akamai.com/html/about/press/releases/2009/press_091409.html

Tolereren jullie bezoekers jullie snelheid?

Laadt elke pagina onder 2 seconden?

Snelheid Stimuleert "Ontdekking"

Een snelle site moedigt aan tot rondklikken

Geen vertraging = geen straf voor avontuurlijk zijn

Aangemoedigd door snelheid bezoekt men meer pagina's

Terug-knop is een vertrouwd redmiddel

Meer rondklikken = meer exposure aan producten/diensten/boodschap

Meer pagina's gezien = grotere winkelwagenwaarde

Snelheid & Conversie

Amazon

100ms Vertraging verlaagt omzet met 1%

Omzet is ruim 10 miljard USD

100ms Vertraging = 117 miljoen dollar minder!

           Bron: http://www.svennerberg.com/2008/12/page-load-times-vs-conversion-rates/

Snelheid & Conversie

Mozilla FireFox

Op Download FireFox pagina verhoogde Mozilla conversie met 15.4% door 2.2 seconden van de laadtijd af te halen. Met hun bezoekersaantallen betekent dat 60m meer downloads per jaar.

               Bron: http://blog.mozilla.com/metrics/2010/04/05/firefox-page-load-speed-–-part-ii/

Snelheid & Conversie

BuyOnlineNow.com • Laadtijd verbeterd met 69% • Tijd-tot-Renderen verbeterd met 76%• Site search snelheid verbeterd met 23%

 Resultaat:• Bounce rate omlaag 13.4%• Conversie omhoog 1.41%• Gemiddele waarde bestelling omhoog 8.39%• Producten verkocht per bestelling omhoog 9.55%

  Bron:  http://www.aptimize.com/customers/buy-online-now/case-study

Snelheid dus toch belangrijk!

Om bezoekers aan te trekken

Om bezoekers te behouden (bounce rate)

Om bezoekers van (meer van) hun geld te scheiden!

Om bezoekers loyaal te maken

Om hosting kosten te besparen

       Img: http://www.zeta.net/search-engine-marketing/speed-up-website-ranking.html

Je site moet dus sneller...

Waar beginnen we?

Hoe werkt het internet eigenlijk?

Client

Server

ISP

Je vraagt een webpagina op...

Met de ISP...Hoe kan ik u helpen?

Hallo, met FireFox van 84.53.123.228 ik ben op zoek naar www.mediact.nl, mag ik daar een kopietje van?

DNS Komt Eerst - Waar is wat?

Jawel, even kijken hoor, wij werken alleen maar met nummers dus ff 

mediact's IP adres opzoeken... 

62.197.130.88Bedankt! Daar kan ik wat mee... GET 62.197.130.88

Firewall zegt OK, OS gaat Webserver zoeken

Ja hallo, met de firewall van MediaCT's server... Wie wil dit allemaal dan wel niet weten? Oh, 84.53.123.228, dat mag in dit geval. Kom maar binnen!

Ja hallo, met de OS van de server. Ik ben lekker up to date dus ik zal dit

ff snel regelen voor je! Even kijken of de web server draait

en luistert op port 80...

Apache Webserver Doet Ook Mee

Ja, Apache hier... Ik sta niet bekend als de snelste dus neem me niet kwalijk, ik zoek even op of er 

een index html of PHP pagina is nadat ik de virtual domain gemapped heb naar de juiste doc root. Gevonden! Even

kijken wat htaccess zegt trouwens, OK niks speciaals, ik ga de file opvragen. Eventjes wachten tot OS de harde schijf aan kan sturen om die file te vinden en in te lezen. Was het maar

een SSD! Daar issie al, het is een PHP file, lijkt van Joomla te zijn, zal ff kijken wat 

Joomla hier van zegt...

Joomla Praat Met MySQL Database

Ja PHP applicatie Joomla hier, ik zal even kijken wat we precies met deze pagina in gedachten hadden, vraag ff rond

aan de verscheidene modules of zij nog input hebben en ik neem even contact op

met de database met wat vraagjes...

MySQL database hier, dag Joomla, jij weer? Nee, die

homepage is niet veranderd, hier heb je de tekst weer.

Webserver Brengt Alles Samen

Bedankt, ik geef het door. Er zijn ook nog wat PHP includes, zal ff de OS vragen of hij die kan vinden op de

HD. Ja, ff inlezen, OK, wat extra functionaliteit, ik breng het allemaal

samen in 1 makkelijk document, klaar, downloaden maar...

FireFox hier, ik trek hem binnen hoor. Heb hem, even kijken of dit het is of dat er nog meer requests gemaakt moeten worden... Ja dus... JS, CSS, plaatjes, laten we

even kijken of die er ook allemaal zijn, dan breng ik het allemaal samen, ga ik het zo renderen 

en laat ik het geheel mooi zien.

Alles Herhaalt Zich; DNS, GET, Firewall, OS, Webserver

CSS, JS, Images, Cobrowser, Google Analytics, ff kijken of we die al in

de cache hadden en zo ja, of we die wel mogen hergebruiken gezien de datum

vandaag. Geen cache, dus vers binnenhalen...

Eindelijk, Alles Is Binnen!

OK ik heb de broncode, bits en bytes van dit alles, ga het nu via die

instructies natekenen voor je. Zal meteen ff een kopietje van alle onderdelen in de cache stoppen, mocht je hier later weer

komen dan skippen we voorgaande stappen.

Hoe meet je al die stappen?

Meten = Weten

Webpagina Laadtijd Meten

• YSlow• Google Page Speed• Google Webmaster Tools• MageSpeedTest.com• Apache AB• Siege

 Zie ook:http://code.google.com/speed/tools.html

Yahoo! YSlow

YSlow Grading

YSlow Components

YSlow Statistics

YSlow Tools

YSlow Analyse & Tools

• Een complete tool• Gratis• "Before & After" Vergelijking• Gedetailleerd• Veelomvattend • Met uitgebreide tips en uitleg• Tools om zaken meteen te verbeteren• Niet zo zeer een snelheidsmeting, alleen totaal

WebPageTest.org

WebPageTest Waterfall View

WebPageTest Checklist

WebPageTest.org

• Uitgebreid• Gedetailleerd• Gratis• Visueel• Duidelijk Zichtbaar in 1 Oogopslag• Zie Bottleneck Meteen• Per Onderdeel Snelheid Gemeten

Google Webmaster Tools Labs

Google Webmaster Tools

• Historie• Zelf Data Bijhouden - Voor & Na• Wat Google Ziet/Ervaart = SEO

Apache AB Benchmark

MageSpeedTest.com / Siege

Wat Beinvloedt de Snelheid?

Een groot aantal factoren!

Server-Side Hosting

• Hardware Webserver• Hardware DB Server• Networking• Firewall• RAM• HD• Operating System• Webserver• Bandwidth

Server-Side Application Layer

• Server-side Code (PHP)• Output HTML/JS/CSS Code• DB Queries• Includes = File Reads

Client-Side

• Internetverbinding / ISP• Browser• Hardware PC• Firewall• Programma's Open

Opmaak Webpagina

HTML, CSS, JS, Images

Minder HTTP Requests

JS/CSS Combineren & Minifyen

Heel Simpel: • Samenvoegen wat samen kan = Minder Requests• Spaties & Enters Verwijderen = Minder Bytes

 Tools als YSlow en vele anderen die dit automatisch doen

CSS Sprites

Maak 1 plaatje en splits deze met CSS = 1 HTTP Request

Net als Image Maps

Content Delivery Network

Breng kopies van files dichter bij bezoekers

GZip Compressie

GZip Aanzetten in .htaccessImg: http://css-tricks.com/snippets/htaccess/active-gzip-compression/

Pre-Fetching

Intelligent Vooruitdenken

Pre-Fetching

• Je Homepage laadt in 3 seconden• Na 1 seconde kan men al beginnen met lezen• Men leest gemiddeld voor 5 seconden • De browser is 3 seconden "Idle"

 1: Laden, 2: Laden & Lezen, 3: Laden & Lezen, 4: Lezen, 5: Lezen, 6: Lezen; 4, 5 & 6 niks te laden

Gebruik die 3 seconden om data vooruit the downloaden!

70% Bezoekt pagina B na homepage = imgs pre-fetchen...

Pre-Fetching Data

FireFox:     <link rel="prefetch" href="/images/bigpic_page_b.jpeg">    Zodra FireFox stationair draait, gaat hij prefetch links downloaden. Zie ook:     https://developer.mozilla.org/en/Link_prefetching_FAQ

   http://en.wikipedia.org/wiki/Link_prefetching

Pre-Fetching DataCross-Browser met JSBron: http://www.4thkingdom.com/public/computers/789073-web-site-speed-prefetching-images-css/view-post.html

Pre-Fetching Data

Met JQuery:Via: http://www.devarticles.com/c/a/JavaScript/Using-jQuery-to-Preload-Images-with-CSS-and-JavaScript/2/

Pre-Fetching Hostname Resolution

Internet Explorer 9 biedt "Page-Initiated Pre-Resolution"

Geen data, maar DNS. Vooral handig voor externe src files, objecten.

Pre-Fetching Conclusie

• Handig om populaire vervolgpagina's mee te versnellen• FireFox kan gemakkelijk data pre-fetchen• IE9 DNS pre-fetchen

 IE9 +/- 2% (Zal snel groeien, IE6 daalt al snel 20% p/m) FireFox 22%Totaal browsermarkt = 24% met een vorm van pre-fetching.Met JS methode = 99%.

Conclusie

• Nog maar het topje van de ijsberg besproken• Veel gratis en goeie tools• Direct effect op omzet• Bijna alles kan sneller!• Vragen?