Joomladagen 2015 Joomla Performance

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

Transcript of Joomladagen 2015 Joomla Performance

Snelle websites met Joomla

DOOR : S I M ON K LOOST R A

JOOM LADAGEN 2015, Z E I ST

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 (1)

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

Nogmaals meten! En, verbeterd???

PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

Niet vergeten: Doet de site het nog…..

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