This content originally appeared on DEV Community and was authored by TheYoungestCoder
Since school ended, it's time for another article! Anyway this is part two of my series "Getting a 100% score in lighthouse" BTW I also updated my previous post in this series.
1. Avoid chaining critical requests
One of my favorite resources as a web developer was the google fonts api. If you've ever used google fonts you'll know that lighthouse always screams at you to "avoid chaining critical requests". This significantly reduces the speed of webfont load because it has to make a request to load the css, then load the actual font. Luckily it's an easy fix, just follow these steps:
- Go to the /css2 url in your browser
- Copy the entire response
- Paste into your html inside
<style>
2. Drop jQuery
When I first used jQuery I instantly fell in love with it's clean syntax and concise API. I know it'll be hard to leave, but most of it's deadweight. Consider using a "mini jQuery" library such as ki.js.It may seem challenging at first, but once you get familiar with document.querySelectorAll and other DOM APIS you'll wonder why you used jQuery in the first place.
3. Prevent cumulative layout shift
What is cumulative layout shift (CLS for short) you ask? It's basically when the size of some element changes causing another element's position on the page to shift unexpectedly. This is common for images because the browser doesn't know the size of the image before it's downloaded. Including width and height attributes will do the trick.
4. Minify resources
The file size is definitely affects the time the server takes to respond. Minifying is the fix you need to reduce the size of it. If you use netlify to host your site, there is an option in the build settings to automatically minify scripts and stylesheets. If you're a vscode user, you can also install an extension titled "minify". Also, consider using a different file type if it offers better compression. I've found that webp was waaaaay more storage efficient.
In conclusion
Less requests makes for faster load times which result in a better lighthouse score. Use all these tips to reduce the number of requests and their size. Stay tuned for my next article "How to improve SEO". Thank you for reading!
This content originally appeared on DEV Community and was authored by TheYoungestCoder
TheYoungestCoder | Sciencx (2021-06-25T19:21:21+00:00) How to make your site more performant. Retrieved from https://www.scien.cx/2021/06/25/how-to-make-your-site-more-performant/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.