What causes the initial network call to be slower than all the following ones?

Can someone help me understand why the first network call takes more than double the time of subsequent ones, even though DNS resolving should not take more than 5-50ms and only happens in the initial call? I conducted tests with famous URLs in separate incognito windows with cache disabled, and attached screenshots to support my observation. Any insights into this behavior would be greatly appreciated.

Note: These readings were taken on a full-speed internet connection

https://i.sstatic.net/zJ7ss.png

https://i.sstatic.net/sU9Vf.png

https://i.sstatic.net/T8GoW.png

https://i.sstatic.net/mMAHd.png

javascriptajaxperformancegoogle-chrome

Answer №1

Through a series of experiments, I have discovered that the Content Download part of browser request steps is accelerating by 1.5-2 times. It appears that this acceleration is due to the TCP Slow Start algorithm.

This can be attributed to the fact that modern browsers either open multiple connections simultaneously or reuse one connection for all files requested from a specific web server.

It is possible that this initial process causes the first request to be slower than subsequent ones.

In addition, @Vishal Vijay has made an insightful contribution:

The time taken for the initial connection handshake with the server (DNS Lookup + Initial connection + SSL) contributes to the delay. Browsers establish Persistent Connections for HTTP requests and maintain them for some duration. If another request is made for the same domain within that timeframe, the browser will attempt to utilize the existing connection for a quicker response.

Answer №2

There are times when server-side cache mechanisms may speed up subsequent requests, but for now let's focus on browser-related aspects.

Hovering over the waterfall 'blocks' reveals time details: https://i.sstatic.net/5r64b.png

Here is a brief explanation of each phase (sourced from Google Developers):

  • Queueing. Requests are queued by the browser when:
    • There are higher priority requests.
    • There are already six TCP connections open for this origin, hitting the limit. This applies to HTTP/1.0 and HTTP/1.1 only.
    • The browser needs to make space in the disk cache briefly
  • Stalled. The request could be stalled due to reasons mentioned under Queueing.
  • DNS Lookup. The browser is resolving the requested IP address.
  • Proxy negotiation. Negotiating the request with a proxy server.
  • Request sent. Sending out the request.
  • ServiceWorker Preparation. Setting up the service worker.
  • Request to ServiceWorker. Request being sent to the service worker.
  • Waiting (TTFB). Waiting for the first byte of response. TTFB means Time To First Byte, which includes one round trip of latency and the server preparation time for the response.
  • Content Download. Receiving the response content.
  • Receiving Push. Getting data via HTTP/2 Server Push for the response.
  • Reading Push. Reading local previously received data.

So what sets apart the initial and subsequent requests in a traditional HTTP/1.1 setup?

  • DNS Lookup: Resolving DNS for the first request might take longer. Subsequent requests benefit from faster resolution using the browser's DNS cache.
  • Waiting (TTFB): The first request must establish a TCP connection to the server. With HTTP keep-alive, subsequent requests reuse the existing TCP connection, eliminating the need for another TCP handshake and reducing three round-trip times compared to the first request.
  • Content Download: Initial request experiences more time due to TCP slow start when downloading content. As subsequent requests leverage the established TCP connection and scale up the TCP window, content download accelerates significantly compared to the first request.

Hence, generally subsequent requests should be quicker than the first one. This leads to a common network optimization tactic: Minimize the number of domains used for your website.

HTTP/2 enhances multiplexing to optimize usage of a single TCP connection. Hence, HTTP/2 provides performance enhancements in the modern frontend landscape where numerous small assets are deployed on CDN servers.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing Node.js and Express alongside EJS, iterating through objects and displaying them in a table

Today I embarked on my journey to learn Node.js and I am currently attempting to iterate through an object and display it in a table format. Within my router file: var obj = JSON.parse(`[{ "Name": "ArrowTower", "Class" ...

javascriptnode.jsexpressejs

Utilize Jquery to easily interact with RadComboBoxes

Is there a way to capture all RadComboBoxes change events in JQUERY for ASP.NET? $("input[type='text']").Change(function() { alert('changed'); }); In this example, I am specifying the input type as "text" because RadComboBoxes hav ...

javascriptjqueryasp.net

What steps can be taken to resolve the vulnerability in webpack-pwa-manifest?

Looking for solutions to address the [email protected] and minimist vulnerability. I attempted removing node/modules and package-lock.json, followed by a fresh npm installation, but the issue persists. Any suggestions would be greatly appreciated. Scr ...

javascriptreactjsnpmwebpackminimist

Guide to using jQuery to input a multi-line text into a field

Dealing with a value that spans multiple lines obtained from PHP has been challenging due to the structure of textareas. The standard method of inserting it into the textarea is not feasible in this case. I resorted to using jQuery for this purpose, but ...

javascriptjquery

How can I ensure that the AppBar background color matches the color of the navigation bar?

Having trouble changing the background color of the <AppBar> in my project. Using the Container component to set a maximum screen size, but encountering issues when the screen exceeds this limit. The AppBar background color appears as expected while ...

javascriptcssreactjsmaterial-ui

Does Vue3 support importing an HTML file containing components into a single file component (SFC)?

I am working on a Form-Component (SFC) that is supposed to import an HTML file containing Vue components. Form-Component <template src="../../../views/form-settings.html"></template> <script setup> import Button from "./. ...

javascripthtmlvue.jsvue-componentvuejs3

swap out the CSS class for my own class dynamically

When I display HTML code like this <div class="btn btn-pagination"> <i class="fa fa-angle-right"></i> </div> and want to replace fa fa-angle-right with myClass when the page loads. I attempted: $(document).ready(function () { ...

javascriptjqueryhtmlcss

Creating a PDF document using html2pdf: A step-by-step guide

Currently, I am immersed in a project using React. The main goal right now is to dynamically generate a PDF file (invoice) and then securely upload it to Google Drive. In the snippet of code provided below, you can see how I attempted to create the PDF f ...

javascripthtmlreactjsjspdfhtml2pdf

Ensure that this regular expression is able to accurately match all numbers, even those without decimal points

Seeking help to create a script that can extract the negative percentage value between two numbers. One of the numbers is dynamic and includes different currencies, decimals, etc., so I believe a regex is needed for this task. The current script works, but ...

javascriptjquery

Guide to running a NextJS app alongside an Express server backend on the same localhost port

I'm working on hosting my NextJS app, which is built with React, on the same localhost port as my express api-server backend. Within my express server API settings, I have configured my API server to listen on: http://localhost:3000/graphql How can ...

javascriptreactjsexpressnext.js

Making Cross-Origin Requests using jQuery's Ajax function and PHP

I've attempted numerous times to make this function properly, but for some reason, I just can't seem to figure it out. Initially, everything was working flawlessly for a few requests, and then out of the blue, it stopped functioning. Below is t ...

javascriptphpjqueryajaxcors

Creating a task management application using AXIOS and VUE for easy data manipulation

I am currently working on a small app to enhance my skills in VUE and Axios. However, I am facing a roadblock when it comes to the update functionality. I am struggling to pass the ID to the form for updating and despite watching numerous tutorial videos ...

javascriptcssvue.jsaxios

What is the best way to create a timer using JavaScript?

I'm looking for a reverse timer to track session timeout. I found a code on codepen that works as a clockwise timer, but my attempts to make it counterclockwise have failed. Can someone please suggest a solution? I want the timeout to be either 1 hour ...

javascripthtmlcss

The alias for the last item in a nested ng-repeat loop will consistently evaluate to true

Within my code, I am utilizing two nested ng-repeat functions and I am looking to change the $last variable to something different for each level - let's say outerLast and innerLast. I attempted to achieve this by using ng-init="outerLast= $last" and ...

javascriptangularjs

Difficulty altering value in dropdown using onChange function - Material-UI Select in React app

Having trouble updating dropdown values with MUI's Select component. The value doesn't change when I use the onChange handler, it always stays the same even after selecting a new item from the dropdown. I made a functional example on CodeSanbox. ...

javascriptreactjsmaterial-ui

Creating a Thrilling Triple Image Transformation on Hover using Material-UI

Here is a Codepen showcasing a triple hover effect on an image: Codepen I attempted to recreate this effect as a styled component in React Typescript using MUI and MUI Image, but encountered an error with my styling that is preventing it from working in m ...

javascriptcssreactjstypescriptmaterial-ui

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicked on?

Is there a way to clear the search box in a wenzhixin bootstrap table without refreshing the page when clicking anywhere on the page? <table id="view_table" data-toggle="table" data-search="true" data-page-list="[5, 10, 20]" data- ...

javascriptjquerycssbootstrap-table

Issue with JavaScript not executing upon clicking the submit button on a form within the Wordpress admin page

In the admin pages of my Wordpress installation, I have created an HTML form. My goal is to validate the data inputted when the submit button is pressed using a Javascript function. If the data is not correctly inserted, I want alerts to be displayed. Desp ...

javascriptphphtmlwordpress

Accessing node postgres and fetching combined fields with duplicate names

Currently, I am developing a node.js application that utilizes the pg package to connect to a PostgreSQL database. The problem I am encountering involves querying data using a join statement and finding that fields from one table overwrite those from anoth ...

javascriptjsonnode.jspostgresql

Trouble assigning the 'data' attribute to the 'Object' tag using jQuery. [Limited to IE8]

I have encountered a problem when creating an object element dynamically in jQuery to display some content. The code functions perfectly in all browsers except for IE8. Here is the code snippet: j$(document).ready(function(){ j$('.ob ...

javascriptjqueryhtmlinternet-explorerinternet-explorer-8