As a front-end developer, you want your web pages to load fast and use less bandwidth. This not only improves the user experience, but also saves costs and reduces environmental impact. In this article, you will learn some practical tips and techniques to optimize your web performance and reduce initial loading time and bandwidth.
One of the easiest ways to reduce the size of your files is to minify and compress them. Minifying means removing unnecessary spaces, comments, and symbols from your code, while compressing means using a tool or algorithm to reduce the number of bits needed to represent your data. For example, you can use tools like UglifyJS or Terser to minify your JavaScript files, and gzip or Brotli to compress them. This can significantly reduce the amount of data that needs to be transferred over the network.
Another way to improve your web performance is to use caching and service workers. Caching means storing some of your files on the browser or the server, so that they don't have to be fetched again when the user revisits your page. Service workers are scripts that run in the background and can intercept and handle network requests, even when the user is offline. You can use caching and service workers to serve your static assets, such as images, fonts, and stylesheets, from the cache, and to provide a fallback or a custom response when the network is unavailable.
Images and fonts are often the largest and most expensive resources on your web page, so it is important to optimize them for performance. You can optimize your images by choosing the right format, size, quality, and compression level for your use case. For example, you can use WebP or AVIF for modern browsers, JPEG or PNG for older browsers, and SVG for scalable graphics. You can also use tools like ImageOptim or Squoosh to reduce the file size of your images without losing quality. Similarly, you can optimize your fonts by choosing web fonts that are compatible with your target browsers, using font subsetting to include only the characters you need, and using font-display to control how fonts are loaded and rendered.
Lazy loading and code splitting are techniques that allow you to defer or delay the loading of some of your resources until they are needed. Lazy loading means loading a resource only when it is in or near the viewport, such as an image that is scrolled into view. Code splitting means breaking up your code into smaller chunks that can be loaded on demand, such as a feature that is activated by a user action. You can implement lazy loading and code splitting using native features like loading="lazy" or Intersection Observer for images, and dynamic import or webpack for code. This can improve your initial loading time and bandwidth by reducing the amount of data that needs to be downloaded upfront.
Easier to achieve just like this; You've the image tag as img mostly in react and next.js or if you are using Image library you can use <Image /> instead, add your source folder with directory, The alt to display Incase the picture failed to load and then the loading set to lazy. Here's a code snippet; <img src="pic.jpg" alt="my picture" loading="lazy"/>
Finally, you need to measure and monitor your web performance to identify and fix any issues or bottleneecs. You can use tools like Lighthouse or PageSpeed Insights to audit your web page and get recommendations for improvement. You can also use tools like Chrome DevTools or WebPageTest to analyze your network activity and performance metrics, such as time to first byte, first contentful paint, or largest contentful paint. You can also use tools like Google Analytics or Firebase Performance Monitoring to track and report your real user performance data over time.
You should also consider "HTML5 Resource Hints" that can help reduce initial page load time by optimize how the resources are fetched from the server. These hints provide the browser with information about the resources that will be needed in the near future, allowing it to start fetching them proactively. Some of the HTML5 resource hints are - Preconnect, Prefetch & Preload. By using these hints strategically, we can optimize loading of resources, reduce latency and enhance overall performance.
In my experience, Critical CSS also plays a crucial role in reducing the initial page load time by delivering only the styles necessary for rendering above-the-fold content. It addresses the concept of render-blocking CSS, which often leads to slower perceived performance due to users having to wait before they can see any visual content. Furthermore, the use of Critical CSS leads to reduced layout shifts, better performance metrics such as LCP/FCP, and an improved perceived performance. It is equally important to note that Critical CSS should be used selectively and thoughtfully. Using too much inline CSS could counter-act the benefits by increasing the size of the HTML.