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! That's why it's so addictive. You make the necessary changes and re-renter your URL to be analyzed and the score is higher! Instant gratification :-) 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 homepage. 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!

I also added an aria-label attribute to the link on my logo. This logo is on the header and footer and will take the visitor back to the homepage when clicked. Without the aria-label, Google couldn't read the href attribute, which is simply "/". The link worked but Google was pointing out that clicking on an image that is also a link with no clear indicator to where it leads is not accessible.

Performance

By optimizing images without compromising quality, I significantly reduced load times and bandwidth consumption. This process can be a bit tedious because you should ideally be serving responsive images. This means for each image, having a size for desktop and a size for mobile, with the appropriate one loading depending on the screen size. I did this by using the picture and source tags, noting the display sizes in my developer tools, and resizing the image accordingly. For example, the hero image (the colorful keyboard) has a display size of 522 X 522 pixels but to adjust for a range of desktop sizes, this size should be doubled (1044 X 1044), so I first downloaded the 'Medium' option from Unsplash (1928 X 2885), then scaled the image down in GIMP with a width of 1044. I then cropped the image to 1044 X 1044, converted it to a .WEBP file, and finally compressed the image. The same steps were repeated for the mobile version of the image, just of course with different size dimensions. WEBP is the best format I know of for web images and many free conversion, as well as compression services, exist online. I learned how to optimize images with CodeStitch's Page Speed Handbook—an amazing resource!

I have begun a similar process with my other images...but those are a bit different. For my blog and portfolio, I don't add images in the HTML but through my CMS. For these images to be responsive, the CMS would need a section for the desktop image and the mobile image, so these could be connected to their corresponding source tags. I would be very interested in a CMS that makes images responsive! For now, I have just started to crop down the blog and portfolio images to their desktop size and use that. Since their mobile versions are not SO much smaller, I am just using the one size for now, re-uploading them into the CMS's media library.

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, along with reducing the hero image size and compressing it, improved my performance score. I also added a plugin for 11ty for minifying HTML and CSS. During 11ty's build process, spacing and comments are preserved but this actually hurts performance because all the special formatting is just using more bytes.

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 use keywords related to your business/brand for your headings (h1 and only one h1 per page!) and probably produce lots of content based on keywords people search for in your region. You'll then need to wait least 6 months to see these results since it takes time for Google to find you and show up higher in searches. 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 barely passes its own metrics test - __ - Luckily, getting really great scores with a static multi-page website, even one with a headless CMS like this one, 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!