Joomladagen 2015 Joomla Performance

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

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

SEO boek(en)
Apress.com (Engels, publicatie: mei) Van Duuren (Nederlands, publicatie: mei)

Inhoud
 Plaatjes optimaliseren
 CSS & JS files
 CDN (Content Delivery Network)
 Mobile devices
 Extensions
 Check website performance
 Vragen (op het einde graag)
 Waarom belangrijk?
 Check website performance
 Webhost
 Beperk jezelf
 Templates
 Caching
 G-Zip

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

Eerst: Backup!
 Maak een backup
 Sommige optimalisaties beperken functionaliteit of crashen zelfs de site
 Zorg altijd dat je terug kan

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

Meten (2)
 Niet alleen meting
 Ook pijnpunten opsporen:

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

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)

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

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

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’)

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)

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….

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

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

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)

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>

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/

Plaatjes (1) Analyse
 Plaatjes vormen vaak groot deel van je pagina’s. Besparing dus al snel efficiënt.

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.

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

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)

Plaatjes (5) Lossless compressie plugin
 ImagRecycle biedt een plugin die compressie binnen Joomla biedt

CSS en Javascript optimaliseren (1)

 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….

 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

 Voorbeeld: Yireo ScriptMerge:

 Voorbeeld: JCH-Optimize Exclude opties:

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)

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

Content Delivery Networks (3, vb 1)
 Account bij MaxCDN en domein invoeren (eventueel custom domain en SEO settings)
 Invoeren in CDN for Joomla:

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:

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

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:

Nogmaals meten!
 En, verbeterd???

Niet vergeten: Doet de site het nog…..

Meer informatie?
 Deze slides: www.slideshare.net/joomlaseo
Joomla SEO: www.joomlaseo.com/Performance

Joomladagen 2015 Joomla Performance

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (20)

Semelhante a Joomladagen 2015 Joomla Performance

Semelhante a Joomladagen 2015 Joomla Performance (20)

Joomladagen 2015 Joomla Performance