A business website needs to be fast. The logical end of giving users a swift browsing experience is that we reduce the time in between them opening the website and understanding what our business is about. By extension, this means that the time to win over the customer is reduced. The reasons for most business websites being so slow are a lack of awareness of what is a good website on the part of the business purchasing the website and a favouring of short, easy-to-implement solutions on the part of the web development firm undertaking the website creation.
Web developers should not abuse businesses’ lack of knowledge on how a website should perform. The business gets a website and the developer gets paid but much more care should be exercized in order for the business to get their money’s worth and the developer to gain a good reputation.
Here is list of the technologies and techniques we used to create this website.
Hugo We used Hugo to create this website. There is no need for the website, being a portfolio website, to provide server-side functionality. Thus we used a static site generator to support the website creation. Hugo provides shortcodes and partials which allow for rapid prototyping of web page elements and easy standardization of the appearance of the website.
System font stack This consists of fonts that are built into the browser. This alleviates the need to wait for fonts to be downloaded and thus prevents the dreaded Cumulative Layout Shift (CLS). Modern Font Stacks is a great resource.
Pure CSS We did not use any CSS libraries. This gives us full control over the properties we want to alter. The result is that the website can be made to have a consistent look without the performance drops that come with popular CSS libraries.
Image conversion Image formats such as WEBP and AVIF are superior options over PNG and JPEG for websites. These formats are much smaller and do not affect the quality of the image to a noticeable degree. Python’s Pillow package is a good option for converting images locally.
Bootstrap icons We have a fork of the Bootstrap icons (under MIT license) within the website theme and inject the SVG files into web pages, using Hugo shortcodes, as specified by the user. This technique saves time wasted searching for vector graphics icons and avoids the need to find an image online to act as a placeholder. Bandwidth is conserved and web page sections can be balanced according to UI/UX design principles.
Responsive image automated generation We use Hugo shortcode templates to automatically create images to be displayed at different screen widths.
Microdata Our website uses the Schema.org markup to help identify the relationship of elements on web pages and aid in the generation of rich text content.
Through rapid prototyping and meticulous tweaking, we were able to achieve a perfect score for the PageSpeed Insights speed test:
Conclusion
Creating a good business website isn’t rocket science. It just takes a little more care than many devs are willing to invest in a website that isn’t theirs - funny how web dev firms have slow websites too.