Understanding the Basics of Web Performance

1 in 2 visitors abandons a website that takes more than 6 seconds to load. A low web performance score will not just cause your site’s de-ranking but also lose your actual money when people leave before it even loads. You cannot expect to achieve brand awareness & credibility or earn revenue with sub-par web performance. 

In this article, we’ll break down what “web performance” as a functional category entails: key metrics, factors influencing it, and effective optimization techniques. Let’s dive in.

What is Web Performance?

In essence, web performance refers to the speed with which a website loads (with all its content), and how fast it responds to user actions. 

It answers the question, “How fast is the website?”

• The faster your site, the better its web performance. Testing website loading speed is critical. 
• High page load speed is a major requirement for a site to be successful in the modern search landscape. 
• Not only do website visitors expect fast load times, but Google also ranks your site based on its speed. 

Key Metrics for Web Performance

1. Page Load Time

This is the average duration for a website to render entirely in your browser. You measure the time from the first click on the link to when the page loads with all its content. 

Factors influencing this metric are:

• Network & Server Time: This depends on how fast the internet is and how quickly static assets show up fully
• Browser Time: This is the time it takes the browser to parse and execute the document to render the page for users.

2. Time to First Byte (TTFB)

TTFB is the time it takes for a user’s browser to get the first byte of the response from the server to which it sends a request. This includes the time required for multiple phases to complete, like DNS lookup, TLS handshake, SSL connection, and Acknowledgement. 

This metric evaluates web server responsiveness. It is measured in milliseconds. 

3. Render Start Time

This measure the time it takes for a browser to render the first element on a website, be it an image, a button, a video, or even a banner.

4. Speed Index 

Speed Index measures how fast your website loads its above-the-fold content. The time required depends on the browser viewport size and reflects the site’s UX by offering a frame-by-frame analysis of the page’s loading progression.

Top 6 Factors Affecting Web Performance

1. Network Latency

Latency is the measure of time that passes between:

1. the moment a user request is made by a website visitor
2. the moment when a response from the server reaches the user’s browser. 

When someone visits a site for the first time, they experience higher latency because the browser and server must establish a DNS lookup, a TCP handshake, and a secure TLS negotiation. Once this connection is established, all subsequent visits to the site will entail lower latency. 

Latency measures the delay within your network connection. Low latency is desirable, as it involves lesser delay. High latency is the opposite and the bane of most internet users’ existence. 

Reducing latency is a mandatory part of all website performance optimization in the modern world. It has to be, to guarantee user satisfaction.

2. Server Response Time

This metric evaluates how long a site loads all the HTML before it can start rendering from the server. But to measure this, you must deduct the network latency between the browser and the server. 

Hence, 

Note that the difference between the two numbers shouldn’t be too large. If it is, then it might indicate some hidden performance issue.

3. File Size and Compression

This one’s obvious. The heavier your files, the longer they take to load – which increases your page load time and exasperates users. Thankfully, tools like TinyPNG let you compress files quite easily, and mostly for free (though there are limits).

You should compress every possible file – images, videos – before adding them to your web page. 

4. JavaScript Execution and Rendering

Since it is a programming language naturally understood by web browsers, JavaScript is widely used to create complex websites with dynamic, interactive elements. Almost every site you’ll ever visit will have JavaScript elements that serve dynamic content like hamburger menus, carousel images, horizontal scrolling, hover effects, audio video on web pages, animations, etc. 

When written, the JS code used to build these elements must be optimized for quick page load speed. Ensure to check Page Speed scores on BrowserStack SpeedLab which is free to use. 

• Track the timing of key events with Navigation Timing API and know the time spent by the browser’s main thread with CPU Processing Stats. 
• Visualize loading with Film strip, and get the entire summary of elements loaded with Page Resource Summary.
• Explore key user-centric metrics like Page Load Time to find the time taken by all elements on the page to render across browsers, FCP to measure the first time any content is loaded, and Speed Index to measure how quickly your page renders visual elements.

5. Image Optimization

Image files are among the heaviest on a web page, second to only video, animation, and maybe some audio. Therefore, images need to be optimized so that loading them does not slow the site load speed to unacceptable levels. 

Examples of image optimization for web performance are reducing image size via compression tools, choosing the right file format, negotiating lossy vs. lossless optimization, resizing images to scale, etc. 

Techniques for Improving Web Performance

1. Minification and Compression

As mentioned above,  a website’s JavaScript code must be optimized for high page load speeds. This also applies to CSS files. Both codebases must be “minified” by removing or reducing symbols that clutter it up –  irrelevant lines of code, spaces, commas, etc.

This code isn’t exactly human-readable, but it’s meant for browsers to load pages faster. 

This minification process has to be a staple of modern website development – devs minify JS and CSS files and then combine them into single bundles. 

There’s also compression, which we’ve discussed above. All files (image, video, audio, animation) that can be compressed should be compressed. However, devs should be mindful of the fact that image compression does not lead to a significant loss of image quality. 

2. Browser Caching and CDN (Content Delivery Network)

CDNs or Content Distribution Networks are also instrumental in web speed optimization. These are geographically distributed server clusters used to host sites on servers closer to the major audience locations for those sites.

CDNs deliver all assets for page loading, without requiring the data to travel huge distances to reach their destination. For example, if a US-hosted site has many visitors from Japan, its Japanese audience will deal with slow page loading if the data is traveling directly from the US. However, if a version of the site is hosted close to Japan using a CDN, the site loads faster because the data doesn’t have to travel as far. 

Caching allows browsers to store data from recently visited websites, data like images, stylesheets, JavaScript, etc. This speeds up page load time since the browser doesn’t need to load the entire page every time a user returns to a site. 

3. Lazy Loading of Images and Media

Lazy loading is when a webpage delays loading resources/objects until they are needed. This goes a long way in saving system resources. 

Here’s an example: let’s say a site has an image on its second fold. The image will not load with lazy loading until the user scrolls to the second fold.

Lazy loading reduces initial load time by reducing the weight of a site when it’s loading. This also leads to bandwidth and system resource conservation. 

Mobile Web Performance Considerations 

1. Responsive Design and Adaptive Layouts

Responsive Design and adaptive layouts ensure that website content adjusts itself to match the screen size & resolution of different user-end devices. Therefore, even if someone is browsing your site on an iPhone or Android device, the site content looks as flawless as desktop screens. 

Responsive design is an ABSOLUTE necessity for web performance. You site needs to be optimized for different device screen sizes. Additionally, Google looks at “mobile-friendliness” as a ranking parameter, a major element of responsive design. 

If you’re curious about responsive design, here are a few must-read resources:

• A Beginner’s Guide to Mobile Responsive Design
• How to create a Responsive Website
• Breakpoints for Responsive Web Design in 2023
• What kind of Testing is Important in Responsive Design?

Additionally, if you’ve already built responsive design into your website code, you should be testing it on BrowserStack’s FREE responsive design checker.

2. Mobile Network Constraints

Not all network connections are built the same. Your website has to load and render flawlessly in 2G connection and 3G, 4G, 5G, and even EDGE networks. Optimizing your site for different network connections and restraints is key to its success. Naturally, it is an essential factor in web speed optimization. 

Testing your website in constrained conditions is also a challenge unless you have a network throttling tool, such as the one provided by BrowserStack. Simply check your website on the latest iOS and Android devices in different network conditions. 

Try Live Testing

3. Optimizing for Mobile Browsers

Like different connections, your site must also look and work perfectly on different mobile browsers, including different versions of the same browsers. So, you’ll have to optimize and test the site in different mobile browsers running on different devices with different mobile OSes. 

Sounds like a tall order? Not if you have a BrowserStack account. You can test websites on thousands of the latest mobile devices by different manufacturers, running all major browsers and OSes…without downloading anything. 

4. AMP (Accelerated Mobile Pages)

Accelerated Mobile Pages or AMPs refer to an open-source project by Google built with the intent of helping sites load & run faster on mobile devices. With AMP, only the most important parts of a page are loaded, and a cached version of each page is stored on Google servers. Combine both these implementations, and you get websites that deliver content almost immediately. 

AMPs remove heavy elements like videos, ads, and animations and serve only the most useful content. This is ideal for mobile users, who’ll be getting sites that load in a couple of seconds. 

FAQs

1. How can you measure web performance?

Essentially, web performance refers to the speed with which a website loads. An easy way to check this speed is to use BrowserStack’s FREE tool, SpeedLab.

Simply enter your website URL, this tool with test website speed across multiple browsers and devices. It is meant to identify browser or device-specific issues instantly. Each test runs on a meticulously curated combination of browser engines, high-end and low-end devices to give you comprehensive market coverage — and insights into actual end-user experiences. 

The final report contains a cumulative score of your website’s speed across multiple desktop and mobile devices along with insights and recommendations

2. What affects website performance?

Factors affecting website performance are:

• Network Latency
• Server Response Time
• File Size and Compression
• JavaScript Execution and Rendering
• Image Optimization