Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Joomladagen 2015 Joomla Performance

2,238 views

Published on

Presentattie Joomladagen 2015:
Net als bij welk CMS dan ook laden Joomla sites soms traag. Echter, ook als je site al wel redelijk snel laadt kan de laadtijd nog steeds drastisch versneld worden. je zult er versteld van staan hoe makkelijk je veel winst kan behalen. De winst valt op en aantal punten te behalen:

Zoek een goede host en optimaliseer deze omgeving
Optimaliseer Joomla
Simpele regels in .htaccess
Beperk je in extensies / externe bronnen
Optimaliseer CSS en Javascript
Gebruik optimalisatie plugins
Optimaliseer plaatjes
Optimaliseer voor mobiele devices
http://joomlaseo.com/Blog/talking-at-the-dutch-joomladagen-2015

Published in: Internet
  • Be the first to comment

Joomladagen 2015 Joomla Performance

  1. 1. Snelle websites met Joomla DOOR: SIMON KLOOSTRA JOOMLADAGEN 2015, ZEIST
  2. 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. 3. SEO boek(en) PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015 Apress.com (Engels, publicatie: mei) Van Duuren (Nederlands, publicatie: mei)
  4. 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. 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. 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. 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. 8. Meten (2)  Niet alleen meting  Ook pijnpunten opsporen: PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
  9. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 25. Plaatjes (5) Lossless compressie plugin  ImagRecycle biedt een plugin die compressie binnen Joomla biedt PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
  26. 26. CSS en Javascript optimaliseren (1) PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
  27. 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. 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. 29. CSS en Javascript optimaliseren (4)  Voorbeeld: Yireo ScriptMerge: PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
  30. 30. CSS en Javascript optimaliseren (5)  Voorbeeld: JCH-Optimize Exclude opties: PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
  31. 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. 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. 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. 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. 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. 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. 37. Nogmaals meten!  En, verbeterd??? PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
  38. 38. Niet vergeten: Doet de site het nog….. PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015
  39. 39. Meer informatie?  Deze slides: www.slideshare.net/joomlaseo Joomla SEO: www.joomlaseo.com/Performance PRESENTATIE SIMON KLOOSTRA, JOOMLASEO.COM, JOOMLADAGEN 2015

×