Een AA score voor je website

layout: true
class: animated, fadeIn

<div class="footer"><div class="title">Een AA score voor je website - #jug010</div><div class="tagline">Your direction is our challenge</div></div>

---
class: start

<table class="start">
    <tr>
        <td class="logo"> </td>
        <td class="titel">
          <h1>Een AA score voor je website</h1>
          <h2>JUG Rotterdam, 13 augustus</h2>
          <h3>René Kreijveld</h3>
          <a class="nonwide" href="index4x3.php">4:3 versie</a><a class="wide" href="index.php">16:9 versie</a>
        </td>
    </tr>
</table>

.hide[<a href="index4x3.php">4x3 versie</a>]

---
# René Kreijveld
- 1966 Geboren!
- 1990 Afgestudeed Hogere Informatica Opleiding
- 1989-2007 Gewerkt als (senior) systeembeheerder
- 1999 Kennismaking met HTML/CSS
- 2003 Kennismaking met Mambo
- 2003 Mamboportal.nl opgericht
- 2006-2009 OneCompany
- 2009-2010 WebCreatives
- 2010 ReneKreijveld.nl
- 2011 DSD Business Internet - Webdeveloper

---
# René Kreijveld
- 200+ Joomla websites gerealiseerd
- ± 50 Joomla extensies (componenten,  modules, plugins)
- Spreker op Joomladagen / JandBeyond / JUGS
- Joomla 3 Certified Administrator

<i class="fa fa-share-square-o fa-fw"></i> https://www.dsd.nl  
<i class="fa fa-share-square-o fa-fw"></i> https://www.renekreijveld.nl  
<i class="fa fa-envelope-o fa-fw"></i> <a href="mailto:rene@dsd.nl">rene@dsd.nl</a>  
<i class="fa fa-twitter fa-fw"></i> https://twitter.com/renekreijveld  
<i class="fa fa-facebook fa-fw"></i> https://www.facebook.com/rene.kreijveld  
<i class="fa fa-linkedin fa-fw"></i> https://nl.linkedin.com/in/renekreijveld  
<i class="fa fa-github fa-fw"></i> https://github.com/renekreijveld

---
# DSD Business Internet
### Zakelijke internet service provider
- Opgericht 1998
- Team van 14 medewerkers
- Persoonlijke dienstverlening
- Meer dan 500 klanten
- Juli 2018 ISO 27001 gecertificeerd (Informatiebeveiliging)

---
# DSD Business Internet
<table>
  <tr>
    <td><img src="assets/zakelijk_internet.png" style="width:200px;height:200px;padding:0 10px 10px 0;"></td>
    <td><img src="assets/datacenter_diensten.png" style="width:200px;height:200px;padding:0 10px 10px 0;"></td>
  </tr>
  <tr>
    <td><img src="assets/managed_voice.png" style="width:200px;height:200px;padding:0 10px 10px 0;"></td>
    <td><img src="assets/web_development.png" style="width:190;height:200px;padding:0 10px 10px 0;"></td>
  </tr>
</table>

---
# DSD Business Internet
<table>
  <tr>
    <td><img src="assets/zakelijk_internet.png" style="width:200px;height:200px;padding:0 10px 10px 0;"></td>
    <td><img src="assets/datacenter_diensten.png" style="width:200px;height:200px;padding:0 10px 10px 0;"></td>
  </tr>
  <tr>
    <td><img src="assets/managed_voice.png" style="width:200px;height:200px;padding:0 10px 10px 0;"></td>
    <td><img src="assets/web_development_s.jpg" style="width:190;height:200px;padding:0 10px 10px 0;"></td>
  </tr>
</table>

---
# DSD Webdevelopment
### Kengetallen
<table class="kengetallen">
  <tr>
    <th>Applicatie klanten</th>
    <td>10</td>
  </tr>
  <tr>
    <th>Maatwerk projecten</th>
    <td>25+</td>
  </tr>
  <tr>
    <th>Publicanda klanten</th>
    <td>50</td>
  </tr>
  <tr>
    <th>Publicanda websites</th>
    <td>70</td>
  </tr>
  <tr>
    <th>Merken</th>
    <td>150+</td>
  </tr>
</table>

---
# DSD Webdevelopment
<br/>
<img src="assets/projecten.jpg" height="400" style="margin:0 auto">

---
# Onderhanden projecten
- Mobiele Wie-is-Wie directory op basis van Boostrap 4
- Migratie website medisch opleidingsinstituut
  - Huidig website Joomla 2.5, dateert van 2014
      - Custom template
      - Veel ACL Groepen
  - Nieuwe site Joomla 3.8.x, Bootstrap 4, heel veel custom fields

---
#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 goed 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:
    - <a href="https://tools.pingdom.com/" target="_blank">Pingdom Website Speed Test</a>
    - <a href="http://yellowlab.tools/" target="_blank">Yellow Lab Tools</a>
    - <a href="https://developers.google.com/speed/pagespeed/insights/?hl=nl" target="_blank">PageSpeed Insights</a>
    - <a href="https://www.webpagetest.org/" target="_blank">WebPageTest</a>
    - <a href="https://gtmetrix.com/" target="_blank">GTMetrix</a>

- 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 sconde is goed!
--

- Tip: maak een (gratis) GTMetrix account aan.

---
#Optimalisatie project
- <a href="https://www.joomshaper.com/downloads/template/helixultimate" target="_blank">Helix Ultimate Quickstart website</a>:
  - Joomla 3.8.11 (optimalisatie gedaan in 3.8.5)
  - Helix Ultimate template
  - SP Page Builder Lite
- Website gehost bij <a href="https://www.hetzner.de/" target="_blank">Hetzner</a>
- 4 GB Memory, 2 CPU, 40 GB ssd disk, 20 TB transfer (€ 4,90 per maand!)
- VPS gemanaged via <a href="https://runcloud.io/" target="_blank">RunCloud</a> (pro)
- IPv4 en IPv6 adres
- PHP 7.1.19.

---
#Algemeen bij optimalisatie project:

#Backup-Backup-Backup
---
#Installatie Helix Ultimate Quickstart
- Database aangemaakt.
- Quickstart bestanden geupload.
- Installatie gestart door naar de website te gaan.

---
class: center video
<div id="vid01img">
  <h1 style="text-align:left;">Video installatie Helix Ultimate Quickstart</h1>
  <p> </p>
  <p> </p>
  <p> </p>
  <img src="assets/videoplay.png" width="128" height="128" style="margin:0 auto;">
</div>
<video id="vid01vid" style="display:none;">
    <source src="assets/installatie_quickstart.mp4" type="video/mp4">
</video>

---
#Standaard aanpassingen na installatie
- Post-installatie berichten lezen
- NL Taalbestanden installeren
- Configuratie: Gebruik URL herschrijven: Yes
- Foutrapportage: geen
- Tijdzone server: Amsterdam
- htaccess.txt op de server hernoemen naar .htaccess

Live site: <a href="http://aascore.joomlaprofessionals.nl" target="_blank">aascore.joomlaprofessionals.nl</a>

---
#GTMetrix nulmeting uitvoeren
- Doe 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
<div id="vid02img">
  <h1 style="text-align:left;">Video nulmeting GTMetrix.com</h1>
  <p> </p>
  <p> </p>
  <p> </p>
  <img src="assets/videoplay.png" width="128" height="128" style="margin:0 auto;">
</div>
<video id="vid02vid" style="display:none;">
    <source src="assets/gtmetrix_nulmeting.mp4" type="video/mp4">
</video>

---
#Resultaat
<table class="kengetallen">
  <tr>
    <td></td>
    <th>Nul-<br/>meting</th>
  </tr>
  <tr>
    <th>PageSpeed</th>
    <td>C(73%)</td>
  </tr>
  <tr>
    <th>YSlow</th>
    <td>D(68%)</td>
  </tr>
  <tr>
    <th>Load time</th>
    <td>0.7s</td>
  </tr>
  <tr>
    <th>Total Page Size</th>
    <td>752KB</td>
  </tr>
  <tr>
    <th>Requests</th>
    <td>40</td>
  </tr>
</table>

---
#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:
<img src="assets/gzip.png" height="250">

---
#GZip compressie
- Test vooraf of je die optie moet aanzetten!
--

- Dit kan eenvoudig via <a href="https://checkgzipcompression.com" target="_blank">https://checkgzipcompression.com</a>
--

---
#Caching
- Eenvouding aan te zetten in de configuratie
<img src="assets/caching.png" height="250">

---
#Platform specifieke caching
<img src="assets/platform_specifieke_caching.png">
- Gebruik als de HTML uitvoer voor desktop anders is dan tablet of smartphone.
--

- Bijvoorbeeld als je voor tablet/smartphone een aparte template gebruikt.

---
#Systeemcache
<img src="assets/systeemcache.png">
- 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 niet meer individueel instelbaar.
--

- Leesvoer: <a href="https://www.ostraining.com/blog/joomla/cache/" target="_blank">OSTraining: Joomla Cache Options</a>
---
#Serverside caching bij de webhoster
- Vaak bieden hosting providers op hun servers ook cacheopties
<img src="assets/siteground_caching.png">

- Kijk uit met dubbel cachen!
--

- De webserver voor aascore.joomlaprofessionals.nl heeft ook caching,<br/>dus geen aanpassingen in Joomla.
---
#Terug naar de testresultaten
<img src="assets/yslow_resultaat.png" height="400">

---
#Terug naar de testresultaten
<img src="assets/yslow_requests.png" height="400">

---
#Requests zichtbaar Waterfall tab
<img src="assets/waterfall_tab.png" height="400">

---
#Waterfall
<iframe src="waterfall.html" title="Waterfall" >
</iframe>

---
#Waterfall ook opvraagbaar via browser
- Safari<br/>
  <i class="fa fa-apple" aria-hidden="true"></i> Alt-Cmd-A

- Firefox<br/>
  <i class="fa fa-apple" aria-hidden="true"></i> Alt-Cmd-E<br/>
  <i class="fa fa-windows" aria-hidden="true"></i> Ctrl-Shift-E

- Chrome<br/>
  <i class="fa fa-apple" aria-hidden="true"></i> Alt-Cmd-I, netwerk tab<br/>
  <i class="fa fa-windows" aria-hidden="true"></i> 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
<div id="vid03img">
  <h1 style="text-align:left;">Activeren CSS/Javascript samenvoeg en compressie</h1>
  <p> </p>
  <p> </p>
  <p> </p>
  <img src="assets/videoplay.png" width="128" height="128" style="margin:0 auto;">
</div>
<video id="vid03vid" style="display:none;">
    <source src="assets/gtmetrix_na_mergecompress.mp4" type="video/mp4">
</video>

---
#Resultaat
<table class="kengetallen">
  <tr>
    <td></td>
    <th>Nul-<br/>meting</th>
    <th>Merge<br/>compress</th>
  </tr>
  <tr>
    <th>PageSpeed</th>
    <td>C(73%)</td>
    <td>C(76%)</td>
  </tr>
  <tr>
    <th>YSlow</th>
    <td>D(68%)</td>
    <td>C(75%)</td>
  </tr>
  <tr>
    <th>Load time</th>
    <td>0.7s</td>
    <td>1.2s</td>
  </tr>
  <tr>
    <th>Total Page Size</th>
    <td>752KB</td>
    <td>737KB</td>
  </tr>
  <tr>
    <th>Requests</th>
    <td>40</td>
    <td>23</td>
  </tr>
</table>

---
#PageSpeed
<img src="assets/pagespeed_leverage_browser_caching.png" />

---
#YSlow
<img src="assets/yslow_add_expires_header.png" />

---
#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** <i class="fa fa-smile-o" aria-hidden="true"></i>

Hoe? Door het toevoegen van code in .htaccess.<br/>
--

Of via **<a href="https://www.jch-optimize.net/" target="_blank">JCH Optimize Pro</a>**.

---
#Add Expires headers 1/2
- 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"**<br/>
Standaard 1 maand bewaren

**ExpiresByType application/rss+xml "access plus 1 hour"**<br/>
RSS feed 1 uur bewaren

**ExpiresByType image/jpg "access plus 1 month"**<br/>
Jpeg afbeeldingen 1 maand bewaren

---
#Add Expires headers 2/2
**ExpiresByType text/css "access plus 1 year"**<br/>
CSS bestanden 1 jaar bewaren

**AddOutputFilterByType DEFLATE text/html**<br/>
Html code gzippen op de server

**AddOutputFilterByType DEFLATE text/css**<br/>
CSS code gzippen op de server

**AddOutputFilterByType DEFLATE application/font-woff2**<br/>
Woff2 fontbestanden gzippen op de server

---
class: center video
<div id="vid04img">
  <h1 style="text-align:left;">Installatie JCH Optimize Pro</h1>
  <p> </p>
  <p> </p>
  <p> </p>
  <img src="assets/videoplay.png" width="128" height="128" style="margin:0 auto;">
</div>
<video id="vid04vid" style="display:none;">
    <source src="assets/gtmetrix_na_laverage.mp4" type="video/mp4">
</video>

---
#.htaccess add expires headers
<iframe src="htaccess.html" title="htaccess add expires headers" >
</iframe>

---
#Resultaat
<table class="kengetallen">
  <tr>
    <td></td>
    <th>Nul-<br/>meting</th>
    <th>Merge<br/>compress</th>
    <th>Leverage</th>
  </tr>
  <tr>
    <th>PageSpeed</th>
    <td>C(73%)</td>
    <td>C(76%)</td>
    <td>B(82%)</td>
  </tr>
  <tr>
    <th>YSlow</th>
    <td>D(68%)</td>
    <td>C(75%)</td>
    <td>B(88%)</td>
  </tr>
  <tr>
    <th>Load time</th>
    <td>0.7s</td>
    <td>1.2s</td>
    <td>1.3s</td>
  </tr>
  <tr>
    <th>Total Page Size</th>
    <td>752KB</td>
    <td>737KB</td>
    <td>738KB</td>
  </tr>
  <tr>
    <th>Requests</th>
    <td>40</td>
    <td>23</td>
    <td>23</td>
  </tr>
</table>

---
#Wat staat nog open?
<img src="assets/nogopen_pagespeed.png" />

---
#Wat staat nog open?
<img src="assets/nogopen_yslow.png" />

---
#JCH 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 afbeelding dimensies toevoegen.
--

- Lazy loading van afbeeldingen.
--

- Geoptimaliseerde CSS levering (critical CSS).
--

- Afbeeldingen optimaliseren.

---
#JCH Optimize Pro
<img src="assets/jch_optimize_pro.png" />

---
class: center video
<div id="vid05img">
  <h1 style="text-align:left;">Activeren/configureren JCH Optimize Pro</h1>
  <p> </p>
  <p> </p>
  <p> </p>
  <img src="assets/videoplay.png" width="128" height="128" style="margin:0 auto;">
</div>
<video id="vid05vid" style="display:none;">
    <source src="assets/gtmetrix_na_jchoptimize.mp4" type="video/mp4">
</video>

---
#Resultaat
<table class="kengetallen">
  <tr>
    <td></td>
    <th>Nul-<br/>meting</th>
    <th>Merge<br/>compress</th>
    <th>Leverage</th>
    <th>JCH<br/>Optimize</th>
  </tr>
  <tr>
    <th>PageSpeed</th>
    <td>C(73%)</td>
    <td>C(76%)</td>
    <td>B(82%)</td>
    <td>B(85%)</td>
  </tr>
  <tr>
    <th>YSlow</th>
    <td>D(68%)</td>
    <td>C(75%)</td>
    <td>B(88%)</td>
    <td>B(89%)</td>
  </tr>
  <tr>
    <th>Load time</th>
    <td>0.7s</td>
    <td>1.2s</td>
    <td>1.3s</td>
    <td>1.0s</td>
  </tr>
  <tr>
    <th>Total Page Size</th>
    <td>752KB</td>
    <td>737KB</td>
    <td>738KB</td>
    <td>719KB</td>
  </tr>
  <tr>
    <th>Requests</th>
    <td>40</td>
    <td>23</td>
    <td>23</td>
    <td>21</td>
  </tr>
</table>

---
#Nog twee "grote" problemen over
- PageSpeed: serve scaled images
<img src="assets/serve_scaled_images.png" />

---
#Nog twee "grote" problemen over
- YSlow: use cookie free domais
<img src="assets/use_cookiefee_domains.png" />

---
#Serve scaled images
<img src="assets/photos.png" />
- Thumbnails van SP Easy Image Gallery.
--

- De originele thumbnails zijn 400x400 pixels.
--

- Worden getoond als 85x85 pixels.
---
#Thumbnail inspect
<img src="assets/thumbnail_inspect.png" />
--

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

- Dus een extra domein maken die naar dezelfde website wijst.

- In Joomla instellen wat het cookie domein is.

---
#Extra subdomein naar dezelfde website
<img src="assets/add_domain.png" height="325" />
--

- In Joomla configuratie hoofddomein als cookie domein instellen.
--

- In JCH Optimize Pro Cookieless Domain instellen.

---
class: center video
<div id="vid06img">
  <h1 style="text-align:left;">SP Easy Image Gallery module<br/>cookiefree domain</h1>
  <p> </p>
  <p> </p>
  <p> </p>
  <img src="assets/videoplay.png" width="128" height="128" style="margin:0 auto;">
</div>
<video id="vid06vid" style="display:none;">
    <source src="assets/gtmetrix_na_jchoptimize_2.mp4" type="video/mp4">
</video>

---
#Resultaat
<table class="kengetallen">
  <tr>
    <td></td>
    <th>Nul-<br/>meting</th>
    <th>Merge<br/>compress</th>
    <th>Leverage</th>
    <th>JCH<br/>Optimize</th>
    <th>Cookieless</th>
  </tr>
  <tr>
    <th>PageSpeed</th>
    <td>C(73%)</td>
    <td>C(76%)</td>
    <td>B(82%)</td>
    <td>B(85%)</td>
    <td>A(100%)</td>
  </tr>
  <tr>
    <th>YSlow</th>
    <td>D(68%)</td>
    <td>C(75%)</td>
    <td>B(88%)</td>
    <td>B(89%)</td>
    <td>A(92%)</td>
  </tr>
  <tr>
    <th>Load time</th>
    <td>0.7s</td>
    <td>1.2s</td>
    <td>1.3s</td>
    <td>1.0s</td>
    <td>0.9s</td>
  </tr>
  <tr>
    <th>Total Page Size</th>
    <td>752KB</td>
    <td>737KB</td>
    <td>738KB</td>
    <td>719KB</td>
    <td>547KB</td>
  </tr>
  <tr>
    <th>Requests</th>
    <td>40</td>
    <td>23</td>
    <td>23</td>
    <td>21</td>
    <td>21</td>
  </tr>
</table>

---
#Alternatief voor de Easy Gallery module
- 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?

---
#Deze presentatie

Gebouwd met <a href="https://github.com/gnab/remark" target="_blank">remark <i class="fa fa-external-link"></i></a>

Help:

.blue[<i class="fa fa-long-arrow-right" ></i> <i class="fa fa-long-arrow-down" ></i>] volgende  
.blue[<i class="fa fa-long-arrow-up" ></i> <i class="fa fa-long-arrow-left" ></i>] 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