Er is niks vervelender dan een langzame website, niet voor jou als eigenaar en zeker niet voor jouw bezoekers die een smooth ride van klik naar oplossing verwachten. Ik ga er vandaag even vanuit dat je website niet goed presteert op snelheid.
Je laadtijd is lang en hierdoor krijg je een kort bezoekje.
Niet optimaal dus.
Ik neem aan dat deze pagina al geladen is maar maak aub even wat tijd vrij zodat ik mezelf kan uitleggen. Geef me zo een 5 minuten. De kattenvideo’s kun je later terugkijken.
In de volgende blog ga ik als webdesigner eerlijk vertellen hoe je de snelheid van jouw website kunt optimaliseren, je de laadtijd verkort en het bezoek verlengt.
Klinkt dit goed? Laten we snel beginnen met de motor van jouw website.
De (missende) kracht achter jouw (langzame) WordPress website
De hosting. Wij hebben de afgelopen jaren als webdesigners gemerkt dat dit erg onderschat wordt. Mensen schaffen zo goedkoop mogelijk hosting aan en verwachten vervolgens dat je website snel is en blijft.Na een aantal maanden je website redelijk uitgebreid te hebben kom je erachter dat dit niet zo is. Dus je moet zeker als je een WooCommerce webshop hebt, een groter pakket aanschaffen. Maar wat hosting nu zo snel maakt zijn de servers waar ze op draaien. Niet de ruimte.
Een grotere kruiwagen kopen maakt het verplaatsen niet opeens gemakkelijker.
Dit is ook de reden waarom wij uiteindelijk zelf zijn gaan hosten, zodat wij het beste van het beste kunnen aanbieden aan onze WordPress klanten.LiteSpeed servers zijn een goed voorbeeld van hele snelle servers. Waar WordPress in het specifiek heel lekker op draait. LiteSpeed maakt gebruik van de nieuwe caching technieken en het is simpel in gebruik.Een goede webdesigner zal gemakkelijk deze plugin voor je installeren. Nu heb je alleen wel een host nodig die LiteSpeed runt op zijn servers. Dus ga hier naar op zoek, of kom met ons in contact.Zorg dat je een goede host hebt! Goede hosting is de kracht achter jouw website en zal de laadtijd verkorten.
Een volgend punt.
Jouw WordPress website is langzaam zeg je?
Wat vertraagd een voertuig zoal? Gewicht, de kracht van de motor en hoe hij is gestroomlijnd.
So far hebben wij het gehad over de motor, de hosting. Het is nu tijd om het te hebben over het gewicht.
Als je een groot gewicht moet LADEN, kost dit uiteraard meer tijd. Ik refereer nu even naar de grote van de bestanden die de server moet laden.
Upload jij foto’s van 5mb per stuk? KILLER.
Zit er onnodige grote code in jouw templates & plugins? Helpt niet mee met de laadtijd. (Hier kan jij vaak niet veel aan doen, maar een goede webdesigner wel).
Verspringende delen en een gebrek aan de nieuwste caching technieken, stop maar!
Laten we grote foto’s gaan tackelen.
Gewicht, maakt jouw WordPress website langzaam.
Het is vrij duidelijk dat grote foto’s langer duren om te laden, het gaat een beetje ver om dit helemaal uit te leggen. We kunnen beter kijken hoe we dit gaan oplossen. Ten eerste zal je al de foto kunnen bijsnijden om het bestand minder groot te maken. Maar wat het beste werkt en wat al mijn klanten en wij zelf ook dagelijks doen is het comprimeren van bestanden. Hiermee verklein je de bestandsgrootte en verlies je nauwelijks kwaliteit in je foto.Zo maak je van een foto van 5mb zo een foto van 200kb en dit scheelt gewoon ENORM in je laadtijd. Het scheelt niet alleen in je laadtijd maar het zorgt er ook voor dat je niet elk jaar een groter hostingpakket hoeft te kiezen.Hoe doe ik dit dan? Met bijvoorbeeld een website als www.tinypng.com dit is persoonlijk onze favoriet en gebruiken wij al jaren.
Foto’s comprimeren om je website sneller te maken
Hier kun je simpelweg je foto’s uploaden en terug downloaden. Maar dan zijn ze gecomprimeerd. Doe dit altijd voordat je ze in je WordPress omgeving upload. Als je een webdesigner hebt laat degene weten dat ze gecomprimeerd zijn. Dan gaat degene het niet nog een keer doen.Zo simpel is het dus eigenlijk, minder grote bestanden, snellere website. Zo komen we ook op het volgende deel uit waar ik even de expertise van mijn compagnon voor nodig had, hij is namelijk gespecialiseerd in snelheid en tevens programmeur. En hij heeft nogal wat tijd zitten in het optimaliseren van code. Dus in het volgende deel, Thijs over snelheid.
Zorgen dat de code van je website niet onnodig lang en zwaar is. Korte uitleg van een programmeur.
Thijs. over onnodige code, grote plugins en langzame thema’s. En hoe wij coderen.
De meeste websites zijn opgebouwd in HTML (HyperText Markup Language). Dat is het soort code waar het document mee opgebouwd is met daarin de tekst, afbeeldingen en andere media.
Het HTML-document wordt gegenereerd door de server waar jouw website op staat.
Door middel van een URL, bijvoorbeeld https://bizbuilder.nl/, doet jouw webbrowser een verzoek aan de server.
De server moet dan nadenken wat er in het HTML-document komt te staan. Als de server erg veel verschillende functies uit moet voeren van allerlei plug-ins, dan duurt het langer om het HTML-document te genereren - meer laadtijd dus!
Met behulp van server caching wordt een groot deel van de uitkomsten van alle code vanuit plug-ins opgeslagen, zodat deze niet opnieuw gedaan hoeven te worden.
Dat scheelt veel tijd! Echter moet caching wel rekening houden met berekeningen die gebruik maken van de huidige tijd en gebruikers-specifieke data.
Het moet niet zo zijn dat de huidige tijd opgeslagen wordt en niet wordt bijgewerkt. Hetzelfde geld voor gebruikers-specifieke data; er moet natuurlijk niet "Hallo John" staan als Hans inlogt na John.
Met LiteSpeed cache is het mogelijk om dit soort content uit te sluiten van de caching door middel van ESI (Edge Side Includes).
Terugkomend op het HTML-document waarin de inhoud van de pagina staat.
Websites hebben op pagina's ook allerlei functies, bijvoorbeeld het openklappen van het menu op jouw smartphone, gebruik maken van product filters, in kunnen zoomen op afbeeldingen, etc.
Die functies worden gecodeerd met JavaScript. Deze functies worden uitgevoerd door jouw webbrowser.
Wanneer een HTML-document erg veel JavaScript bevat en/of uitvoert, dan kan dit de pagina vertragen, met name als de bezoeker een apparaat gebruikt met minder vermogen (een ouder apparaat).
Naast de inhoud en functies, heeft een website ook een eigen look & feel. De styling zoals dit heet, wordt verzorgt door CSS-code (Cascading Style Sheets).
WordPress plug-ins voegen vaak zowel JavaScript als CSS toe aan een website, maar thema's en page builders zorgen vaak voor veel ongebruikte CSS.
Dit komt doordat je vaak gebruik maakt van een klein deel van de beschikbare elementen van het thema en de standaard elementen vanuit de page builder.
Net als JavaScript, zorgt CSS voor laadtijd. Daarom is het belangrijk dat de ongebruikte CSS niet ingeladen wordt.
Met de page builder van BizBuilder hebben wij dit allemaal getackeld - zo min mogelijk CSS, zo min mogelijk JavaScript, en een integratie met LiteSpeed cache.
Hier zijn wij erg ver in gegaan - wij hebben zelfs gebruik gemaakt van lazy-rendering.
Lazy-rendering is net als lazy-loading. Bij lazy-loading gaat het erom dat afbeeldingen pas gedownload worden als deze zichtbaar moeten zijn op jouw scherm; zodra je naar beneden scrolt, worden de overige afbeeldingen geladen.
Lazy-rendering gaat er om dat jouw webbrowser gedeelten van de pagina nog niet tekent. Het tekenen van een pagina door de webbrowser wordt rendering genoemd.
Hoe lang dat proces duurt, is afhankelijk van de hoeveelheid CSS-styling en in hoeverre JavaScript-functies dit proces lastiger maken door tussentijdse aanpassingen.