0
need for speed
                         het belang van een snelle website




donderdag 3 juni 2010
www.slideshare.net/occhionl




donderdag 3 juni 2010
inhoud
                        waarom?
                        is een snelle website belangrijk?

                        ...
waarom een
                        snelle website?



donderdag 3 juni 2010
waarom een snelle website?
                •       steeds meer (online) concurrentie, dus

                            noo...
hoge verwachtingen

                        recent onderzoek van forrester (2009):

                •       47 % verwacht ...
hoge verwachtingen

                        in cijfers




donderdag 3 juni 2010
hoe werkt een
                        websitebezoek?



donderdag 3 juni 2010
mogelijkheden
                        grofweg zijn er de volgende mogelijkheden:

                •       sneller gegevens...
goede hosting
                        is basisvoorwaarde



donderdag 3 juni 2010
wat realhosting doet
                        realhosting doet concreet om uw website te versnellen:

                •    ...
managed hosting
                •       uw site altijd op eigen, onafhankelijke server

                •       analyse, r...
content delivery network

                        geografische locatie van belang voor snelheid




donderdag 3 juni 2010
occhio
                        web development en internet communicatie




donderdag 3 juni 2010
wie we zijn



donderdag 3 juni 2010
achtergrond

                •       team van circa 8 professionals, 10 jaar ervaring

                •       allround - ...
focusgebieden


                •       semantisch HTML, zoekmachine optimalisatie

                •       social media i...
donderdag 3 juni 2010
donderdag 3 juni 2010
donderdag 3 juni 2010
wat kun je doen
                        aan optimalisatie?



donderdag 3 juni 2010
wat doen aan optimalisatie

                •       server optimalisatie

                •       code optimalisatie

    ...
front end optimalisatie

                        wat gaan we behandelen?

                •       yslow / google page spee...
yslow / google page speed




donderdag 3 juni 2010
yslow / google page speed
                •       tools om de snelheid van je pagina te meten

                •       add...
yslow / google page speed
                •       tools om de snelheid van je pagina te meten

                •       add...
image sprites




donderdag 3 juni 2010
image sprites




             15 losse afbeeldingen            1 afbeelding
                = 15 requests                ...
image sprites


                •       verlagen http-requests

                •       bestand wordt iets groter

       ...
image sprites

                        tips

                •       20 x 20 px grid

                •       bullets in a...
image sprites




donderdag 3 juni 2010
image sprites




donderdag 3 juni 2010
image sprites




donderdag 3 juni 2010
compressie




donderdag 3 juni 2010
css / js compressie

                •       verlagen http-requests

                         •   meerdere bestanden samen...
css / js compressie

                        tips

                •       debug modus

                •       anti-cache...
cookie free domains




donderdag 3 juni 2010
cookie free domains

                •       bij elke http-request worden de cookies meegezonden

                        ...
cookie free domains

                        tip

                •       maak in plesk een domain alias aan

            ...
ajax




donderdag 3 juni 2010
reëel vs. ervaren: ajax



                •       lazyloading met ajax

                        later inladen paginadelen...
reëel vs. ervaren: ajax




donderdag 3 juni 2010
reëel vs. ervaren: ajax
                        lazyloading met ajax

                        later inladen paginadelen

 ...
reëel vs. ervaren: ajax

                        content na klik

                        na klik wordt slechts deel pagin...
reëel vs. ervaren: ajax



                        tip

                •       gebruik loading-icoon voor de flow




dond...
yslow
                •       make fewer http requests
                •       use a content delivery network (cdn)
      ...
conclusie




donderdag 3 juni 2010
conclusie

                        Een geoptimaliseerde website...

                        ... verlaagt de belasting op d...
download de presentatie
                        www.slideshare.net/occhionl

                        info@occhio.nl
      ...
meer info: yslow




donderdag 3 juni 2010
meer info: occhio image sprite




donderdag 3 juni 2010
meer info: occhio image sprite




donderdag 3 juni 2010
Upcoming SlideShare
Loading in...5
×

Need for speed realhosting - occhio seminar

643

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

Transcript of "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.

×