De grote schoonmaak

Ook dit jaar had ik tijdens de zomer wat weken vrij gepland om mezelf en gezin wat rust te geven. En wat ga je dan doen? Juist! Je eigen website opschonen, want dat was alweer 2 jaar geleden. De afgelopen 2 jaar heb ik veel geleerd, als het gaat om de inhoud, maar ook om de techniek en dat wilde ik allemaal doorvoeren in de website. In deze blog laat ik je zien wat er (onder de motorkap) is veranderd.

Was de oude website niet meer goed dan?

De website die er stond was zeker wel goed. Natuurlijk werd de website, net als de andere websites met een onderhoudscontract, netjes bijgehouden en had hij de laatste versie van Joomla en alle extensies. Hij werd goed gevonden in Google. De conversie was prima, ik hoefde me nauwelijks te vervelen en kwam soms zelfs tijd te kort. En dat allemaal dankzij mond-tot-mond-reclame en mijn eigen website.

Ik had voor mezelf 2 uitgangspunten opgeschreven voor de nieuwe website.

1. Optimalisatie

Een nieuwe website hoeft voor de bezoeker geen grote verandering te betekenen. En onder het motto "Never change a winning team" wilde ik ook zeker niet de complete site omgooien qua structuur.

De teksten verbeteren

Het afgelopen jaar heb ik de training "Online Verkoopsucces XL" van Aartjan van Erkel gevolgd en daar veel van mogen leren. De tips die hij mij gaf met betrekking tot de inhoud had ik grotendeels al doorgevoerd in de website en aangezien dat een positief effect had, wilde ik de inhoud zo veel als mogelijk overnemen in de 2017-versie van mijn website.

Natuurlijk was het mogelijk om alle teksten (via de database) te kopiëren naar een nieuwe omgeving, of om de oude site als basis te pakken, maar ik heb ervoor gekozen om een compleet nieuwe installatie te doen en de teksten 1 voor 1 over te zetten. Op deze manier kon ik mezelf dwingen om de teksten nog eens goed na te lopen, hier en daar de tekst actualiseren of er kleine foutjes uithalen. De teksten waren voorheen opgemaakt in UI-Kit en mijn nieuwe template heb ik gebouwd in Bootstrap3, dus de CSS-classes moeten toch aangepast worden.

Voor de lettertypes wilde ik niet meer afhankelijk zijn van fonts.google.com, dus ik heb de lettertypes gedownload en worden nu lokaal geladen.

Een nieuwe template

De laatste jaren was ik behoorlijk fan van Yootheme templates en gebruikte ik in 9 van de 10 gevallen de Yootheme Master template, die ik helemaal naar mijn eigen hand kon zetten. Tegenwoordig is Yootheme overgestapt naar Yootheme PRO en sommige mensen zijn er lyrisch over, maar ik kan er niet mee werken. Het hele idee van pagebuilders kan ik niet aan wennen. Dus ik ben op zoek gegaan naar een alternatief en ik kwam er al snel achter dat dit niet bestond. Veel bestaande templates hebben enorm veel mogelijkheden, die ik niet wil gebruiken of hebben module-posities die ik anders wil.

Dus er zat niets anders op om mijn eigen template te bouwen. Met de moduleposities zoals ik gewend was bij Yootheme en zonder alle overbodige rotzooi. Bij mijn zoektocht naar mijn eigen ideale template heb ik gebruik gemaakt van diverse voorbeelden van onder andere JoomlaCommunity (via github) en presentaties zoals bij JUG Utrecht.

De template maakt vanwege Bootstrap 3 ook gebruik van LESS, wat de ontwikkeling van de site weer sneller maakt en kan via de template zelf gecompiled en geminifyd worden.

FontAwesome wat ik gebruik voor mijn icoontjes, komt binnenkort met een nieuwe versie FontAwesome5 en ik heb toegang tot de PRO versie. Binnen mijn template maak ik daar dan ook gebruik van.

Snelheid verbeteren

Wanneer ik de website in Google Pagespeed bekeek, dan zag ik een aantal aanbevelingen om de snelheid te verbeteren. Om dit te bereiken moest ik een aantal gebruikte extensies loslaten en dit via Joomla zelf oplossen. En het resultaat mag er zijn.

Bovenaan zie je de oude resultaten. Daaronder de nieuwe scores.

Belangrijk is natuurlijk de scores voor Pagespeed en Yslow. De score bij Yslow was niet op 100% te krijgen omdat ik graag gebruik wil maken van Google Analytics en dat zorgt voor een kleine afname in de score, maar dat neem ik voor lief.

Door het geheel te optimaliseren zie je dat vooral de laadtijd van de pagina en het aantal requests flink is afgenomen.

2. Back to the core

De laatste tijd zijn er vele verbeteringen in Joomla doorgevoerd en dat maakt in een aantal gevallen het gebruik van extensies overbodig.

Widgetkit → Joomla alternatieve layout

De "header" werd opgebouwd in Widgetkit en nu is het een modulepositie met een achtergrond-foto. De module "samenwerking" was een slider in Widgetkit en zijn nu een aantal losse afbeeldingen in 1 module. Voor de module "Laatste blogs" maak ik nu gebruik van een alternatieve layout van mod_articles_category, terwijl ik dat voorheen ook in Widgetkit zou oplossen. Voor de bezoeker geen verschil, voor de de snelheid van de website een hele verbetering.

Easyblog → Joomla blogweergave

Easyblog heeft zijn dienst gedaan als blogsysteem. Het toevoegen of aanpassen van berichten vond ik de laatste tijd erg bewerkelijk en dit is nu opgelost door gebruik te maken van het standaard content-component van Joomla. Hierbij maak ik gebruik van overrides, want onderaan dit bericht vind je social media knoppen voor het delen van de pagina.

Ook zie je onderaan de pagina een blokje met informatie over de auteur. Dit is opgelost door het gebruik van Custom Fields in gebruikersbeheer, een nieuwe functie in Joomla sinds versie 3.7.

JCE Editor PRO → TinyMCE Editor

Door de updates van TinyMCE editor (de standaard editor van Joomla) is het overbodig om nog gebruik te maken van de JCE Editor.

Welke extensies gebruik ik dan nog wel op deze website?

Helemaal zonder extensies is (bijna) niet mogelijk. Dus hieronder een opsomming van de extensies die op deze website gebruikt worden.

AcyMailing: Voor het versturen van de gratis weggever en de nieuwsbrieven.

Admin Tools: Voor een stukje bescherming.

Akeeba Backup: Voor de nodige backups.

Advanced Module Manager: Om mijn modules op de juiste pagina te laten verschijnen.

Cache Cleaner: Om het cachegeheugen op te schonen.

Conditional Content: Om mijn telefoonnummer te verbergen wanneer ik niet gebeld wil worden :)

JCH Optimize: Voor het optimaliseren van de pagina's.

OSMAP: De sitemap.

RSComments: Voor het plaatsen van reacties onder blogberichten.

RSForms PRO: Het contactformulier.

SocialMetaTags: Voor het delen van artikelen op Social Media.

wbamp: Om pagina's uit het blog weer te geven als AMP op mobiel.