An Interest In:
Web News this Week
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
- April 13, 2024
How to make your site more performant
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!
Original Link: https://dev.to/theyoungestcoder/how-to-make-your-site-more-performant-3lgm
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To