SNELLERE WEBSITES OPTIMALISATIE VAN JOOMLA WEBSITE Presentatie van Hans Kuijpers

WAAROM? Omdat wachten niet leuk is… het kost je klanten

source: Giphy

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

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

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

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

HOE KAN HET SNELLER? Blijf up te date

HOE KAN HET SNELLER? Blijf up te date Joomla!

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

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

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

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

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

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

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

VOORBEELD: SCHIJNDELFILM.NL

RAPPORT Reduce page weight Reduce number of requests Make a quick first impression

REDUCE PAGE WEIGHT Compress images Compress resources with GZIP Minify resources

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

MAKE A QUICK FIRST IMPRESSION Load visible content before CSS and JS files Reduce server response time

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

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

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

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

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

MINIFY RESOURCES Minimaliseer HTML, CSS en JS middels plugin JCH Optimize 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.

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

SYSTEEM 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.

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

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

LEVERAGE 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)

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

ELIMINATE RENDER-BLOCKING JAVASCRIPT AND CSS IN ABOVETHE-FOLD CONTENT Gaat voor hier veel te ver

AVOID 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.

HTACCESS 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>

LOAD VISIBLE CONTENT BEFORE CSS 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

REDUCE SERVER RESPONSE TIME Gaat voor hier veel te ver

YELLOW LAB TOOLS VOOR EN NA

VRAGEN?

SLIDES