Weg met CSS en JavaScript!
Om jou te helpen je website te optimaliseren, publiceren met regelmaat diverse gastauteurs op Letterzaken.nl. Kees Lamper van Lamper Design legt in dit artikel uit wat de nadelen zijn van CSS en JavaScript.
Het is de nachtmerrie van iedere webdesigner: een website overnemen of bijwerken die aan elkaar hangt van te veel verschillende stylesheets, Javascripts en als je pech hebt ook nog diverse overbodige en vertragende plugins. Maar waarom dan? Daar merkt de bezoeker van je website toch niets van? Helaas wel! In dit artikel zal ik uitleggen wat de gebruiker voor last heeft van deze zaken en wat de invloed op je ranking is. Want vergeet niet dat een slecht gecodeerde website slecht is voor je positie in de zoekmachines!
Beperk CSS request op je website
Laat ik beginnen met een korte uitleg over CSS. Want wat is CSS? CSS staat voor Cascading Style Sheet. Simpel gezegd wordt de look and feel van je website bepaald door de stylesheets. De items op je website krijgen speciale classes mee en deze worden gedefinieerd in de stylesheet. Maar wat kan hier mis gaan? Er zijn diverse oorzaken te benoemen:
- Er zijn verschillende stylesheets
- Je website maakt gebruik van inline CSS
1. Verschillende stylesheets
Iedere plugin in bijvoorbeeld WordPress zal gebruik willen maken van zijn eigen stylesheet. Als je een plugin installeert en configureert zul je in de betreffende map een stylesheet aantreffen. Hoe simpel de plugin ook is, zodra er iets in de frontend van je website uitgevoerd wordt krijgt de plugin zijn eigen opmaak mee. Als je bijvoorbeeld vijf verschillende plugins draait dan betekent dit dat er minimaal zes stylesheets geladen moeten worden. In vaktermen heet dit dat er zes requests gedaan moeten worden door de browser van de bezoeker. En je voelt het waarschijnlijk al aankomen, hoe meer requests hoe trager je website. Dat is wel het laatste wat je wilt toch?
2. Je website maakt gebruik van inline CSS
Inline CSS is een verouderde methode. De stijl van een item wordt direct bij het item gedefinieerd. Het nadeel hiervan is dat de website stopt met laden totdat de stijl geladen is. Je laadtijd wordt aanzienlijk groter als je gebruik maakt van inline css.
JavaScripts op je website
Voor JavaScripts geldt hetzelfde als voor de hierboven beschreven stylesheets. Hoe meer scripts er geladen moeten worden, hoe langer het duurt voordat een bezoeker of Google robot je site helemaal te zien krijgt.
Veel JavaScripts worden geladen voordat de content van je pagina geladen wordt. Dit vertraagt dus ook je website weer. Er zijn voor WordPress diverse plugins die de scripts verplaatsen naar de footer. Dit levert tijdswinst op omdat eerst de content geladen wordt en daarna de benodigde scripts.
Het probleem van JavaScripts is dat je ze soms gewoon nodig hebt om bepaalde functionaliteit op je website te laden. Hoe los je dit dan praktisch op? Bekijk je plugins nog eens kritisch.
Invloed op je SEO?
Hebben de genoemde twee factoren daadwerkelijk invloed op je ranking? Hierop is een heel helder antwoord mogelijk: JA. Google heeft meerdere malen aangegeven dat clean code voor je website voorrang krijgt. Ook de snelheid van je website is 1 van de 200 rankingfactors waar je website op beoordeeld wordt. Naast een geoptimaliseerde hosting is het dus zeker van belang dat je website niet vol zit met overbodige code.
Vind vertragende factoren op je website
Mooi verhaal, maar hoe kom je erachter wat er geladen wordt op je website? Je kunt hiervoor bijvoorbeeld de Google Developer tool gebruiken, deze zit standaard de Chrome browser. Als je naar je website gaat en je klikt in de developer tool op network krijg je te zien wat er geladen wordt op je website. Ook wordt er aangegeven hoe lang het duurt voordat bepaalde elementen geladen zijn. Dit is dus een goede start van je website optimalisatie. Neem de tijd om bepaalde elementen aan te klikken, je ziet direct welk bestand hiervoor verantwoordelijk is.
CSS op je website optimaliseren
Stel, je hebt vijf stylesheets gevonden. Kun je deze dan zomaar verwijderen? Dat zou ik niet doen aangezien er vast elementen uit de stylesheet geladen worden. Je kunt handmatig alle stylesheets samenvoegen tot 1 stylesheet. Ook dit werkt helaas niet zo. Je zult dan in de broncode van je website ook de verwijzingen aan moeten passen. Een bijna onmogelijke opgave.
Hoe kun je het dan wel aanpakken? Maak je bijvoorbeeld al gebruik van de W3 Total cache plugin? Hierin zit een optie om de stylesheets te comprimeren. Mijn advies is om per stylesheet te testen of de optimalisatie gevolgen heeft voor je lay-out. Wees hier dus voorzichtig mee.
JavaScript op je website optimaliseren
De simpelste optie zou zijn om alle Javascripts te verwijderen. Maar helaas, zo simpel is het niet. Ook voor je scripts is een minify-optie in W3 Total cache. Je kunt er zelfs voor kiezen om alle scripts naar de footer te verplaatsen. Doe dit dan stuk voor stuk en test je website na elke wijziging.
Optimale website?
Hoe creëer je een geoptimaliseerde website? Als je deze stappen volgt ben je in de goede richting aan het werken:
- Test je website met Google Pagespeed Tools of webpagetest.org
- Bekijk je website met de Google Chrome developer tools
- Analyseer de plug-ins en kijk of er alternatieven zijn die minder belastend zijn.
- Installeer de plugin W3 Total cache
- Ga aan de slag met de minify-opties in W3 Total cache
- Test je website opnieuw met de Google Pagespeed tools
Heb je vragen over de optimalisatie van je website? Of wil je graag advies over de verschillende mogelijkheden? Stuur dan een mail naar info@lamper-design.nl
Heb je vragen naar aanleiding van dit artikel? Laat ze hieronder achter en Kees zal ze beantwoorden.
Was het artikel waardevol voor je? Deel het met je netwerk :-)
WordPress webdesigner die graag anderen helpt met oog voor details.
Ook interessant voor jou:
WordPress webdesigner die graag anderen helpt met oog voor details.
Mooi stuk, wat ik zelf echter vaak doe (en uiteraard ook voorzichtig) is de geoptimaliseerde bestanden via google Pagespeed insights is de geoptimaliseerde bestanden downloaden en vervolgens via ftp uploaden. Ik merk dat dat effectiever is dan (wederom) een plugin ;)
Bedankt voor je reactie Demian. Dat is inderdaad ook een heel goede optie! Dit is wel een erg foutgevoelige methode dus is het van belang dat je doorlopend backups maakt. Met bijvoorbeeld W3 Total Cache kun je bijna hetzelfde doen alleen is dit makkelijker te herstellen.