Header Image - FOSS adventures

Using Google PageSpeed Insights to speed-up Fossadventures.com

I wanted to optimize the load time of Fossadventures.com. I had performed some tests on Google PageSpeed Insights a couple of weeks ago and my scores were 76/100 for mobile devices and 55/100 for the desktop. The big ticket item was to enable Gzip compression. I researched the subject and the solution appeared to be a simple adjustment of the Nginx configuration (1, 2). Thanks to Nginx and Digital Ocean for the excellent tutorials, which work just as well on openSUSE. My only remaining question was which MIME types to include. I found a nice compact list on Github and based my list on that.

The second suggestion was to optimize the images on the site. I decided to start with the header image, as this was a large image that is visible everywhere. I downgraded the JPEG quality from 85 to 75 and adjusted the Chroma sampling to 4:2:0. I performed a visual inspection of the old and new header image with help of Gwenview. As I didn’t see a big difference, I decided to use this optimized image for the website. I will probably use these settings for all future posts.

The third suggestion was to eliminate render-blocking JavaScript and CSS content. I discovered that my chosen theme (Cannyon) loaded some Google web fonts by default. By disabling this option, the load speed increased even further. Thanks Google for the advice.

I retested Fossadventures.com on Google PageSpeed Insights and my new results are 94/100 for mobile devices and 79/100 for the desktop. That is a solid improvement!

Published on: 14 May 2018

Securing WordPress with plugins

It’s time to spend some attention to the security of this website. From years of reading ICT technology news, I was painfully aware that WordPress websites are a prime target for hackers. And from my initial week of having the website online, I had already discovered a couple of visits from malicious IP addresses in my access log.

The book “WordPress Visual Step by Step for Beginners 2018” recommends installing the Wordfence Security plugin. This is an Endpoint protection solution. Another solution that I had read about was Cloudflare. I was interested in the differences and found this article on the Wordfence website. Biased? Certainly. But I do agree with some of the arguments and decided to install the Wordfence plugin as a basic security measure. I can always add Cloudflare on top of that.

Then I looked for articles on hardening a WordPress website and found these (1, 2) two articles. I really appreciate the blog of WP Engine. A good find was the “WPS Hide Login” plugin, which made it very easy to implement measure #13. The blog by Bjørn Johansen was very helpful in implementing measure #14.

I have disabled Comments on my website. The main goal of my website is to inform and not to interact. Contact Form 7 and Flamingo are plugins that work together to enable the contact form and to store the messages on the WordPress server. This provide readers with a basic way to interact. The nice thing (from a security standpoint) is that I am able to add a “reCAPTCHA” button on the bottom of my contact form. Which should reduce the amount of spam.

Published on: 4 April 2018

Solving Permalinks with Nginx Virtual Host file

After reading the initial 3 chapters of the book Nginx HTTP server – Third Edition, I was ready to tackle the permalinks problem again. I started adjusting the nginx.conf file with renewed knowledge. Something interesting happened when I adjusted the server_name to .fossadventures.com and tested the nginx.conf file. The test indicated that this server name was already in use.

I decided to look for additional .conf files in /etc/nginx. And then found the culprid in the vhosts.d folder. This xxx.conf file contained the configuration of my website. I created a copy “xxx2.conf” and started editing it according to the solution described in my last post. Why not try to create a more pleasing 404 page as well? I copied the Cannyon theme its 404.php page into a separate directory and put the directive to this error page in my xxx.conf file.

Then I stopped Nginx, renamed the current xxx.conf file into xxx.conf.back and renamed xxx2.conf into xxx.conf. After restarting Nginx, my site finally showed pretty permalinks. And best of all, when someone puts in an invalid url, they will see a pretty 404 error page.

Published on: 3 April 2018

Breaking my WordPress website with Permalinks and Nginx

My first challenge is setting up my WordPress website correctly. I have ordered the e-book “WordPress Visual Step by Step for Beginners 2018” by Alvin Wells. The book is 103 pages in length and contains the basic instructions for setting up a WordPress site. It is practical enough to get started.

Before my adventure started, I had already looked at various WordPress themes. I decided on the Cannyon theme, as it featured a good looking green color scheme. That’s a solid basis for a website focused on openSUSE. The theme has a very nice layout for the blog section, with attractive use of images and a simple navigation structure. As the blog is the most important part of this website, this theme seemed to be a good choice. I designed the website to my liking and wrote my first blog post.

Back to the e-book. What’s next? The settings tab and how to change the permalink appearance. The default was set to “Plain” and I wanted to change this to “Post name”. I changed the setting, reloaded the website and tried to access my first post. A 404 error. Then I read the sentence: “Just make sure that you don’t go jumping between link structures since it will break your site”. Oh, snap!

So how to fix it? Google to the rescue. Soon enough I found the generally accepted answers (1), (2) and (3). I just needed to edit my nginx.conf file to include the following within the server block:

location / {
                try_files $uri $uri/ /index.php?$args;

Was this the solution? I changed the permalink settings, reloaded the website… and no luck. A couple of hours and many variations later… and still no luck. I realized that I needed to improve my Nginx skills to get this problem resolved. I am not the person to give up that easily. After all, this website is a learning experience. I ordered the book: “Nginx HTTP Server: Third Edition” by Clément Nedelcu. It’s a fascinating read so far (if you like to dive deep into technology). In a future blog post, I will detail if I have managed to solve this problem and how I have solved it.

Published on: 19 March 2018