This month, we have delivered a beta version of the website. Some pages and content are missing and the layout is still being designed, but we can start to evaluate if the planned processes are viable.
Images
Since the beginning of the platform, we have decided to limit the number of images on the page in order to reduce its size. The current layout contains four images, in addition to the favicon:
- The Good Manager logo
- Erasmus+ logo
- Background "lemniscate"
- Language switcher bubble
We've used svg images to reduce their size and optimize their display. The total weight of images is currently 26kb, which is really low.
More images may be integrated, such as logos of partners of the project, while it's not necessarily a design priority. Some images might even be removed in future versions if we judge they are not essential to the layout.
We are using Gatsby to generate static pages from a variety of sources and files. Gatsby is a static website generator that will compile the final website you are currently browsing. It handles very well images that are not natively optimized for the web.
According to the Gatsby documentation, here is a list of how Gatsby can optimize images:
- Loads the optimal size of image for each device size and screen resolution
- Holds the image position while loading so your page doesn’t jump around as images load
- Uses the “blur-up” effect i.e. it loads a tiny version of the image to show while the full image is loading
- Alternatively provides a “traced placeholder” SVG of the image
- Lazy loads images, which reduces bandwidth and speeds the initial load time
- Uses WebP images, if browser supports the format
We delegate the responsibility of image optimization by using this kind of tool. Choosing the correct format, size andcompression of an image can be hard for non-technical profiles. Website contributors can rely on a technical solution for a simpler usage.
Using a CMS
Usually, a CMS will handle this kind of concern. A Wordpress-based website can offer similar tools and deliver on-the-fly optimized images. As we have decided to limit our usage of a dynamic CMS, Gatsby fulfills its role perfectly.
However, we are using Wordpress for publising content for pages. Wordpress is just queried for datas at compilation by Gatsby, and we use the Wordpress back-office to organize the content. This system could change soon in order to lower our server consumption.
Instead of using Wordpress and a MySQL database, we could store data on flatfiles, like word documents or excel, and extract their content to compile pages with Gatsby. We see two advantages:
- It would limit the need to have a heavy infrastructure for a Wordpress back.
- No more copy-pasting between files and Wordpress forms to upload content. What is delivered in a Dropbox folder is converted to a webpage, reducing the number of mistakes and intermediary documents.
Dropbox is a tool we need to work remotely with partners all around Europe, despite its ecological impact. For us, it is a storage space, a collaborative workspace and a version management system. Maximising the use of this tool seems to be a good idea to limit our footprint.
Future steps
During the next month, we will explore the use of flatfiles to generate the main pages and their translations. Some features of the website such as the e-learning modules may not be build with this system, but we need to test it. We will continue to work on the layout as well in order to get the platform ready for the next features.