Heb je plannen op binnenkort jouw eigen onderneming te starten, of ben je al reeds ingeschreven bij de Kamer van Koophandel? Begin dan met het opzetten van een zakelijke website. Je website is tevens je visitekaartje en aangezien anno 2022 internet niet meer weg te denken is, zul je hier wat ons betreft extra aandacht aan mogen besteden. In deze blog proberen we je zo veel mogelijk praktische informatie te geven, zodat je goed kunt starten en wellicht een professionele en zakelijke website binnen no time hebt opgezet.
De domeinnaam alvast laten vastleggen
Om er voor te zorgen dat je zakelijke website ook vindbaar wordt en je de website makkelijk kunt vinden is het noodzakelijk om een domeinnaam vast te laten leggen. Hierbij is het niet van belang of je al bent ingeschreven bij de Kamer van Koophandel, want zodra jouw domeinnaam is vastgelegd kan er niemand anders meer mee vandoor gaan. Meer weten over domeinnamen? Lees dan ook eens deze uitgebreide blog waar we je alles vertellen over domeinnamen:
Het opzetten van je zakelijke website
Ben je er al over uit wie jouw zakelijke website zal opzetten, of heb je wellicht al de keuze gemaakt om zelf aan de slag te gaan door de website zelf op te zetten? Dit kan een lastige vraag zijn. Vandaag de dag zijn er veel aanbieders die jouw zelf de mogelijkheid bieden om een eigen website op te bouwen. Dit kan handig en voordeliger zijn dan een ervaren webdesigner / web developer een website te laten opzetten. Echter zijn hierover ook wel weer voor en nadelen over te benoemen. De voordelen van je website zelf opzetten (kunnen) zijn:
Vrij eenvoudig zelf een website op kunnen zetten
Lage kosten
Veel aanbieders beschikbaar
Geen technisch inzicht nodig
Echter zitten er ook nadelen aan het zelf opzetten van je website, je kunt hierbij denken aan bijvoorbeeld:
Geen maatwerk mogelijk
Maandelijkse kosten voor het hosten liggen vaak hoger
Designs waar je vaak uit kunt kiezen zijn niet uniek
Je kunt je website niet verhuizen naar een andere provider
Waar kan ik zelf mijn website maken?
Wil je toch echt zelf aan de gang met het maken van je eigen website? Dan zou je bij de volgende partijen terecht kunnen: Wix, Shopify, Hostnet, Squarespace, Lightspeed. Dit zijn de wat commerciëlere partijen, uiteraard zijn er nog veel meer partijen waar je vrij eenvoudig zelf je website kunt bouwen. Wist je bijvoorbeeld ook dat het meest gebruikte content management systeem, WordPress zowel gehost kan worden bij WordPress zelf dan wel op een eigen server? Lees in onze blog over content management systems meer hierover.
Afbeeldingen gebruiken voor je website
Nadat je de keuze hebt gemaakt of je de website zelf wilt maken, of dat je hem door een partij wilt laten ontwikkelen, zullen we ook moeten kijken naar de inhoud. Hierbij ga je ongetwijfeld gebruik willen maken van afbeeldingen. Helaas is het niet toegestaan om zomaar elke afbeelding te gebruiken die je geschikt acht. Het kan namelijk zijn dat de afbeeldingen die je wilt gebruiken voor je website auteursrechtelijk beschermd zijn. Om toch leuke afbeeldingen op je website te kunnen zetten, zou je deze zelf kunnen maken. Echter zijn er ook websites waar gratis stockfoto's worden aangeboden. In deze blog lees je alles over het gebruik van afbeeldingen op je website.
Je website vindbaar maken
Voordat je jouw website oplevert of laat opleveren, is het ook van belang om even te kijken naar de vindbaarheid van je website. Dit kan op verschillende manieren. Zo kunnen we aanraden om de website aan te melden via Google Search Console & Bing Webmaster tools. Ook zal het helpen om goede content te schrijven. Tevens een erg belangrijke methode om hoger te ranken in zoekmachines is door het gebruiken en gebruik maken van backlinks. Lees alles over het beter vindbaar maken van je website in onze eerdere blog. Tot slot kan het ook lonen om je website qua snelheid en performance te optimaliseren.
Verder profileren naast je websites via socialmedia kanalen
Naast je eigen website te hebben, is het ook belangrijk je verder te profileren via socialmedia kanalen als Facebook, Instagram, Twitter & Linkedin. Vooral als je jouw website nog bekend moet maken is het verstandig om ook gebruik te maken van andere instrumenten zoals socialmedia. Heb je bijvoorbeeld een leuke blog geschreven? Plaats deze dan ook op al je socialmedia kanalen met een linkje naar de desbetreffende blog, om zo meer website traffic te genereren.
TIP! Plaats je vaak video’s op je website? Dan is het aan te raden om je video’s te uploaden naar bijvoorbeeld je YouTube of Vimeo kanaal. Zo bespaar je veel schijfruimte en maak je je zelf ook bekend via socialmedia.
Wijs je bezoekers op aanwezigheid van cookies
Zoals je wellicht op de meeste zakelijke websites hebt kunnen zien, is dat bijna iedere zakelijke website over een cookiebanner beschikt. Het is sinds 5 juni 2012 verplicht om de website bezoeker te wijzen op aanwezige cookies. Deze regels gelden voor de hele Europese unie. Cookies zijn als ware kleine bestandjes die geplaatst worden op de computer van de bezoeker. Met deze cookies wordt het bijvoorbeeld mogelijk voor de website beheerder om te zien waar bezoekers vandaan komen, wat ze doen op je website en welke pagina’s ze bezoeken. Een goede cookiebanner die je kunt gebruiken is de cookiebanner van Cookiebot.
Meer advies nodig?
Heb je na het lezen van deze korte blog toch nog vragen? We geven je graag meer advies! Neem contact op via het contactformulier, chat, telefonisch of kom eens lang op locatie! Zo kunnen we onder het genot van een verse bak koffie advies geven over je nieuwe zakelijke website.
Wellicht ben je op deze blog terecht gekomen vanaf Google, en viel het je waarschijnlijk op dat deze pagina in Google wordt weergeven met rating stars onder het zoekresultaat. We leggen je graag uit hoe je review fragmenten aan zoekresultaten kunt toevoegen. Deze extra feature geeft de bezoeker meer vertrouwen, en een goede indruk wat hij of ze van de inhoud kan verwachten alvorens door te klikken naar jouw website.
Hoe stel je review fragmenten in voor Google?
In deze blog behandelen we het instellen van review fragmenten in WordPress. Het instellen van review fragmenten is volledig gratis! Om het wat makkelijker te maken om review fragmenten in te stellen maken we gebruik van een licht gewicht plugin genaamd ‘kk Star Ratings’. Het instellen van review fragmenten bestaat uit drie stappen. Zo geef je per pagina of bericht aan of je review fragmenten wilt toepassen, na het toepassen controleren we de URL met Google ‘Test voor uitgebreide resultaten’, en tot slot indexeren we de URL met Google Search Console.
Stap 1. Het installeren en configureren van de plugin kk Star Ratings
Laten we beginnen met het installeren van de plugin en de configuratie nakijken. Volg de onderstaande stappen:
Login op het dashboard van jouw WordPress website.
Ga naar ‘Plugins’ > ‘Nieuw plugin’.
Zoek naar de plugin ‘kk Star Ratings’ en installeer en activeer deze plugin.
In de zijbalk (links) van je dashboard zie je de geïnstalleerde plugin nu verschijnen, en klik hier op.
Op het eerste tabblad ‘General’ kun je de gewenste instellingen bekijken en indien gewenst aanpassen. Zo kun je kiezen op welke soort onderdelen je deze feature wilt toepassen.
Bij het tabblad ‘Appearance’ kun je de begroetingstekst aanpassen en het totaal aantal sterren bewerken.
Gefeliciteerd! De plugin is nu op juiste wijze geconfigureerd. Er is nog een tabblad ‘Rich Snippets’, hier hoef je niets mee te doen.
Controleer het de inhoud van het tabblad ‘Rich Snippets’
Om er zeker van te zijn dat de reviews goed door zoekmachines opgepakt zullen worden, moet er in het codeveld bij ‘Richt Snippets’ de volgende snippet zijn toegepast. Mocht er iets mis zijn gegaan met je snippet, dan kun je hem hieronder altijd nog even kopiëren en weer terug plakken.
Stap 2. Rating stars toevoegen aan bericht of pagina
Nu we de plugin geïnstalleerd, geactiveerd & geconfigureerd hebben, kunnen we hem gebruiken. Onderaan in de zijbalk (rechts) van elke pagina of bericht zie je nu een module waarmee je kan bepalen of je de star ratings wilt in of uitschakelen. Zodra je het aan het checkt, en je de pagina of het bericht opslaat, is de feature gelijk actief. Als je nu naar de desbetreffende pagina of het bericht gaat, zul je de rating stars aantreffen. *Gebruik je SiteOrigin als framework? Dan worden ze niet standaard weergeven, hiervoor moeten we nog iets extra uitvoeren. Dit lees je verderop in deze blog.
Stap 3. Controleren van de rating stars feature
Het is nu van groot belang om te kijken of de feature wel opgemerkt wordt door Google. Dit kun je doen door eerst even een paar keer op je net aangemaakte rating stars te klikken, zodat dit straks terug te vinden is in de test console van Google. Nadat je wat ratings hebt gegeven kun je naar ‘Google – Test voor uitgebreide resultaten’ gaan. Hier plak je de URL van de pagina waar jij je rating stars op toegepast hebt in de zoekbalk en drukt op ‘Enter’. Nadat de pagina geladen is en het resultaat gepresenteerd wordt moet je opzoek gaan naar het tabblad ‘Reviewfragmenten’. Als het goed is, zie je deze er nu tussen staan, en bij ‘ratingCount’ het aantal keren dat je hebt gedrukt op een ster.
Stap 4. De URL indexeren in Google Search Console
Als je inderdaad bij stap 3 de optie ‘Reviewfragmenten’ ziet en het aantal ratingCount’s dat je ook daadwerkelijk hebt gegeven, kun je pas doorgaan met deze laatste stap. Het is nu van groot belang om de URL te indexeren in Google Search Console. Dit doe je als volgt:
Ga naar je Google Search Console.
Klik aan de linkerkant op het desbetreffende domein.
Bovenin beeld kun je de URL inspecteren, voer hier de URL van de pagina of het bericht in, en druk op enter.
Vervolgens kun je klikken op de knop rechtsboven ‘Live URL testen’, dit kan even duren.
Tot slot zie je als het goed is nu bij ‘Optimalisaties’ de review fragmenten staan. Thats it!
Let op! Het kan enige tijd duren voordat je pagina daadwerkelijk gecrawled is in Google. Dit betekend dat het soms enkele dagen tot zelfs weken kan duren voordat je ook daadwerkelijk de review fragmenten onder je zoekresultaten te zien krijgt.
Review fragmenten toevoegen in combinatie met SiteOrigin
Maak je gebruik van de page builder SiteOrigin, dan zal het toevoegen van review fragmenten via bovenstaande stappen niet voldoende zijn. Hiervoor zijn wat extra handelingen nodig. Dit kan erg technisch zijn, mocht je hier niet uit komen dan helpen je hier graag bij. Voer de onderstaande stappen uit om de review fragmenten actief te maken op jouw pagina / bericht:
Maak bijvoorbeeld eerst een nieuwe pagina of bericht in de tekst editor van WordPress (dus niet in de ‘Page Builder’). Dit kun je toepassen door te klikken op ‘Terugkeren naar editor’.
Geef de pagina de juiste titel.
Scroll naar beneden op de pagina en selecteer rechts in de zijbalk bij ‘kk Star Ratings’ en check hier ‘Inschakelen’ aan.
Druk vervolgens op ‘Updaten’.
Klik vervolgens boven aan de pagina op de permalink om de pagina te bekijken.
Je ziet nu de ranking icoontjes staan.
Ga met je muis nu op de tekst ‘Rate this post’ staan, en klik met rechtermuisklik op ‘inspecteren’.
Klik vervolgens met rechter muisklik op de volgende syntax ‘<div class="kk-star-ratings kksr-valign-bottom kksr-align-left " style="display: none;" data-id="1385" data-slug="">’ en klik tot slot op de optie ‘Edit as HTML’.
Kopieer vervolgens de gehele code wat je ziet verschijnen in het codeblok.
Bewaar deze code vervolgens even in een kladblok bestand of iets dergelijks, want deze hebben we straks nodig.
Wijzig nu weer de editor van ‘Tekst’ naar ‘Page Builder’.
De HTML snippet die we zojuist hebben gekopieerd heeft een uniek ID en moet per pagina dus op deze wijze achterhaald worden, anders zal het niet werken. Het unieke ID kun je herkennen bovenin de snippet als ‘data-id="1583"’. Hieronder zie je een voorbeeld van de snippet:
Nu kunnen we in de Page Builder van SiteOrigin een extra ‘Rij’ toevoegen. Deze rij geven we een vastgestelde rij lay-out van ‘1’ mee, en we drukken op ‘Invoegen’. Vervolgens klikken we op ‘Widget toevoegen’ en kiezen hier de ‘Eigen HTML’ widget. In deze HTML widget plakken we tot slot de HTML snippet en klikken daarna uiteindelijk op ‘Voltooid’. Je kunt nu de pagina opslaan en het resultaat testen. Na het testen kun je URL testen, en de reguliere stappen volgen.
Hulp nodig bij het maken van review fragmenten?
We kunnen goed begrijpen dat het uitvoeren van de bovenstaande stappen niet erg eenvoudig is. En al helemaal niet als je ook nog eens gebruik maakt van een SiteOrigin based framework. Dan willen we je hier graag bij ondersteunen! Neem gerust contact met ons op!
Merk je op dat jouw WordPress website enorm traag laadt? Hier is wat aan te doen! WordPress is gemakkelijk te optimaliseren. Het ideale van dit platform is dat er de mogelijkheid is tot het installeren van plugins. Er zijn veel plugins beschikbaar die het optimaliseren van jouw website vereenvoudigen. In deze blog behandelen alleen plugins die wij zelf ook getest hebben. Vergeet straks niet het artikel te delen!
Wat kun je precies optimaliseren aan je website.
Binnen WordPress valt er veel te optimaliseren. Zo zijn er diverse plugins te installeren die afbeeldingen comprimeren en optimaliseren. Javascript, HTML en CSS’s bestanden kun je minfyen en samenvoegen. Jouw WordPress website kan aangesloten worden op een CDN netwerk zoals Cloudflare en zo zijn er nog een aantal punten.
Hulp nodig bij het optimaliseren?
Wij staan graag voor je klaar om je te helpen bij het optimaliseren van jouw WordPress website. Ook als je ergens niet uitkomt tijdens het lezen van dit artikel, mag je altijd even contact opnemen. Dit kan telefonisch, per e-mail of via de chat en natuurlijk onze socialmedia kanalen. Wist je dat wij gevestigd zijn in het centrum van Amsterdam? Je mag bij ons altijd een afspraak maken om langs te komen.
GZIP compression inschakelen.
Een van de makkelijkste manieren om je WordPress website sneller te maken is het gebruik van GZIP compression. Wat is GZIP compression? We leggen het je graag uit. Gzip staat voor GNU zip en is een datacompressiemethode. GZIP zorgt er voor dat webpagina’s, stylesheets en scripts geminimaliseerd worden. Over het algemeen kun je met GZIP-resources met veel tekst al verkleinen tot 70 a 90%. Het is daarom niet alleen een van de makkelijkere manieren, maar ook een van de beste manieren om jouw WordPress website te optimaliseren.
Om GZIP compression in te schakelen kun je inloggen via jouw FTP-programma op jouw webserver waar de website staat. In de hoofdfolder (rootfolder) maak je een nieuw bestand aan en noemt het “.user.ini” tot slot geef je het bestand de bestandsrechten 644 mee. Mocht dit bestand al aanwezig zijn, dan open je dit bestand en voeg je vervolgens de volgende code toe:
zlib.output_compression = 1
Sla het .user.ini bestand op en daarna ga je opzoek naar het .htaccess bestand. Het kan zijn dat er geen .htaccess bestand aanwezig is. Deze kun je vrij eenvoudig aanmaken door een nieuw bestand te creëren. Je noemt dit bestand vervolgens ".htaccess" en geeft het de bestandsrechten 644 mee. We openen vervolgens het .htaccess bestand en zetten er de volgende code in:
GZIP-compressie hoort nu volledig geactiveerd te zijn. Het kan ook zijn dat jouw webserver geen GZIP ondersteund, dit merk je gauw genoeg bij het testen van je website. Om je website te testen kun je websites als GTMetrix, PageSpeed Insights, Pingdom gebruiken.
Expired headers toevoegen aan je .htaccess bestand.
Naast GZIP compression kun je ook expired headers instellen voor jouw WordPress website. Expired headers zijn opdrachten die naar het browser gestuurd worden om te bepalen of een bestandstype wel of niet geladen moet worden uit de cache. Ook wordt vanuit de expired headers duidelijk wat het tijdsbestek is van een op te bouwen cache. In het voorbeeld zie je staan “access 1 year”. Dit wil zeggen dat als iemand vandaag jouw WordPress website voor het eerst bezoekt, deze website nog 1 jaar uit de cache wordt opgehaald bij ieder nieuw bezoek. Dit vervalt uiteraard wanneer je zelf jouw browser cache leegt. Hieronder vind je de expires header die je kunt toevoegen aan je .htaccess bestand.
Wat is caching? Dat hoor ik je zeggen! Caching is het tijdelijk opslaan van jouw website in het korte termijn geheugen. Elke keer dat je een website bezoekt wordt deze website opgeslagen in jouw browser in de tijdelijke cache. Waarom dit zo belangrijk is, heeft te maken met de snelheid van jouw pagina’s die moeten inladen. Zonder het gebruik van caching duurt het laden van de pagina’s langer dan als je wel caching zou gebruiken. Op het moment dat je een pagina bezoekt slaat het browser gedeeltes van de pagina op in de cache. Wanneer je zo’n pagina vervolgens op een later moment weer zou bezoeken, controleert je browser eerst of er wellicht iets in jouw cache geheugen is opgeslagen. Mocht dit zou zijn, dan zal de webpagina meteen naar voren komen aangezien deze al opgeslagen staat op de computer in het desbetreffende browser.
Voordelen van WordPress laten cachen.
Naast dat caching zorgt voor een snellere website, wat altijd fijn is voor de gebruikerservaring, zorgt caching ook voor databesparing voor mobiele gebruikers, denk aan gebruikers van smartphones en tablets. Omdat deze groep vaak mobiel internet gebruikt kan dit erg prijzig zijn. Daarom is caching ideaal omdat er zo minder bandbreedte verbruikt wordt omdat de website immers uit de cache opgehaald wordt.
Het gebruik van de caching plugin WP Optimize.
Een van de betere plug-ins om jouw website te cachen is WP Optimize. Met deze plugin kun je naast caching ook gebruik maken van de andere functies. Zo is het ook mogelijk om met deze plugin gebruik te maken van de volgende functies: Database optimalisatie, Comprimeren van afbeeldingen, en tot slot minifying van scripts en stylesheets.
Installeren, activeren en configureren van de plugin WP Optimize.
Ga opzoek in de pluginstore van je backend. “Plugins” > “Nieuwe plugin” > en zoek hier naar WP Optimize. Als het goed is zie je gelijk links bovenaan de desbetreffende plugin staan. Mocht je hem niet kunnen vinden, dan kun je hem hier downloaden. Na het installeren klik je nog even op ‘Activeren’ en je caching plugin is geïnstalleerd.
Het optimaliseren van de database.
Vervolgens klikken we in de linker sidebar op ‘Plugins’ en zoeken de plugin op. Klik op “Optimaliseren”. Je zult dan op het tabblad ‘Database’ uitkomen. We starten dus met het optimaliseren van de database. Dit doen we door op de button “Start alle geselecteerde optimalisaties”. Je kunt eventueel nog op eigen inzicht meer bepaalde selectievakken aanvinken. Persoonlijk laten we de gekozen opties voor optimalisaties staan, en optimaliseren deze. Je zult nu een loader bij alle componenten zien die aan het optimaliseren zijn. Zodra deze loaders gestopt zijn is het proces voltooid en kunnen we naar het volgende tabblad genaamd “Afbeeldingen”.
Afbeeldingen comprimeren en optimizen.
Nadat we de database hebben geoptimaliseerd, kunnen we beginnen met de afbeeldingen. Het is ook mogelijk met deze plugin alle afbeeldingen automatisch te laten comprimeren. Schakel deze functie in door op “Automatisch nieuw toegevoegde afbeeldingen comprimeren”. We zouden dit persoonlijk wel aanraden. Bij “Opties voor compressie” laten we de optie “Aangepast” staan zoals deze al staat ingesteld. Hiermee worden de afbeeldingen naar een gangbaar gegeven gecomprimeerd. Laat de schuif in het midden staan zoals deze al staat ingesteld. Je kunt hem eventueel op eigen gevoel nog iets naar links verplaatsen om de afbeeldingen nog iets meer te comprimeren. Tot slot kun je hier ook nog op geavanceerde opties klikken. Aangezien we enorm veel opties hebben wat betreft comprimeren en optimaliseren kunnen we deze hier helaas niet allemaal behandelen. Verderop in dit artikel lees je ook nog over het optimaliseren van je afbeeldingen met de Smush plugin.
De cache functie gebruiken van WP Optimize.
Nadat we klaar zijn met de afbeeldingen, is het tijd om de cache functie te configureren. Ga hiervoor naar het volgende tabblad ‘Cache’ toe. Gelijk bovenaan de pagina vind je ook een handige video die je uitlegt wat is caching is, hoe het werkt en hoe je het toepast. Om gebruik te maken van de cache functie dien je bovenaan de pagina het schuifje “Zet cachen pagina’s aan” naar rechts te zetten, tot deze blauw opkleurd. Dit kan soms even duren. Nadat dit afgerond is, klik je nog even onderaan de pagina op “Sla wijzigingen op”. Nu is caching geactiveerd en actief. Tot slot voegen we nog een klein stukje code toe in het .htaccess bestand om de website optimaal te laten cachen. Dit stukje code kun je plaatsen onder de code voor GZIP compression wat we eerder in dit artikel hebben geplaatst en opgeslagen. De code is als volgt:
Sla het bestand op, en verwijderd de cache. Dit doe je vanuit je WordPress backend. Je ziet als het goed is na het activeren van de cachinig optie in de plugin WP Optimize, boven in beeld een knop genaamd “Cache legen”. Hier kun je kiezen voor “Cache geheugen opschonen voor alle pagina’s” of het cache geheugen legen per specifieke pagina. Nadat je de cache geleegd hebt, zijn alle wijzigingen die je aan je pagina hebt gedaan zichtbaar.
Caching performance testen na optimalisatie.
Nadat je caching ingesteld hebt, is het handig om te kijken wat dit doet qua prestaties. Om dit goed te testen, gebruiken we hier GTMetrix Legacy reports voor. Met legacy reports kun je erg goed zien welke bestanden er gecached worden en hoe intensief caching toegepast wordt.
Minify van scripts en stylesheets.
Met de laatste stap die we moeten nemen in deze plugin zijn we aanbeland bij het tabblad “Minify”. Dit is een zeer belangrijk onderdeel om jouw WordPress website nog beter te optimaliseren en sneller te maken. Met deze optie kun je het aantal requests terug dringen. Requests zijn verzoeken die gedaan worden vanaf jouw website. Alle losse onderdelen op jouw website zijn in principe per stuk allemaal requests- en verzoeken. Stel dat je drie afbeeldingen hebt, twee scriptjes en een stylesheet dat ingeladen wordt tijdens het openen van je website, Dan moeten we eerst wachten tot deze ingeladen zijn.
Des te meer verzoeken er verwerkt moeten worden, hoe langer het wachten duurt, en dit wil je dus niet. In dit voorbeeld hebben dus te maken met maximaal 6 verzoeken. Wat uiteraard erg weinig is. Gemiddeld heeft een goede WordPress website zo’n 85 requests. Zit je hierboven dan kan je website al een stuk langzamer worden. Het zou nog mooier zijn om lager dan die 85 requests uit te komen. Dit kunnen we realiseren met de functie Minify.
Minify inschakelen en optimaliseren.
Om bestanden te minifyen zullen we als eerst de optie “Verkleinen inschakelen” actief moeten maken. Zet het schuifje naar rechts tot het blauw opkleurd. Vervolgens zien we drie opties omhoog komen die allen staan aangevinkt. Dit kun je eerst prima aanhouden. Klik nu op de button “Schoon de verkleinde bestanden op”.
Het kan een beetje tricky zijn, de optimalisatie van bestanden als Javascript en CSS stylesheets. Na het wijzigen van de minify settings, legen we eerst de pagina cache weer uiteraard, en testen de website uitvoerig op styling maar ook functionaliteit. Uiteraard kun je ook de website gelijk testen op GTMetrix of andere performance testing websites.
LET OP! Gebruik je Cloudflare? Dan zul je je een keuze moeten maken waar je graag je scripts en stylesheets laat minifyen. Je kunt geen bestanden dubbel minifyen, dit zal in de meeste gevallen voor problemen zorgen.
Het gebruik van de caching plugin WP Fastests Cache.
De volgende plugin die we gaan behandelen is de plugin van Emre Vona genaamd WP Fastests Cache. Deze plugin werkt weer iets anders dan de besproken plugin van WP Optimize. Beide plugins optimaliseren je website door middel van caching. Echter, kun je bij deze plugin jouw CDN netwerk verbinden middels een API. Een API is niets meer dan een integratie.
Inhoudelijk over het optimaliseren van afbeeldingen en caching gaan we hier verder niet op in. We gaan nu bespreken hoe je een koppeling kunt leggen met in dit geval Cloudflare en WP Fastest Cache op jouw WordPress website.
Het grote voordeel van deze integratie is dat je niet meer hoeft in te loggen op Cloudflare om hier je opgebouwde cache te legen. Je hoeft dan na het wijzigen van een pagina of iets dergelijks enkel nog je pagina cache te legen op je WordPress website zelf. Met deze cache flush wordt ook gelijk de cache history bij Cloudflare zelf geflushed. Wel zo handig!
We gaan ervan uit dat je de plugin hebt kunnen vinden in de plugin store van je WordPress backend. Problemen met het vinden van de plugin? Klik dan hier. Om Cloudflare te koppelen middels een API gaan we naar “Plugins” > “Instellingen” > “CDN”. Nu zie je een tabblad met meerdere iconen. Klik hier op de icoon van Cloudflare (“CDN by Cloudflare”).
Er wordt nu gevraagd om een token op te geven. Dit token kun je enkel genereren als jouw WordPress website al reeds aangesloten is op Cloudflare. In dit geval gaan we er van uit dat dit al bij jouw WordPress website al is gebeurt. Om een API token te genereren moeten we inloggen op Cloudflare. Log nu in op Cloudflare en volg de volgende stappen:
Klik op de juiste domeinnaam die je wilt verbinden met de plugin.
Op het huidige tabblad “Overview” zie je rechtsonder aan de pagina “Get your API token”. Klik hier op.
Nu komen we uit bij een tabblad waar je jouw gegevens en taal kunt wijzigen. Bovenin beeld zien we in het menu staan “API tokens”, deze klikken we aan.
Om een nieuwe API token aan te maken klikken we op “Create Token” en kiezen hierbij “Edit zone DNS” door op “use template” te klikken.
Nu is het de bedoeling de juiste regels aan te maken. We beginnen eerst de permissions in te stellen. Deze moeten als volgt staan:
PermissionsZone >> Cache Purge >> Purge
Zone >> Zone Settings >> Edit
Dit zijn de bovenste twee invoervelden onder elkaar. Zie je geen 2 invoervelden onder elkaar? Klik dan nog even op de “+Add more” button.
Nu stellen we de onderste regel in. Het instellen hangt hier van af wat hoe jouw situatie is. Je kunt deze API ook voor alle domeinnamen instellen binnen jouw Cloudflare omgeving. Kies dan voor “Include >> All zones”. Stel je deze API in voor een specifiek domein, kies dan de optie “Include >> Specific zone” en zoek hier de juiste domeinnaam op.
Zone resourcesInclude >> All Zones
Include >> Specific zone > “example.nl”
De laatste stap is om op "Create Token” te klikken. Nu zul je het API token in beeld zien en kun je klikken op “Copy”.
De juist gegenereerde API gaan we implenteren in jouw WordPress website. We keren terug naar het WordPress dashboard. Om de API te implenteren voeren we de volgende stappen uit:
Ga naar “Plugins” > “WP Fastest Cache” > “Instellingen” > “CDN” en klikken op “CDN by Cloudflare”.
We vullen hier de API token in dat wij van Cloudflare hebben ontvangen en klikken op “Next”.
In het volgend scherm krijgen we de “Auto minify” opties te zien. Zoals eerder besproken is, moet je hier opletten of je wilt minfyen via Cloudflare of via jouw eigen WordPress website (WP Fastest Cache). Maak hier een keuze en klik op “Next”.
Je kunt hier nog kiezen om “Rocket Loader” in te schakelen. Maak je keuze en klik op “Next”. Mocht je meer informatie willen weten over de Rocket Loader functie, lees dan het hele artikel hier.
Nu krijgen we het tabblad met “Browser Cache Expiration” in beeld. Hier kunnen we aangeven hoelang we willen dat Cloudflare de cache bewaard. Dit stellen we in op standaard 6 maanden. En klikken hier weer op “Next”.
Ready to go! Jouw WordPress website is nu verbonden middels een API met Cloudflare.
Mocht je na het uitvoeren tegen bepaalde punten aanlopen, waar je hulp bij nodig hebt? Geen probleem! Laat het ons weten en we helpen je graag verder.
Afbeeldingen optimaliseren op jouw WordPress website.
Wist je dat het inladen van (grote) afbeeldingen voor performance verlies leidt? Jouw WordPress website kan door het optimaliseren van grote afbeeldingen stukken sneller worden! Soms kan het comprimeren van afbeeldingen afdoende is. Maar het komt ook voor dat afbeeldingen middels HTML (dus in de code) worden verkleind van bijvoorbeeld 1920x1080 pixels naar 350x190 pixels. Het probleem hierbij is dat de afbeelding zijn ware formaat behoud en daarom eerst de grote afbeelding ingeladen moet worden, terwijl hij maar klein op de website wordt weergegeven. Dit is zonde en zal leiden tot een hoger bounce percentage. We bespreken in dit hoofdstuk de verschillende manieren om jouw afbeeldingen te optimaliseren en te comprimeren.
Afbeeldingen optimaliseren met behulp van Smush.
De makkelijkste manier om jouw WordPress website te optimaliseren, wat afbeeldingen betreft is het gebruik van een plugin. In deze case gebruiken we de plugin van Smush.
Zoek hiervoor de volgende plugin op “Smush – Lazy Load Images, Optimize & Compress Images” van de uitgever “WPMU DEV” en installeer deze plugin. Na het installeren van de plugin activeer je deze nog even en gaan we naar de instellingen toe. Er zal nu een popup naar bovenkomen en deze gaan we even samen met je door:
Klik allereerst op “Setup starten”.
Je krijgt nu de vraag of je automatische compressie in wilt stellen. Deze vinken we aan. Elke keer als er een nieuwe afbeelding geüpload wordt zal deze automatische gecomprimeerd worden. En we klikken weer op “Volgende”.
Nu wordt er gevraagd of je EXIF-metadata wil verwijderen. Hier kiezen we uiteraard ook weer voor. Het voordeel hiervan is dat de afbeeldingen kleiner worden qua bestandsgrootte. En klikken weer op “Volgende”.
Uiteindelijk zijn we bij een best belangrijk proces aangekomen, het lazy-loaden van afbeeldingen. Dit is afhankelijk van je website of het even soepel werkt. Je zou het kunnen testen, en eventueel bij fouten uit kunnen schakelen. Het is zeker aan te raden, en zal ook leiden tot minder HTTP requests. Na je keuze gemaakt te hebben klikken we op “Volgende”.
De laatste stap is of jij ook gebruikersgegevens wil verzenden bij eventuele fouten of iets anders dergelijks. Maak hier jouw eigen keuze en klik op “Setup wizard afronden”.
Na het afronden van de Setup wizard, worden alle afbeeldingen gecontroleerd.
Vervolgens scroll je iets naar benden op de pagina tot je de button “Bulk smush nu” en hier klikken we op.
Nu worden alle afbeeldingen die aanwezig zijn geoptimaliseerd voor jouw WordPress website.
Nadat de afbeeldingen allemaal geoptimaliseerd zijn scrollen we een klein stukje door naar beneden en zetten bij “Afbeeldingen verkleinen” het schuifje naar rechts, zodat deze blauw opkleurd. We zouden persoonlijk een maximum formaat van 1920 pixels breed en 1080 pixels hoog adviseren. Lager kan soms nog beter zijn, maar dit heeft wel invloed op de kwaliteit van de afbeelding. We klikken vervolgens op “Instellingen bijwerken”.
Gefeliciteerd alle afbeeldingen op jouw WordPress website zijn nu geoptimaliseerd!
We hebben tot nu toe wel de belangrijkste opties besproken die er mogelijk zijn in de plugin van Smush. We willen je zeker aanmoedigen om even rond te kijken en te testen welke mogelijkheden er nog meer zijn voor het optimaliseren en het sneller maken van jouw WordPress website.
Afbeeldingen optimalisatie via GTMetrix (Legacy reports)
Wil je liever geen gebruik maken van plugins die de afbeeldingen optimaliseren? Dan is het ook mogelijk de afbeeldingen allemaal handmatig te optimaliseren. Het uitvoeren van de onderstaande stappen kan erg lastig zijn voor beginners. Gebruik in dat de plugin van Smush zoals hierboven al reeds besproken is.
Via GTMetrix is het vrij eenvoudig om van het originele afbeelding bestand, het geoptimaliseerde bestand te downloaden en terug te plaatsen op de server waar het origineel ook staat. Je kunt de locatie opzoeken door de URL te volgen in GTMetrix. Deze kun je vervolgens herleiden naar het pad van jouw server, zodat je weet waar je deze foto moet terug zetten. Om deze functie te gebruiken moeten we wel ingelogd zijn bij GTMetrix. Je kunt een gratis account aanmaken, en het account instellen op “Legacy Reports”. Bekijk nu onze tutorial hoe je Legacy reports kan instellen!
Hoe optimaliseren we afbeeldingen via GTMetrix? Volg de onderstaande stappen:
Login met je juist aangemaakte account in bij GTMetrix (of bestaand account).
Voer nu jouw URL in en start de test.
Klik bij het tabblad “PageSpeed” op “Optimize images” en bekijk hier de te optimaliseren afbeeldingen.
Je ziet hier als er afbeeldingen te optimaliseren zijn, een rijtje met mogelijke afbeeldingen. Klik hier op “Optimized version”.
De afbeelding zal nu opkomen in een aparte tabblad. Sla deze afbeelding met dezelfde naam op die je ook in de link ziet verschijnen van de vorige tab.
Upload de afbeelding nu in de exacte map via een FTP cliënt. Deze map kun je traceren door het pad te volgen van de afbeelding. Het pad kun je vinden in de URL.
Wis eventuele cache en test je website opnieuw. Je zult zien als je alle afbeeldingen hier geoptimaliseerd hebt, de balk volledig groen zal kleuren.
TIP! Moet je de afbeeldingen nog resizen? Doe dat dan eerst voordat je de afbeeldingen gaat optimaliseren. Anders zul je er dubbel zo veel werk aan hebben.
Geschaalde afbeeldingen gebruiken.
Wat vaak tot een extreem hoge performance boost kan leiden, is het schalen van jouw afbeeldingen. Doe dit in het exacte formaat dat je ook op je website gebruikt. Zo bespaar je veel datagebruik van afbeeldingen die anders onnodig lang moeten inladen. Het is niet de bedoeling om grote afbeeldingen te uploaden in WordPress. WordPress heeft dit zelf al dicht gezet door het upload limiet te verlagen naar 2MB, wat alsnog erg groot is voor een afbeelding voor op je website. Zorg dat je afbeeldingen altijd onder het formaat van 1920 bij1080 pixels blijven. En dat afbeelding maximaal 1MB groot is. Dit is wel echt het uiterste!
We gebruiken in dit geval GTMetrix Legacy reports om te checken of jouw website wel geschaalde afbeeldingen gebruikt. Hiervoor ga je in GTMetrix naar de tab “PageSpeed” en kijkt nu in de rubriek “Serve scaled images”. Mocht jouw pagina geen geschaalde afbeeldingen bevatten, dan zul je ze hier in het overzicht niet tegenkomen. Zijn er afbeeldingen gevonden? Dan zie je nu achter de link van de afbeelding ongeveer deze tekst staan “is resized in HTML or CSS from 3231x1420 to 102x45. “. Dit kun je als volgt uitlezen; de aangetroffen afbeelding heeft een oorspronkelijk formaat van 3231x1420. Deze afbeelding wordt op de website weergegeven in het formaat 102x45.
Het is dan de bedoeling om in bijvoorbeeld Photoshop eerst een nieuw document aan te maken met de volgende waardes: 102 pixel bij 45 pixel hoog. Hier plak je vervolgens de afbeelding in die je weer van GTMetrix kan halen. Sla het bestand op en zet het terug via FTP. Leeg de cache van je website waar nodig en test de website opnieuw. Nu zul je waarschijnlijk ook opmerken dat je de afbeelding opnieuw moet optimaliseren. Doe dit zoals eerder in dit artikel is besproken.
Jouw WordPress website nog beter optimaliseren.
We komen nu aan het einde van dit artikel. We hopen dat je er wat aan hebt, en jouw WordPress website nu goed kunt optimaliseren. Je weet nu hoe je de laadtijd van je WordPress website kunt verbeteren. Ook weet je nu wat grote afbeeldingen kunnen doen met de laadtijd van jouw website of webshop. Tevens hebben we een greep uit het assortiment van cache en optimize plugins gedaan, behandeld en besproken. Er zijn nog zo veel meer plugins en tools beschikbaar. Laat je dan ook niet afschrikken en ga op onderzoek uit en bekijk hoe jij jouw WordPress website nog beter kunt optimaliseren. Heel veel succes gewenst!
Kom je ergens niet uit, geen probleem!
Wij kunnen je helpen bij het optimaliseren van jouw WordPress website. Wil je meer informatie? Neem dan contact met ons op. Wil je langs komen? Dat is mogelijk, wij zijn gevestigd op de Marnixstraat in het centrum van Amsterdam ter hoogte van de Westerstraat.
