Website Page Speed and Performance Optimization Techniques

What is Page Speed?

The speed of a web page is the duration of time taken from the point when a user clicks a website link to the point, the page loads and downloads its entire content in the browser window and makes it interactive to the user. The more the time it takes for a page to load, the lesser the page speed and vice versa.

The most impactful CSS in which we can stop the rendering of the elements and reduce the paint and layout shift time.Click to explore about, CSS Content Visibility Property

Why is page speed so important?

Three Important factors:

Google Criteria: Google ranks the website according to the time taken by the website to load. If your website takes longer than 2 seconds to load, it will reduce the website ranking in the search results, directly affecting your website's daily traffic.
User Experience: In today's world, everyone needs information instantly, so if your website does not deliver the result to the end-user instantly, it may give a bad impression.
Conversion rates: The conversion rate is the percentage of the customers a company makes from the users visiting their website. The slower the page speed, the lesser the conversion rate, as almost 40% of the users who newly visited your website will not wait longer than 3 seconds and abandon the search on your website.

Factors affecting the Page Speed and Performance

There are 4 Factors that affect website page speed are listed below:

Javascript and CSS files

JavaScript and CSS are commonly used to add functionality and styling to the web page. However, the positioning of the files on the page can be a cause of the delay in getting the first impression of the website on the user browser. This is generally, CSS and dependency for the whole page are kept in a single file, which is not necessary because the elements which are present above the fold section have to wait till the resources of the elements below the fold get loaded. This can be improved by separating the resources of above-the-fold elements and below-the-fold elements. The javascript and CSS for the above elements can be loaded on priority to give the user the first impression of the page, and the resources below can wait until their files get loaded. Which will significantly help reduce the time of first impression to the users.

A well-executed UX Strategy delivers growth to ideas and directions while maintaining the integrity of the entire CX strategy.span style="font-size: 14pt;">Click to explore about, Customer Experience vs. User Experience

Poor coding Practices

Writing efficient code is not an easy task, and it's one of the main reasons which affect page speed. Due to inefficient coding practice, developers write too many complex functions and logic with higher execution times. They often add too many unnecessary elements, which can be avoided to keep the website light.

Hotlinking

There are numerous images and a single web page, and when we use an url to display an image on our website, we are showing images hosted on another server, which is called hotlinking.

In hotlinking, the site that links to our image could send hundreds and thousands of queries to our server, eventually leading to the slow down of the hosting server and affecting the page speed.

For example, If website A has an image on its website, and website b decides to add the same image on its website. But, website b, instead of downloading the image and then hoisting it on its website, website b directly copies the image link from website A and hosts it on its website. Instead of linking to the image via their domain, such as:

https://websiteB.com/path/to/image.jpg

They would be instead of using the website A'sA'sdomain:

https://websiteA.com/path/to/image.jpg

Server and hosting server

The choice of server and hosting server should always match the website's requirements. For example, a website that contains an extensive database may not run well on shared hosting.

Three factors to consider for choosing the right hosting service for your website:

Server Response Time – Look for independent data on Time to First Byte (TTFB), which measures how long it takes for the server to respond to a request.
Equipment – I prefer Solid State Drives (SSDs) as they are much faster than mechanical drives.
Accounts Per Server – The shared hosting services can overcrowd a server and divide the resources, which can affect the page speed.

Envoy allows DNS, which is easier to remember and any new service instances are added to the DNS dynamically.Click to explore about, Envoy Proxy Working Architecture

How is Website Page Speed measured?

Measure Page Load Times using Google Lighthouse:

Lighthouse is an automated and open-source tool from Google, Which is used to measure the web page's performance, quality, and speed. Lighthouse has multiple matrices on which it measures the web page's performance under various conditions.

Largest Contentful Paint (LCP)

Largest contentful paint, how much time the web page takes to complete rendering its largest content, such as hero image, heading, or a banner on the user browser screen.

First contentful paint

First contentful paint is the first rendered image and text or part of the image or text without custom fonts, which gives the first impression of the web page on the user browser window.

Speed Index

Speed index calculates how quickly the web page's content is visualized on the user's browser window. Speed index calculates the average time in which visible parts of the page are displayed on a user browser.

Time to interactive

Time to interactive calculates the time the web page takes to respond to the user action fully. Time to interact also adds the time from the first contentful paint and first meaningful paint till the time it becomes fully responsive. More of the time taken by FCP and FMP will be the time for the TTI and vice versa.

A designing process which focuses on creating engaging web Interfaces with logical thoughts, behaviors, and actions.Click to explore about, Interaction Design Principles

First Meaningful Paint

The first meaningful paint is the total time to render the first meaningful content of the web page on the user browser window. The first meaningful paint is the web page's content that the user can finally understand.

Cumulative Layout Shift

Cumulative layout shift is the unexpected shift or change in element position during the page load or due to user actions such as scrolling or clicking. The shift can happen due to pop-up ads, font-size or font-style changes, or dynamically injected content. The layout shift can increase the time and reduce the user experience by which a user can get stable content for interaction with the elements of the web page.

The Layout shift score can be calculated with the help of the Impact fraction and distant fraction

Formula: Layout shift score = Impact fraction * distant fraction

Impact fraction: Impact fraction measure measures unstable elements that can impact the viewport area between two frames.
Distant Fraction: The most significant distance that an unstable element has moved either horizontally or vertically in a frame, divided by the frame's most significant dimension(either width or height).

For example, if an unstable element affects 25% of the viewport height, the distance fraction for that element will be 0.25, and the total layout shift score will be 0.75 * 0.25 = 0.1875

Total Blocking Time

Whenever a long task is under execution, such as loading a resource or execution of a script with a higher execution time, during which the main thread remains blocked, which results in a delay of other tasks and affects the usability of the page. Due to the main thread getting blocked, the page becomes unresponsive to the user's actions.

For example, The long task may be executing the javascript or waiting for the server response.

UX is the most important building block in software development. Even its priority is higher than User Interface. Click to explore about, User Experience in Software Product Development

What are the Page Speed Optimization Techniques?

Below are the some of the numerous ways to increase page speed:

Minimize HTTP request

When a customer visits a website, numerous HTTP requests are made by the web page to the server asking for the various resources or files with the help of which it creates its content, and the request can be for images, custom fonts, or a js file. When the requested file is received from the server-side, the content is finally rendered on the screen. More the number of HTTP requests made to the server, the longer the user has to wait to get the results on the screen.

Minify CSS and js files

The CSS and js files make up a large part of a web page. The minification of CSS and js files means eliminating the unused code, blank lines, and spaces and creating shorter variable and function names and logic with minimum execution time. With the help of the minification, we can reduce the time for loading and executing the CSS and js files and rendering the results more quickly on the screen.

Remove Render blocking javascript

Whenever a browser loads a web page, the browser starts loading the script files in the order they occur in the HTML document. The loading of these scripts should be completed before the page is fully loaded on the browser. Hence these scripts become a roadblock in the visual rendering of the page. In more than 90% of the cases, these scripts can be executed after loading the page. The placement of scripts in HTML can prevent these scripts from becoming a roadblock in the rendering process by loading the non-important scripts once the page is fully loaded and placing such scripts at the bottom of the body in the HTML doc.

Use of async and defer

When we load the script with the help of the async tag, the downloading of the script is started in parallel with the other resources, and when the download is ended, the script is executed by blocking the rendering process.

By using defer tag, the script will be downloaded asynchronously in parallel with the HTML parsing, but the execution of the script will only begin until the whole HTML document has been parsed.

Sprites

In a big website where there are several images, and while loading an image, an HTTP request is generated to the server to get the image, the number of these requests can become huge if a request is generated for every image, which can cause heavy traffic or increase the load on the server. With the help of CSS sprites, the number of such images can be reduced by combining them in one single file, with the help of which several images can be loaded with one single request, which can significantly reduce traffic or load from the server and get better results.

Our solutions cater to diverse industries with a focus on serving ever-changing marketing needs.Click here for our Product Design and User Experience Solutions

Conclusion

Page speed can play an important factor affecting the conversion rates for big enterprise online businesses. Making it an essential factor for improvement can be improved with the help of good coding practices, downloading resources more efficiently, and reducing server load.