Hugo shortcode to serve images in next-gen formats

In my last blogpost I shared 10 ways to improve your Hugo website performance. My last tip was to serve images in next-gen formats. This could improve the performance of your website significantly. Eventhough there are multiple next-gen formats you can integrate, the best browser compatibility will come by using WebP, created by Google. Unfortunately, not all browsers support this format yet (looking at you, Safari!). To make sure you will serve an alternative, normal format like jpg or png instead for those non-compatible browsers, you need to update the way you serve your images and provide both formats.

10 Ways to improve your (Hugo) website performance

Website performance matters. Even if I would selfishly ignore all other human visitors to my website, I would be supporting Google’s mission to make the web faster and help myself climb the ranks of Google. In this article I describe 10 ways to make your Hugo website (or any other website) faster and give users a better experience.

These are the 10 tips I will be discussing:

How to optimize the Youtube Shortcode for Hugo

The Youtube embed shortcode for Hugo allows you to embed Youtube videos in your Hugo pages. Which is a pretty neat feature they provide to you out-of-the-box. The shortcode allows you to add two additional parameters that can be managed from the standard settings:

• Unique Youtube video ID
• allowfullscreen (which you can set to “true”, which allows users to show the video in full screen mode)

However, there are a ton of additional parameters you can include to customize your Youtube video embed. You can find a full list of all the embed parameters on the Youtube developers website.