Een Joomla CDN met MaxCDN

logo pdb
Backups, updates & easy restores for Joomla & Wordpress (read the review). Use coupon JOOMLASEO for €25 in free credits to try it out.

Ik heb al een korte video gemaakt over hoe makkelijk het is om een CDN voor je Joomla website op te zetten. Een CDN kan je performance flink verbetere, zeker voor wereldwijd opererende sites. Je statische bestanden als onder andere CSS, Javascript, plaatjes, enzovoorts worden dan vanuit het CDN-netwerk aan de bezoeker aangeboden, vanaf een server dicht bij deze gebruiker. Ook als je website dan gehost is in Amsterdam laadt hij overal snel, ook in bijvoorbeeld Singapore. In deze tutorial beschrijf ik een volledige, geoptimaliseerde set-up voor MaxCDN met Joomla, met de NoNumber plugin CDN for Joomla. Ook beschrijf ik het opzetten van een custom domain, en het goed zetten van de SEO settings.

Before you start, it is alays nice to record your current sitespeed using a tool like Pingdom Tools or Google Pagespeed, so you can compare the before and after situation.

1: Registreer je bij MaxCDN

Ik ben zelf sinds het schrijven van deze blogpost geswitched naar KeyCDN, maar MaxCDN blijft een uitstekende CDN provider.

CDN tip: KeyCDN

Op zoek naar een makkelijk op te zetten CDN? Probeer KeyCDN. Het is erg snel en biedt gratis Let's Encrypt SSL integratie. Je kan het trouwens gratis uitproberen!

Eerst moey je een MaxCDN account registreren (eventueel met een discount). Met Joomla moet je dan een pull-zone opzetten, dus ga naar Pull Zones, dat is de eerste optie die je ziet. Klik dan op Create a Pull Zone. Hier moet je een paar gegevens over je website invullen:.

max-cdn-joomla-installatie

Er zijn maar een paar parameters die je hoeft in te vullen:

  • Pull Zone Name: Gewoon een korte naam die je website beschrijft
  • Origin server URL: De volledige URL van je website, inclusief http://
  • Compression: Hiermee zet je G-zip compressie van je CDN bestanden aan, zet een vinkje bij Enable.

Er zijn meer opties die je kunt invullen, zoals Custom CDN Domain, maar die negeren we eerst even. Klik dus nu op de Create button. Dit creeert nu de pull-zone, en gaat nu alle bestanden van je website binnenhalen en over het hele CDN-netwerk verspreiden. Je ziet nu ook een CDN URL in je dasboard staan, meestal iets als xxxxxxxxx.netdna-cdn.com. Deze waarde gaan we gebruiken in de Joomla plugin. 

Je kunt eventueel meer geavanceerde parameters invullen voor onder andere caching, hotlinking, enzovoorts, maar dat is niet per se nodig, en dat behandelen we nu niet.

logo 500

2: NoNumber plugin "CDN for Joomla"

De makkelijkste manier om het CDN te integreren in Joomla is de NoNumber CDN for Joomla plugin. Ik gebruik de Pro-versie, maar waarschijnlijk heb je genoeg aan de gratis versie. Installeer hem en zoek dan in het Pluginbeheer de Systeem - NoNumber CDN for Joomla! plugin op.

nonumber-cdn-voor-joomla

Het enige wat je nu hoeft te doen is de CDN URL opgeven die je van MaxCDN kreeg. Alle andere waardes staan eigenlijk al goed, tenzij je gekke bestandstypen gebruikt (bijvoorbeeld lokale .woff bestanden of zo). Op dit moment is het CDN actief, kijk nu maar eens hoe snel je website laadt. Mijn eigen website draaide ongeveer 25% sneller met een CDN. MaxCDN heeft ook zelf een basic tutorial over deze set-up geschreven.

3: Gevorderde configuratie: een custom CDN domain

In veel gevallen ben je nu al klaar, maar in een aantal gevallen wil je het CDN toch liever beter inrichten. Een van de belangrijkste redenen kan zijn dat je een mooiere URL nodig hebt in de vorm van een custom domein:

  • Huidige URL voor bijvoorbeeld plaatjes: https://cdn-url-xxxxx.netdna-cdn.com/images/xxxxxx
  • Custom CDN domain URL: cdn.website.com/images/xxxxx

In het 2e geval lijkt het dus alsof je plaatjes vanaf een subdomain van je eigen website worden geladen, en niet vanaf de externe URL van het CDN. Dit kan ook vanuit SEO oogpunt beter zijn. Dit is ook prima te doen. Het vergt een paar extra stappen, maar eigenlijk is het vrij simpel. Ga terug naar je MaxCDN settings. Ga dan naar Settings en vul bij Custom Domains een subdomein in dat je wilt gaan gebruiken, inclusief je website, bijvoorbeeld cdn.joomlaseo.com:

cdn custom domein 

Aan de CDN kant staat alles nu goed. Echter, aan de host-kant bestaat dit subdomein nog niet, die moeten we ook daar aanmaken natuurlijk. Dat kan bij vrijwel elke host, met welk tool ook, maar ik gebruik Cpanel. Vanuit het Cpanel dashboard klik je op Simple DNS Zone Editor:

cPanel custom domein

Gebruik nu de MaxCDN settings om een CNAME record aan te maken. Vul eerst het gewenste subdomein in, ook weer inclusief de website zelf, en als tweede vul je de oorspronkelijke CDN domein naam in:

cPanel custom domein

4: Update de plugin settings

Nu het subdomein is aangemaakt staan zowel het CDN als je host goed ingesteld, alleen in Joomla moet je dit nog weer even aanpassen. Ga weer naar het Pluginbeheer en zoek weer naar de CDN for Joomla plugin van NoNumber. Vul nu weer als CDN Domain het custom domein (in mijn geval dus cdn.joomlaseo.com). Nu heb je een mooie URL voor je plaatjes en andere bestanden, perfect. Echter, er zijn nog een paar kleine dingetjes:

5: SEO settings aan de MaxCDN kant

Ook aan de MaxCDN kant kun je SEO gerelateerde instellingen vinden, de SEO Settings. Google kan namelijk je bestanden met een CDN op meerdere plekken aantreffen. Alle bestanden op het CDN staan namelijk ook nog steeds op je website, en zijn daar ook gewoon bereikbaar. Zeker wat plaatjes betreft kan dit gezien worden als duplicate content (voor gewone HTML content is er geen probleem). Met de SEO Settings kun je dit goed opzetten.

Ga dus op het CDN naar je pull-zone en ga naar het tabje SEO Settings. Standaard staat daar nu niets ingesteld, maar dat gaan we veranderen. Zet vinkjes bij alle drie de opties:

  • Canonical Header: Dit voegt een HTTP header toe aan je CDN assets om Google te vertellen waar het CDN-bestand oorspronkelijk is gehost en voorkomt duplicate content issues.
  • Robots.txt: Hiermee voeg je een robots.txt bestand aan je CDN toe die vertelt waar Googe wel of niet mag komen, net als in je eigen Joomla installatie
  • Custom Robots.txt: Kopieer gewoon de inhoud van je standaard robots.txt bestand en plak dat hier in:

Control Panel Pull Zone SEO settings

Nu worden je plaatjes netjes geindexeerd vanaf maar 1 plek: het CDN (andersom kan niet als je een CDN gebruikt).

6: Update je sitemap!

Als je gebruik maakt van image sitemaps moet je zorgen dat hierin ook de CDN locatie wordt gebruikt, en niet de locatie op je eigen server. Als je een sitemap extensie gebruikt zal die dit waarschijnlijk voor je goed zetten. Ik gebruik Jsitemap, en dat doet dat netjes. Controleer of jouw extensie dit ook netjes doet. Als je de sitemap handmatig hebt gemaakt of een on-line generator gebruikt moet je dit aanpassen of opnieuw aanmaken. In de broncode ziet dat er als het goed is zo uit:

<url>
<loc>http://heel-spur.info/kinesio-tape</loc>
<image:image>
<image:loc>
http://cdn.heel-spur.info/images/new/kinesiotape-foot.jpg
</image:loc>
<image:title>kinesiotape-foot</image:title>
</image:image>
</url>

7: Verifieer het custom domain in je webmaster tools account

Dan nog een laatste stap: informeer Google over je nieuwe subdomain. Je hoeft alleen de site als nieuwe site te registreren. Als je de verificatie voor de hoofd-site al hebt gedaan met een HTML-bestandje dan is dit erg makkelijk: dat bestandje staat ook op het CDN, en dus op het subdomein, en de verificatie hoeft je dus maar een paar seconden te kosten.

En dat is alles....  Mocht je meer informatie nodig hebben, hier zijn een paar bronnen die ik heb gebruikt, allemaal interessant leesvoer:

CDN tip: KeyCDN

Op zoek naar een makkelijk op te zetten CDN? Probeer KeyCDN. Het is erg snel en biedt gratis Let's Encrypt SSL integratie. Je kan het trouwens gratis uitproberen!

Over deze site

Joomlaseo.com is volledig gebouwd en geschreven door Simon Kloostra, SEO Specialist en Webdesigner uit Utrecht. Ik heb ook een boek geschreven en blogs voor bedrijven als OStraining, TemplateMonster, SEMrush en dergelijke.