layout: true class: animated, fadeIn --- class: start
Een AA score voor je website
JoomlaDagen 2018
René Kreijveld
4:3 versie
16:9 versie
.hide[
4x3 versie
] --- # René Kreijveld - Werkt als webdeveloper/Joomla specialist bij DSD Business Internet in Deurne - 200+ Joomla websites, 50+ Joomla extensies - Spreker op Joomladagen / JandBeyond / JUGS - Joomla 3 Certified Administrator
www.dsd.nl
www.renekreijveld.nl
rene@dsd.nl
twitter.com/renekreijveld
facebook.com/rene.kreijveld
linkedin.com/in/renekreijveld
github.com/renekreijveld
--- #Waarom is een snelle website belangrijk? - Als je website niet snel is, zijn bezoekers snel verdwenen. - Een snelle website scoort hoger bij zoekmachines. -- #Hoe wordt je website snel? - Gebruik kwalitatief goede hosting (up-to-date PHP, caching, snelle disks etc.). - Joomla en extensies up-to-date. - Optimaliseer je content en je template. --- #Meten is weten - Er zijn veel tools beschikbaar om de performance van je website te meten:
-
Pingdom Website Speed Test
-
Yellow Lab Tools
-
PageSpeed Insights
-
WebPageTest
-
GTMetrix
-- - Ik werk zelf graag met GTMetrix: duidelijke analyses en 2 soorten metingen. - Goede inzichtelijke Waterfall, Timings en meethistorie per website. --- #GTMetrix - GTMetrix bepaalt PageSpeed score en YSlow score van F t/m A, A is beste. -- - Website performance = Front-end Performance + Back-end performance. -- - Focus ligt op front-end performance, inclusief elementen die jij kunt aanpassen. -- - Back-end performace is veel moeilijker te analyseren. -- - Back-end verbeteringen: code-optimalisaties, hosting aanpassingen. -- - Streven naar A / A score is goed, maar kijk wel of het de tijd- en geldinvestering waard is. -- - Een grote website zonder A / A score maar die wel laadt binnen 1 seconde is goed! --- #Optimalisatie project -
Helix Ultimate Quickstart website
: - Joomla 3.8.5 (inmiddels geupdate naar 3.8.6) - Helix Ultimate template - SP Page Builder Lite - Website gehost bij
Digital Ocean
, Amsterdam AM3 datacenter. - 1 GB Memory, 1 CPU, 25 GB ssd disk, 1 TB transfer (€ 4,10 per maand!) - VPS gemanaged via
Server Pilot
(gratis pakket). - PHP 7.1.16. -- #Algemeen bij een optimalisatie project: -- ##Backup, Backup, Backup !!! --- #Installatie Helix Ultimate Quickstart - Quickstart bestanden geupload, standaard installatie doorlopen -- ##Standaard aanpassingen na installatie: - Post-installatie berichten lezen - NL Taalbestanden installeren - Configuratie: Gebruik URL herschrijven: Ja - Foutrapportage: geen - Tijdzone server: Amsterdam - htaccess.txt op de server hernoemen naar .htaccess Live site:
aascore.joomlaprofessionals.nl
--- #GTMetrix nulmeting uitvoeren - Voordat je enige aanpassing doet, altijd **eerst** een nulmeting. - Maak een account aan bij GTMetrix (gratis). - Je kunt dan veel standaard instellingen vastleggen voor elke meting: - Time Zone - Default Test Server Region (London, UK) - GTMetrix houdt een historie bij van de metingen - Geef de URL in van de te analyseren website. --- class: center video
Video nulmeting GTMetrix.com
--- #Resultaat
Nul-
meting
PageSpeed
C(73%)
YSlow
D(68%)
Load time
0.7s
Total Page Size
752KB
Requests
40
--- #Quick wins - GZip Compressie - Caching --- #GZip compressie - Alle code en bestanden moeten naar de browser worden gedownload. -- - Met GZip compressie wordt html en bestanden gecomprimeerd op de server en gedecomprimeerd in de browser. -- - Resultaat: minder data hoeft verzonden te worden. - Joomla heeft daar een standaard optie voor:
--- #GZip compressie - Test vooraf of je die optie moet aanzetten! -- - Dit kan via
https://checkgzipcompression.com
--
--- #Caching - Eenvouding aan te zetten in de configuratie
--- #Platform specifieke caching
- Gebruik deze optie HTML uitvoer voor desktop anders is dan tablet of smartphone. -- - Bijvoorbeeld als je voor tablet/smartphone een aparte template gebruikt. --- #Systeemcache
- Keuze tussen conservatief en progressief -- - **Conservatief**: kleine systeemcache. Per module instelbaar of deze gecached worden. Aan te bevelen bij sites met veel updates. -- - **Progressief**: grote cache. Momentopname van alle modules tegelijk per pagina. Modules zijn niet meer individueel instelbaar. -- - Meer achtergrond informatie:
OSTraining: Joomla Cache Options
--- #Serverside caching bij de webhoster - Vaak bieden hostingproviders op hun servers ook cacheopties:
-- - Kijk uit met dubbel cachen! -- - De webserver voor aascore.joomlaprofessionals.nl heeft ook caching,
dus geen aanpassingen in Joomla. --- #Terug naar de testresultaten
--- #Terug naar de testresultaten
--- #Requests zichtbaar Waterfall tab
--- #Waterfall
--- #Waterfall ook opvraagbaar via browser - Safari
Alt-Cmd-A - Firefox
Alt-Cmd-E
Ctrl-Shift-E - Chrome
Alt-Cmd-I, netwerk tab
Ctrl-Shift-I, netwerk tab -- - Buffer/cache uitschakelen, daarna verversen (F5). -- - CSS bestanden, Javascripts, fonts, afbeeldingen, media, flash etc. -- - Requests zijn te verminderen door samenvoeging en compressie. --- #CSS en Javascript compressie in Helix - Helix Ultimate heeft CSS en Javascript samenvoeg en compressie mogelijkheden. - Aan te zetten via Advanced opties. --- class: center video
Activeren CSS/Javascript samenvoeg en compressie
--- #Resultaat
Nul-
meting
Merge
compress
PageSpeed
C(73%)
C(76%)
YSlow
D(68%)
C(75%)
Load time
0.7s
1.2s
Total Page Size
752KB
737KB
Requests
40
23
--- #PageSpeed
--- #YSlow
--- #PageSpeed: Leverage Browser Caching - De server vraagt de browser om bepaalde bestanden te bewaren zodat die later niet opnieuw van de server geladen moeten worden. #YSlow: Add Expires headers - Instelling in .htaccess die aangeeft hoe lang bepaalde type bestanden door de browser bewaard moeten worden. -- Dus met **add expires headers** activeer je **leverage browser caching**
-- Hoe? Door het toevoegen van code in .htaccess.
-- Of via **
JCH Optimize Pro
**. --- #Add Expires headers - JCH Optimize Pro is een system plugin, speciaal voor frontend optimalisaties. - Bij installatie wordt automatisch leverage browser caching code geplaatst **in .htaccess**. - Voorbeelden: **ExpiresDefault "access plus 1 month"**
Standaard 1 maand bewaren **ExpiresByType application/rss+xml "access plus 1 hour"**
RSS feed 1 uur bewaren **ExpiresByType image/jpg "access plus 1 month"**
Jpeg afbeeldingen 1 maand bewaren --- class: center video
Installatie JCH Optimize Pro
--- #Resultaat
Nul-
meting
Merge
compress
Leverage
PageSpeed
C(73%)
C(76%)
B(82%)
YSlow
D(68%)
C(75%)
B(88%)
Load time
0.7s
1.2s
1.3s
Total Page Size
752KB
737KB
738KB
Requests
40
23
23
--- #Wat staat nog open?
--- #Wat staat nog open?
--- #JHC Optimize Pro - Frontend optimalisatie system plugin. -- - Leverage browser caching (hebben al gezien). -- - Minimaliseert de HTML uitvoer. -- - Samenvoegen en comprimeren CSS en Javascripts. -- - Uitsluitingen mogelijk: per CSS, per Javascript, per menu-item. -- - Strategisch asynchroon laden van Javascript onderaan in de HTML. -- - Samenvoegen van achtergrondafbeeldingen in sprites. -- - Automatisch afbeeldingdimensies (width en height) toevoegen. -- - Lazy loading van afbeeldingen. -- - Geoptimaliseerde CSS levering (critical CSS). -- - Afbeeldingen optimaliseren. --- #JHC Optimize Pro
--- class: center, middle #JOOMLANL25 **25% kortingscode**! --- class: center video
Activeren/configureren JCH Optimize Pro
--- #Resultaat
Nul-
meting
Merge
compress
Leverage
JCH
Optimize
PageSpeed
C(73%)
C(76%)
B(82%)
B(85%)
YSlow
D(68%)
C(75%)
B(88%)
B(89%)
Load time
0.7s
1.2s
1.3s
1.0s
Total Page Size
752KB
737KB
738KB
719KB
Requests
40
23
23
21
--- #Nog twee "grote" problemen over - PageSpeed: serve scaled images
--- #Nog twee "grote" problemen over - YSlow: use cookie free domais
--- #Serve scaled images
- Thumbnails van SP Easy Image Gallery. -- - De originele thumbnails zijn 400x400 pixels. -- - Worden getoond als 85x85 pixels. --- #Thumbnail inspect
-- - Wens: thumbnail die **echt** 85x85 pixels groot is. -- - Voordeel: kleiner bestand, scherpere thumbnail. Dus: optimalisatie. --- #Oplossing: hack de module! - Module gecloond naar mod_speasyimagegallery_dsd. - Parameters toegevoegd voor de breedte en hoogte van de thumbnail. - PHP mthumb library toegevoegd voor server-side afbeeling generatie. - Integrate cookie free domains toegevoegd. --- #Use cookiefree domains? Serve static content from a different domain to avoid unnecessary cookie traffic. ##Details from Yahoo! When the browser requests a static image and sends cookies with the request, the server ignores the cookies. These cookies are unnecessary network traffic. -- - We moeten dus een extra domein maken die naar dezelfde website wijst. -- - In Joomla stellen we in wat het hoofddomein is waar wel cookies bij worden gezet. -- - In JCH Optimize Pro stellen we in over welk domein zonder cookies we statische bronnen uitserveren. --- #Extra subdomein naar dezelfde website
--- #Cookie-domein in Joomla - Op de volgende video ontbreekt het instellen van het cookie-domein in Joomla,
maar, dat is wél ingesteld! - Systeem > Algemene instellingen > Tab Website
--- class: center video
Afbeeldingen optimalisatie
cookiefree domain
--- #Resultaat
Nul-
meting
Merge
compress
Leverage
JCH
Optimize
Cookieless
PageSpeed
C(73%)
C(76%)
B(82%)
B(85%)
A(100%)
YSlow
D(68%)
C(75%)
B(88%)
B(89%)
A(92%)
Load time
0.7s
1.2s
1.3s
1.0s
0.9s
Total Page Size
752KB
737KB
738KB
719KB
567KB
Requests
40
23
23
21
21
--- #Alternatief voor de Easy Gallery module - De module geheel depubliceren. --- #Samenvattend -- - Besef dat je net één pagina hebt geoptimaliseerd. -- - Een AA score is (relatief makkelijk) mogelijk ... -- met de juiste tools. -- - Je moet goed onderzoeken wat oorzaken van testuitslagen zijn. -- - Bestudeer uitgebreid de waterfall. -- - Overweeg "zware" of vertragende content weg te laten of alternatieven te zoeken. --- class: center, middle #Vragen? --- class: center, middle #Slides:
renekreijveld.nl/slides/aascore
--- #Deze presentatie Gebouwd met
remark
Help: .blue[
] volgende .blue[
] vorige .blue[Home] naar eerste slide .blue[End] naar laatste slide .blue[b] / .blue[m] / .blue[f] wissel blank / spiegel / fullscreen .blue[p] presentatie mode © René Kreijveld, DSD Business Internet 2018