9 Best Practices for Optimizing Frontend Performance
Reduce frontend data loading times with these simple tips
You have 50 milliseconds to make a first good impression on your potential visitors. So yes, it takes only 50 milliseconds for users to form an opinion about your website to decide whether they’ll stay or leave.
Most of the websites fail to deliver a satisfactory user experience due to poorly optimized frontends. And, most often, it’s due to suboptimal data loading and image optimizations.
So, in this article, I will discuss nine best practices that will be useful to optimize the frontend data loading.
1. Minify Resources
Minification of resources refers to the process of removing unnecessary, redundant data from your HTML, CSS, and JavaScript that are not required to load. This includes eliminating code comments and formatting, white space characters, unused codes, newline characters, and so on.
Minification of HTML, CSS, and JavaScript will speeds up the frontend load times as it reduces the amount of code that needs to be requested from the server.
Check out the following tools to generate an optimized version of your HTML, CSS, and JavaScript codes.
- HTML: PageSpeed Insights, HTML Minifier.
- CSS: cssmin.js, Coverage tool in Chrome Dev Tools, YUI Compressor.
- JavaScript: JSMin, Coverage tool in Chrome Dev Tools.
2. Reduce the Number of Server Calls
In general more calls your frontend makes to the server, the more time it gets to load. This is because sending any request to the server requires full communication before the page can be rendered. You can follow multiple ways to reduce the number of server requests necessary for the page to load.
- Use CSS Sprites — This is one of the easiest ways to reduce the number of server calls. Instead of loading ten individual images to the site, sprite loads one single image file combined using a collection of images. You can use
background-imageandbackground-positionproperties in CSS to display the desired image segment. By doing this, you’re reducing the number of server requests required. - Reduce third-party plugins that make a large number of external requests.
- Prevent broken links to files that don’t exist.
In addition, you can also look at server-side rendering to speed up the initial load of the application.
If the minimum data is also there with the first-page load, it will make a real difference for perceived performance.
3. Remove Unnecessary Custom Fonts
Custom fonts have become very popular as it helps to add personalization to the website. However, they also come at a performance cost.
Custom fonts could be quite large-size in size, and web fonts such as Google fonts add HTTP requests to external resources. This hurts the speed of page rendering.
Following are some of the actions you can take when using fonts in your website:
- Convert fonts to the most efficient format: Loading a modern format like WOFF2 can achieve a ~30% reduction in file size over other formats.
- Subset fonts to remove unused characters: Comprehensive font files contain characters for many languages that may never use. By subsetting fonts, we can remove unwanted characters from the font and only keep what we need to write content on the site.
- Preload fonts that are explicitly required by the page.
Using a couple of custom fonts may not cause harm, but using them in excess can have a considerable effect on your frontend’s loading time. Therefore, make sure that you constantly reevaluate the impact and the need for custom fonts you’re using.
4. Compress Files
The amount of bandwidth limits the amount of data delivered in a given time. The larger the file size, the longer it takes to load. Modern websites often have large HTML, CSS, and JavaScript bundles.
By compressing the files using a suitable method, you can easily make a big difference in your frontend’s load time. Following are two good options you can follow for file compression:
- Gzip — The most popular data compression and decompression method, which is currently supported by all the modern browsers. Gzip compresses the site’s HTML, CSS, and JavaScript bundles at the server-side before sending them over to the browser, and on the client-side, it unzips the files and delivers the content.
- Brotli — This offers the best compression ratios compared to the compression methods currently available. According to research by CertSimple, Brotli compresses JavaScript files 14% smaller than Gzip, while HTML and CSS compression rates are 21% and 17% better than Gzip.
5. Optimize the Images
When it comes to websites, images are a vital part. 93.7% of websites on the internet use at least one image file format because they help improve user engagement.
However, the negative side of using images is that it adversely affects the front-end loading time unless they are optimized. However, there are several ways in which you can optimize images:
Use WebP or AVIF
Using new image formats like WebP and AVIF gives a better performance than older formats like JPEG and PNG.
WebP is 26% smaller compared to PNG and 25–35% smaller compared to JPEG. AVIF is 50% smaller compared to JPEG and 20% smaller compared to WebP.
However, the downside is with the browser support. WebP gained browser support recently, so older versions might not support it. On the other hand, AVIF is only supported in Chrome and Opera. Therefore you need to use the format in native HTML with the <picture> element with fallback support.
Serve images of correct dimensions.
Another way to reduce the image delivery time and boost a website’s performance is using responsive images. More than 50% of traffic is coming from smartphones and tablets. Scaling the image to popular device dimensions and serving them using a srcset would further optimize the frontend loading time.
Apart from choosing the suitable format and dimensions, there are several other ways that you can follow to reduce the frontend loading time through image optimization. Following are some additional best practices you can use:
- Image compression.
- Using progressive JPEGs.
- Serve smaller images to users on slow connections.
- Using HTTP/2 instead of HTTP/1.1.
- Using image-sets.
6. Apply Lazy Loading
Lazy loading helps to improve frontend loading times further. With lazy loading, the web page loads only the required content first and loads the remaining content when the user needs it.
For example, in Google image results, only a small set of images is loaded first. It loads placeholder images for the hidden content instead of the actual ones reducing the loading time. The actual content will be rendered if the user scrolls down through the page.
Apart from lazy placeholder loading, there are several other options like “Native Lazy Loading” and “Blurred Image Effect,” which you can choose from.
7. Caching
Each time there is a unique visit, everything from the HTML to CSS to JavaScript needs to be downloaded individually. This leads to slower data loading times.
The best way to prevent this issue is to use the caching options. If appropriately configured, browsers will store the files in their local cache and avoid loading the same assets for subsequent page visits from the server.
Apart from the browser cache, few other caching options are available to improve the loading time.
- Cache server — User request is sent to the nearest cache server from a collection of cache servers. (e.g.: Content Delivery Networks. Will talk more about it in Point 9)
- Memory cache — By storing certain parts of data in memory (e.g.: JavaScript variables) without reloading them for route changes.
- Disc cache — Similar to memory cache, except it makes use of conventional file storage typically handled by the browser.
8. Enable Prefetching
Resource prefetching is another performance-enhancing technique you can use to optimize the frontend data loading.
As developers, you know your application better than the browser does. So Prefetching uses this information to hint the browser about the resources it might require in the future.
Prefetching loads the resource in anticipation of their need to reduce the waiting time of the resource. There are mainly three types of prefetching. While link prefetching being the most popular and widely used method, DNS prefetching and prerendering are also helpful options.
Link Prefetching
Link prefetching enables a browser to gather the resources that a user is likely to request in the nearest future. Thus, developers can assume where users are likely to visit a specific webpage.
However, link prefetching only works with cacheable resources like images and JavaScript.
DNS Prefetching
Whenever a user requests an asset hosted in a specific IP address, a DNS lookup is performed to find the domain name that the IP address belongs to.
DNS prefetching allows the browser to performs the DNS lookup for links in the webpage in the background while the user browsers the current page to minimize the latency when a user clicks on a link with DNS prefetch enabled.
9. Use a Content Delivery Network
When the user is far from the server geographically, latency increases. Moreover, request load could also impact the content serving time.
The loading speed of frontend content, including HTML pages, stylesheets, JavaScript files, and images, can be optimized using a CDN. A content delivery network (CDN) is a group of servers distributed across several geographical locations that store a cached version of the content to deliver fast to the end-user.
CDN redirects user requests to the nearest server.
There’s also a specific type of CDN called image CDN that is excellent at optimizing your images. With these, you can yield a 40–80% savings in image file size. Given that images usually take up more than half of page weight, integrating a CDN for images can give you a significant boost in loading speed.
Conclusion
Performance Golden Rule: 80–90% of the end-user response time is spent on downloading frontend components such as images, stylesheets, scripts, etc.
Therefore, optimizing the frontend data loading is critical to reducing bounce rates and increasing visitors’ time on the site. In this article, I’ve discussed some best practices I’m using for better frontend data loading. Let me know what you’re using in the comment section.
Thank you for reading!!
Build better Component Libs and Design Systems
Share components across teams and projects to speed up development and make sure your users experience a consistent design at every touchpoint.
OSS Tools like Bit offer a great dev experience for building, sharing, and adopting components across teams and applications. Create a component hub for free give it a try →
