FOSS adventuresDiscover openSUSE and various open source applications

Updating the website

The website Fossadventures.com features a new look. After a successful start of the website, it was time to make it look even better! The website was using the free Cannyon theme. The updated website is now powered by Cannyon Premium. Updating the theme was not as easy as this might appear from the marketing materials: “Premium version is full compatible with free version. If you switch the free theme to premium you don’t lose data or options”. I expected some kind of ‘pro license key’ that would unlock additional features in the installed theme.

Instead, I got a download link to a ZIP file that contains the premium theme. To get this zip file onto my WordPress instance, I needed to increase the maximum upload size from 2 MB to 6MB. This required me to adjust the values in the PHP.ini file. Tutorials are plenty on the internet. However, my first few attempts didn’t work so well. I ended up searching all PHP.ini files on my openSUSE server and adjusting the values in all files. This resolved my first obstacle.

Next I moved the zip file to the correct location (wp-content/themes/) on the server and installed the theme. This was when I discovered that I needed to reconfigure all of my settings. And that the theme has 2 places for customization. There is a part under the Appearance –> Customize section. And there is a specialized part under the myTheme.es section.

After a bit of work, the site now features an updated look. The landing page shows featured images per blog post. And instead of viewing the full text, it only shows an boxed preview of the text. This makes it easier to scroll through the latest posts.

The hard work is not done yet. After checking Google PageSpeed Insights, it appears that this Premium theme is much slower than the Free one. Some CSS stylesheets are very large in size! My first reaction was to look at WordPress plugins that could optimize the website speed. I am now experimenting with:

Full use of Autoptimize removes all CSS and makes the website look like an early 90’s website (only text, no layout, no pictures). Enabling only the HTML and the JavaScript optimizations, but leaving out the CSS optimizations brings the site back to an acceptable state. These 2 optimizations do improve the page speed. So this is a gain at least.

Asset CleanUp makes it possible to prevent certain CSS sheets from loading. However, this plugin will also break the site. So for me personally, this is a plugin I will likely remove.

Through all this experimentation, I have learned that I still need a very small part of the stylesheets, when Google suggests to “Defer unused CSS”. Chromium has a handy tool that shows the parts of the CSS that are used and the parts that are not. My next challenge will be to produce minimized versions of these CSS stylesheets, that contain only the lines that are actually used. Likely I will break the site again, but I will make backups of the original versions. As usual, I will use this blog to write updates that might help other people from making the same mistakes.

Published on: 27 november 2018