How to Use Lighthouse Wisely in Your Front-End Projects
by @eleanorhecks@x.com (@designerlymag@x.com) on , tagged guest-posts, how-tos, lighthouse, google, performance, accessibility, seo, best-practices (toot this?)
As a front-end developer, you’ve likely worked with Google’s Lighthouse to check your website performance. However, is it always the best choice for increasing the user experience (UX) factor? Are there times when you should forego Lighthouse for something else entirely?
Benefits of Using Lighthouse in Your Front-End Projects
Lighthouse is a fairly simple open-source tool that evaluates your site’s performance by looking at five metrics:
- Loading speed
- Accessibility
- Basic development standards as defined by Google
- Search engine optimization (SEO)
- Progressive web app (PWA) abilities
Lighthouse gives you a basic snapshot of the big elements that might bog your site down and cause it to underperform. The program scores each category on a scale of 100 and gives recommendations for fixing problem areas. Google suggests running the program five times for the most accurate measurements as many variables come into play.
While it gives you a good look at the technical aspects of your site, it may fail to understand your particular audience. Improving one or all five factors can improve search engine rankings but may not consider how users respond to the design.
When Should You Use Lighthouse?
You should run Lighthouse for front-end projects to find any potential performance issues. Slow server load times, unoptimized images, and excessive code can be easily fixed before launching your site.
Here are some instances where Lighthouse can be particularly useful.
If you’re concerned about accessibility: Designing accessible websites for individuals with disabilities is a concern that more site owners would do well to consider, as only 4% of the most popular websites currently meet accessibility guidelines. If you want to ensure compliance with accessibility guidelines such as the Americans With Disabilities Act or just reach a portion of your audience and improve their experience, Lighthouse can identify where you might be lacking.
If you’re trying to reach an older audience: Lighthouse can also improve accessibility for an aging population if you’re looking to target an older audience, which is wise considering most developed countries today have a rapidly aging demographic. Lighthouse can check for concerns that impact older adults, such as font size and ease of navigation through the site.
If you’re especially focused on SEO: You can also use Lighthouse to make sure you’re adhering to Google’s basic standards and improve your chances of ranking high in search engine results pages (SERPs). Even small changes, such as ensuring your site has PWA abilities, can significantly impact how well the page functions. While you can run the program anytime in an effort to improve SEO, you should run it as soon as you create a website or make major changes.
When Can You Ignore Google’s Lighthouse Results?
While Lighthouse can be an incredibly valuable tool for accessibility and SEO when used alongside other tools, the debate on Lighthouse’s effectiveness rages on sites such as Reddit. Some people say that with smaller websites with lower traffic, they’ve seen dramatic increases in page position after making edits based on Lighthouse’s recommendations. However, others warn about creating worse user experiences for the sake of catering to what a search engine is looking for.
It’s important not to make changes blindly solely based on Lighthouse’s suggestions. Utilize Lighthouse scores alongside real user monitoring for a better picture of user satisfaction. Further, if your project doesn’t require offline capabilities, it’s fine to ignore PWA considerations.
Best Ways to Use Lighthouse
To get the most from Lighthouse, keep the following tips in mind.
1. Know Your Goals
Understand which metrics will have the most impact on your projects. An e-commerce site may benefit more from speed and accessibility, and a content-based design may benefit more from checking SEO.
2. Consider the Impact
As you look at each recommendation, think through the full impact of any changes. Will the site remain usable for your target audience if you change A and B? If Lighthouse recommends removing a third-party script, will it impact the performance of various features of the site?
Around 82% of people use Google as their search engine. Paying attention to recommendations to improve ranking is smart, but it can’t be your only focus.
3. Audit Critical Pages
You can run Lighthouse analysis on certain pages and see how well they’re performing. If you have a login page, how well it scores may not matter as much as how easy the form is to access. You can also tap into simulations, seeing what happens when you have high traffic or other bottlenecks.
Consider Other Factors
Lighthouse shouldn’t be the end-all score that determines if your website is successful. Be cautious of optimizing so much that you compromise the user experience. Always put UX above mechanics. Tap into the power of other performance indicators such as core web vitals and real user monitoring for deeper insights. The true goal is a high-performing site that functions well for users and brings them back repeatedly. Lighthouse is one element of creating the perfect website.
(Frontend Dogma accepts guest posts as long as they aren’t AI-generated or promotional. Although guest posts are being reviewed, Frontend Dogma cannot and does not vouch for their accuracy, and does not endorse recommendations made in them.)