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, I started off with the following score:
But after following a few simple steps, I managed to take the score in each category to 90+
1. Use Responsive Images & Art Direction
The most often way to use images is to use:
<img src="link-to-image">
But there is are far more optimized methods to use images:
<!-- 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
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:
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.
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
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.
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.
-
alt: Thealtattribute 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.
<img src="link-to-img" alt="image-description"> -
aria-label: Thearia-labelattribute 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.
<button aria-label="Close" onclick="dialog.close()"> X </button> -
aria-labelledby: Similar to thearia-labelattribute, but it should be used if there is visible text labeling the element.
<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!
Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja
Thanks for reading
Need a Top Rated Front-End Development Freelancer? Contact me on Upwork
Want to see what I am working on? Check out my GitHub
I am a freelancer who will start off as a Digital Nomad in mid-2022. Want to catch the journey? Follow me on Instagram
Follow my blogs for Weekly new Tidbits on Dev
FAQ
These are a few commonly asked questions I get. So, I hope this FAQ section solves your issues.
-
I am a beginner, how should I learn Front-End Web Dev?
Look into the following articles: Would you mentor me?
Sorry, I am already under a lot of workload and would not have the time to mentor anyone.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
Top comments (22)
** cough **
if (navigator.userAgent.indexOf("Chrome-Lighthouse") > -1) {Return <PlainTextApp />
} else {
Return <App />
}
** cough **
Nice one 😂
cloaking?
Ah that's what it was called. Yeah obv. Don't do this, tho I've seen references where someone was successful fooling, at least locally the lighthouse audit.
https://mobile.twitter.com/colinbendell/status/1422930517977096199?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1422930517977096199%7Ctwgr%5E%7Ctwcon%5Es1_&ref_url=https%3A%2F%2Fwww.searchenginejournal.com%2Fgoogles-not-fooled-by-fake-lighthouse-scores%2F417593%2F
Some browsers don't support webp and you need to detect that.
Metadata removal is a must, we had up to 40kb of trash in it
where can i check lighthouse score? I want to get lighthouse result as svg like below.
Chrome Dev Tools
In fact, no one cares about your LH score.
Google is only interested in LCP, FID and CLS for your SEO score.
The rest is just for show off.
Actually Google does care about Accessibility & Best Practices too. Initially Google refused to index my website because I was using a
divas abutton, as for Accessibility:a) Google does care about Accessibility of your website.
b) YOU should care about Accessibility of your website.
Those three are now considered a part of performance.
Nice
The real magic trick is to load js on Interaction.
Good tips! About img optimizing. When you use nextjs, just use the Image tag instead of img, nextjs will optimize it for you.
Yeah, that's a handy one, thanks for pointing out!
But there's one issue with it: you need to have the image locally in the server, for images from external using next's optimization results in worse performance
Thanks. We look forward to continuing with tips for WordPress, in which the user's capabilities are limited by the themes used
I would suggest reading as well about
Thankyou for your insights
Glad you found it helpful :)