From 841279449e629ee5cc5be875c7457e04869cd4a4 Mon Sep 17 00:00:00 2001 From: Helen Chong <119173961+helenclx@users.noreply.github.com> Date: Wed, 12 Jun 2024 19:16:40 +0800 Subject: [PATCH] Add new blog post about improving site performance --- ...2-performance-improvement-leilukins-hub.md | 34 +++++++++++++++++++ src/changelogs/logs/2024/2024-06-12.md | 3 +- 2 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 src/blog/posts/2024-06-12-performance-improvement-leilukins-hub.md diff --git a/src/blog/posts/2024-06-12-performance-improvement-leilukins-hub.md b/src/blog/posts/2024-06-12-performance-improvement-leilukins-hub.md new file mode 100644 index 00000000..deec7f7f --- /dev/null +++ b/src/blog/posts/2024-06-12-performance-improvement-leilukins-hub.md @@ -0,0 +1,34 @@ +--- +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). 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) 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 `