The big cleanup

Again this year I had planned some weeks off during the summer to give myself and family some rest. And what are you going to do then? Right! Clean up your own website, because that was already 2 years ago. Over the past 2 years I've learned a lot, when it comes to content, but also technology and I wanted to implement all that into the website. In this blog I will show you what has changed (under the hood).

Was the old website no longer any good then?

The website that was there was definitely good. Of course, like the other websites with a maintenance contract, it was kept up nicely and had the latest version of Joomla and all the extensions. It was found well in Google. Conversion was fine, I hardly had to be bored and sometimes even ran out of time. All thanks to word of mouth and my own website.

I had written down for myself 2 principles for the new website.

1. Optimization

A new website does not have to mean a big change for the visitor. And under the motto "Never change a winning team" I didn't want to change the structure of the site.

Improve the texts

Last year I followed the training "Online Sales Success XL" by Aartjan van Erkel and learned a lot from him. I had already largely implemented the tips he gave me regarding content in the website and since that had a positive effect, I wanted to adopt the content as much as possible in the 2017 version of my website.

Of course it was possible to copy all the texts (via the database) to a new environment, or to take the old site as a base, but I chose to do a complete new installation and transfer the texts 1 by 1. This way I could force myself to go over the texts again, update the text here and there or take out small errors. The texts were previously formatted in UI-Kit and my new template I built in Bootstrap3, so the CSS classes have to be adjusted anyway.

For the fonts, I no longer wanted to depend on fonts.google.com, so I downloaded the fonts and they are now loaded locally.

A new template

In recent years I was quite a fan of Yootheme templates and in 9 out of 10 cases I used the Yootheme Master template, which I could completely customize. Nowadays, Yootheme has switched to Yootheme PRO and some people are lyrical about it, but I can't work with it. I can't get used to the whole idea of pagebuilders. So I started looking for an alternative and soon found out that there was none. Many existing templates have huge features that I don't want to use or have module positions that I want different.

So there was nothing else to do but build my own template. With the module positions as I was used to with Yootheme and without all the unnecessary crap. In my search for my own ideal template I used several examples from JoomlaCommunity (via github) and presentations such as JUG Utrecht.

The template also uses LESS because of Bootstrap 3, which in turn makes the development of the site faster and can be compiled and minifyd via the template itself.

FontAwesome what I use for my icons, is coming soon with a new version FontAwesome5 and I have access to the PRO version. So within my template I am using that.

Improving speed

When I looked at the website in Google Pagespeed, I saw a number of recommendations to improve speed. To achieve this, I had to let go of some extensions I was using and solve this through Joomla itself. And the results are there.

At the top, you can see the old results. Below that the new scores.

Important is of course the scores for Pagespeed and Yslow. The score at Yslow was not 100% to get because I like to use Google Analytics and that causes a small decrease in the score, but I take that for granted.

By optimizing the whole thing, you can see that especially the page load time and the number of requests have decreased significantly.

2. Back to the core

Recently there have been many improvements in Joomla and that makes in some cases the use of extensions unnecessary.

Widgetkit → Joomla alternative layout

The "header" was built in Widgetkit and now it is a module position with a background picture. The "collaboration" module was a slider in Widgetkit and now its a number of separate images in 1 module. For the module "Latest blogs" I am now using an alternate layout of mod_articles_category, whereas before I would also solve that in Widgetkit. For the visitor no difference, for the speed of the website quite an improvement.

Easyblog → Joomla blog view

Easyblog did its service as a blog system. Adding or modifying posts I found lately very laborious and this is now solved by using the default content component of Joomla. Here I am using overrides, as at the bottom of this post you will find social media buttons for sharing the page.

You will also see a block at the bottom of the page with information about the author. This is solved by using Custom Fields in user management, a new feature in Joomla since version 3.7.

JCE Editor PRO → TinyMCE Editor

The updates of TinyMCE editor (the default editor of Joomla) makes it unnecessary to still use the JCE Editor.

So what extensions do I still use on this website?

Completely without extensions is (almost) not possible. So below is a list of the extensions used on this website.

AcyMailing: For sending the free giveaway and newsletters.

Admin Tools: For a bit of protection.

Akeeba Backup: For the necessary backups.

Advanced Module Manager: To make my modules appear on the right page.

Cache Cleaner: To clean up the cache memory.

Conditional Content: To hide my phone number when I don't want to be called :)

JCH Optimize: For optimizing the pages.

OSMAP: The sitemap.

RSComments: For posting comments under blog posts.

RSForms PRO: The contact form.

SocialMetaTags: For sharing articles on Social Media.

wbamp: To display pages from the blog as AMP on mobile.