--- articleTitle: Improving Site Performance of Leilukin's Hub desc: Steps I hae taken to improve my website's performance. date: 2024-06-12 categories: ["site updates", "web development"] --- Since Leilukin's Hub [migrated to Netlify and got a custom domain name](/blog/posts/2024-05-31-domain-name-hosting-change-leilukins-hub/) on 31 May 2024, I have been working on improving the performance of this website. After discovering the static site generator [Eleventy](https://www.11ty.dev/) and began to [rebuilt Leilukin's Hub with Eleventy](/blog/posts/2024-04-21-april-2024-leilukins-hub-overhaul-with-eleventy/), I found the [Eleventy Leaderboard](https://www.11ty.dev/speedlify/) which inspired me to look into [Google Lighthouse](https://developer.chrome.com/docs/lighthouse/) more, since the Eleventy Leaderboard measures the Lighthouse score of websites built with Eleventy. I use [PageSpeed Insights](https://pagespeed.web.dev/) to measure my website's Lighthouse score. My website achieved 100 in the categories of Accessibility, Best Practices and SEO, but the Performance score could use improvement. As a result, I studied about ways to improve website performance based on PageSpeed Insights' reports about my site. ## Optimising Custom Fonts During the tests of Leilukin's Hub, PageSpeed Insights reported that the biggest factor in impacting the performance of this website is [Cumulative Layout Shift (CLS)](https://web.dev/articles/cls). It took me a while to figure out using a custom font, namely the [Lexend font family](https://www.lexend.com/), was the cause of CLS of Leilukin's Hub — due to using a custom font as the default font, there was a [flash of unstyled text (FOUT)](https://fonts.google.com/knowledge/glossary/fout) for the entire page of Leilukin's Hub before the Lexend font loaded. This prompted me to research ways to optimise web fonts. Eventually, I solved the issue of FOUT and CLS by preloading the Lexend regular and bold typeface files (I used [google-webfonts-helper](https://gwfh.mranftl.com/fonts) to obtain the font files in WOFF2 format) in the `` element, and turning my CSS stylesheet for Lexend into inline CSS by placing a `