Need for speed realhosting - occhio seminar

697
-1

Published on

Need for speed - Presentatie over optimalisatie van de webserver en de frontend.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
697
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Need for speed realhosting - occhio seminar

  1. 1. need for speed het belang van een snelle website donderdag 3 juni 2010
  2. 2. www.slideshare.net/occhionl donderdag 3 juni 2010
  3. 3. inhoud waarom? is een snelle website belangrijk? hoe? werkt het opvragen van een webpagina? wat? kun je doen aan optimalisatie? donderdag 3 juni 2010
  4. 4. waarom een snelle website? donderdag 3 juni 2010
  5. 5. waarom een snelle website? • steeds meer (online) concurrentie, dus noodzaak tot onderscheiden • trage websites leiden tot omzetverlies (directe transacties) maar ook indirecte imagoschade • herhaalbestellingen belangrijk voor winstgevendheid van e-commerce • bezoeker verwacht steeds meer donderdag 3 juni 2010
  6. 6. hoge verwachtingen recent onderzoek van forrester (2009): • 47 % verwacht laden binnen 2 seconden • 40% klikt weg na 3 seconden • 75% keert vermoedelijk niet terug donderdag 3 juni 2010
  7. 7. hoge verwachtingen in cijfers donderdag 3 juni 2010
  8. 8. hoe werkt een websitebezoek? donderdag 3 juni 2010
  9. 9. mogelijkheden grofweg zijn er de volgende mogelijkheden: • sneller gegevens verwerken • meer verwerkingskracht • efficientere broncode • minder gegevens naar de browser sturen • minder transacties met webserver • perceptie bezoeker verbeteren donderdag 3 juni 2010
  10. 10. goede hosting is basisvoorwaarde donderdag 3 juni 2010
  11. 11. wat realhosting doet realhosting doet concreet om uw website te versnellen: • ruim voldoende capaciteit in netwerk (6,2 gigabit op dit moment) • niet te veel sites per server • fijnafstemming van web- & database server (optimale caching, simultane verbindingen) donderdag 3 juni 2010
  12. 12. managed hosting • uw site altijd op eigen, onafhankelijke server • analyse, rapportage en maatwerk advies • compressie van data • optimalisatie van browsercaching • php optimalisatie (eaccelerator, xcache, apc) • content delivery network donderdag 3 juni 2010
  13. 13. content delivery network geografische locatie van belang voor snelheid donderdag 3 juni 2010
  14. 14. occhio web development en internet communicatie donderdag 3 juni 2010
  15. 15. wie we zijn donderdag 3 juni 2010
  16. 16. achtergrond • team van circa 8 professionals, 10 jaar ervaring • allround - ‘full service’ • gespecialiseerd in usability en techniek • oebe rombout, technical director, oebe@occhio.nl donderdag 3 juni 2010
  17. 17. focusgebieden • semantisch HTML, zoekmachine optimalisatie • social media integratie • solide websites • web ontwikkeling voor mobiel donderdag 3 juni 2010
  18. 18. donderdag 3 juni 2010
  19. 19. donderdag 3 juni 2010
  20. 20. donderdag 3 juni 2010
  21. 21. wat kun je doen aan optimalisatie? donderdag 3 juni 2010
  22. 22. wat doen aan optimalisatie • server optimalisatie • code optimalisatie • front end optimalisatie donderdag 3 juni 2010
  23. 23. front end optimalisatie wat gaan we behandelen? • yslow / google page speed • image sprites • css compressie • cookie free domains • ajax donderdag 3 juni 2010
  24. 24. yslow / google page speed donderdag 3 juni 2010
  25. 25. yslow / google page speed • tools om de snelheid van je pagina te meten • add-ons voor de firebug add-on van firefox firebug net: http requests (bestanden) inzien donderdag 3 juni 2010
  26. 26. yslow / google page speed • tools om de snelheid van je pagina te meten • add-ons voor de firebug add-on van firefox yslow: snelheidstest donderdag 3 juni 2010
  27. 27. image sprites donderdag 3 juni 2010
  28. 28. image sprites 15 losse afbeeldingen 1 afbeelding = 15 requests = 1 request donderdag 3 juni 2010
  29. 29. image sprites • verlagen http-requests • bestand wordt iets groter • maar weegt op tegen de requests donderdag 3 juni 2010
  30. 30. image sprites tips • 20 x 20 px grid • bullets in aparte sprite • commentaar in je sprite-afbeelding, • bv ‘default’, ‘hover’, ‘active’ bij buttons. • bewaar het bronbestand (bv de .psd) • anti-cache: sprite.png?v=2 donderdag 3 juni 2010
  31. 31. image sprites donderdag 3 juni 2010
  32. 32. image sprites donderdag 3 juni 2010
  33. 33. image sprites donderdag 3 juni 2010
  34. 34. compressie donderdag 3 juni 2010
  35. 35. css / js compressie • verlagen http-requests • meerdere bestanden samenvoegen (php) • verkleinen bestandsgrootte • verwijderen spaties en commentaar (php) • gzip'en (php) donderdag 3 juni 2010
  36. 36. css / js compressie tips • debug modus • anti-cache wanneer nodig • combined.css.php?lm=20100531-161424 • last-modified-checker donderdag 3 juni 2010
  37. 37. cookie free domains donderdag 3 juni 2010
  38. 38. cookie free domains • bij elke http-request worden de cookies meegezonden • ook bij afbeeldingen • bij javascript • en css • gebruik een apart subdomein bijv. static.occhio.nl donderdag 3 juni 2010
  39. 39. cookie free domains tip • maak in plesk een domain alias aan • static.occhio.nl = www.occhio.nl • website: http://www.occhio.nl • afb/css/js: http://static.occhio.nl/main.css donderdag 3 juni 2010
  40. 40. ajax donderdag 3 juni 2010
  41. 41. reëel vs. ervaren: ajax • lazyloading met ajax later inladen paginadelen donderdag 3 juni 2010
  42. 42. reëel vs. ervaren: ajax donderdag 3 juni 2010
  43. 43. reëel vs. ervaren: ajax lazyloading met ajax later inladen paginadelen • ervaring is sneller omdat belangrijke content er snel staat • zoekmachine-technisch minder goed • realtime webservices zijn soms traag, dus altijd lazyloading toepassen donderdag 3 juni 2010
  44. 44. reëel vs. ervaren: ajax content na klik na klik wordt slechts deel pagina wordt opnieuw ingeladen • zoekresultaten • inhoud tabjes • zoekmachine-technisch minder goed donderdag 3 juni 2010
  45. 45. reëel vs. ervaren: ajax tip • gebruik loading-icoon voor de flow donderdag 3 juni 2010
  46. 46. yslow • make fewer http requests • use a content delivery network (cdn) • compress components with gzip • put css at top • put javascript at bottom • avoid css expressions • make javascript and css external • avoid url redirects • remove duplicate javascript and css • configure entity tags (ETags) • make ajax cacheable • reduce cookie size • use cookie-free domains donderdag 3 juni 2010
  47. 47. conclusie donderdag 3 juni 2010
  48. 48. conclusie Een geoptimaliseerde website... ... verlaagt de belasting op de webserver ... verlaagt (vaak) de datatraffic op de webserver ... verhoogt de gebruiksvriendelijkheid en ... verhoogt de sales donderdag 3 juni 2010
  49. 49. download de presentatie www.slideshare.net/occhionl info@occhio.nl www.occhio.nl twitter.com/occhionl Laat je gegevens bij ons achter voor de css compressie tool donderdag 3 juni 2010
  50. 50. meer info: yslow donderdag 3 juni 2010
  51. 51. meer info: occhio image sprite donderdag 3 juni 2010
  52. 52. meer info: occhio image sprite donderdag 3 juni 2010
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×