As soon as you have opened this blog, we have just 15 seconds to grab your attention. Yes, yes, 15 seconds is the average time a user spends on a website. If it doesn’t provide expected content or goes clunky, business owners must be ready to say “au revoir” to their potential customers.
Millions of different websites are browsed every day, and half of them users close in a few seconds without giving them a possibility to impress, share the content, or sell the goods they advertise. Why does it happen so? A big percentage of websites are sluggish, not user-unfriendly, and browser-incompatible. Modern users are unlikely to spend their time on slow loading pages or poorly optimized websites. In the context of web services, such problems relate to poor front-end optimization. The goal of front-end performance is to give users an ability to get what they want from a website or an application at a very limited time and ensure that they have a smooth experience while interacting with it.
This blog reveals 8 front-end performance optimization tips that will definitely be useful to drastically improve front-end performance and enhance website speed to make sure the users won’t cut short their visit.
#1 Compress the files
Every website is made up of HTML, JS and CSS code files. The more complex the page is, the longer the loading time you should expect. To improve site responsiveness, these large code files should be compressed to their original size. These are good options for file compression:
- Brotli. Introduced by Google in 2015, Brotli has a compression ratio comparable to the best currently available general-purpose compression methods. Brotli compresses JavaScript documents 14 % smaller in comparison with Gzip, while CSS and HTML compression values are 21 % and 17 times higher than Gzip, as per CertSimple study.
- Gzip. Gzip is another popular data compression and decompression program. If you doubt which of the two to choose, it’s possible to estimate the compression level using Brotli or Gzip.
#2 Use responsive images and WebP
Images take up approximately 51% of the average web page size which can make websites heavy and slow. Smartphones and tablets now account for more than half of all web traffic. To reduce the image delivery time on scaling screens and boost the performance of a website, we recommend using responsive images. Responsive image techniques namely "srcset", "sizes", and "picture" elements allow the delivery of different scaled images based on the size and resolution of the accessing device.
WebP formatted images are approximately up to 30% smaller than JPEG and 25% smaller than PNG formatted images. When compared to JPEG, AVIF is 50% shorter and 20% tinier when contrasted to WebP. Simply put, just converting the image into WebP format can significantly decrease the size of the web page. Just bear in mind that WebP format is not supported by Safari and iOS Safari. You can use such online tools as Squoosh and Online-Convert.com or command-line tools to convert JPGs, PNGs, and other file formats into WebP.
#3 Choose a CDN
CDNs were designed to solve the problems that appear with network latency (delays in communication over a network). Such delays happen because of a range of reasons specific for a particular web page and one common for all pages which is the physical distance between a user and the website’s hosting server. To reduce this distance a CDN stores a version of the content in different geographical locations.
In simple words, a CDN brings the user closer to resources by handling the performance middle mile. The number of trips that the server makes is significantly shortened therefore the loading process becomes faster.
Users' requests are sent to the nearest server via the CDN. There is a form of CDN known as an image CDN that really is great for optimizing your photos. You may save 40–80 % on image file space by using them. Considering that photos often account for more than half of a page's size, including a CDN for images may significantly improve page load time.
#4 Enable prefetching
Prefetching enables a browser to store the information that a user might access in the nearest future. Prefetching uploads the material advance to shorten the resource's time delay. Once the time has come and a user clicks on some link that has been already stored in the browser's cache, the necessary information immediately appears on their screen. There are three main types of prefetching:
- Link prefetching enables a browser to gather the resources that a user is likely to request in the nearest future. As a result, developers may predict wherever consumers are most likely to visit a given page. Link prefetching, on the other hand, is limited to cacheable elements like pictures and JavaScript.
- DNS prefetching converts IP addresses into readable website URLs while a user browses a particular page. When a user clicks on a link with a DNS prefetch set, it significantly reduces latency.
- Prerendering is quite similar to prefetching. It also collects the information that a user might access. The main difference between them is that prerendering renders the entire page and as soon as a user navigates to it, the current tab will be replaced with a hidden pre-rendered page.
#5 Remove unused CSS and JS
The practice of eliminating unneeded, redundancy of data from the CSS, HTML, and JavaScript which is not necessary to download is known as resource minification. While loading or running a page, the coverage table in Google Chrome shows how much code was loaded and how much of it was actually used. The size of the pages can be reduced by only shipping the needed code. The process is the following: first, you load a page on Google Chrome, then use a coverage tool (in Dev Tools press Ctrl+Shift+P, type “Coverage”, press Drawer: Coverage). As soon as the page is reloaded, you can see how much-unused code is there so you can find those modules and lazy load with import (). Then go to the coverage profile once again and confirm that it carries less code on the initial load.
Minification decreases the amount of code that needs to be fetched from the server, which accelerates frontend loading speed. To produce a process highly of you JavaScripts, HTML, CSS, scripts, use the facilities below.
- JavaScript: Coverage tool in Chrome Dev Tools, JSMin
- CSS: cssmin.js, Chrome Dev Tools' Coverage tool, and YUI Compressor.
HTML: HTML Minifier, PageSpeed Insights.
#6 Increase the speed with caching
Caching stores a copy of the asset that a user has requested and later accesses the cached copy instead of the original copy. There are different types of caching that help to improve delivery speed:
- Browser cache. Files are stored in browser local cache so when one wants to access them, there is no need to download them from a server;
- Cache server. Cache servers are located in different geographic regions so that the user’s requests don’t have to travel far.
- Memory cache. Memory cache helps to speed up the data delivery process within an application by storing certain parts of data in SRAM.
Disc cache. Like a memory cache, disc cache stores data for it to be accessed faster within an application though it makes use of conventional RAM.
#7 Optimize the images
Every front-end developer knows how weighty images can appear to be. And it’s not just about the picture itself. The JPEG files contain a lot of additional information about locations, dates, and even settings such as exposure and shutter speed. High-resolution images become a big threat to fast page loading and considerably slow down the rendering process. For a website not to become a victim of images-killers, the JPEGs must be turned into progressive and compressed. The possible options for images optimizations are:
- Optimus. Optimus aims at a lightly lossy compression of JPEG images and lossless compression of PNG images. The file size is reduced by removing the additional data from the image though the image quality is not changed. There are three subscription options: Optimus (free), Optimus HQ (29$ a year), Optimus HQ Pro (149$ a year).
- MozJPEG. Mozilla JPEG Encoder Project can be applied to resize and compress JPEG and PNG images without a file size limit. The service is 100% free.
- Guetzli. Guetzli is a freely licensed JPEG encoder developed by Google. The compressor is especially useful to cope with such drawbacks of JPEG format as solid colors and sharp edges.
It is also possible to minimize the frontend page load time by optimizing images in a variety of methods, in addition to selecting the appropriate format and size. You can apply different extra methodologies:
- Rather than HTTP/1.1, HTTP/2 is used.
- Compression of images.
- Employing image sets is a great way to save time.
- Those with sluggish networks are sent reduced pictures.
- Using JPEGs that are dynamic.
#8 Optimize the videos
Same as for images, videos should be optimized for the web. Instead of using heavy animated GIFs and slow videos that have a negative impact on the performance of the website, think about opting for an animated WebP or replace them with an HTML5 video tag. Though browsers can’t preload videos as they do with images, HTML5 format is lighter and gives you better control of your website’s video player. The format allows uploading a video in the original format and gives a lot of possibilities in the matters of geolocation capabilities of devices. HTML5 video tag works only with a few file formats. Some popular online HTML5 video encoders are HTML5 Video Converter, Handbrake, Converter Point, and Freemake Video Converter.
In 2018 a new video format AV1 was released which is completely free and gains more and more popularity among the developers.
P.S. Don’t forget about a CDN, especially if your website is video-heavy so the users won’t wait for minutes to watch a two-minute video.
Wrapping up
Making the first step is always challenging. But the future belongs to those who are not afraid to innovate and redefine already existing approaches. Sole implementation of those web performance optimization techniques guarantees your website fast loading and a great user experience. Just make sure you keep things small, smart, and smooth. And remember: you have just 15 seconds!
In case you aren’t a developer yourself and the tips sound good though you’re curious what buttons to press, please, feel free to contact inVerita. Front-end optimization is our bread and butter, backend, by the way, too.
