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.
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.
Images take up approximately 51% of the average web page size which can make websites heavy and slow. To reduce the image delivery time 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. 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.
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.
Prefetching enables a browser to store the information that a user might access in the nearest future. 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.
DNS prefetching converts IP addresses into readable website URLs while a user browses a particular page.
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.
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 initial load.
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.
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.
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 (MP4, OGG, and WebM). 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.
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.