Joomla Website optimaliseren - jug073 augustus 2018

Slide 1

SNELLERE WEBSITES OPTIMALISATIE VAN JOOMLA WEBSITE Presentatie van Hans Kuijpers

Slide 2

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

Slide 3

source: Giphy

Slide 4

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

Slide 5

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

Slide 6

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

Slide 7

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.

Slide 8

HOE KAN HET SNELLER? Blijf up te date

Slide 9

HOE KAN HET SNELLER? Blijf up te date Joomla!

Slide 10

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

Slide 11

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

Slide 12

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

Slide 13

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

Slide 14

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

Slide 15

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

Slide 16

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

Slide 17

VOORBEELD: SCHIJNDELFILM.NL

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

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

Slide 29

REDUCE PAGE WEIGHT Compress images Compress resources with GZIP Minify resources

Slide 30

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

Slide 31

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

Slide 32

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

Slide 33

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

Slide 34

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

Slide 35

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

Slide 36

Slide 37

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

Slide 38

Slide 39

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.

Slide 40

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

Slide 41

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.

Slide 42

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

Slide 43

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

Slide 44

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)

Slide 45

.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

Slide 46

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

Slide 47

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.

Slide 48

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>

Slide 49

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

Slide 50

REDUCE SERVER RESPONSE TIME Gaat voor hier veel te ver

Slide 51

YELLOW LAB TOOLS VOOR EN NA

Slide 52

Slide 53

VRAGEN?

Slide 54

SLIDES