Workshop Optimalisatietechnieken

Workshop Optimalisatietechnieken

Patrick Faasse | Open Source Design

https://www.opensourcedesign.nl/jd-workshop

Onderwerpen

  • Introductie
  • Doelstellingen
  • Verwachtingen
  • Testen
  • Hoe te beginnen
  • Gzip
  • .htaccess
  • Combine, minify, compress
  • Third party (inline) JS/CSS
  • HTTP/2
  • Caching
  • CDN / Image server
  • Image optimalisatie
  • Overige tips & vragen

Doelstellingen van optimalisatie

  • Waarom is het belangrijk? (concurrentie/usability)
  • Wie is je bezoeker? Wat zijn de verwachtingen?
  • Bepaal factoren van belang?

Wat wil je bereiken en waarom? Heb je een bezoekersanalyse vanuit Google Analytics gedaan? Is je website Mobile Friendly?

Verwachtingen (van je klant)

  • Technische optimalisatie is geen holy grail.
  • Wat heb je er voor over? (tijd/geld)
  • Joomla heeft beperkingen (template architectuur, controle over extensies)
  • Technische SEO versus content SEO.

Hoeveel tijd verwacht je bezig te zijn met de optimalisatie van jouw gekozen website? Kan je hier een bedrag aan koppelen?

Testen, testen … en nog meer testen

Voer een aantal testen uit en analyseer de resultaten. Wat zijn de bottlenecks & wat wil je gaan verbeteren?

Wat is je huidige score?

Yslow rapport analyseren

Bij het begin beginnen

  • Maak (de juiste) keuzes.
  • “Stick to the core” indien mogelijk.
  • Gebruik goede extensies. (hoe werken ze, welke controle heb je?)
  • Verwijder alles wat je niet nodig hebt.
  • Denk ook aan performance!

Zet alle optimalisatie uit en kijk welke extensies CSS/JS toevoegen en waar. Kan je dit beperken? Zijn er extensies die je kan verwijderen? Heb je mootools nog nodig?

Indien nodig gebruik overrides.

Je moet kunnen updaten!

Image optimalisatie

  • Lossless & scaled!
  • https://webspeedtest.cloudinary.com/
  • Via Joomla template?
  • JPEG mini voor upload.
  • PNG (https://tinypng.com/)
  • CSS Styleable SVG
  • On the fly (server side) of via CDN.

Voer de testen uit en analyseer de resultaten. Kan je foto’s, logo etc. vervangen? Vergeet je mobiele versie niet!

Cloudinary kan een oplossing zijn...

CDN / Image server

Gzip & Htaccess

  • Gzip in Joomla, template
  • Gzip via .htaccess

.htaccess

  • Deflate compression
  • Gzip compression
  • Expire headers
  • Cache-Control Headers

Activeer gzip in Joomla & via .htacces. Test de website opnieuw.

# BEGIN DEFLATE COMPRESSION

<IfModule mod_deflate.c>

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE application/x-font

AddOutputFilterByType DEFLATE application/x-font-opentype

AddOutputFilterByType DEFLATE application/x-font-otf

AddOutputFilterByType DEFLATE application/x-font-truetype

AddOutputFilterByType DEFLATE application/x-font-ttf

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE font/opentype

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE text/xml

</IfModule>

# END DEFLATE COMPRESSION

#BEGIN EXPIRES HEADERS

<IfModule mod_expires.c>

# Enable expirations

ExpiresActive On

# Default expiration: 1 hour after request

ExpiresDefault "now plus 1 hour"

# CSS and JS expiration: 1 week after request

ExpiresByType text/css "now plus 1 week"

ExpiresByType application/javascript "now plus 1 week"

ExpiresByType application/x-javascript "now plus 1 week"

# Image files expiration: 1 month after request

ExpiresByType image/bmp "now plus 1 month"

ExpiresByType image/gif "now plus 1 month"

ExpiresByType image/jpeg "now plus 1 month"

ExpiresByType image/jp2 "now plus 1 month"

ExpiresByType image/pipeg "now plus 1 month"

ExpiresByType image/png "now plus 1 month"

ExpiresByType image/svg+xml "now plus 1 month"

ExpiresByType image/tiff "now plus 1 month"

ExpiresByType image/vnd.microsoft.icon "now plus 1 month"

ExpiresByType image/x-icon "now plus 1 month"

ExpiresByType image/ico "now plus 1 month"

ExpiresByType image/icon "now plus 1 month"

ExpiresByType text/ico "now plus 1 month"

ExpiresByType application/ico "now plus 1 month"

# Webfonts

ExpiresByType font/truetype "access plus 1 month"

ExpiresByType font/opentype "access plus 1 month"

ExpiresByType application/x-font-woff "access plus 1 month"

ExpiresByType image/svg+xml "access plus 1 month"

ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

</IfModule>

#END EXPIRES HEADERS

# BEGIN Cache-Control Headers

<ifModule mod_headers.c>

<filesMatch "\.(ico|jpe?g|png|gif|swf)$">

Header set Cache-Control "public"

</filesMatch>

<filesMatch "\.(css)$">

Header set Cache-Control "public"

</filesMatch>

<filesMatch "\.(js)$">

Header set Cache-Control "private"

</filesMatch>

<filesMatch "\.(x?html?|php)$">

Header set Cache-Control "private, must-revalidate"

</filesMatch>

</ifModule>

# END Cache-Control Headers

# BEGIN GZIP COMPRESSION

<IfModule mod_gzip.c>

mod_gzip_on Yes

mod_gzip_dechunk Yes

mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$

mod_gzip_item_include handler ^cgi-script$

mod_gzip_item_include mime ^text/.*

mod_gzip_item_include mime ^application/x-javascript.*

mod_gzip_item_exclude mime ^image/.*

mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

</IfModule>

# END GZIP COMPRESSION

Combine, minify, compress (waar en waar niet)

Bekijk de mogelijkheden van je template of installeer JCH.

Test met verschillende settings tot het optimale resultaat.

Vergeet niet alle website functies na te lopen! Werkt alles nog?

Wat is je nieuwe score?

Caching … als laatste optie

Zet caching in joomla aan (vergeet de plugin niet) en test de website functies opnieuw.

Test ook met tablet en mobiel!

Dank voor de aandacht.

Workshop Optimalisatietechnieken - Google Slides