Optimizing your website to come up as a top result in search engines and ensuring accessibility to anyone coming across your site is becoming more important every day. Especially for businesses who want to maximize their outreach to potential customers. Today I will be going over an audit of a company in State College that I have been interning for the past couple months. I am going to outline some of the major problems with their website, and how we can identify and solve these issues.
Reports
Web.dev
Link to Report
The Web.dev report highlights a few of the major problems with the performance of the Affinity Connection website. First we can see that the performance is extremely low at 15. We can also verify that the scores for Accessibility, Best Practices, and SEO are alright/average with 73, 57, and 75 respectively. What we will take from this report are two performance problems:
- Defer offscreen images
- Serve images in next-gen formats
Together, both of these problems take up over a whole minute of performance.
Lighthouse
When going through the Lighthouse audit, we see all of the same problems we did from the Web.dev report, except for one major issue. The performance score has decreased even more to a total of 5. The only difference the Lighthouse report has from the Web.dev report is that it has acknowledge the Affinity Connection site does not use HTTP/2 which accounts for almost 40 seconds of performance.
Wave
Link to Report
For the Wave report, there are 23 errors and 6 contrast errors on the home page of the website. We can see that the document structure is somewhat inconsistently using heading tags which should be changed to be easily parsed for screen readers. However, the main issue I would point out for the Wave audit is that not of the pictures or linked pictures have alt-text which is extremely important for accessibility.
Solutions
Defer offscreen images
As I'm pretty sure their site is built off of wordpress or something similar, I will be trying to find a solution that allows it to be implemented in wordpress or something similar. To defer offscreen images, we simply need to allow lazy loading on images that we don't want to instantly load, so non-branding, unimportant images. In order to turn on lazy loading, we have a few options. Besides using vanilla javascript or creating our own plugin, the easiest option for lazy loading images, is to use an existing plugin. To do so, all we need to do is use a plugin for WordPress like Smush and get it set up to lazy load the images we want.Serve images in next-gen formats
An extremely simple solution for this performance issue is to start using WebP for the images on the website. Since the images they are using are in old formats, they have old performance issues that can simply be fixed by converting them to WebP and then re-uploading them to the website.Use HTTP/2
Currently the Affinity Connection website is not using HTTPS, meaning they don't have SSL and HTTPS set up. Since the site isn't completely secure, they have to use HTTP/1.1 to load lots of different resources. Another simple solution here is to get SSL certificates for the website, and then use a plugin to enable HTTPS on the site, so it can start using HTTP/2.Alt-text
The last issue that we pulled from our reports was the images not using alt-text. When using WordPress, you are given the option to edit the meta-data for an image. All we need to do to help ensure better accessibility and SEO is to add alt-text for each image to describe what the image is.
These all seem like simple solutions, because they really are. They could be fixed in one day and would help the site perform better, optimize search results, and be more accessible to a greater amount of people.
How to use Web.dev, Lighthouse, and WAVE
Top comments (0)