Joomladagen 2015 Joomla Performance
-
Upload
simon-kloostra -
Category
Internet
-
view
473 -
download
0
Transcript of Joomladagen 2015 Joomla Performance
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)
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
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)
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
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)
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
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
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
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
Meten (2) Niet alleen meting
Ook pijnpunten opsporen:
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Plaatjes (5) Lossless compressie plugin ImagRecycle biedt een plugin die compressie binnen Joomla biedt
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
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 nodigzijn. 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
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
CSS en Javascript optimaliseren (4) Voorbeeld: Yireo ScriptMerge:
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
CSS en Javascript optimaliseren (5) Voorbeeld: JCH-Optimize Exclude opties:
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
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
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
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
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
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
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
Meer informatie?
Deze slides: www.slideshare.net/joomlaseo
Joomla SEO: www.joomlaseo.com/Performance
PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015