What is Lighthouse and why should you care?
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more. You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it. Performance is a key metric for any website, as it is the first impression a user gets of your website. If your website is slow, users are more likely to leave your website and go to a competitor. This is why it is important to have a high performance score in Lighthouse, as it is a good indicator of how well your website is performing.
How to improve performance
There are many ways to improve your performance score in Lighthouse, some of which are easier than others. Here are some tips on how to improve your performance score:
1. Run your code in production mode
When you are developing your website, you are most likely running your code in development mode. This means that your code is not optimized for production, and is slower than it could be. When you are ready to deploy your website, make sure to run your code in production mode. This will optimize your code and make it faster. You can do this by running “npm run build” or “yarn build”, depending on your setup. Testing in development mode will give you a lower non-accurate score.
2. Optimize images
Images are one of the biggest contributors to page load time, so it is important to optimize them. You can optimize images by compressing them, resizing them, and using the correct file format. For example, you can use WebP instead of JPEG or PNG, as it is a more efficient file format. There are many tools available to help you optimize your images, such as Convertio and CloudConvert.
3. Remove unnecessary code
Unnecessary code can slow down your website, so it is important to remove any code that is not being used. This includes unused CSS, JavaScript, and HTML. You can use tools like PurifyCSS and UnusedCSS to remove unused CSS, and Webpack and Rollup to remove unused JavaScript.
4. React specific - Use React.lazy and Suspense
If you are using React, you can use React.lazy and Suspense to lazy load components. This means that components are only loaded when they are needed, which can improve performance. You can use React.lazy to load components dynamically, and Suspense to show a loading spinner while the component is loading.
5. Skeleton loading
Skeleton loading is a technique used to show a placeholder while content is loading. This can improve the perceived performance of your website, as it gives the user something to look at while they are waiting for the content to load. You can use tools like React Content Loader and React Skeleton to implement skeleton loading in your website.
6. Minify and bundle code
Minifying and bundling your code can improve performance, as it reduces the size of your files. You can use tools like Webpack and Rollup to minify and bundle your code, which can improve performance. Minifying your code removes unnecessary characters, such as whitespace and comments, which can reduce the size of your files. Bundling your code combines multiple files into one, which can reduce the number of requests made to the server.
7. Use a CDN
A Content Delivery Network (CDN) can improve the performance of your website, as it caches your content on servers around the world. This means that users can access your content from a server that is closer to them, which can reduce load times. You can use services like Cloudflare and Akamai to set up a CDN for your website.
Conclusion
Improving the performance of your website is important, as it can have a big impact on user experience. By following these tips, you can improve your performance score in Lighthouse and make your website faster and more efficient. Remember to test your website regularly and make improvements where necessary, as performance is an ongoing process. While these are a good guideline there is for sure other ways you can also do to further improve your performance, good luck with your website!
