• /

Techniques of Front-end Performance Optimization

March 31, 2021
Estimated reading time: 8 minutes
1..2..3… and then they leave and never come back. If the pages of your site are loading for more than 3 seconds, users will start to leave before it is fully loaded. The number of users leaving the page grows every second of that loading time. That means that something needs to be done to prevent such a thing from happening.

There is a way out of this situation and its name is front-end performance optimization. It has a positive effect on customer perception towards the site. And that will increase conversion rates and ultimately affect the success of your project. Poorly optimized websites take a lot of time to load, data heavy and can require high network bandwidth which makes them non-mobile ready.

According to one of the latest Google updates, there is a whole set of factors which Google takes into account when evaluating user interaction with the site. The set of factors named as Core Web Vitals includes Largest Contentful Paint (LCP), First Input Delay (FID) and Cumulative Layout Shift (CLS).

Core Web Vitals will become the basis of the new metric and will have the biggest impact on page quality scores. They will also affect the position of the site in Google search results. Using all of the front-end performance optimization techniques from our post below should help you improve your website's score on all these metrics and make your website any users best friend.

What are Core Web Vitals?

New metrics got the name of Core Web Vitals. They will take effect from May 2021 and will play a key role in the ranking of a website in search engines. Core Web Vitals is an umbrella term for new quality factors of the resource.
LCP — Largest Contentful Paint
determines how quickly the largest and the most important content on the site loads
FID — First Input Delay
determines how quickly a user can start interacting with the site (click, scroll, etc.)
CLS — Cumulative Layout Shift
determines how much the layout is shifted and if it's stable or not
Along with these new metrics Google provides a variety of tools that can help you to start improving UX for your website. These services include Search Console's report, PageSpeed Insights and Lighthouse.

We offer you a closer look at some of the most problematic areas that affect the site's score for these key metrics.

Better Caching for Increasing Speed

When we talk about the very first step to improve your website's front-end performance, we always start with caching. Treat caching as a basis for the optimization process as it can keep websites fast and scalable.

Once a user loads your website for the first time, their browser requests data from the server. Then users have to wait for the server to return the requested data before they can view your content. It may take a lot of time, but caching will help you save it.

Web cache is a website data that a user's computer stores temporarily for quicker access. By creating such a static copy of your website's content, cache allows users to browse through pages of the website without the need to download the same files repeatedly. It also reduces the number of requests to the server. Which in turn helps said server handle more users.
We recommend working on the browser cache. It is client-side caching. The browser itself can control the cache, refresh the content and delete unclaimed one. It is built into the user's web browser. Browser cache can store website elements which consist of HTML pages, CSS stylesheets, JS scripts, and multimedia content.

However, this type of caching works only for those users who visit the site at least for a second time. Therefore, we recommend that you pay attention to other optimization options, which we will discuss below.

Increase page speed with a CDN

All those types of caching are a great option, but they have their limits for scaling websites for a broader audience. If you cater to a global audience you'll need something more than that. That's when CDN comes to the scene.

CDN or Content Delivery Network is one of the server caching types and a good option to choose as one of the best front-end optimization techniques. It can also combat physical distance between users and a website's hosting server as it allows users to send requests to the nearest server to them and reduces network latency problems.

CDN caches data on a globally distributed network of servers in different geographical locations. So that a user from the US won't have to wait for a European server to process the request as it will be sent straight to the US server. Such systems speed up the process of uploading content on the site.

CDN is great for storing static content that does not change often such as different kinds of multimedia files or JavaScript files.

Optimize Images

Images are a key feature for many sites. Without them we would be looking at plain lines of text. But large high-resolution images can really slow down the loading process making websites heavy and slow. Optimizing images can become a crucial point for front-end web performance improvement.

There are several different options for image optimizations. We recommend trying some of them to boost the website performance.

Standard image formats contain a lot of additional information that increase their initial size. They are not used in any way on the website but can seriously increase the loading time for your users. That's why you should consider compressing such images with external tools like MozJPEG or Guetzli. Or you can simply turn those images into WebP files.

WebP images are 25 – 35% smaller than typical images like JPEG and PNG. Simply switching all images to WebP can decrease the size of the web page making it faster to load which is exactly what we want for that front-end optimization. This format is supported in all frequently used browsers so you don't have to worry about your images not showing up to users.

You can use Squoosh to get smaller images. This tool is made by the Google team. Squoosh supports a bunch of formats and fine-tuning for each of them. Besides, it is also available as a CLI application for easy integration into the automation pipeline.

Although we have to warn you that WebP has its downside too. This format doesn't support progressive rendering so it might take some time for users to finally see the image.
You may also pay attention to lazy loading images. This will allow to postpone the loading of content until the moment those images are in the viewport. For example, when the page is initially loaded, all the images on it will be loaded during the scrolling process. This will shorten the length of critical rendering steps, resulting in faster page load times.

Use Responsive Images

Images often take almost half of the page size. It is especially so for the media-heavy sites. That's why we recommend turning your eyes to responsive images. They allow you to optimize websites performance by reducing time needed for image delivery.

Responsive images provide appropriately scaled images depending on the user's screen resolution. They change depending on display resolution on which they are viewed and allow you to always keep what you need in focus.

Responsive Image Breakpoints Generator can make your life easier as it produces all the required versions of the images and the HTML code to insert them.
It is also worth remembering that until the picture is loaded, you need a placeholder of the correct size. Otherwise, it will affect the stability of the layout (CLS).

Optimize Videos

When you're done optimizing images for a better front-end performance think about optimizing videos too. Switch from heavily animated GIFs that can take years to fully load and videos that slow down your website's loading time to a format that is perfect for the general front-end performance.

There are several ways to make it easier for users to view your site even if it consists of a lot of media files. Here are some of the options to consider when you're optimizing:
Try using data compression tools that won't ruin video quality. Smaller files take less time to load. But don't compress them to the point where they look like animated GIFs. Try switching the format instead.
Opt for looping HTML5 videos. These tend to be much lighter and smaller than GIFs and average videos. And HTML5 gives you better control of the videoplayer. There are several formats to choose from as well. MP4 and WebM are perfect for the web. Both of them pack high quality videos into small file sizes. You can also go with AV1. This one is relatively new on the market but it gains more and more attention among the community. It provides good compression (twice as good as WebM) and does it for free.
Specify the size. If you are placing a video file in the background, it is advisable to use the minimum size with acceptable quality. We recommend compressing videos up to 720p at 25fps. In this case, you need to specify both vertical and horizontal dimensions of the video in HTML or CSS. In this case, the browser will be able to determine the bandwidth on its own. And that will speed up the page load.
Do not autoplay videos. Simply defer videos from playing automatically and make it load after the initial page load is complete. You can also display a short loop or the very first frame of the video as a still image until full video is fully buffered.
Have an amazing idea?
Just drop us a line
We will be happy to develop that idea into something special!

Find and Clean Out Unused Scripts and Code

When we talk about a website, another word immediately comes to mind. It is code. Code and its cleanliness is another thing that we have to keep in mind for front-end web optimization.

Google Chrome allows you to view which code has been loaded and used, and which has remained unprocessed. The page size can be reduced by placing only the code that will actually be used for the initial load. You can use Coverage tool in Google Chrome to find unused code and lazy load it.

In addition, you can use a bundler to simplify the optimization process. It helps developers compile and organize all the project's resources. Bundle helps developers to divide the project into modules for better-organized work processes.

One of the most powerful bundlers is Webpack. We use it in all of our projects. We bundle all of our projects with the included optimization for JS and CSS before deploying it to the customer. We do this to keep the file size smaller and the website loading speed faster.

That the larger your application gets, the larger the bundle will be. This can happen if you include large third-party libraries. To keep track of the code and not miss the moment when the application becomes too large to load, you need to prevent the bundle from growing big in time.

You can use code-splitting to do this. Webpack allows you to create multiple bundles and download them as needed. Even if you do not reduce the total amount of your application code, you will at least avoid downloading code that the user may never need. You will also lessen the amount of code required for the first load.

Finally, minification (also known as minimization) can improve web performance as well. It can reduce file-size by removing comments and unnecessary white-spaces without changing the functionality of the code. Some minifiers can even shorten variable names.

Minification affects website loading time as smaller file-sized scripts load much faster. It is parsed faster too because there are no comments or white-spaces to ignore and less text takes up less memory.

Final Thoughts

There are actually many more ways to optimize your site. We have listed only some of the front-end performance best practices that could be used for websites of different sorts. In case you are not a developer, but you still want to know how to optimize front-end performance of your website, just drop us a line. We specialize in front-end and can help you understand the abundance of optimization options and make your site available to a larger number of users.

We aim to optimize everything in our projects to make them easily delivered and implemented by the client. We took into account only the best data optimization practices for our projects like Tasket. The users of this SaaS platform needed an easy way to integrate a large number of services with tasks into one working application. We did our best to optimize front-end performance in order to make all of the pages load quickly.

We have also worked on creating the Norwegian E-commerce web-service. For the constructor to work well for everyone, we needed clean and understandable code without unnecessary elements that could slow down the site. That's where project optimization using bundler came to the rescue.

These are just a few of our projects that have gone through the front-end optimization process. Our team understands the importance of this point in the process of creating a website that works. Get in touch with us to make your website optimized for different platforms.
Building custom software or have existing one?

Aspirity is a NodeJs + ReactJs development agency from Siberia. We specialize in management, admin and dashboard software.

If you have a custom software project — contact us for a confidential consultation or just read more from our blog.

If the article seemed interesting to you, share it with your friends
Be the first who knows our news!
Once a month you will learn about our latest features and hottest news. And no spam of course.

Want to know more? Read our other articles