Geplaatst op Geef een reactie

Welke Content Management Systems zijn er

computer schrift

Welke Content Management Systems zijn er

Ben je benieuwd naar welke content management systems er zijn? We leggen het je graag even uit. Voordat we gaan uitleggen welke content management systems er momenteel gebruikt worden, is het handig om eerst even uit te leggen wat precies een content management system is. Een content management system wordt ook wel afgekort als CMS en is niets meer dan een website dat bestaat uit een front en back-end. De front-end is de voorkant van de website, zeg maar waar de bezoekers van jouw website zich op bevinden. De back-end is de achterkant waar je op inlogt. In de back-end kun je op een eenvoudige manier de content van jouw website aanpassen, hiervoor heb je geen programmeerkennis nodig. Een van de bekendste CMS systeem is WordPress.

Verschillende types CMS systemen

Het aanbod vandaag de dag is erg groot. Er bestaan verschillende types CMS systemen. Zo heb je opensource en closedsource CMS systemen. WordPress behoort bijvoorbeeld tot een opensource CMS systeem. Opensource CMS systemen zijn altijd gratis te downloaden en te gebruiken. Daarnaast is de broncode ook altijd inzichtelijk om aanpassingen door te voeren, te verbeteren en dit vervolgens weer te delen. Een closedsource CMS is altijd betaald en hiervan is de broncode niet inzichtelijk, hierbij kan alleen de software uitgever de broncode wijzigen. Een voorbeeld van een bekend closedsource CMS systeem is Wix.

Wat is een headless CMS

Naast het feit dat je open en closedsource CMS systemen hebt, is er ook nog een verschil tussen een regulier CMS en een headless CMS. In een normaal CMS systeem zoals WordPress zijn de front en back-end gezamenlijk in één systeem. Doordat de front en back-end gezamenlijk één systeem vormen zit je hier als ontwikkelaar vast aan de vaste structuur dat het desbetreffende CMS te bieden heeft, dit kan erg onhandig zijn. Omdat bij een headless CMS systeem het design en de content gescheiden zijn, kan de content ook worden doorgevoerd op andere applicaties, denk hierbij aan mobiele apps voor op de smartphone. Het headless CMS kan gekoppeld worden aan de desbetreffende front-end middels een API koppeling. Het opzetten van een headless CMS systeem is voor beginners niet weggelegd.

Top 10 populairste CMS systemen

Zoals eerder gezegd is, is WordPress op dit moment het meest gebruikte CMS systeem ter wereld. Omdat WordPress zo populair is, is de community achter dit CMS ook enorm. Dit wil zeggen dat mocht je ergens tegenaan lopen, dat er altijd wel een antwoord op internet te vinden is, en anders altijd support kunt vragen op één van de vele WordPress forums/kanalen. Hieronder tref je de populairste CMS systemen van dit moment aan.

Content Management System

Aantal pagina’s

   

1. WordPress

ca. 18 miljoen

2. Adobe Dreamweaver

ca. 2.7 miljoen

3. Joomla!

ca. 2.5 miljoen

4. Blogger

ca. 830 000

5. Drupal

ca. 772 000

6. TYPO3

ca. 425 000

7. Shopify

ca. 282 000

8. Magento

ca. 272 000

9. PrestaShop

ca. 263 000

10. Brix

ca. 151 000

1. WordPress

WordPress bestaat sinds 2003. Echter was WordPress voorheen meer bedoeld om als blog te functioneren. Het CMS was daarom ook niet echt gebruiksvriendelijk te noemen. Dat is hedendaags wel anders. Zelf omschrijven we WordPress als één van de gebruiksvriendelijke type CMS. Voor WordPress zijn er extreem veel plugins te downloaden, zowel gratis als betaald. WordPress wordt aangeboden in twee vormen. Zo kun je er voor kiezen om WordPress op jouw eigen server te hosten. Dit noemen we dan self-hosted. Self-hosted geeft je veel meer vrijheid om te doen met je website wat je maar wilt. Ook kun je er voor kiezen om WordPress door WordPress.com te laten hosten. Het (gratis) laten hosten van jouw WordPress website kan enige beperkingen met zich meebrengen.

Welke grote bedrijven hebben een WordPress website?

Altijd al nieuwsgierig geweest welke bedrijven een WordPress website hebben? We hebben een lijstje samengesteld met populaire bedrijven die gebruik maken van WordPress. Je kunt de website bekijken door even op de link te klikken.

  1. Koffietijd
  2. D66
  3. Auto Totaal Glas
  4. HP / De tijd
  5. Diergaarde Blijdorp

2. Adobe Dreamweaver

Dreamweaver is ontwikkeld door het bedrijf Macromedia. Het is een wysiwyg editor waarin websites als HTML en andere programmeertalen als CSS, XML, JavaScript, PHP gemaakt kunnen worden. De software wordt veelal gebruikt door webontwikkelaars. In Dreamweaver is het bijvoorbeeld mogelijk om met een split-screen te werken. Dit houdt in dat je zowel de broncode als de visuele elementen kunt zien. Dreamweaver werkt niet zoals je van de meeste CMS systemen gewend bent door erop in te loggen. Nee, Dreamweaver is echt een fysiek programma dat op de computer geïnstalleerd dient te worden.

3. Joomla!

Joomla! voorheen een razend populair open source content management systeem, maar wordt vandaag de dag steeds minder gebruikt. Joomla! Is ontstaan in augustus 2005 en is voortgekomen uit het inmiddels uitgefaseerde Mambo CMS. Ook is het in Joomla! mogelijk om net als in WordPress, plugins te installeren, alleen dan noemen we plugins in Joomla! extensions.

Wat is het verschil tussen Joomla! en WordPress?

Het grote verschil tussen deze twee bekende content management systems is dat Joomla! veel uitgebreider is dan WordPress. Dat maakt Joomla! In dat opzicht ook weer lastiger om te ontwikkelen en te beheren. Uiteraard is het wel mogelijk om ontbrekende functionaliteiten in WordPress toe te voegen middels plugins of custom scripts hiervoor te schrijven.

Webshop maken in Joomla!

Net als in WordPress is het met een Joomla! website ook mogelijk deze uit te breiden met een webshop extensie. Voor Joomla! zijn er verschillende soorten webshop extensies beschikbaar. De meest bekende zijn Virtuemart en HikaShop. Ook is het mogelijk om bij deze twee extensies iDEAL te integreren.

Welke grote bedrijven hebben een Joomla! website?

Altijd al nieuwsgierig geweest welke bedrijven een Joomla! website hebben? We hebben een lijstje samengesteld met populaire bedrijven die gebruik maken van Joomla! website. Je kunt de website bekijken door even op de link te klikken.

  1. IKEA
  2. Peugot
  3. Velux
  4. Pickwick Ice Tea
  5. Nintentdo Denemarken

4. Blogger.com

Blogger.com is een blogplatform dat bij te houden is door in te te loggen op de achterkant van je blog. Het blogplatform is opgericht in 1999 door Pyra Labs. In 2003 is het toenmalige Pyra Labs opgekocht door Google. Het blogplatform bevind zich in de cloud en is daarom ook niet te downloaden en te installeren op een eigen server zoals dit wel bij WordPress en Joomla! website mogelijk is.

Gebruik maken van een domeinnaam

Bij het aanmaken van een nieuwe blog binnen Blogger.com krijg je automatisch een subdomein toegewezen. Zo’n subdomein ziet er bijvoorbeeld als volgt uit: dewebdeveloper.blogspot.com. Sinds 2012 zijn ook de overige landextensies erbij gekomen zoals .nl, .be etc. Tot slot is het ook mogelijk om Blogger.com aan een eigen domeinnaam te koppelen.

Advertenties

Ook biedt Blogger.com de mogelijkheid tot advertenties te tonen op jouw blog. Hiermee kun je op maat gevoerde advertenties toestaan via Google AdSense om zo een enige vorm van inkomen te creëren met jouw eigen geschreven blogs.

5. Drupal

Een ander populair content management system is Drupal. Ook Drupal is een opensource content management system, dit is niet altijd zo geweest. Drupal is ontwikkeld door Dries Buytaert in eerste instantie als een bulletin board system. In 2001 werd dit een opensourceproject. Met Drupal is bijvoorbeeld weer meer mogelijk dan als met WordPress of Joomla!. Echter stijgt de complexibiliteit ook naar mate het content management systeem uitgebreider is.

Welke grote bedrijven hebben een Drupal website?

Altijd al nieuwsgierig geweest welke bedrijven een Drupal website hebben? We hebben een lijstje samengesteld met populaire bedrijven die gebruik maken van Drupal. Je kunt de website bekijken door even op de link te klikken.

  1. RTL Nieuws
  2. De Tweede Kamer
  3. Telegraaf
  4. Pfizer
  5. Van Dale

Advies nodig over content management systemen?

We adviseren je graag over de verschillende content management systemen. Elk CMS systeem heeft zijn voordelen en zijn nadelen.

Beoordeel deze pagina post
Geplaatst op Geef een reactie

Wat is WordPress?

Wat is WordPress, koffie en notities

Wat is WordPress?

Wellicht heb je er al eens van gehoord, WordPress! Wat is WordPress? En wat kun je er mee? We leggen je het graag uit in deze blog. We proberen je een zo goed en duidelijk mogelijk beeld te geven wat WordPress precies is, en wat je er mee kunt doen. Heb je via deze blog geen antwoord kunnen vinden op jouw vraag? Laat het ons dan even weten in de comments.

Wat kun je doen met WordPress?

WordPress is een Content Management System ook wel afgekort als CMS. Het is momenteel het populairste CMS systeem dat we kennen. WordPress heeft wereldwijd zo’n 18 miljoen gebruikers. WordPress is gerealiseerd in 2003 en kent zijn oorsprong als blog platform, maar hiervoor wordt WordPress allang niet meer alleen voor gebruikt. Tegenwoordig bouwen de meeste webdesign bedrijven met WordPress de mooiste en exclusievere websites. De mogelijkheden zijn dan ook erg toereikend.

Hoe werkt een WordPress website?

Een WordPress website bestaat uit een voor en achterkant. Aan de voorkant zie je de website, wat het publiek, dus iedereen ziet. Aan de achterkant wijzig je bijvoorbeeld de teksten, afbeeldingen of pagina’s. Dit doe je door in te loggen op je website. Hiervoor ga je naar bijvoorbeeld ‘example.com/wp-admin’. Je ziet dat er achter je domeinnaam nog ‘/wp-admin’ staat. Dit betekend dat je direct doorgestuurd wordt naar de inlogpagina van jouw WordPress website. Eenmaal ingelogd kun je gelijk wijzigingen aanbrengen aan jouw website.

Verschil tussen WordPress.com en WordPress.org

Je hebt twee soorten WordPress websites. Een versie die online gehost wordt door WordPress zelf, de WordPress.com. En een versie die je zelf kan installeren op je eigen webserver, WordPress.org. Het voordeel van WordPress.com is dat hosting je niets kost, echter loop je hier weer tegen limieten aan. Zo kun je bijvoorbeeld niet je WordPress.com website back-uppen en overzetten naar je eigen hosting. Met de WordPress.org versie kan dit weer wel. Laat je hierover erg goed informeren, als je eenmaal de website op WordPress.com hebt staan, kan deze dus niet overgezet worden.

Is een WordPress website maken moeilijk?

Een WordPress website maken kan inderdaad moeilijk zijn. Het ligt er eigenlijks maar net aan wat je er precies mee wilt doen. Om te beginnen zal WordPress geïnstalleerd moeten worden op jouw webserver (webhosting). Dit kan al een moeilijke klus zijn voor velen. Echter, bieden veel hostingproviders ook zo geheten One Click Installaties aan. Dit wil zeggen dat je een op WordPress gebaseerd hostingpakket kan afnemen, waar je middels 1 klik op de knop een complete WordPress website installeert.

Wat heb je nodig om WordPress te kunnen gebruiken?

Om gebruik te kunnen maken van WordPress heb je in eerste instantie hosting nodig met ten minste 1 database. We hebben het hier over de WordPress.org. De volgende specificaties worden aanbevolen (21/07/2021):

  • PHP versie 7.4 of nieuwer
  • MySQL 5.6 of MariaDB versie 10.1 of hoger
  • Ngix of Apache met de mod_rewrite module
  • HTTPS ondersteuning

Aangezien de ontwikkelingen op het gebied van PHP en MySQL razend snel gaan, raden we je aan om de actuele server vereisten te bekijken op de officiele website van WordPress.org

Wat zijn plugins?

Om terug te komen op de vraag, of het moeilijk is om een WordPress website te maken? Kunnen we je vertellen dat er voor WordPress momenteel zo’n 55.000 plugins beschikbaar zijn. Hiermee kun je via een vrij simpele weg, zonder enige programmeerkennis bepaalde functies verkrijgen op jouw WordPress website. Hiermee wordt het maken van een WordPress website een stuk makkelijker. Let wel op! Te veel plugins, of de verkeerde plugins zullen je website enorm kunnen vertragen. Kijk altijd naar de actieve downloads en reviews in de plugin directory van WordPress. Als er een mogelijkheid is om zelf de gewenste functie te programmeren, en hiermee een plugin kunt voorkomen, doe dit dan altijd!

Kies een goed thema

WordPress werkt met thema’s. Er zijn in WordPress verschillende soorten thema’s. Zo heb je gratis thema’s, maar ook betaalde thema’s. Een goede website waar je goede en actuele thema’s op kunt vinden is TemplateMonster. Voor gratis thema’s kun je het beste op de officiele website van WordPress kijken, of via het dashboard van jouw WordPress website. Let hierbij weer goed of je een actueel thema kiest. Je kunt dit zien door te kijken naar de update status van het gewenste template dat aangeboden wordt. Thema’s die al maanden of zelfs jaren niet bijgehouden zijn, kunnen onveilig zijn. Het laatste dat je wilt is dat jouw WordPress website gehackt wordt.

Een eigen thema maken

Ben je gevorderd en wil je meer uit een thema halen? Dan is het ook mogelijk om een eigen thema te maken. Hiervoor heb je wel enige programmeerkennis nodig. Zo is het handig om goed de basis van HTML en CSS te kennen. PHP en Java zijn een pre. Er zijn twee manieren om een eigen thema te maken:

  • Een child theme aanmaken op een bestaand hoofdthema.
  • Een compleet eigen thema maken vanaf scratch.

Het meest populair, is het aanmaken van een child theme. Het voordeel van het maken van een child theme is dat zodra je het WordPress hoofd theme update, de wijzigingen niet verloren gaan. Met wijzigingen bedoelen we je eigen geschreven CSS en overig scripting dat je vervolgens opslaat in het style.css bestand of bijvoorbeeld in je eigen functions.php bestand.

Is WordPress goed te beveiligen?

Een WordPress website is wel gevoelig voor aanvallen, vooral omdat WordPress een open source systeem is. Dit komt natuurlijk omdat het platform momenteel erg populair is. Niet alleen bij de eindgebruikers, maar ook bij hackers natuurlijk. Gelukkig zijn er voor WordPress tal van mogelijkheden om jouw website goed te beveiligen. Dit kan uiteraard ook op server niveau. Een populaire beveiligings plugin die erg veel gebruikt wordt, is WordFence. WordFence is er in een gratis, maar ook betaalde versie. Deze plugin scant jouw complete rootfolder (hoofdmap van jouw website) op malafide software en bestanden. Ook houdt WordFence continue verdachte activiteiten in de gaten, en blokkeert indien noodzakelijk. Denk hierbij aan bijvoorbeeld IP adressen.

Kan een WordPress website goed gevonden worden?

Zeker weten! Een WordPress website kan dus goed gevonden, echter hebben we hier wel wat hulp bij nodig. Een goede tool die we jullie kunnen aanraden is de plugin Yoast SEO. Deze plugin is al gratis te gebruiken, echter wel met wat beperkingen, maar niet rampzalig. Deze plugin geeft je een goed inzicht van jouw SEO score wat betreft je webpagina. Per pagina kun je de verbeterpunten inzien. Zodra je deze punten netjes aanpakt, zal alles groen kleuren. Yoast SEO kijkt naar bijvoorbeeld de meta omschrijven en titel. Hierbij wordt gekeken of je bepaalde trefwoorden genoeg naar voren laat komen. Bekijk onze blog "Beter gevonden worden" voor meer informatie over het beter vindbaar maken van jouw website.

Is een WordPress website snel?

Een WordPress website is meestal in het begin erg snel, en zal langzamer kunnen worden naar mate je meer plugins installeert en andere taken laat uitvoeren op je website. Maar WordPress zou WordPress niet zijn, als hier geen plugin voor te krijgen is. Het klinkt misschien raar.. je website sneller maken door juist een plugin te installeren. Maar je moet het zo zien, als een plugin je website traag kan maken, dan moet een andere plugin dit ook weer goed kunnen maken. Een veel gebruikte plugin is W3 Total Cache. Bekijk het blog "Jouw WordPress website optimaliseren” voor meer informatie over het sneller maken van jouw WordPress website.

Heb je nu een beter beeld van WordPress?

Als het goed is, begrijp je nu een klein beetje van wat WordPress is, hoe het gebruikt kan worden en bovendien wat de mogelijkheden zijn. Aangezien WordPress erg groot en complex kan zijn, is dit maar een deel van de informatie. We zijn er in vogelvlucht doorheen gegaan zeg maar. Mocht je vragen hebben over WordPress, dan kun je die vrijblijvend stellen hieronder in de comments.

Kunnen jullie mij helpen met mijn WordPress website?

We helpen je graag verder met jouw WordPress website. Ook als je al een WordPress website hebt, of juist een hele nieuwe WordPress website wilt laten bouwen. Neem gerust telefonisch contact met ons op, of per e-mail en chat.

Geplaatst op Geef een reactie

WordPress website optimaliseren

WordPress website optimalisatie

WordPress website optimaliseren

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:

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>

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.

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

Het optimaliseren van jouw website met caching.

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:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType text/css "access 1 month"
    ExpiresByType text/html "access 1 month"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType text/x-javascript "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresDefault "access 1 month"
</IfModule>

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:

  1. Klik op de juiste domeinnaam die je wilt verbinden met de plugin.
  2. Op het huidige tabblad “Overview” zie je rechtsonder aan de pagina “Get your API token”. Klik hier op.
  3. 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.
  4. 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.
  5. 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.

  6. 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”
  7. 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:

  1. Ga naar “Plugins” > “WP Fastest Cache” > “Instellingen” > “CDN” en klikken op “CDN by Cloudflare”.
  2. We vullen hier de API token in dat wij van Cloudflare hebben ontvangen en klikken op “Next”.
  3. 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”.
  4. 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.
  5. 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”.
  6. 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:

  1. Klik allereerst op “Setup starten”.
  2. 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”.
  3. 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”.
  4. 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”.
  5. 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”.
  6. Na het afronden van de Setup wizard, worden alle afbeeldingen gecontroleerd.
  7. Vervolgens scroll je iets naar benden op de pagina tot je de button “Bulk smush nu” en hier klikken we op.
  8. Nu worden alle afbeeldingen die aanwezig zijn geoptimaliseerd voor jouw WordPress website.
  9. 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”.
  10. 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:

  1. Login met je juist aangemaakte account in bij GTMetrix (of bestaand account).
  2. Voer nu jouw URL in en start de test.
  3. Klik bij het tabblad “PageSpeed” op “Optimize images” en bekijk hier de te optimaliseren afbeeldingen.
  4. Je ziet hier als er afbeeldingen te optimaliseren zijn, een rijtje met mogelijke afbeeldingen. Klik hier op “Optimized version”.
  5. 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.
  6. 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.
  7. 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.