Web Performance: Why You Should Care

Alesia Prytulenets

Oct 01, 2021 • 5 min

I'm a content specialist at Fively keen on writing fresh articles that can help out business and tech specialists. I love to conduct research, hold interviews, and spotlight sophisticated tech issues.

We sorted out the most important benchmarks of website performance quality and collected 14 front-end optimisation techniques to make it better.

Cloud infrastructure and platforms, modern programming languages and smart architecture designs - all these things are superb, but worth nothing if your website performance is slow. If you make users wait for 3 seconds to browse your page, they won't do it for the second time, but rather search for a better experience at your competitor. In our short review we sorted out the most important benchmarks of your website performance quality and collected 14 front-end optimisation techniques to make it better.

What Metrics to Benchmark

There are numerous tools to check web performance. The most simple and popular way is to run Chrome Development Tool by pressing F12 key, where you should choose the “Performance” tab and press the button “Record”. The tool will show you the overall website speed, elements that slow down performance and bulky pieces of code, while the “Networking” tab can even highlight problems with the server and hosting. If you get a speed test result that is higher than 3 seconds, then it indicates slow web performance.

But for a more sophisticated website performance test you should use special tools like Chrome User Experience Report, Lighthouse, Sematext Synthetics, Website Speed Test, etc., which indicate different web performance benchmarks. According to Google, there are three most important website performance benchmarks:

• Largest Contentful Paint: measures the time a website takes to show the user the largest content on the screen;
• First Input Delay: shows the time from when a user first interacts with your site;
• Cumulative Layout Shift: quantifies the impact of layout shifts on your site.

There also some other important web performance metrics we recommend you to benchmark:

• TTFB: time to first byte, tells you how fast your server responds with the first package;
• Page size: the total size of all CSS, javascript, images, HTML;
• Number of requests: total number of requests to load all the elements;
• First Contentful Paint: the moment when your hero section is fully loaded;
• TTI: time to interactive, that is the moment the site can respond to user input;
• Page speed and load time: the moment when every resource is fully loaded and can respond to user input.

With the help of these benchmarks you can not only evaluate the quality and speed of your web performance, but also highlight the hidden pain points and see the page with the users’ eyes.

Reasons of Slow Performance

Before we list the ways to improve the web performance, let’s look at the factors that slow it down:

• Heavy CSS and JavaScript use - when more pieces of code are loaded than are actually used on the page;
• Poor server/hosting plan - sometimes the chosen hosting plan is too small for the needs of the website;
• Large image sizes and absence of browser cache - not using pictures compression and browser caching;
• Too many widgets and plugins - bulky designed websites cause difficulties to its proper work;
• Hotlinking resources from slow servers - use of side resources with slow website performance.

Start web optimization with elimination or at least decreasing of the above mentioned mistakes and you will already get better performance test results.

Frontend Tips to Fix Website Performance

Here we collected 14 web performance optimization strategies that will help to speed up your page in no time:

• Compress and minify your code files: use Gzip and Brotli to compress heavy HTML, JS and CSS code files, plus Webpack to minify them;
• Remove unused CSS and JS: reduce the pages size by only shipping the needed code using the coverage tool in Chrome Development Tool;
• Load JS asynchronously: setting the async flag on the <script> tag will let the browser load the script asynchronously, parsing the page while the script is loaded;
• Reduce the number of HTTP requests: each request need time to perform, so eliminate the unnecessary ones and optimize what’s left by compressing;
• Switch to HTTP/2: switch your website from HTTP/1.1 to HTTP/2 protocol, which can send multiple files simultaneously, cutting the number of requests;
• Reduce the number of plugins: leave only those that are actually needed;
• Optimize images and videos sizes: use tools like Optimus, MozJPEG and Guetzli for pictures compressing, and HTML5 or AV1 format for video optimization;
• Use responsive image techniques and WebP: with the help of srcset, sizes, and <picture> elements you can deliver differently scaled images based on the size and resolution of the accessing device, and simply converting the image into WebP format makes it up to 30% smaller than a JPEG one;
• Use website caching: store a copy of the asset that a user has requested and later accesses the cached copy instead of the original one, reducing bandwidth consumption, latency, and the workload of the server;
• Use prefetch, preconnect, and prerender techniques: tell the browser that a certain domain name will need to be resolved to an IP address before the browser actually sees resources from it. The same method is used in preconnect and prerender techniques;
• Choose a content delivery network (CDN): it allows to reduce the physical distance between a user and the website’s hosting server using a version of the content in different geographical locations;
• Write mobile version of the page: optimizing the desktop website for mobile can be a painful process which slows down performance on these devices, so try to write for mobile first or simply write a lighter mobile version of your page;
• Minimize time to first byte: concentrate on reducing the server processing time by optimizing its hardware, logic and the way its queries databases;
• Set the right hosting plan: shared hosting is the cheapest and slowest one, virtual private server uses multiple machines for one user, dedicated is the most expensive as you rent the entire customizable machine, and serverless is when you don’t need a server at all. Switch the hosting plan depending on your needs.

Using these FE techniques as well as eliminating the slowing down factors can greatly speed up your web performance and take user experience to the next level. We hope that you enjoyed this article, and if you want to find out more about web performance optimization strategies, feel free to contact us here.

Custom Web App Development | Fively

We provide bespoke web application development services for various domains to help streamline our customers’ business and automate their day-to-day workflow.

5ly.coServices Account