Boosting Website Performance!
If you’ve ever plopped your website’s url into pagespeed.web.dev or used Lighthouse metrics, you know how addictive it is. Initially having a performance score in the low 70s, with accessibility and SEO in the 80s, I was determined to get 100s across the board…or at least as close to 100s as possible.
You’re not only shown your scores but why you have them and where exactly they’re coming from. There is also advice on how you can make adjustments for improvement and they actually work! Some changes are a little more complicated and I’ll talk about that. Overall, this experience was very enlightening for me and I thought I would share some takeaways.
Accessibility
One of the initial areas I tackled was color contrast ratios. Understanding the importance of ensuring readability for all users, I evaluated the contrast ratios of text and background elements on the section at hand: the featured section on the Home page. I love this bright pinkish-reddish color but sadly, it has a VERY limited number of foreground colors that go with it. For now, I want to keep the background color of this section, so I changed the small amount of affected text to be the darker blue I have for pretty much all of the text on the site. I used the WCAG color contrast checker to quickly see what passes and what fails. Another more easy-fix issue that came up was: focus elements having ids that in fact were not unique. Oops!
Performance
Image compression emerged as another crucial aspect in my quest for better performance. By optimizing images without compromising quality, I significantly reduced load times and bandwidth consumption. Although Google is STILL not quite happy with my image sizes! I will revisit my media queries and see if some specific adjustments regarding responsiveness makes a difference. One thing that definitely makes a difference is the type of image file. You’ll want to convert any JPG or PNG to WEBP or SVG in some cases. For example, any icons I use are SVG.
One of the significant revelations during this experiment was the concept of Largest Contentful Paint (LCP) elements. Understanding that LCP represents the time it takes for the largest element on a web page to become visible, I realized its impact on user experience and site performance. My LCP is the first paragraph on my Homepage where I introduce myself. After some research, I was sure this had to do with load times of CSS files. More specifically, waiting for Google fonts. I switched out the CDN method and served my two fonts locally instead. This did improve my performance score but the LCP remains an issue I still need to solve!
SEO
Meta description tags was something I used for the first time and it got my SEO score to 100 instantly. Crafting concise and compelling meta descriptions can not only improve click-through rates but also provide search engines with relevant information about content, which boosts organic traffic. That’s page SEO, not content SEO, which is a whole other area of expertise. Google will automatically look for content already on your page to use as a description for that page but better if you can give it something that succinctly describes it well. It can play a vital role in enhancing the discoverability of a website. To see real results on Google though, you need to wait at least 6 months and have a good amount of content on each page of your site, with at least 1200 words on the Homepage. Yes, you can really leverage Google to enhance your business if you know what you’re doing!
Looking ahead…
It’s important to note that some of the biggest, most famous sites don’t seem to care about their page scores, especially when it comes to mobile. The main reason being, they don’t have to! These companies are already huge, established brands. They can use all the “eye-catching” videos and animations they want at the expense of performance and accessibility. I just find it weird that the giant tech companies dictating the rules of software and the internet don’t seem to follow best performance practices. I guess we are slaves to Google’s algorithm, which prioritizes mobile web performance and yet fails its own mobile metrics test - __ - Luckily, getting really great scores with a standard multi-page website, even one with a headless CMS like mine, is not hard if you’re familiar with web development.
Considering the potential benefits of minifying CSS and other resources, I plan to delve deeper into optimizing code and reducing unnecessary bloat whenever I see it! At the risk of sounding corny, my experience with Page Speed Insights has been transformative, empowering me to identify areas for improvement and implement tangible solutions for enhanced performance, accessibility, and SEO. Thanks for reading!