7 Tricks to take the Performance of your Website to the Moon 🚀🌙
Are users complaining about your slow website? This article shares 7 tricks to take the performance of your website to the moon. Let’s get started!
1. Fetch only relevant resources
Did you know you can fetch only the CSS files relevant to the current device?
link tag has a
media attribute that can be used to specify the media query for which the stylesheet is intended.
media="screen and (max-width: 600px)"
This will fetch the
mobile.css file only if the device width is less than
A live demo of this can be found in w3schools.
2. Minify your code
Minification is the process of removing unnecessary or redundant data without affecting how a resource is processed by the browser. Minification can include the removal of code comments, white space, and unused code, as well as the shortening of variable and function names.
Regardless of the build tool (Webpack, Vite, Snowpack, etc) you use, it would have a minification option. For example, in webpack, you can use the TerserPlugin to minify your code.
3. Pre-fetch resources
You can preload images, CSS, JS, and even entire pages by using the
<link rel="preload" as="image" href="image.png" />
Quicklink is a library that prefetches links in the viewport, using the Intersection Observer API, & makes them load faster, whereas Guess is a library that uses Machine Learning to predict which page the user is most likely to visit next.
4. Use Responsive Images or Art Direction
This is possibly the biggest performance win you can get.
You can use the
srcset attribute to specify multiple image sources for different screen sizes. This allows the browser to choose the most appropriate image for the current device.
srcset="image-480w.jpg 480w, image-800w.jpg 800w"
sizes="(max-width: 600px) 480px, 800px"
alt="some random image"
Art direction is a technique that allows you to serve different images to different devices. This is useful when you want to serve a different image for mobile and desktop devices.
<img src="mobile.jpg" alt="some random image" />
5. Lazy loading of relevant resources
Lazy loading is a technique that allows you to defer the loading of non-critical resources until they are needed.
It just requires you to add the
loading="lazy" attribute to the relevant elements and you are good to go.
alt="some random image"
Ideally, you should lazy load images, videos, iframes, and other resources that are not visible on the initial page load.
6. Tree-shake your code
Just like minification, tree-shaking & pruning unused code is also a build tool feature.
Here is the webpack documentation on tree-shaking
7. Use Page Speed Insights to detect potential issues
Google’s Page Speed Insights is a great tool to detect potential issues with your website.
It not only gives you a score but also provides you with a detailed report of the issues that you need to fix.
That’s all folks! 🎉
Finding personal finance too intimidating? Checkout my Instagram to become a Dollar Ninja
Follow me for bi-weekly new tidbits on the domain of tech!
Need a Top Rated Front-End Development Freelancer to chop away your development woes? Contact me on Upwork
Want to connect? Reach out to me on LinkedIn
I am a Digital Nomad and occasionally travel. Follow me on Instagram to check out what I am up to.