A website’s page load time plays an important role in customer acquisition. Google states that if your website takes more than 3 seconds to load, over half of the visitors will leave it. Eventually, it leads to conversion and profits. Although there are online tools available to check your website loading time and performance (Lighthouse, for instance), it’s important to understand what affects your website’s page load time. You can then optimize your web page accordingly.

8 Factors that affect the page load time

#1 Web hosting

Today, no one would like to wait for a website to spin and load at its speed. Websites that load quickly perform more in user engagement, conversion rates, and user experience. Hence, it is very important to have a high-availability web hosting plans.

#2 Size of files

The page speed always depends on the size of the assets loaded on the browser. It is, therefore, good to have an optimum number of assets with the least possible file size. This will require lesser bandwidth.

#3 Number of HTTP requests

Greater the number of HTTP requests from a browser to server/server to server, the higher will be the bandwidth consumption. Therefore, keep the number of HTTP requests to the minimum possible.

#4 Absence of CDN

Using CDN will boost the performance of the web site. The absence of it will affect the load time. CDN is a content delivery/distribution network. It is a network of proxy servers and their data centres distributed across the globe to increase the performance and availability of services to the end-users.

#5 Mediocre coding

Bad coding will always affect the page performance and SEO ranking of the website. It is good to follow best practices starting from the initial stage of development.

#6 The number of redirections

The number of redirections impacts the DNS lookup time.

#7 Lack of Keep-Alive

If you’re using HTTP/1.0 protocol and have not configured Keep-Alive, then there’s a higher possibility that the browser to server connection will break. It will not load the page properly. 

#8 Hotlinking

Sourcing page content from other sites might affect the load time and performance of your website.

You might also like to read about 11 proven techniques to optimize website performance.

Strategies and checklist for website optimization

You can implement either bottom-up or top-down strategy for website optimization (discussed later). However, website optimization is an iterative process and you can repeat the following loop after completing a cycle.

1. Ideas: Prepare a checklist of all the possible strategies for the target website to optimize.
2. Prioritize: Prioritize the prepared checklist strategies and act on them.
3. Test: Test the applied strategies for enhanced performance.
4. Analyze: Analyze the impact and performance of the website and check if any further strategies are required.
5. Optimize: For further enhancement, perform the cycle again until you achieve the best.

#1 Bottom-up strategy

This strategy starts from planning to production (Proactive). It defines a set of rules and actions before/while starting the actual development.

The above infographic represents the lifecycle of Bottom-Up strategy in web page optimization.

#2 Top-down strategy 

It is a reactive method, which analyses the existing process to find the issue/lag, then reworks on behavioural grounds to accomplish the target. It is a reverse engineering process to identify the performance-issue gap and methods to fix them.

You can identify the resources which are affecting in maximum page load by considering the following-

• Resource size
• Asset positioning
• Render blockers
• Uncompressed contents
• Bad requests

Once you’ve identified the sources, lay down the process of optimizing the content and keep iterating to achieve the desired results. 

Basic checklist for both bottom-up and top-down strategies 

1. Layout performance principles
   1. Page load time
   2. Responsiveness
   3. Minimizing the number of requests
   4. Use Cache headers
   5. Minify CSS and JS contents
   6. Use CSS sprites
   7. Encourage Lazy loading on contents wherever possible
   8. Avoid iframes and redirects
2. Executive performance principles
   1. During application design
   2. During application development

Consider the following aspects during the design and development phase.

#1 Application design optimizations

1. Simple & lightweight: Include only key functionalities on load to keep it lightweight.
2. Client side components: Adopt client side validation to catch errors.
3. On demand data loading: Use on-demand data instead of pre-loaded data. (E.g. use paginations, pop-up contents on click instead of on load)
4. Asynchronous calls: Adopt implementation of AJAX calls from the presentation tier and the business tier.

#2 Application development optimizations

1. Include JS files at the bottom of the page (to avoid render blocking of page).
2. Combine multiple CSS files and optimize unwanted rules as per page requirements.
3. Avoid using external scripts at the beginning of the page.
4. Combine smaller images/icons to sprite & have optimi.
5. Use CSS rules/files in the head section of the document.
6. Reduce the number of requests to server.
7. Implement server/browser caching on possible sections.
8. Implement Mobile-specific sections to avoid overloading on small screen devices.

Below are few improvisation observations which are affected by optimizing the Webpage and it’s assets.

We’re technology tinkerers, experimentalists, and experts in customer experience consulting. Get in touch with us at hello@mantralabsglobal.com to know more about our ventures in website design and experience consulting. 

Website performance optimization or simply, website optimization is a process of improving a website’s loading speed in the browser. It generally involves editing the website to optimize scripts, HTML, or CSS code and reducing the number of web page components like images, scripts, or video for faster loading. 

What is web performance?

Web performance is the speed in which web pages are loaded and displayed on the user’s web browser.

The following are the website performance metrics-

#1 DNS lookup time

The Domain Name System (DNS) is the phonebook of the Internet. Users access online information through domain names, like www.mantralabsglobal.com. Web browsers interact through Internet Protocol (IP) addresses. DNS translates domain names to IP addresses so that browsers can load Internet resources.

#2 Initial connection

It is the time for a handshake between the browser and the server to retrieve the contents of the page. Handshaking is a process by which two devices initiate communications (here- browser and server). It initiates with the browser sending a message to the server indicating that it wants to establish a connection. 

#3 Waiting time (TTFB)

It is the time spent waiting for the initial response, also known as the Time To First Byte. This time captures the latency (the delay between the instruction and data transfer) of a round trip to the server. It also accounts the time spent waiting for the server’s response.

#4 Download Time

It is the time spent receiving the response data.

11 Proven website performance optimization techniques

You’ll need to consider the following to enhance a website’s performance.

#1 Reduce DNS lookup time

Implement the following to reduce DNS lookup time-

1. Reduce the number of hostnames, that are used to generate a web page.
2. Host third party resources locally, which automatically reduces the DNS lookup.
3. Use DNS Cache, where cache time can be defined to different types of hosts, so it reduces the lookup time.
4. DNS prefetching: allows browsers to perform DNS lookup in the background while the user browses the current page.
5. Defer parsing Javascripts, which are not needed while loading a web page but render blockers.
6. Use a fast DNS provider: choose the DNS providers whose lookup time is minimal.

#2 Browser/Web cache

It is a temporary storage location on a computer for files that a browser downloads to display websites. Locally cached files may include any documents from a website, such as HTML files, CSS style sheets, JavaScript scripts, graphic images, and other multimedia content. When a user revisits the website, the browser checks for the updated content and downloads only those files or what is not already present in the cache. This reduces bandwidth usage on both the user and server-side and loads the page faster.

#3 Image Optimization 

It is a process of delivering high-quality images in the right format, dimension, size, and resolution while keeping the smallest possible size. There are different ways to optimize images. You can resize, cache, or compress the image size.

#4 HTML, CSS, and JS Minification

While moving the source of website production, minify the contents of source code (Uglify), to reduce the overall size of the page. It will enhance the download speed for the page content on the web browser.

#5 HTML hierarchy

Maintain the standard HTML hierarchy, which means- push all the render-blocking scripts to the bottom of the page and keep only required assets on the header part of the load content. This way, the user doesn’t have to wait to see the actual page because of render-blocking scripts.

#6 Use Sprites

Sprite images are the group of images, which are combined to create a single image for a web page. As the number of server requests affects the bandwidth and loses the page speed score, it is better to combine all the possible images into sprite images.

#7 Enable compression

The web standards suggest GZIP compression. It is effective for optimum bandwidth utilization while rendering the contents. Let’s say- the overall size of the assets is 900KB. Enabling GZIP compression can compress the content size to at least 600KB. This enhances the bandwidth and pages render at a faster rate.

#8 Use secure channels/protocols

Prefer using secured channels to load the web page contents. It prevents the malware intro into the page.

#9 Reduce the number of redirections

Use a very less number of redirections in the websites. The introduction of too many redirections will consume the DNS lookup time and affect the page load time.

#10 Use CDN

Use CDN paths for the static resources, which enhances the load time performance of the website. CDN is useful for pre-caching static resources, which helps in reducing the time-to-index and hence reduces the load time. Also, distributed data centers host CDNs. Therefore, the nearest CDN host will fetch the assets- boosting the performance of the website.

#11 Avoid hotlinking

Hotlinking is the process of directly using the content from another site into the source website. Avoiding this will affect the bandwidth of both sites.

Also read – Everything you need to know about Test Automation as a Service.

Do you have any questions regarding your website performance? Feel free to comment or write to us at hello@mantralabsglobal.com & stay tuned for our next article on 8 Factors that Affect Page Load Time & Website Optimization Strategies.