Stel, je gaat een auto kopen.
Een gloednieuwe of tweedehandse auto, dat is je keuze.
Er zijn enkele aspecten waar je vast en zeker naar gaat kijken: merk, model-type, kleur en budget.
En ook al ken je niets van auto’s -zoals ik-, altijd komt ook dat moment waarop je vraagt aan de verkoper:
kan ik de motor even zien?
Ook al gaat het om een gloednieuwe auto, iedereen wil onder de motorkap kijken.
Of je nu een kenner bent of niet.
De verkoper doet de motorkap open en het enige dat ik herken is het bakje van de olie en ruitenwissers.
Ik ken totaal niets van mechaniek.
Maar het eerste zicht vertelt me wel of de motor goed is onderhouden of niet.
Of dat de motor complex in elkaar zit of niet?
De X-factor van een auto zit voornamelijk aan de buitenkant.
Het koetswerk, de vormen, de golven, de voorkant, de achterkant, de gedimde ruiten.
Maar het is de motor die zorgt die je niet in affronten valt.
Niemand zal een Lamborghini serieus nemen als ie sputtert zoals een oude 2 PK’tje.
Wat hebben auto’s te maken met websites?
Alles, het principe is krak hetzelfde.
De code van je webshop is de motor van de website.
Dan bedoelen we niet het WordPress administratorpanel, maar de code aan de voorkant van je website.
De code die je webshop laat verschijnen op het scherm.
Het is geen geheim voor webprofessionals want we beseffen al te goed:
geen enkele klant kijkt onder de motorkap van hun website.
De meeste klanten hebben totaal ook geen interesse in de code want ze vertrouwen volledig op de professional als ze een webshop starten. En dat is prima, dat is onze job: WooCommerce webshop maken.
Maar wat als ik je nu enkele punten meegeef om toch onder de motorkap te kijken; net zoals bij een auto.
Ik vraag je niet om de code te begrijpen.
Maar om de ‘onderdelen’ te herkennen en dan te snappen of ze goed in elkaar zitten of niet.
De motorkap van je website openen
Om onder de ‘motorkap’ van je website te geraken moet je de broncode bekijken.
Dat kan via elke browser, surf naar de website en klik op de de rechtermuisknop.
Google Chrome: rechtermuisknop + klik dan op ‘Paginabron weergeven’
Firefox: rechtermuisknop + klik dan op ‘Paginabron bekijken’
Apple Safari: rechtermuisknop + klik dan op ’Toon paginabron’
Wat je nu ziet is exact hoe bijvoorbeeld Google jouw website ziet.
In principe: hoe meer code er staat, hoe meer moeite Google moet doen om je website te analyseren/laden.
5 onderdelen om je website-motor te bekijken.
1. Teveel gegenereerde code
Scroll helemaal naar beneden en lees hoeveel lijnen tekst er zijn.
Bijvoorbeeld: voor een standaard ‘contactpagina’ ligt het aantal lijnen tussen 50 en 300.
Heb je meer dan 400 lijnen? Dan kan dit invloed hebben op de laadtijd.
2. Vanaf waar start je werkelijke tekst
Klik op CTRL + F om de zoekfunctie te openen van de browser.
Zoek op het woord dat in je eerste titel voorkomt op je pagina.
Verschijnt het zoekwoord pas na 150 lijnen, dan is er best wel een overload aan code in de hoofding.
3. Teveel http in code
Die http is in simpele termen: een commando om ‘iets’ op te laden: bv een afbeeldingen of script.
Klik op CTRL + F om de zoekfunctie te openen van de browser.
Zoek op het zoekwoord ‘http’ en bekijk hoeveel keer dit woord voorkomt.
Bijvoorbeeld: voor een standaard pagina ligt dit getal tussen 20 en 60.
Heb je meer dan 150? Dan heeft dit beslist invloed op je laadtijd.
4. Ontdek welk WordPress thema jouw webdesigner gebruikt
Je kan voor $50 een ‘premium’ website thema kopen en online zetten. Ook webbedrijven doen dit en laten uitschijnen dat dit hun werk is.
Ook ik heb gewerkt met premium themes, maar ben hier telkens transparant over geweest.
Sinds 2014 jaar ben ik hier volledig mee gestopt, alle thema’s zijn voortaan maatwerk.
Hoe kan je nu zo’n premium theme ontdekken?
Klik op CTRL + F om de zoekfunctie te openen van de browser.
Zoek op het zoekwoord ‘/themes/’ en lees het woord dat verschijnt achter het resultaat.
Daarna google je: “wordpress theme” + dat woord.
5. Ontdek welke WordPress plugins geïnstalleerd zijn
Plugins zijn extra code-pakketjes die de functionaliteiten van je WordPress website uitbreiden.
Bijvoorbeeld: formulieren, foto-albums, enz
Klik op CTRL + F om de zoekfunctie te openen van de browser.
Zoek op het zoekwoord ‘/plugins/’ en lees het woord dat verschijnt achter het resultaat.
Daarna google je: “wordpress plugin” + dat woord.
Er zijn plugins waar ik persoonlijk helemaal geen fan van ben; en die ik liever vermijd:
jetpack
js_composer (Visual Composer)
revslider
Conclusie
Teveel genereerde code is nooit goed.
Er bestaan wel caching plugins die de boel wel ‘recht’ kunnen houden.
Als je naar de broncode van een ‘cached’ website kijkt, dan staan alle code-lijnen achter elkaar.
Het is een ‘oplossing’ voor die ‘premium’ themes.
Maar caching blijft caching, ik zie persoonlijk liever clean code.
En beeld je maar eens in: wat als je een website met geoptimaliseerde beperkte code gaat cachen: supersnelle & duurzame website!
Heb je vragen over WooCommerce en WordPress onderhoud?
Stel ze gerust aan Woofers!
Over de auteur: Dave Loodts
