Joomla snelheid van de website verbeteren. Presentatie van Hans Kuijpers gegeven tijdens de Joomla Gebruikersgroep 's-Hertogenbosch 2018

1. SNELLERE WEBSITESSNELLERE WEBSITES
OPTIMALISATIE VAN JOOMLA WEBSITEOPTIMALISATIE VAN JOOMLA WEBSITE
Presentatie van Hans Kuijpers

2. WAAROM?WAAROM?
Omdat wachten niet leuk is... het kost je klanten

3. source: Giphy

4. PERCEIVED PERFORMANCEPERCEIVED PERFORMANCE
Hoe snel de gebruiker denkt dat je website is.

5. PERCEIVED PERFORMANCEPERCEIVED PERFORMANCE
Hoe snel de gebruiker denkt dat je website is.
Vaak belangrijker dan de daadwerkelijke snelheid van je site

6. DRIE GRENZEN VOOR SNELHEIDDRIE GRENZEN VOOR SNELHEID
0.1 sec - direct
1.0 sec - okig
10 sec - dikke doei
source: Response Times: The 3 Important Limits - by Jakob Nielsen on January 1, 1993

7. DRIE GRENZEN VOOR SNELHEIDDRIE GRENZEN VOOR SNELHEID
0.1 sec - direct
1.0 sec - okig
10 sec - dikke doei
source:
Note: nu 25 jaar verder zal 5 sec de max zijn.
Response Times: The 3 Important Limits - by Jakob Nielsen on January 1, 1993

8. HOE KAN HET SNELLER?HOE KAN HET SNELLER?
Blijf up te date

9. HOE KAN HET SNELLER?HOE KAN HET SNELLER?
Blijf up te date
Joomla!

10. HOE KAN HET SNELLER?HOE KAN HET SNELLER?
Blijf up te date
Joomla!
Joomla extensies

11. HOE KAN HET SNELLER?HOE KAN HET SNELLER?
Blijf up te date
Joomla!
Joomla extensies
Hosting

12. HOE KAN HET SNELLER?HOE KAN HET SNELLER?
Blijf up te date
Joomla!
Joomla extensies
Hosting
Optimaliseer

13. HOE KAN HET SNELLER?HOE KAN HET SNELLER?
Blijf up te date
Joomla!
Joomla extensies
Hosting
Optimaliseer
Hosting

14. HOE KAN HET SNELLER?HOE KAN HET SNELLER?
Blijf up te date
Joomla!
Joomla extensies
Hosting
Optimaliseer
Hosting
Extensies

15. HOE KAN HET SNELLER?HOE KAN HET SNELLER?
Blijf up te date
Joomla!
Joomla extensies
Hosting
Optimaliseer
Hosting
Extensies
Template

16. METEN IS WETENMETEN IS WETEN
Er zijn vele tools beschikbaar. Kies degene die je fijn
vindt werken.
- combinatie YSlow en PageSpeed
Yellow Lab Tools
Pingdom Website Speed Test
Web Page Twest
PageSpeed Insights
GT Metrix
Mobile Website Speed Testing

17. VOORBEELD: SCHIJNDELFILM.NLVOORBEELD: SCHIJNDELFILM.NL

28. RAPPORTRAPPORT
Reduce page weight
Reduce number of requests
Make a quick first impression

29. REDUCE PAGE WEIGHTREDUCE PAGE WEIGHT
Compress images
Compress resources with GZIP
Minify resources

30. REDUCE NUMBER OF REQUESTSREDUCE NUMBER OF REQUESTS
Leverage browser caching
Eliminate render-blocking JavaScript and CSS in
above-the-fold content
Avoid landing page redirects

31. MAKE A QUICK FIRSTMAKE A QUICK FIRST
IMPRESSIONIMPRESSION
Load visible content before CSS and JS files
Reduce server response time

32. COMPRESS IMAGESCOMPRESS IMAGES
verdubbel het formaat en optimaliseer als een gek
( )Retina revolutie vervolg

33. ONLINE IMAGE OPTIMIZERSONLINE IMAGE OPTIMIZERS
(gratis en betaald) -
- -
-
Kraken.io Joomla plugin
Gi OfSpeed JPEG Compressor & Resizer PNG
Compressor Image Optimization Test

34. COMPRESS RESOURCES WITHCOMPRESS RESOURCES WITH
GZIPGZIP
Systeem > Algemene Instellingen > Server > GZIP
paginacompressie = JA
EN hernoem htaccess.txt in root Joomla naar
.htaccess

35. TEST HET RESULTAAT ONLINETEST HET RESULTAAT ONLINE
via https://checkgzipcompression.com/

37. RICH LINK PREVIEWRICH LINK PREVIEW
Meer tools van dezelfde maker: richardstoolbox.com

39. MINIFY RESOURCESMINIFY RESOURCES
Minimaliseer HTML, CSS en JS
middels plugin
Deze extensie kan nog veel meer.
En / of begin al bij de basis van je template en schrijf
kleinere css, kleinere js en minder html.
JCH Optimize

40. REDUCE NUMBER OF REQUESTSREDUCE NUMBER OF REQUESTS
Activeren Joomla Caching en inzetten van JCH
Optimize.
Systeem > Algemene Instellingen > Systeem >
Cache-instellingen

41. SYSTEEM CACHESYSTEEM CACHE
In of uitschakelen cachen en instellen van
cacheniveau.
Conservatief niveau: kleinere systeemcache.
Aan te bevelen voor sites met veel updates.
Progressief niveau: sneller, grotere systeemcache,
inclusief het renderen van modulecache.
Niet aan te bevelen voor extreem grote websites.

42. LEVERAGE BROWSER CACHINGLEVERAGE BROWSER CACHING
Server verzoekt browser bepaalde bestanden te
bewaren voor later

43. LEVERAGE BROWSER CACHINGLEVERAGE BROWSER CACHING
Server verzoekt browser bepaalde bestanden te
bewaren voor later
Via Expire Headers en/of Cache Control

44. LEVERAGE BROWSER CACHINGLEVERAGE BROWSER CACHING
Server verzoekt browser bepaalde bestanden te
bewaren voor later
Via Expire Headers en/of Cache Control
.htaccess aanpassen
via JCH Optimize of zelfstandig (voorkeur)

45. .HTACCESS WIJZIGEN.HTACCESS WIJZIGEN
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 month"
# CSS
ExpiresByType text/css "access plus 1 year"
# HTML
ExpiresByType text/html "access plus 0 seconds"
</IfModule>
customized .htaccess v3.0.0 with Joomla additions

46. ELIMINATE RENDER-BLOCKINGELIMINATE RENDER-BLOCKING
JAVASCRIPT AND CSS IN ABOVE-JAVASCRIPT AND CSS IN ABOVE-
THE-FOLD CONTENTTHE-FOLD CONTENT
Gaat voor hier veel te ver

47. AVOID LANDING PAGE REDIRECTSAVOID LANDING PAGE REDIRECTS
http://example.com
→ http://www.example.com
→ https://www.example.com
Deze redirect chains kost je punten (15% per keer) in
Google index.

48. HTACCESS WIJZIGINGHTACCESS WIJZIGING
<IfModule mod_rewrite.c>
RewriteEngine On
Options +FollowSymlinks
RewriteCond %{HTTPS} !=on [OR]
RewriteCond %{HTTP_HOST} !^www.schijndelfilm.nl$
RewriteRule ^ https://www.schijndelfilm.nl%{REQUEST_URI} [R=30
</IfModule>

49. LOAD VISIBLE CONTENT BEFORELOAD VISIBLE CONTENT BEFORE
CSS AND JS FILESCSS AND JS FILES
Eerst jouw HTML, dan pas 3th party widgets
Fallback bij Custom / Google Fonts
Minify Resources
Consider using CSS instead of images where
possible
Enable Compression

50. REDUCE SERVER RESPONSE TIMEREDUCE SERVER RESPONSE TIME
Gaat voor hier veel te ver

51. YELLOW LAB TOOLS VOOR EN NAYELLOW LAB TOOLS VOOR EN NA

53. VRAGEN?VRAGEN?

54. SLIDESSLIDES