What I learned from Lighthouse audits

I recently analyzed the lighthouse report of 14 websites of the lab I am working with. Here is what I learned from that,

What is Lighthouse?

Lighthouse is an automated tool for auditing websites for any public page. It audits based on performance, accessibility, best practices, SEO, and progressive web apps. One can run lighthouse from either web developer tools or as an add-on, or even from command-line tools. If you are reading this on any chromium-based browser like google chrome, brave, etc. Just right-click and search for Inspect Element. Upon clicking, it will open a new window and now look for the lighthouse on the web dev panel.

How does it work?

Regardless of how one chooses to run this software, the results will be the same. It takes the URL of the webpage and runs some prewritten tests on it. Upon all the inspections, It generates a report with issues and a list of website improvements.

What were the common problems I saw?

Most of those 14 websites had common mistakes, and you can resolve those pretty quickly.

Here I am listing some of them below,

Html element has no `lang` attribute

There are lots of people who use screen readers daily in today's era. These screen readers use different libraries for different languages for correct pronunciation. So if you do not specify language attribute in the <html> element, the screen reader can only use the default language.

<html lang="en"></html>

Use this next time to make a webpage.

Images do not have `alt` attribute

Remember the time when the wifi goes to restart, or the light goes off? What happens if your browser is in between loading? That's where alt attributes come into the picture. When the image in the webpage fails to load, alt attributes work as a placeholder. It gives a sense of what the image was trying to say.

So next time when you are adding an image to your webpage, don't forget to add alt.

<img alt="Audits set-up in Chrome DevTools" src="..." />

Document does not have a meta description

Meta tags provide a summary of your websites for search engines to index your website better. High-quality meta tags with all the details can increase traffic to your website.

Here are sample meta tags from metatags.io.

<title>Meta Tags — Preview, Edit and Generate</title>
<meta name="title" content="Meta Tags — Preview, Edit and Generate" />
<meta
  name="description"
  content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!"
/>

Includes front-end JavaScript libraries with known security vulnerabilities

Libraries such as bootstrap and jquery are continuously updated and give new versions to the user for remaining prone to potential attackers. But if the user does not have updated libraries, the user might be at risk of potential attacks. To remove this warning, update the mentioned library.

vulnerable libraries

Links to cross-origin destinations are unsafe

If you link different websites using target="_blank_",you can expose your window to attackers. The other page can access your window object with the window.opener property, and in the worst case, can even redirect the user to a different website.

Adding rel="noopener" or rel="noreferrer" to your target="_blank" links avoids these issues.

here is the example,

<a href="https://examplepetstore.com" target="_blank" rel="noopener">
  Example Pet Store
</a>

Links do not have a discernible name

Unique and meaningful link tags can improve the navigation experience on screen readers and other assistive technologies. Instead of 'Click Here' or 'Read More', use meaningful names for links. Here is an example,

Check out <a href="…">our guide to creating accessible web pages</a>.
</html>

List items `<li>` are not contained within `<ul>` or `<ol>` parent elements

Screen readers or other speech tech needs <li> items contain with <ol> or <ul> to understand and announce the list properly.

Wrap any orphaned <li> elements inside a <ul> or <ol> element.

Lists do not contain only `<li>` elements and script supporting elements `(<script> and <template>)`

ol or ul should only contain li items to improve readability by screen readers. One should remove the elements that don't belong there.

Learnings

With this analysis, I learned about lighthouse reports and how small things impact a webpage's performance and accessibility. According to a study, we lose 40% of significant customers if our page takes more than 3 seconds to load. These issues are minor and can be updated easily and, with little practice, can be added to the programming checklist before sending the website to production.

Joke :

Once all programming languages went to a party. Guess who paid the bill? Of course, PHP. Because PHP has many $

Happy coding :)