the need for speed
DESCRIPTION
Het belang van laadsnelheid van webwinkels. Niet alleen voor de zoekmachines maar ook voor de bezoekers. Een langzame webwinkel heeft een negatieve lange termijn effect op de bezoeker. Een erg interessante Friday Afternoon Session (FAS) door Johan Terpstra.TRANSCRIPT
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?