_ Mythes over snelheid en wat wèl werkt om je site sneller te maken

Transcriptie

1 _ Mythes over snelheid en wat wèl werkt om je site sneller te info@combell.com BE NL

2 Inhoud Inleiding 3 Hoe wordt mijn site sneller? 5 Mythes over snelheid 6 Mythe 1: Er is één magische oplossing om mijn site sneller te maken. 6 Mythe 2: Afbeeldingen maken je site traag. 7 Mythe 3: Bots en hogere bezoekersaantallen vertragen mijn site 8 Mythe 4: Caching maakt mijn site altijd sneller 9 Mythe 5: Bij een snelle webhoster is mijn site altijd snel 9 Mythe 6: Met de internet-snelheden en bandbreedte van tegenwoordig (fiber, ADSL,4G) is mijn site snel genoeg 10 Mythe 7: Het gebruik van een CDN maakt mijn altijd site sneller 10 Mythe 8: Een SSL certificaat maakt mijn site traag Wat werkt wel? 12 Wat kan de e-commerce of marketingafdeling doen om je site sneller te maken? 14 Wat kan de webdeveloper doen om je site te versnellen? 15 Wat kan de hostingpartner doen om je site te versnellen? Waar moet je beginnen? 17 Stappenplan 19 Nog vragen? 20 2

3 Inleiding Niks levert grotere irritatie op dan een trage site. En iedereen wil graag een supersnelle website. De snelheid van een website is niet met één knop te regelen. Verschillende factoren spelen een rol, en de precieze invloed van een welbepaalde actie verschilt soms per site. Maar waarom is snelheid nou eigenlijk zo belangrijk? Snelle webshops converteren beter Klanten die een aangename webshop ervaring beleven, rekenen eerder en meer af. Doordat ze nooit hoeven te wachten vinden ze moeiteloos de weg naar je winkelmandje. Kom hoger in Google Google beloont snelle websites met een hogere positie in de zoekresultaten. Beter vindbaar betekent meer bezoekers. Meer bezoekers betekent meer omzet of conversie. Optimale gebruikservaring Bezoekers klikken veel makkelijker (en dus vaker) door op een site met zeer korte laadtijden. Wachten op een trage website levert grote irritatie op en is dan ook de nummer 1 reden om een website te verlaten. 3

4 Sneller is dus succesvoller Dat zie je ook terug in de correlatie tussen de Alexa ranking en de responstijd van sites. De Alexa ranking geeft weer wat de meest succesvolle websites wereldwijd zijn op basis van een inschatting van de bezoekersaantallen. Als we de laadtijden van die websites bekijken dan is het duidelijk dat de top websites wereldwijd een gemiddelde responstijd van minder dan 0,7 seconden hebben. Met het oplopen van de responstijd loopt ook de Alexa ranking op (dat is dus een afname in bezoekersaantallen). Succesvolle websites zijn dus sneller dan minder succesvolle websites. We mogen aannemen dat de snelheid van de site bijdraagt aan dat succes door de betere vindbaarheid en de blije bezoekers die graag terugkeren. Wist je dat snelheid ook belangrijk is voor de kwaliteitscore van je Adwordscampagne? Feitelijk betaal je dus minder voor een goede positie als je site sneller is.

5 1. Hoe wordt mijn site sneller? Oké, snelheid is dus erg belangrijk voor je vindbaarheid, usability en je omzet/conversie. Maar hoe zorg je dat jouw site net zo snel laadt als de echt succesvolle sites wereldwijd? En wie moet wat voor je regelen? 5

6 Want hoe zit dat nu eigenlijk met die snelheid van je website? Je hebt misschien al een hele snelle hoster en toch heeft je site nog meerdere seconden nodig om te laden. En heb je eindelijk je afbeeldingen geoptimaliseerd, blijk je nog steeds koffie te kunnen gaan halen tijdens het inladen... Je site kan op verschillende vlakken vertraging oplopen. Zowel in de content, in de structuur van de achterkant van de site als op het gebied van hosting kunnen bottlenecks ontstaan. Het is dus geen eenvoudige materie, en om het nog wat onoverzichtelijker te maken worden er regelmatig dingen beweerd die niet of maar gedeeltelijk waar blijken te zijn. Met dit e-book willen we je helpen om de waarheden en onwaarheden van elkaar te scheiden, en helpen we je praktisch op weg om bij de juiste persoon de juiste vragen te stellen. Mythes over snelheid Mythe 1: Er is één magische oplossing om mijn site sneller te maken. Helaas, zo werkt het niet. Je site kan door verschillende oorzaken vertraging oplopen. Zowel in de content, in de structuur van de achterkant van de site, als op het gebied van hosting kunnen bottlenecks ontstaan. Alle schakels moeten snel zijn om uiteindelijk een snelle website te hebben. Soms wordt vertraging door één van de schakels veroorzaakt, maar veelal zit de vertraging overal een beetje. Als er al een magische oplossing is, dan is dat vooral door een goede analyse van je site te (laten) maken, om zo te kijken waar de voornaamste bottlenecks zitten. Zo kan je gericht de pijnpunten aanpakken. 6

7 Mythe 2: Afbeeldingen maken je site traag. Dat is niet per se waar. Wanneer je afbeeldingen op je site plaatst heb je te maken met twee aspecten: de opslag van de afbeeldingen op de server en het opvragen ervan door een bezoeker. De opslag van afbeeldingen zelf maakt je site niet traag. De vertraging kan wel optreden wanneer een pagina door een bezoeker wordt opgevraagd en wanneer de afbeelding dus naar de browser getransporteerd moet worden. Maar deze vertraging wordt pas echt merkbaar als er veel afbeeldingen op één pagina opgevraagd moeten worden of als de afbeeldingen extreem zwaar zijn. Voor beide problemen bestaan er oplossingen, waardoor je site echt niet traag hoeft te worden van afbeeldingen. Toelichting De zwaarte van het plaatje kan gemakkelijk gereduceerd worden door de afbeelding te optimaliseren. Door compressie en het weghalen van metadata blijft de kwaliteit van de afbeelding prima, maar wordt hij wel veel minder zwaar. Let op: klein op het scherm betekent niet per se weinig data! Heb je veel afbeeldingen op één pagina staan, dan moet de browser veel requests versturen om de afbeeldingen naar de browser te transporteren. En iedere request kost een beetje tijd. Dat noemt men trouwens overhead. Natuurlijk zal de browser proberen om meerdere afbeeldingen tegelijk op te vragen, maar in de meeste gevallen doet een browser per domein maar 6 requests tegelijk. In dat geval kan je de plaatjes verspreiden over een CDN (Content Delivery Network). Een CDN is een systeem waarbij meerdere servers op diverse locaties wereldwijd geplaatst zijn. Op alle locaties staat dezelfde content. Wanneer een bezoeker content van de site wil ophalen, wordt dit opgehaald van de server die het dichtst bij de locatie van de gebruiker staat. Zo kunnen de afbeeldingen vanaf meerdere domeinen tegelijk gedownload worden. 7

8 Een groot deel van het probleem is bovendien op te lossen door caching. Je kunt caching zien als het maken van een foto van een pagina (die uit elementen is opgebouwd) en die te bewaren voor de volgende bezoeker. De server hoeft dan alleen die ene foto uit te leveren in plaats van alle losse elementen opnieuw te berekenen. Afbeeldingen veranderen doorgaans niet vaak en zijn dus geschikt om door de browser opgeslagen te worden voor een volgende bezoeker. REQUEST BROWSER SERVER Tenslotte kan je developer nog iets slims maken; als de homepage geladen is kan je website op de achtergrond de afbeeldingen van achterliggende pagina s ophalen, zodat ze er al staan als de bezoeker verder klikt. Dat is vooral nuttig als je toch zware afbeeldingen gebruikt. Per CMS zijn er vaak meerdere oplossingen om vertraging door afbeeldingen te voorkomen. Laat je developer specifiek voor jouw CMS optimaliseren. Mythe 3: Bots en hogere bezoekersaantallen vertragen mijn site Dat geldt alleen als je niet genoeg verwerkingscapaciteit hebt. Let hier dus op bij de inkoop van je hostingpakket. Het bezoek van bots (robots van bijvoorbeeld Google en andere zoekmachines) kunnen inderdaad voor vertraging zorgen als je site ongestructureerd is. De bots raken dan namelijk verdwaald op je site, waardoor ze requests blijven versturen, wat veel verwerkingscapaciteit vergt. Bij een gestructureerde site is dat geen issue en zullen de bots geen vertraging veroorzaken. 8

9 Mythe 4: Caching maakt mijn site altijd sneller Dat hangt af van hoe de cache werkt. In veel gevallen geeft dat inderdaad flinke tijdwinst. Maar als de elementen, waaruit de pagina is opgebouwd, lichter zijn dan de uiteindelijke foto, dan heeft de cache geen enkel nut. Bij de inrichting van caching kan hier door de webdeveloper rekening mee worden gehouden. Nuance Die foto s uit de cache verouderen natuurlijk. Caching is heel geschikt voor informatie die niet verandert, maar hoe meer actuele of gepersonaliseerde informatie op je site staat (voorraadinformatie, persoonlijke begroetingen, etc.) hoe minder er gecached kan worden. En hoe minder je kunt cachen, hoe minder de snelheidswinst is. Mythe 5: Bij een snelle webhoster is mijn site altijd snel Een webhostingpakket met slimme technologie, toegespitst op je CMS en ruime specs zal je site zeker sneller maken. Maar als je site niet goed in elkaar zit, dan zal ook snelle hosting je site niet snel maken. Het omgekeerde is wel waar: bij een langzame webhoster is mijn site altijd langzaam. 9

10 Mythe 6: Met de internet-snelheden en bandbreedte van tegenwoordig (fiber, ADSL,4G) is mijn site snel genoeg Inderdaad; sneller internet zorgt ervoor dat alles relatief snel gaat. In snel zit echter nog een grote bandbreedte. Als je tevreden bent met een site die in 3 of 4 seconden laadt, dan hoef je inderdaad niet veel te ondernemen. Heb je echter de ambitie om je bij de echt succesvolle sites in de wereld te scharen, dan zal je site onder de 1 seconde moeten laden. Daar is meer voor nodig dan alleen een goede internetsnelheid en bandbreedte. Zie hiervoor het hoofdstuk Wat werkt wel? verderop in dit e-book. Daarnaast: het internet is slechts 1/3e van het traject dat je website aflegt richting de bezoeker. Nog voordat de pagina richting het internet gestuurd wordt moet die opgebouwd worden door de server. Ook dat deel moet dus snel gaan. En aan de andere kant van het spectrum moet de pc van de bezoeker de pagina snel kunnen verwerken. Bij sites met veel Javascript levert juist de verwerking door de pc van de ontvanger de vertraging op. Met alleen snel internet ben je er dus zeker nog niet. Mythe 7: Het gebruik van een CDN maakt mijn altijd site sneller Het verspreiden van je afbeeldingen over een CDN kan inderdaad een flinke snelheidswinst opleveren. Maar let wel: heb je een Nederlandse site waarbij alle bezoekers vooral uit Nederland komen, dan heeft het feit dat je content op servers wereldwijd verspreid staat weinig toegevoegde waarde. Het gebruik van CDN gaat je site dan niet sneller maken. 10

11 Mythe 8: Een SSL certificaat maakt mijn site traag Dit is een absolute fabel, en wel om 2 redenen: 1. Met de gloednieuwe techniek HTTP/2 is je site net zo snel en soms zelfs sneller als je het verkeer via SSL laat lopen. HTTP/2 is een nieuwe versie van het bekende HTTP protocol dat ontwikkeld is om verkeer via SSL te versnellen. Controleer bij je hostingpartij of je er gebruik van kunt maken. Op de hostingcluster van Combell kan je HTTP/2 gratis activeren als je een SSL-certificaat hebt. 2. Gebruik je geen HTTP/2 dan brengt SSLversleuteling inderdaad milliseconden vertraging met zich mee. Deze vertraging is echter zo klein dat het echt verwaarloosbaar is ten opzichte van de voordelen die SSLversleuteling biedt. SSL zorgt ervoor dat je bezoekers veilig van jouw site gebruik kunnen maken, het straalt vertrouwen uit en draagt bij aan je Google ranking. Die milliseconde vertraging weegt wat ons betreft niet op tegen de voordelen en we adviseren daarom absoluut om een SSL-certificaat gebruiken. 11

12 2. Wat werkt wel? We vertelden al dat je site op verschillende vlakken vertraging kan oplopen. Zowel in de content, in de structuur van de achterkant van de site, als op het gebied van hosting kunnen bottlenecks ontstaan. En op ieder van die niveaus kan je dus cruciale tijdswinst boeken. Daarvoor moeten zowel de e-commerce/ marketingafdeling, de webdeveloper als de hoster hun werk goed doen. 12

13 Hieronder lichten we toe wie wat kan doen om jouw site supersnel te maken. Zo ben je zeker dat je de juiste vragen aan de juiste personen stelt. CMS opschonen Afbeeldingen geoptimaliseerd? Redis & Varnish? Geoptimaliseerd hostingsplatform? MARKETING DEVELOPMENT HOSTING Goede structuur templates? Plug-ins gecontroleerd? Performance analyse? Snelle hardware? 13

14 Wat kan de e-commerce of marketingafdeling doen om je site sneller te maken? 14 De afdeling die verantwoordelijk is voor de inhoud van de website zal moeten zorgen dat die snel ingeladen kan worden. Veruit de meeste tijd van het inladen van een website zit in het downloaden van afbeeldingen, stylesheets, scripts en andere bestanden. Verminder je dit aantal onderdelen, dan is het aantal berekeningen dat de server moet maken dus ook minder en zal de pagina dus sneller inladen. Als je vervolgens die bestanden ook nog kleiner weet te maken, heb je dubbele tijdwinst. Het optimaliseren van afbeeldingen is daarbij dus een quick win. Ook vervuiling in je CMS kan vertraging veroorzaken. Het is daarom belangrijk dat het CMS schoon wordt gemaakt en gehouden. Staan er veel ongebruikte pagina s of afbeeldingen in het CMS? Verwijder ze dan. Het is tenslotte sneller om een kleine hoeveelheid pagina s te doorzoeken dan een grote massa. Tekstopmaak (vetgedrukt, kleur, grootte) is nodig maar moet slim gebruikt worden. Dat doe je door alle opmaak mee te geven in een stylesheet (.css) bestand, en zo veel mogelijk uit je HTML weg te laten. Veel onnodige tekstopmaak sluipt je HTML binnen door opgemaakte tekst te knippen en plakken in je CMS. Deze opmaak wordt dan automatisch in je HTML geplaatst. Door enkel met platte tekst te werken en de opmaakmogelijkheden in je CMS te beperken kan dat gemakkelijk voorkomen worden. Tot slot is het belangrijk dat je geen dode links op je pagina s hebt, bijvoorbeeld naar afbeeldingen die niet (meer) bestaan. Je kan makkelijk controleren of je dode links op je website hebt staan met YSlow. Checklist voor de online marketeer: Zijn al je afbeeldingen geoptimaliseerd? Staan er niet te veel verschillende componenten op 1 pagina? Hiervoor geldt hoe minder hoe beter. Laad je zo min mogelijk.css en.js bestanden in (denk aan maximaal 2)? Zijn ongebruikte pagina s verwijderd? Staan er geen dode links op de pagina s? Is de opmaak in HTML schoon? Geef je al de opmaak mee in.css bestanden, en niet in je HTML?

15 Wat kan de webdeveloper doen om je site te versnellen? De grootste vertraging wordt vaak veroorzaakt door slechte/veeleisende extensies en plugins. Denk aan een kaart, een in-page video, een Twitterfeed of een kalender. Er zijn daar goede en slechte varianten van, die een groot verschil maken in de snelheid van je site. De tweede factor voor vertraging is veelal een onlogische structuur van je HTML en je databases. Met monitoringtools als New Relic, Pagespeed & Yslow kan een webdeveloper nauwkeurig bepalen wat belangrijke bottlenecks in je website zijn. Het is dus essentieel dat de webdeveloper die tools inschakelt om je site gezond te maken. Tenslotte kan er mogelijk veel tijdwinst geboekt worden door bepaalde pagina s te cachen. Bij cachen wordt een webpagina onthouden, zodat bij een nieuwe bezoeker de pagina niet opnieuw opgebouwd moet worden. Hierdoor wordt de laadtijd voor iedere volgende bezoeker sterk verkleind. Veelgebruikte cachingtechnieken zijn Redis of Varnish, waarvan Varnish de beste Checklist voor de webdeveloper: Veroorzaken de plugins en extensies geen vertraging? Is de structuur van je HTML en databases op orde? Wordt de site voldoende gemonitord met tools als New Relic, PageSpeed & YSlow? Zijn er caching tools zoals Varnish en Redis geïnstalleerd? resultaten kan bereiken. Op VarnishSpeedTest.nl kun je zelf heel eenvoudig testen of jouw site ook veel sneller kan door Varnish Cache te gebruiken. Wist je dat KISSmetrics, uit onderzoek van Akamai en Gomez, concludeert dat 47 procent van de consumenten verwacht dat een website binnen twee seconden laadt?

16 Wat kan de hostingpartner doen om je site te versnellen? Op het diepste niveau achter je website is het belangrijk dat de hoster snelle hardware gebruikt en dat de infrastructuur van hoge kwaliteit is. Daarbovenop kan een hoster echter nog grote verschillen maken. Servers ingericht op maat van jouw website (gebaseerd op bijv. je specifieke CMS, je bezoekersaantallen en de zwaarte van je site) kan je grote tijdswinst opleveren. Check daarom of je hostingomgeving zo ingericht is dat je niet snel last hebt van vervelende buren op de server, en dat bezoekerspieken goed kunnen worden opgevangen. Het komt regelmatig voor dat hosters teveel websites op één server zetten. Dat vergroot de kans dat een server (samen met jouw website dus) down gaat door een piek bij de buren. Voor zware applicaties of CMS en zoals Magento is het verstandig om een -voor jouw CMSgeoptimaliseerde hostingomgeving te kiezen. Maak je gebruik van managed hosting? Controleer dan of de nieuwste versie van serversoftware wel gebruikt wordt (denk bijv. aan PHP of het besturingssysteem). Nieuwe versies brengen namelijk altijd optimalisaties met zich mee. We gaven hierboven al aan dat webdevelopers gebruik zouden moeten maken van cachingtechnieken als Varnish en Redis. Met deze technieken kan de laadtijd van statische webpagina s drastisch verkleind worden. Deze tools kunnen echter niet op ieder hostingplatform zomaar gebruikt worden. Bij Combell worden deze als eenvoudig te activeren opties aangeboden, waardoor webdevelopers ze sneller en makkelijker kunnen toepassen. Checklist voor de hostingpartner: Is de kwaliteit van de infrastructuur hoog genoeg en samengesteld uit de snelste hardware? Zijn de servers slim ingericht bijv. specifiek voor jouw CMS? Kunnen cachingtechnieken als Varnish en Redis worden toegepast en worden ze aangeboden? 16

17 3. Waar moet je beginnen? Om te weten waar je moet beginnen raden we sterk aan dat je webdeveloper een goede analyse doet met New Relic (gebruik een Pro account voor een echt grondige analyse) en Google PageSpeed en/of YSlow. Uit die analyse zal helder naar voren komen waar de voornaamste vertragingen binnen jouw site zitten zodat je weet waar je de grootse tijdwinst kan boeken. 17

18 Deze grafiek toont welke soorten pagina s het meeste tijd vergen. Vervolgens kan de developer dan zien hoe het betreffende onderdeel zich door de tijd heen gedraagt: was het dus een momentopname waarin de vertraging ontstond of is het een langer lopend probleem? In dit voorbeeld kan je zien dat het het meeste zin heeft om je catalogview, je productview, je index en je blog index aan te pakken. Ook zorgen de 404 meldingen nog voor vertraging. In New Relic Pro kan de webdeveloper hier vervolgens verder op inzoomen om te zien welke radartjes dan precies de vertraging veroorzaken. Om deze dan natuurlijk als eerste op te lossen. 18

19 In dit voorbeeld zijn er duidelijk 2 radartjes die de vertraging veroorzaken: Zo kan de developer dus heel gericht te werk gaan. Stappenplan 1. Analyse met New Relic 2. Analyse met PageSpeed en/of YSlow 3. Quick wins oppakken 4. Grootste bottlenecks aanpakken 5. Evalueren verbeteringen met analyse tools (na week) 6. Verder verbeteringen doorvoeren: snelheidswinst toevoegen in de vorm van caching (Redis, Varnish, etc) 7. Finetuning om site echt sneller dan 1 seconde te krijgen. 8. Back-end versnellen 9. Periodieke monitoring 19 Test of jouw website sneller kan met Varnish op VarnishSpeedTest.nl

20 Nog vragen? Benieuwd naar Combell s snelle hosting oplossingen? We nemen graag de tijd om samen met jou de best passende hostingoplossing uit te kiezen. Neem contact op met één van onze accountmanagers op voor België, voor Nederland. Of mail ons op info@combell.com BE NL