A word from Lex 😄
Today, I wanted to talk about a great, simple tool to use for assessing the overall performance, quality, and accessibility of applications. Lighthouse is a chrome extension that audits a page and generates a report on the tests that the page was run against. Lighthouse also provides reasoning for the failure of tests and helpful resources for solving those issues.
In an effort to show off the tool and go over some of the things I found, I tested Lighthouse against my portfolio, and these were my results:
So today, I'll be discussing how I optimized my portfolio by updating 20 lines of code and installing and setting up 1 npm package. The concepts I faced today were:
Improving Performance:
Optimize images
Serve images in next-gen formats (WebP or AVIF encoded images will load faster and consume less cellular data)
Lazy load images
Compress images (this one is key!)
Improving Accessibility:
Ensure text remains visible during font load (if you're using custom fonts)
Heading elements should be in sequentially descending order
Resources today:
Notes today:
Why is lazy loading important?
When a site is "painted" (rendered visually for the user to see), typically, the browser loads all of the document at once. Now a low-performing site may load successfully in a few seconds, but those first few seconds are a vital time for users to decide on continuing their site session, or getting discouraged by a long load time and clicking off. As we all know, images take up a lot of bandwidth and have a significant impact on the performance of your website. Lazy loading is the method of only loading an image when it is reached by the user's viewport, instead of being loaded when the entire document is rendered. There are multiple ways to lazy load images, including using third-party libraries. However, there is now a loading attribute we can include in our <img> elements.
<img src="img.png" loading="lazy" alt="..." width="200" height="200"Images below the viewport are loaded with a lower priority, but they're still fetched as soon as possible.
All images that are above the fold—that is, immediately viewable without scrolling—load normally. Those that are far below the device viewport are only fetched when the user scrolls near them.
Images should include dimension attributes
To enable the browser to reserve sufficient space on a page for images, it is recommended that all <img> tags include both width and height attributes.
The best practice of setting dimensions applies to <img> tags regardless of whether or not they are being loaded lazily.
Also, specifying image dimensions decreases the chances of layout shifts happening. If you are unable to include dimensions for your images, lazy loading them can be a trade-off between saving network resources and potentially being more at risk of layout shift.
Avoid lazy loading images that are in the first visible viewport.
Uncompressed images bloat your pages with unnecessary bytes which can add unnecessary resource load time. Imagemin minifies images in your project so that you don't have to compress every single image manually. I would suggest the Imagemin npm module, but there is also the CLI if you don't want to modify the code. If adding Imagemin to your project isn't the route you want to go, you can compress images using websites like https://squoosh.app/ , https://tinypng.com/ , and https://compressor.io/ .
P.S. I did not do this step because there was issues with the imagemin package and I didn't have time today to compress all of my images manually. Plus, I didn't want to lose quality of my images ðŸ˜
My portfolio uses .ttf files for the font I wanted: "Centra," which I then import into my CSS file (see image below). I didn't even realize this, but it makes total sense, that it takes load time to fetch imported fonts in your CSS file. During that load time, it is possible that the page is rendered without text (renders invisible text).
The clearest solution is to temporarily use a system font for your text; this is set up by using the font-display attribute with the "swap" value (see image below).
This resource also talks about how to preload web fonts or how to add the &display=swap parameter at the end of a Google Font URL.
Many of the links on the my portfolio don't have text, because they are links that surround an image, such as an icon. For example, in the navigation of my portfolio, there are three icons wrapped by their respective links: LinkedIn, GitHub, and Twitter. The icons represent what the link will lead you to, but for screen readers who cannot see the icon, they may not know where the link is leading them to. In this case, I can use an aria-label to provide an invisible label for these links.
This one is pretty self-explanatory, and one of the first things we learn when learning best practices of semantic HTML! In the case of my portfolio, I had an H1, H2's, and then my project titles were H4's. It was a silly mistake, but that's what Lighthouse is for. All I had to do was change one <H4> tag to be an <H3>. And yes, it's a quick fix but it makes a big impact on improving accessibility.
Comments