The Need For Speed

1. The Need for Speed Johan Terpstra FAS 25/03/2011 [email_address] Turbo-charge je website...

2. Wie is Johan Terpstra? <ul><ul><li>29 Jarige Fries te Londen </li></ul></ul><ul><ul><li>Operations Director @ Intus Healthcare </li></ul></ul><ul><ul><li>In E-Commerce sinds 2003 </li></ul></ul><ul><ul><li>60,000+ Transacties </li></ul></ul><ul><ul><li>Paar Miljoen Omzet </li></ul></ul><ul><ul><li>4 E-Commerce Systemen </li></ul></ul><ul><ul><li>17 Online Winkels </li></ul></ul><ul><ul><li>Vele FOSS Code Contributies </li></ul></ul><ul><ul><li>100,000+ Regels PHP </li></ul></ul><ul><ul><li>Brin & Page Rijk Gemaakt </li></ul></ul><ul><ul><li>Door klanten met de dood bedreigd </li></ul></ul><ul><ul><li>Maar ook klanten hun leven/huwelijk/carriere gered! </li></ul></ul>Heeft hij hier wel verstand van?

3. Programma <ul><li>Waarom is websitesnelheid belangrijk? Feiten & case studies. </li></ul><ul><li>Hoe werkt het internet eigenlijk? Wat maakt een webpagina? </li></ul><ul><li>Hoe kun je meten hoe snel je webpagina's zijn? </li></ul><ul><li> </li></ul><ul><li>Wat beinvloedt die snelheid? </li></ul><ul><li>Hoe verbeteren we die snelheid? </li></ul><ul><li>Discussie / kliniek. </li></ul><ul><li>Weekend! </li></ul>

4. 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!

5. Snelheid Toegang tot Informatie <ul><li>Vroeger: </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>Img: Kevin O'Mara @ Flickr </li></ul><ul><li>5-10 Jaar Geleden </li></ul><ul><li>Img: mpclemens @ Flickr </li></ul>

6. Snelheid Toegang tot Informatie <ul><li>Nu: </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>Img: www.seomoves.org </li></ul><ul><li>2020 ??? </li></ul><ul><li> </li></ul><ul><li>Img: Minority Report - 20th Century Fox </li></ul>

7. 1 GB Downloaden http://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%

8. Grootte Webpagina <ul><li>Gemiddeld 320kb Volgens Google 1 </li></ul><ul><li> </li></ul><ul><li>Vervijfvoudigd tussen 2003 en 2009 2 </li></ul><ul><li> </li></ul><ul><li>1. http://code.google.com/speed/articles/web-metrics.html </li></ul><ul><li>2. http://www.websiteoptimization.com/speed/tweak/average-web-page/ </li></ul><ul><li> </li></ul><ul><li> </li></ul>

9. Trend <ul><li>Straks ligt het aan de internetverbinding niet meer </li></ul><ul><li>Bottleneck is hardware, zowel server als client-side </li></ul><ul><li>Server kan het zo snel niet leveren </li></ul><ul><li>Client browser kan het zo snel niet renderen </li></ul><ul><li>Slimme pagina-opbouw kan daarbij helpen! </li></ul>

10. Waarom snelheid? Om bezoekers aan te trekken!

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

12. Snelheid als SEO Factor <ul><ul><li>Ondergeschikt aan relevantie </li></ul></ul><ul><ul><li>Toen slechts 1% van US queries </li></ul></ul><ul><ul><li>Niet duidelijk in hoeverre dat uitgebreid is </li></ul></ul><ul><ul><li>Meer een teken van wat komen gaat </li></ul></ul><ul><ul><li>Kwaliteit is een ervaring </li></ul></ul><ul><li> </li></ul><ul><li> Ook indirect effect, meer links naar je site = betere SEO </li></ul><ul><li> </li></ul><ul><li>Allicht ooit onderdeel van AdWords Quality Score </li></ul>

13. Snelheid & Verwachtingen <ul><li>Oftewel snelheid vs "het laatje" </li></ul><ul><li>Snelheid van pagina's heeft een directe invloed op bezoekersgedrag </li></ul><ul><li>Site eenmaal gevonden, verwacht men een rappe ervaring </li></ul><ul><li>Mensen worden steeds ongeduldiger! </li></ul>

14. Onderzoek naar Snelheid <ul><li>Bing: </li></ul><ul><li> 2 sec. vertraging = 1.8% minder queries per user </li></ul><ul><li> Ook 4.3% minder omzet per user </li></ul><ul><li>Google: </li></ul><ul><li> 400ms vertraging = -0.59% queries per user </li></ul><ul><li> Na verwijderen vertraging nog steeds -0.21% lange termijn effect </li></ul><ul><li>AOL: </li></ul><ul><li> 7.5 Pagina's/bezoek voor top 10% snelle sites </li></ul><ul><li> 6 P/b voor sub-top </li></ul><ul><li> 5 P/b voor de langzaamste </li></ul><ul><li>Shopzilla: </li></ul><ul><li> Van 7 sec naar 2 sec = +25% pageviews </li></ul><ul><li> En +7-12% Omzet </li></ul><ul><li> En -50% Hardware kosten </li></ul><ul><li>Bron: http://radar.oreilly.com/2009/07/velocity-making-your-site-fast.html </li></ul>

15. Onderzoek naar Snelheid <ul><li>Akamai 2009 </li></ul><ul><li> </li></ul><ul><li>2 Seconden is het nieuwe tolerantieniveau (was 4) </li></ul><ul><li>40% van bezoekers tolereren 3 seconden niet in online winkel </li></ul><ul><li>79% komt niet weer terug na langzame ervaring </li></ul><ul><li>27% komt ook niet meer naar fysieke winkel </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>Bron: http://www.akamai.com/html/about/press/releases/2009/press_091409.html </li></ul>

16. Tolereren jullie bezoekers jullie snelheid? Laadt elke pagina onder 2 seconden?

17. Snelheid Stimuleert "Ontdekking" <ul><li>Een snelle site moedigt aan tot rondklikken </li></ul><ul><li>Geen vertraging = geen straf voor avontuurlijk zijn </li></ul><ul><li>Aangemoedigd door snelheid bezoekt men meer pagina's </li></ul><ul><li>Terug-knop is een vertrouwd redmiddel </li></ul><ul><li>Meer rondklikken = meer exposure aan producten/diensten/boodschap </li></ul><ul><li>Meer pagina's gezien = grotere winkelwagenwaarde </li></ul>

18. Snelheid & Conversie <ul><li>Amazon </li></ul><ul><li>100ms Vertraging verlaagt omzet met 1% </li></ul><ul><li>Omzet is ruim 10 miljard USD </li></ul><ul><li>100ms Vertraging = 117 miljoen dollar minder! </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>Bron: http://www.svennerberg.com/2008/12/page-load-times-vs-conversion-rates/ </li></ul>

19. Snelheid & Conversie <ul><li>Mozilla FireFox </li></ul><ul><li>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. </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>Bron: http://blog.mozilla.com/metrics/2010/04/05/firefox-page-load-speed-–-part-ii/ </li></ul>

20. Snelheid & Conversie <ul><li>BuyOnlineNow.com </li></ul><ul><li> </li></ul><ul><ul><li>Laadtijd verbeterd met 69% </li></ul></ul><ul><ul><li>Tijd-tot-Renderen verbeterd met 76% </li></ul></ul><ul><ul><li>Site search snelheid verbeterd met 23% </li></ul></ul><ul><li> </li></ul><ul><li>Resultaat: </li></ul><ul><ul><li>Bounce rate omlaag 13.4% </li></ul></ul><ul><ul><li>Conversie omhoog 1.41% </li></ul></ul><ul><ul><li>Gemiddele waarde bestelling omhoog 8.39% </li></ul></ul><ul><ul><li>Producten verkocht per bestelling omhoog 9.55% </li></ul></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>Bron: http://www.aptimize.com/customers/buy-online-now/case-study </li></ul>

21. Snelheid dus toch belangrijk! <ul><li>Om bezoekers aan te trekken </li></ul><ul><li>Om bezoekers te behouden (bounce rate) </li></ul><ul><li>Om bezoekers van (meer van) </li></ul><ul><li>hun geld te scheiden! </li></ul><ul><li>Om bezoekers loyaal te maken </li></ul><ul><li>Om hosting kosten te besparen </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>Img: http://www.zeta.net/search-engine-marketing/speed-up-website-ranking.html </li></ul>

22. Je site moet dus sneller... Waar beginnen we?

23. Hoe werkt het internet eigenlijk? Client Server ISP

24. 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?

25. 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.88 Bedankt! Daar kan ik wat mee... GET 62.197.130.88

26. 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...

27. 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...

28. 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.

29. 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.

30. 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...

31. 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.

32. Hoe meet je al die stappen? Meten = Weten

33. Webpagina Laadtijd Meten <ul><ul><li>YSlow </li></ul></ul><ul><ul><li>Google Page Speed </li></ul></ul><ul><ul><li>Google Webmaster Tools </li></ul></ul><ul><ul><li>MageSpeedTest.com </li></ul></ul><ul><ul><li>Apache AB </li></ul></ul><ul><ul><li>Siege </li></ul></ul><ul><li> </li></ul><ul><li>Zie ook: </li></ul><ul><li>http://code.google.com/speed/tools.html </li></ul>

34. Yahoo! YSlow

35. YSlow Grading

36. YSlow Components

37. YSlow Statistics

38. YSlow Tools

39. YSlow Analyse & Tools <ul><ul><li>Een complete tool </li></ul></ul><ul><ul><li>Gratis </li></ul></ul><ul><ul><li>"Before & After" Vergelijking </li></ul></ul><ul><ul><li>Gedetailleerd </li></ul></ul><ul><ul><li>Veelomvattend </li></ul></ul><ul><ul><li>Met uitgebreide tips en uitleg </li></ul></ul><ul><ul><li>Tools om zaken meteen te verbeteren </li></ul></ul><ul><ul><li>Niet zo zeer een snelheidsmeting, alleen totaal </li></ul></ul>

40. WebPageTest.org

41. WebPageTest Waterfall View

42. WebPageTest Checklist

43. WebPageTest.org <ul><ul><li>Uitgebreid </li></ul></ul><ul><ul><li>Gedetailleerd </li></ul></ul><ul><ul><li>Gratis </li></ul></ul><ul><ul><li>Visueel </li></ul></ul><ul><ul><li>Duidelijk Zichtbaar in 1 Oogopslag </li></ul></ul><ul><ul><li>Zie Bottleneck Meteen </li></ul></ul><ul><ul><li>Per Onderdeel Snelheid Gemeten </li></ul></ul>

44. Google Webmaster Tools Labs

45. Google Webmaster Tools <ul><ul><li>Historie </li></ul></ul><ul><ul><li>Zelf Data Bijhouden - Voor & Na </li></ul></ul><ul><ul><li>Wat Google Ziet/Ervaart = SEO </li></ul></ul>

46. Apache AB Benchmark

47. MageSpeedTest.com / Siege

48. Wat Beinvloedt de Snelheid? Een groot aantal factoren!

49. Server-Side Hosting <ul><ul><li>Hardware Webserver </li></ul></ul><ul><ul><li>Hardware DB Server </li></ul></ul><ul><ul><li>Networking </li></ul></ul><ul><ul><li>Firewall </li></ul></ul><ul><ul><li>RAM </li></ul></ul><ul><ul><li>HD </li></ul></ul><ul><ul><li>Operating System </li></ul></ul><ul><ul><li>Webserver </li></ul></ul><ul><ul><li>Bandwidth </li></ul></ul>

50. Server-Side Application Layer <ul><ul><li>Server-side Code (PHP) </li></ul></ul><ul><ul><li>Output HTML/JS/CSS Code </li></ul></ul><ul><ul><li>DB Queries </li></ul></ul><ul><ul><li>Includes = File Reads </li></ul></ul>

51. Client-Side <ul><ul><li>Internetverbinding / ISP </li></ul></ul><ul><ul><li>Browser </li></ul></ul><ul><ul><li>Hardware PC </li></ul></ul><ul><ul><li>Firewall </li></ul></ul><ul><ul><li>Programma's Open </li></ul></ul>

52. Opmaak Webpagina HTML, CSS, JS, Images

53. Minder HTTP Requests

54. JS/CSS Combineren & Minifyen <ul><li>Heel Simpel: </li></ul><ul><li> </li></ul><ul><ul><li>Samenvoegen wat samen kan = Minder Requests </li></ul></ul><ul><ul><li>Spaties & Enters Verwijderen = Minder Bytes </li></ul></ul><ul><li> </li></ul><ul><li>Tools als YSlow en vele anderen die dit automatisch doen </li></ul>

55. CSS Sprites <ul><li>Maak 1 plaatje en splits deze met CSS = 1 HTTP Request </li></ul>Net als Image Maps

56. Content Delivery Network Breng kopies van files dichter bij bezoekers

57. GZip Compressie

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

59. Pre-Fetching Intelligent Vooruitdenken

60. Pre-Fetching <ul><ul><li>Je Homepage laadt in 3 seconden </li></ul></ul><ul><ul><li>Na 1 seconde kan men al beginnen met lezen </li></ul></ul><ul><ul><li>Men leest gemiddeld voor 5 seconden </li></ul></ul><ul><ul><li>De browser is 3 seconden "Idle" </li></ul></ul><ul><li> </li></ul><ul><li>1: Laden, 2: Laden & Lezen, 3: Laden & Lezen, 4: Lezen, 5: Lezen, 6: Lezen; 4, 5 & 6 niks te laden </li></ul><ul><li>Gebruik die 3 seconden om data vooruit the downloaden! </li></ul><ul><li>70% Bezoekt pagina B na homepage = imgs pre-fetchen... </li></ul>

61. Pre-Fetching Data <ul><li>FireFox: </li></ul><ul><li> </li></ul><ul><li> <link rel="prefetch" href="/images/bigpic_page_b.jpeg"> </li></ul><ul><li> </li></ul><ul><li>Zodra FireFox stationair draait, gaat hij prefetch links downloaden. </li></ul><ul><li> </li></ul><ul><li>Zie ook: </li></ul><ul><li> https://developer.mozilla.org/en/Link_prefetching_FAQ </li></ul><ul><li> http://en.wikipedia.org/wiki/Link_prefetching </li></ul>

62. Pre-Fetching Data <ul><li>Cross-Browser met JS </li></ul><ul><li>Bron: http://www.4thkingdom.com/public/computers/789073-web-site-speed-prefetching-images-css/view-post.html </li></ul>

63. Pre-Fetching Data <ul><li>Met JQuery: </li></ul><ul><li>Via: http://www.devarticles.com/c/a/JavaScript/Using-jQuery-to-Preload-Images-with-CSS-and-JavaScript/2/ </li></ul>

64. Pre-Fetching Hostname Resolution <ul><li>Internet Explorer 9 biedt "Page-Initiated Pre-Resolution" </li></ul><ul><li>Geen data, maar DNS. Vooral handig voor externe src files, objecten. </li></ul>

65. Pre-Fetching Conclusie <ul><ul><li>Handig om populaire vervolgpagina's mee te versnellen </li></ul></ul><ul><ul><li>FireFox kan gemakkelijk data pre-fetchen </li></ul></ul><ul><ul><li>IE9 DNS pre-fetchen </li></ul></ul><ul><li> </li></ul><ul><li>IE9 +/- 2% (Zal snel groeien, IE6 daalt al snel 20% p/m) </li></ul><ul><li>FireFox 22% </li></ul><ul><li>Totaal browsermarkt = 24% met een vorm van pre-fetching. </li></ul><ul><li>Met JS methode = 99%. </li></ul>

66. Conclusie <ul><ul><li>Nog maar het topje van de ijsberg besproken </li></ul></ul><ul><ul><li>Veel gratis en goeie tools </li></ul></ul><ul><ul><li>Direct effect op omzet </li></ul></ul><ul><ul><li>Bijna alles kan sneller! </li></ul></ul><ul><ul><li>Vragen? </li></ul></ul>

The Need For Speed

Esté a ler uma amostra.

Confira estes a seguir

The Need For Speed

Mais Conteúdo rRelacionado

Quem viu também gostou (7)

Semelhante a The Need For Speed (20)

Mais de Tjitte Folkertsma (12)

Mais recentes (20)