Deep-dive into code

The folder and file structure is not organised in a consistent way making it challenging to understand the architecture:

Assets (images, pdfs, …) are not stored the same way across the application:
- Global assets are stored in the static folder.
- When assets are only used for a single page, they are stored within a folder labelled with the route.
- When used across multiple sub-pages within the same category route, they are stored directly at the root category folder. This leads to inefficient development as there are many files visible when navigating the structure.
- Homepage specific images are located directly in the src folder.
- Some folders in src only contain assets like podcast, legal and get-started. These match up with HTML pages in src, but follow the same architecture pattern as routes. This will become more and more confusing as the application scales.
Mixing HTML, styles and JS (apart from Nunjucks template syntax) together has led to large files that are difficult to work with. For example: src/about/index.html. As a result the codebase becomes incredibly difficult to maintain.
Content is mostly created with HTML files while at other times, Markdown files are used.
There is a lot of custom CSS especially for handling layouts. It’s good that you have created CSS variables, but they do not cover nearly enough.

Below are some examples of common issues we found:

Non svg images are mostly using the webp format which is good, but there are further optimisations needed. For instance, adjusting image dimensions and quality to reduce file size makes a significant difference to performance and passing core web vitals.
In some cases, static styles are inlined and specific to the current images. The layout styles are overly complex and the combination would not scale well when trying to change or add more logos.
We spotted that on the careers page the hero image is using an unoptimised format and the size of the image is massive. Other images on the page are also not sufficiently optimised.
- Additionally, hero images should be preloaded so the browser knows about them before parsing the HTML and can begin loading them as soon as possible.
The blog is still loading images from WordPress, presumably the previous implementation. The images are not using optimised formats either: