1.
Snelle websites met Joomla
DOOR: SIMON KLOOSTRA
JOOMLADAGEN 2015, ZEIST

2.
Simon Kloostra
 Webdesign: SK-web.nl
 SEO Projecten samen met o.a. Perfect Web Team
 SEO Workshops
 Blog: Joomlaseo.com
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

3.
SEO boek(en)
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
Apress.com (Engels, publicatie: mei) Van Duuren (Nederlands, publicatie: mei)

4.
Inhoud
 Plaatjes optimaliseren
 CSS & JS files​
 CDN​ (Content Delivery Network)
 Mobile devices​
 Extensions​
 Check website performance
 Vragen (op het einde graag)
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
 Waarom belangrijk?
 Check website performance​
 Webhost
 Beperk jezelf
 Templates
 Caching​
 G-Zip​

5.
Waarom is performance zo belangrijk
 Fijn voor jezelf
 Betere user-experience, daardoor ook:
 Hogere conversie, meer en langer paginabezoek:
 Hogere plek in Google (soms)
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
http://www.webperformancetoday.com/2014/04/09/web-page-speed-affect-conversions-infographic/

6.
Eerst: Backup!
 Maak een backup
 Sommige optimalisaties beperken functionaliteit of crashen zelfs de site
 Zorg altijd dat je terug kan
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

7.
Meten is weten (1)
 Meet eerst de beginsituatie:
 Y-slow (browser plugin)
 Pingdom tools ->
 Gtmetrix
 Google Pagespeed Insights
 Webpagetest.org
 Etc.
 Staar je niet blind op de score, maak bewuste keuzes
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

8.
Meten (2)
 Niet alleen meting
 Ook pijnpunten opsporen:
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

9.
Webhost
 Grote verschillen tussen hosts, let op reputatie, support, security, etc.
 PHP, mySQL, etc. up-to-date (of mogelijkheid to experimentele versies als PHP 7.0)
 Zoek naar een Joomla specialist
 Bieden ze optimalisatie pakketten aan (standaard of betaald)
 Automatische Joomla updates (Joomla 3 is sneller)
 Geavanceerde technieken (Varnish, SPDY, HTTP2), combinatie met bv CDN
 Server locatie waar je site bezocht wordt (USA, Europe, Asia)​
 Joomladagen.nl sponsoren meestal goede keus: Byte / Siteground
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

10.
Beperk jezelf (1)
 Installeer alleen wat je echt nodig hebt
 Betrouwbare ontwikkelaars (efficiënte code, compressie, caching)
 Beperk je front-end extensies
- Vermijd of beperk sliders (http://shouldiuseacarousel.com)
- Vermijd of beperk social media knoppen / feeds!!!
 Indien toch gewenst, misschien niet nodig op de homepage? Bijv. een chatbox?
 Let op externe scripts: Webfonts / Analytics / Adsense
 Zijn grote plaatjes nodig (minder / kleiner)
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

11.
Beperk jezelf (2)
Wat proberen we te bereiken:
 Sowieso zaken niet laden…….
 Reductie in bestandsgrootte (KB's)
 Reductie in aantal HTTP-requests (elk bestandje is 1 request)
 Hergebruik (cache) van spul wat al gedownload of gegenereerd is (server of lokaal)
 Resources toestaan gelijktijdig in plaats van na elkaar te laden
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

12.
Templates: commerciële template
 Mooi, bieden veel opties, veel template styles
 Nadelen: veel Javascript, veel CSS, ingewikkeld aan te passen
 Let op performance!!!
 Soms performance opties als:
- compressie aan te zetten in template opties
- Geen Bootstrap laden
- Andere: Lazy-loading (plaatjes), mobile detect, etc
 Sommige templates providers behoorlijk efficiënt:
http://joomlaseo.com/Blog/templates-performance-comparison
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

13.
Templates: zelfbouw
 Technisch uitdagender, maar:
 Alleen laden wat nodig is, je bepaalt dit zelf
 Let op performance, beperk aantal CSS en JS bestanden, (achtergrond) plaatjes, gebruik CSS3
 Geavanceerd: beperk door Joomla geladen resources, bv:
unset($this->_scripts[$this->baseurl .'/media/system/js/mootools-core.js']);
Zie voor meer informatie: http://perfectwebteam.nl/expert-sessie/joomla-templating
 Of gebruik plugins als:
- Mootools Enabler / Disabler
- JCC - JS CSS Control
- Nonumber Replacer (vervang complete string voor onnodig CSS / JS file door ‘niks’)
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

14.
Joomla caching (1)
 Opslaan van eerder gegenereerde weergaves op de server om snel opnieuw aan te bieden
 Voordelen: performance, performance, performance
 Nadelen: Nieuwe informatie soms niet getoond, complexiteit, niet-werkende functies
 Opgeslagen in bestandssysteem (normaal gesproken)
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

15.
Joomla caching (2) algemene instellingen
 3 waardes in te stellen
 Cache-afhandeling
 Cachetijd
 Kan eventueel overruled worden per module
 Opschonen via Systeem - Wis cache:
Artikel aanpassen, sluiten, naar Wis cache, Opschonen, naar artikel, etc….
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

16.
Joomla caching (3) Systeem-Cache plugin
 Cachet volledige pagina’s, nog sneller maar:
 Geen opties, behalve “Gebruik browsercaching”, laat deze uit staan
 Meer kans op issues, vooral bij interactieve pagina’s als contactformulieren, webshops, e.d.
 Beste gebruik bij volledig statische sites
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

17.
Joomla caching (3) Cache plugins
 NoNumber Cache Cleaner (must-have?):
- Makkelijk opschonen, ook binnen artikel
- Automatisch opschonen bij Opslaan, per tijdsinterval etc.
- Opschonen externe zaken (Siteground Cache, CDN, memcache, JotCache, etc)
 JotCache (geavanceerd): Alternatief voor Systeem-Cache plugin:
- Efficiënter
- Beter finetunen: Uitsluiten browsers, extensies, module posities
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

18.
Leverage Browser Caching (1)
Lokaal (eigen PC) opgeslagen resources (plaatjes, CSS, JS, etc)
 Substantiële performance verbetering
 Stukje code in .htaccess (gebruik IF-statement):
 Makkelijk in te stellen, nauwelijks nadelen
 Stel per bestandstype in hoe lang te wachten tot opnieuw downloaden
 Vertraging afhankelijk van doel
 Soms (bijv CSS aanpassing) kleine issues bij vervangen
 Server moet mod_expires ondersteunen (vrijwel altijd OK)
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

19.
Leverage Browser Caching (2)
 If-statement voor servers die mod_expires niet ondersteunen (bv localhost)
<IfModule mod_expires.c>
FileETag MTime Size
AddOutputFilterByType DEFLATE text/plain text/html text/xml text/css
application/xml application/xhtml+xml application/rss+xml application/javascript
application/x-javascript
ExpiresActive On
ExpiresDefault "access plus 1 seconds“
ExpiresByType text/html "access plus 600 seconds“
ExpiresByType text/css "access plus 604800 seconds“
ExpiresByType image/jpeg "access plus 2592000 seconds“
ExpiresByType image/png "access plus 2592000 seconds“
ExpiresByType image/gif "access plus 2592000 seconds"
Etc.
</IfModule>
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

20.
G-zip
 Compressie van je Joomla output
(goede browsersupport, server moet mod_gzip of mod_deflate ondersteunen)
 Aanzetten in Algemene instellingen (server tab):
 Check compressie: http://www.feedthebot.com/tools/gzip/
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

21.
Plaatjes (1) Analyse
 Plaatjes vormen vaak groot deel van je pagina’s. Besparing dus al snel efficiënt.
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

22.
Plaatjes (2) Methodes van besparing
 Klein opslaan vanuit Photoshop (exacte maat)
 Kies efficiënt formaat: .GIF .PNG .JPG, maar ook Progressive versus Baseline
 Lazy-load images (plugin)
 Responsive images: <picure> - element: meerdere formaten
 Sprites (beperkt HTTP-requests)
 Base-64 encoding (ingebouwd in Yireo Scriptmerge), of handmatig via www.base64-image.de:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4........VORK5CYII=" alt="" />
 Lossless / Lossy compression: Smush.it (bestaat niet meer), Kraken.io, ImageRecycle, etc.
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

23.
Plaatjes (3) Online optimalisatie
 Lossless / Lossy compression: Vooral .PNG zeer veel winst (PNG bv vaak > 70%)
 Voorbeeld: compresor.io: Zowel .png als .jpg, meerdere bestanden in 1 keer, gratis en betaald
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

24.
Plaatjes (4) Online optimalisatie
 Andere: Kraken.io: Zowel .png als .jpg, meerdere bestanden in 1 keer, gratis en betaald
 Andere diensten: Smush.it, TinyPNG, TinyJPG, Media4x
 Desktop: RIOT (Radical Image Optimization Tool)
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

25.
Plaatjes (5) Lossless compressie plugin
 ImagRecycle biedt een plugin die compressie binnen Joomla biedt
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

26.
CSS en Javascript optimaliseren (1)
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

27.
CSS en Javascript optimaliseren (2)
 Voorkom scripts: Mootools Enabler, JCC - JS CSS Control of zelfs NoNumber Rereplacer
 Verwijder Mootools liefst helemaal en eventueel andere JS en CSS bestanden die niet nodig
zijn. Let op: specifieke toepassingen of extensies hebben dit soms toch nodig (frontend editing,
Hikashop)
 Combineer CSS en JS bestanden. Dit scheelt HTTP-requests
 Comprimeer bestanden (witruimte weg) of gebruik de min.js versies (bv Jquery)
 Voor Javascript: Gebruik Defer en Async (eerst site laden, dan pas uitvoeren)​
 Ingewikkeld he? Valt mee….
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

28.
CSS en Javascript optimaliseren (3)
 Gebruik gewoon een optimalisatie plugin! Er zijn 3 toppers
 Alle 3 bieden ze CSS en Javascript compressie en combinatie, vaak met async of defer opties.
Ook meestal de mogelijkheid om extensies / bestanden te Excluden
 Yireo ScriptMerge: Redelijk makkelijk, met technische opties optioneel, gratis. Extra opties:
WebP support, Remove Mootools, CDN support, advanced compression techniques
 JCH-Optimize: Makkelijk in gebruik, gratis en Pro, extra opties:
Kraken.io, lazy-loading, CDN-support, Sprite generator, Optimize delivery
 Jbetolo: Wat technischer in gebruik, gratis. Extra opties:
Smush.it, .htaccess optimalisatie, CDN support (+ clearing!), Lazy-loading
 Gebruik maar 1 van deze extensies per site!
 Experimenteer om te bepalen welke het beste voor je werkt
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

29.
CSS en Javascript optimaliseren (4)
 Voorbeeld: Yireo ScriptMerge:
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

30.
CSS en Javascript optimaliseren (5)
 Voorbeeld: JCH-Optimize Exclude opties:
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

31.
Content Delivery Networks (1)
 Vooral nodig voor sites in grote landen / wereldwijd
 Vooral snelheidswinst, maar ook security
 Bekende providers:
- Amazon Cloudfront
- MaxCDN
- Cloudflare (focus op security)
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

32.
Content Delivery Networks (2)
 Vaak: Statische resources (plaatjes, CSS, JS) van je website op globale servers
 Redelijk makkelijk te implementeren met bv CDN for Joomla (NoNumber, gratis en Pro)
 Verandert het pad naar je bestanden, bv van:
<img src="images/logo.png" />
naar
<img src="http://huyty.cdnxxxxxxx.netdna-cdn.com/images/logo.png" />
<img src="http://cdn.joomlaseo.com/images/logo.png" /> (beter voor SEO)
 Wel extra laagje complexiteit, cache issues, en let op SEO (zowel positief als negatief)
 Pas image sitemaps eventueel aan
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

33.
Content Delivery Networks (3, vb 1)
 Account bij MaxCDN en domein invoeren (eventueel custom domain en SEO settings)
 Invoeren in CDN for Joomla:
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

34.
Content Delivery Networks (4, vb 2)
 Cloudflare: Gratis in de basis versie
 Vaak zeer makkelijk in te stellen bij veel hosts
 Via Cpanel: Aanklikken en account aanmaken, klaar:
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

35.
Mobiele devices (1)
 Wifi en 3G / 4G vaak niet optimaal
 Performance nog belangrijker
 Limiteer aangeboden bronnen nog meer: plaatjes, sliders, hele modules
 Voor plaatjes: biedt plaatjes op maat aan
 Niet: display:none, maar echt NIET laden
 Selectief aanbieden: op basis van device of browser
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

36.
Mobiele devices (2)
 Bied selectieve resources aan met user-agent detection, ingebouwd in plugins:
- Advanced module manager (NoNumber)
- User Agent Detection (Rene Kreijveld, niet op JED, maar GitHub)
- Simple Mobile Detect (Conflate): voorbeeld:
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

37.
Nogmaals meten!
 En, verbeterd???
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

38.
Niet vergeten: Doet de site het nog…..
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

39.
Meer informatie?
 Deze slides: www.slideshare.net/joomlaseo
Joomla SEO: www.joomlaseo.com/Performance
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015