5 Tips to Take your Website Lighthouse Score from Meh to WOW!
Tags: webdev, html, javascript, react
Published: 2021-11-07 06:16:22

When creating a website for Production, you would want the world to have _a great experience using it_. One of the best tools for this purpose is the **Lighthouse**, a **Chrome Dev-tool** that analyses how various your site fares on different metrics.

Sadly, pushing for a perfect **Lighthouse** score isn't easy. While creating my [portfolio website](https://tapajyoti-bose.vercel.app), I started off with the following score:

![Initial Lighthouse Score](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/deamhja2wl9nmkia6ejv.png)

But after following a few simple steps, I managed to take the score _in each category_ to **90+**

![Current Lighthouse Score](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvbrdb9zzyif2zwucpmv.png)

# 1. Use Responsive Images & Art Direction

The most often way to use images is to use:

```html
<img src="link-to-image">
```

But there is are far more optimized methods to use images:

```html
<!-- Responsive images -->
<img
    srcSet="link-to-img 480w, link-to-img@2x 720w, link-to-img@3x 960w"
    sizes="(max-width: 1200px) 480px, (max-width: 2560px) 720px, 960px"
    src="imgUrl@3x"
>

<!-- Art Direction -->
<picture>
    <source media="(max-width: 1200px)" srcSet="link-to-img">
    <source media="(max-width: 2560px)" srcSet="link-to-img@2x">
    <source media="(min-width: 2560px)" srcSet="link-to-imgl@3x">
    <img src="link-to-img@3x">
</picture>
```

Using these methods allows browsers to load up the images that are the **most appropriate for the size of the screen you are using**, often _saving it from downloading a huge amount of data unnecessarily_.

To learn more about **Responsive Images** and **Art Direction**, check out the [MDN Docs](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)

# 2. Use Server Side Rendering and Lazy Loading 

My portfolio was initially made with **React** (bootstrapped with `create-react-app`), but since vanilla **React** is computed on **Client-side**, it hampers both _Performance_ and _SEO_. Re-writing the entire website in **Next.js** provided some serious improvement to the Lighthouse Score.

Another important concept is **Lazy Loading**. It is the style of programming that _defers the loading of resources till they are required_. This provides **huge gains in performance** during _the initial load of the website_. It's very easy to implement **Lazy Loading** in **React** based applications:

```jsx
import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function Component() {
  return (
    <div>
      <Suspense
          // fallback will be displayed while the lazy component loads
          fallback={<div>Loading...</div>}
      >
        <LazyComponent />
      </Suspense>
    </div>
  );
}
```

# 3. Minify your resources

It is always a good idea to **minify** the **JavaScript** and **CSS** in the production environment. It drastically reduces the size of the items to be loaded and also gets rid of unused code.

**Webpack** is a great tool for this purpose. It minimizes **JavaScript** by default in the Production environment. For other resources, like **CSS**, you can use additional plugins like the `css-minimizer-webpack-plugin`.

```js
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
  },
};

```

To learn more about **Webpack**, checkout this [article](https://dev.to/ruppysuppy/webpack-unpacked-a-pragmatic-guide-486f)

# 4. Use Compressed images

The **next-gen** image formats such as **WebP** can provide far better compression than a **PNG** or **JPEG**. This in turn means _faster downloads_, _less data consumption_, and _therefore, an overall faster site_.

![WebP vs JPEG](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5nw8lq3shn38j145p8d.jpg)

You can also go with _vector graphics_ format such as **SVG** instead of the commonly use _raster graphics_ which too help tremendously in the domain of performance gains.

# 5. Use `alt`, `aria-label`, and `aria-labelledby`

These tags help you improve the Website's **Accessibility**.

1. `alt`: The `alt` attribute is the **HTML** attribute used in **HTML** documents to specify _alternative text that is to be rendered_ when the element (generally images) to which it is applied cannot be rendered.

    ```html
    <img src="link-to-img" alt="image-description">
    ```

2. `aria-label`: The `aria-label` attribute is used to define a string that labels the current element. _Use it in cases where a text label is not visible on the screen_.

    ```html
    <button aria-label="Close" onclick="dialog.close()">
        X
    </button>
    ```

3. `aria-labelledby`: Similar to the `aria-label` attribute, but it should be used _if there is visible text labeling the element_.

    ```html
    <div role="dialog" aria-labelledby="dialog-header">
        <h2 id="dialog-header">Choose a File</h2>
        <!-- ... Dialog contents -->
    </div>
    ```

# Wrapping Up

We went through some tricks to boost all aspects of the Lighthouse Score for your website. Use them on your website and witness the magic before your eyes.

Wishing you a **Perfect 100 Lighthouse Score**!

![thumbs up](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3dy5iicial84op70r8yb.gif)

Finding **personal finance** too intimidating? Checkout my **Instagram** to become a [**Dollar Ninja**](https://www.instagram.com/the.dollar.ninja/)

# Thanks for reading

Need a **Top Rated Front-End Development Freelancer**? Contact me on [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)

Want to see what I am working on? Check out my [GitHub](https://github.com/ruppysuppy)

I am a freelancer who will start off as a **Digital Nomad** in mid-2022. Want to catch the journey? Follow me on [Instagram](https://www.instagram.com/tapajyotib/)

Follow my blogs for **Weekly new Tidbits** on [Dev](https://dev.to/ruppysuppy)

**FAQ**

These are a few commonly asked questions I get. So, I hope this **FAQ** section solves your issues.

1. **I am a beginner, how should I learn Front-End Web Dev?**
   Look into the following articles:

    1. [Front End Development Roadmap](https://dev.to/ruppysuppy/front-end-developer-roadmap-zero-to-hero-4pkf)
    2. [Front End Project Ideas](https://dev.to/ruppysuppy/5-projects-to-master-front-end-development-57p)

2. **Would you mentor me?**
   Sorry, I am already under a lot of workload and would not have the time to mentor anyone.

3. **Would you like to collaborate on our site?**
   As mentioned in the _previous question_, I am in a time crunch, so I would have to pass on such opportunities.

**Connect to me on**

-   [LinkedIn](https://www.linkedin.com/in/tapajyoti-bose/)
-   [Portfolio](https://tapajyoti-bose.vercel.app)
-   [Upwork](https://www.upwork.com/o/profiles/users/~01c12e516ee1d35044/)
-   [GitHub](https://github.com/ruppysuppy)
-   [Instagram](https://www.instagram.com/tapajyotib/)