“We have 12 milliseconds for moving every pixel.”
Addy Osmani
Interaction to Next Paint (INP) is a Core Web Vitals (CWV) metric to measure the web page’s interactivity for user experience quality. INP is a user-centric page speed metric that affects search engine optimization performance, conversion rate, and user satisfaction. Interaction to Next Paint replaced First Input Delay (FID) in March 2024 in Core Web …
“Link rel=preload” is a browser hint to provide resource loading prioritization to improve the web page loading performance and speed. Preload is a value for the “rel” attribute of the HTML “link” tag to fetch a web page resource earlier than others. To improve the initial contact with users by improving the user experience, preload …
User-centric web page speed performance metrics focus on different verticals that affect the perception of users for the page loading performance of a website. User-centric performance metrics are announced by Google Developers and W3C Web Performance Working Group to organize the concepts that are related to the Lighthouse. User-centric performance metrics involve the relativity of …
Optimizing WebFont files includes the process of decreasing the size of font files and using only necessary glyphs along with better font-file extensions such as Woff2 instead of TFF or Woff for better web page loading performance. A WebFont file contains stylish glyphs that refer to a letter, numeric value, or a character for a …
To add the Expires HTTP Headers to .htaccess file and WordPress sites, a code line can be used such as “ExpiresByType image/jpg “access plus 1 month””. Expires HTTP Headers are directives to determine the lifetime of a cached file within browsers’ storage. HTTP Cache is an important factor for page speed optimization, thus using Expires …
HTTP Expires Header is a header that provides the date and time for specifying the limit for the response’s content staleness. This header can be set by either server or client, depending on who sends it first. It can also be sent in case of no other headers are specified. This type of request/response specifies …
The Last-Modified HTTP Response Header is a server response header that indicates the latest modification date when asked to provide a source. Here’s how it looks, but there’s a lot to it. A user might browse your website and the browser temporarily stores a lot of elements, such as HTML, images, style sheets, and even …
Cache-control is an HTTP response header to determine browser caching time span for a specific web page resource. Cache-control includes a resource’s caching methodology, where to cache, and its expiration date with maximum age (time to live). Cache-control HTTP Header regulates browser caching policies for clients. Examples for Cache-Control Response Header Cache-control example values and …
HTTP request header If-None-Match conditions the request. For GET and HEAD methods, the server will return the specified resource only if its ETag does not match the given ones. If the resource’s ETag is not on the list, the request will not be processed. The server needs to return 304 (Not Modified) when the GET …
Transmission Control Protocol (TCP) is a connection balancing algorithm that controls the number and speed of connections a server can open and protects the server. In order to avoid overloading a network with an unexpectedly large burst of data, TCP slow start probes the network slowly to confirm the available capacity. During the beginning of …
The ETag HTTP response header is a qualifier for determining version of a web page resource from a website’s server that requested by the requestor which is a web browser user. ETag is used for efficient browser cache in order to decrease bandwidth consumption. If a website uses ETag for its web page resources, the …
Speed Index is a web page load performance metric that shows how quickly elements of a web page become visible. Speed Index (SI) is measured only on the visible portion of the screen. The visible part of the screen, above the head section, affects the Speed Index score with visual progress and visual completeness speed …
Cumulative Layout Shift (CLS) is one of the Core Web Vitals metrics and user-centric performance metrics that focus on visual-stability during the entire life span of a web page. CLS is an important term for preventing the layout shifts that annoy users. While reading a text or being about to click a link, if the …
Load CSS files Asynchronous. Loading CSS Files Asynchronously can help for improving page experience while removing the render-blocking effect of the CSS Files. There are four different method for loading CSS async.
The HTTP Vary Response Header is used to indicate which type and format of content are requested from the web site’s server via the browser. This process performed through HTTP Vary Header is called “Content Negotiation”. In the RFC7232 Document, Hypertext Transfer Protocol (HTTP / 1.1), this case is called “Conditional Requests”. Accordingly, when entering …
Total Blocking Time (TBT) is a load responsiveness metric that measures the usability of the web page during the loading. Total Blocking Time is an important user-centric performance metric that compares the time amount of non-responsive and responsive time during the rendering phase of the web page. Input responsiveness or the interactivity between the web …
The abbreviation CDN stands for Content Delivery Network. A content delivery network (CDN) is a network of servers in various data centers around the world. It is an excellent opportunity to offer or develop your website or web application worldwide. If you use such a network, your web server connects to a large number of …
Time to Interactive (TTI) is the performance metric that measures when the web page’s subresources have been downloaded and when the user can interact with the web page. Time to Interactive is not just about “loading responsiveness”. It is also about the “downloading the main resources of the web page”. To measure and understand the …
Largest Contentful Paint (LCP) is the rendering time of the largest and main content of the web page. LCP is one of the Core Web Vitals Metrics that are launched by Google Chrome Developers to measure “user experience” based on Page Speed Metrics. Largest Contentful Paint is important to see that when the most important …
First Contentful Paint (FCP) measures the time between the user’s navigation and the first paint of content for the web page. Anything related to the DOM of the web page can be included in the First Contentful Paint such as Paragraphs, Navigation Bar, Images, Form Elements, etc. Iframe Elements are not included in the First …
First Input Delay is the time between the user’s first interaction with the web page and the web page’s response. First Input Delay (FID) is also a user-centric Load Timing Metric. Also, FID is an important signal to see the “load responsiveness” of the web page. Even if a web page loads faster than its …
Recent studies have shown that search rankings are affected by the loading speed of web pages. The logic behind all of this is clear and simple: A website that loads slowly delivers a bad user experience, and websites with a bad user experience don’t deserve to be at the top of search results. This means that if …