Core Web Vitals Glossary : 100+ Terms & Abbrevations You Need To Know

Summary: Are you tired of feeling like you need a translator every time you read about Core Web Vitals? Don't worry, you're not alone! From FID to LCP, and everything in between, it can feel like you're decoding a secret message from a spy movie. But fear not, after this post you can join our secret club!

Core Web Vitals Glossary : 100+ Terms & Abbrevations You Need To Know

Core Web Vitals, like any specialized industry, has its own unique set of terminology, definitions, and abbreviations.

This Core Web Vitals Glossary includes more than 100 of the most common terms you are likely to hear and will definitely need to know when working on Core Web Vitals and page speed optimizations.

A

Above The Fold

Above the fold refers to the portion of a webpage that is visible without the need to scroll down. Making sure that everything above the fold is being prioritized by the browser will give the user insurance that the page is being loaded.

Accelaterated Mobile Page (AMP)

An open-source project aimed at improving the performance of mobile web pages. AMP uses a stripped-down version of HTML and JavaScript to reduce page loading times and improve user experience on mobile devices.

Accessibility

Refers to the design of web pages, tools, and technologies that can be accessed and used by people with disabilities, such as visual, auditory, or physical impairments.

Application Programming Interface (API)

A set of protocols, routines, and tools for building software applications. APIs define how software components should interact with each other, allowing developers to create applications that can integrate with other software systems and services.

Asset

Any file that is required by a webpage or application to function, including images, videos, scripts, stylesheets, and more.

Asynchronous

refers to a programming technique that allows a webpage to continue loading and rendering while certain tasks are being executed in the background.

For example, when a webpage includes external scripts, images or other resources, these resources are often loaded from a different server, which can take time. By marking these resources as "async", the browser can continue loading and rendering the page, without waiting for the external resources to be fully loaded.

B

Bandwidth

The maximum amount of data that can be transmitted over a network connection in a given amount of time. In the context of web performance, bandwidth can impact how quickly a webpage or application can be loaded and how smoothly it functions.

Bandwidth Category

Bandwidth category refers to the range of network speeds available to a device, such as:

  • 2G
  • 3G / Fast 3G
  • 4G LTE
  • 5G
  • Wi-Fi

Bitness

Bitness refers to the number of bits used to represent data on a computer. This can impact the performance and capabilities of a device or application. The two most common bitness values are 32-bit and 64-bit. 64-bit systems can handle larger amounts of memory and perform certain tasks more efficiently than 32-bit systems. The bitness of a system can be determined by checking the OS name or system information.

Bits per pixel (BPP)

A metric used to describe the amount of color information stored for each pixel in a digital image. It indicates the number of bits used to represent the color of a single pixel. Higher BPP values result in a wider range of colors that can be displayed, leading to a more detailed and accurate representation of the image.

Chrome is implementing a modification in the calculation of the Largest Contentful Paint (LCP) Core Web Vital (CWV) to prevent manipulation. This exploitation occurs when individuals use a deceptive "hero" image, such as an enlarged 1x1 transparent SVG, to create the illusion of an earlier LCP event.

Brotli

Google developed Brotli as a versatile lossless compression algorithm that is considered one of the most effective options available currently. It outperforms GZIP compression in compressing text-based resources such as HTML, CSS, and JavaScript.

C

Cache

A storage area that holds frequently accessed data, such as webpage elements or images, in order to speed up subsequent access to that data. Caching can improve webpage performance by reducing the amount of data that needs to be transmitted over a network connection.

CDN

A Content Delivery Network is a network of geographically distributed servers that work together to deliver web content, such as images, videos, and scripts, to users. CDNs can improve web performance by reducing the distance that data must travel to reach a user, and by caching frequently accessed content.

Compression

The process of reducing the size of a file or data stream, typically by removing redundant or unnecessary information. Compression can improve web performance by reducing the amount of data that needs to be transmitted over a network connection.

CSS

Cascading Style Sheets is a language used to describe the visual appearance and layout of webpages. CSS can be external, internal, or inline.

  • External stylesheets can change the look of your whole website. Link tags are usually used to add them to your page's HTML.
  • Internal stylesheets are made up of CSS code that is written directly in the HTML header of your page.
  • Inline CSS, on the other hand, is CSS code that is put right into the HTML code of your page. Inline CSS is usually used to make small changes to how something looks.

Connection

The link between a client device, such as a computer or mobile phone, and a server or network. The quality and speed of the connection can impact web performance, particularly for applications that require real-time data transfer or high-bandwidth content delivery.

Core Web Vitals (CWV)

The Core Web Vitals are a set of metrics that measure the speed, responsiveness, and visual stability of a website. They are important because they have a direct impact on user experience and can affect a website's search engine ranking. They were introduced by Google.

Critical Render Path

The critical render path refers to the series of steps involved in rendering a webpage in a browser, from the initial request to the final display.

Critical Request

Requests for essential resources that are crucial for page rendering, such as heading text or hero images, are critical requests. Non-critical requests, like images that appear only when users scroll or widgets in the page footer, can be deferred or loaded asynchronously after essential resources have finished loading.

Cumulative Layout Shift (CLS)

The Cumulative Layout Shift measures the stability of a web page's layout during loading. These often are shifting elements that are going up or down in the viewport. In the video below you can see how having CLS leads to user frustration.

D

Database

A structured collection of data that can be accessed, managed, and updated by computer systems. Web applications may rely on databases to store and retrieve data, and database performance can impact overall application performance.

Debugging

The process of identifying and fixing errors or issues in software code. Debugging is an important part of optimizing web performance, as performance issues may be caused by inefficient or buggy code

Defer

Defer refers to the practice of delaying the execution of certain scripts or resources until after other critical resources have been loaded.

Dependency

A software library or module that is required by another piece of software to function properly. Managing dependencies is an important part of optimizing web performance, as poorly optimized or outdated dependencies can impact overall application performance.

Device Memory

Device memory is the amount of storage capacity available on a device, such as a computer or mobile phone.

  • 512MiB
  • 1024MiB
  • 2048MiB
  • 4096MiB
  • 8192MiB

DNS

The Domain Name System is a hierarchical naming system that translates human-readable domain names, such as google.com, into IP addresses that can be used to locate web servers. DNS resolution times can impact web performance, particularly for websites with a large number of domain names or complex domain structures.

Document type

The HTML or XML document type definition that specifies the syntax and structure of a web document. Using the correct document type can help to ensure that web pages are rendered correctly and efficiently.

DOM

The Document Object Model is a programming interface that represents the structure and content of an HTML or XML document as a set of objects that can be manipulated using JavaScript. Changes made to the DOM can impact webpage performance, and developers must carefully manage these changes to ensure optimal performance.

Downtime

The period of time during which a website or application is unavailable or not functioning as intended. Downtime can have a significant impact on web performance, as it can result in lost revenue, decreased user satisfaction, and decreased search engine rankings.

E

Effective Bandwidth

Effective bandwidth is the actual speed at which data is transferred over a network, taking into account factors such as latency and packet loss.

Efficiency

The ability of a system or process to perform tasks quickly and with minimal waste. Efficiency is an important consideration in web performance, as it impacts the speed and responsiveness of web pages and applications.

Element Type

An element type is a classification of a web page element based on its function and characteristics.

  • Text
  • Image
  • Heading
  • Form
  • Button

Event

An action or occurrence that triggers a response or behavior in software code. Events can impact web performance by requiring additional processing and resources, and must be carefully managed to ensure optimal performance.

External resource

A file or component, such as an image, script, or stylesheet, that is loaded from an external source rather than being embedded in a web page. Managing external resources is important for optimizing web performance, as they can impact page load times and require additional network resources.

F

Favicon

A small icon or image that appears in a browser tab or bookmark to identify a website.

Fetch Priority

Fetch priority is a way of indicating to the browser which resources should be fetched and loaded first. This line of code can massively increase your LCP.

File compression

The process of reducing the size of files, such as images, scripts, or stylesheets, to optimize page load times and reduce network usage.

File Type

A file type is the format of a digital file, such as an image, video, or document, that determines how the data is encoded and displayed.

First Contentful Paint (FCP)

The FCP measures the time it takes for the first piece of content to be painted on the screen of a web page. So basically when the first pixel is drawn on your screen.

First Input Delay (FID)

The First Input Delay measures how quickly the next visual change occurs after a user interacts with a web page.

First User Experience (FUX)

In e-commerce, many of the visitors are orientational and are coming to your website for the first time. This is directly also the most important experience this visitor is going to have. If you know how these visitors experience the pagespeed you can more easily prioritize where you need to optimize the Core Web Vitals.

Flexbox

A CSS layout model that allows for flexible and responsive page layouts. Using Flexbox can help to optimize the layout and responsiveness of web pages and applications.

Font loading

The process of loading and rendering web fonts on a webpage. Managing font loading is important for optimizing web performance, as poorly optimized fonts can impact page load times and user engagement.

Frames Per Second (FPS)

Frames Per Second is a measure of the frequency at which images or animations are displayed on a screen. Maintaining a high FPS is important for optimizing the visual performance of web pages and applications.

Front-end

The part of a web application that is visible and accessible to users, typically including the user interface, design, and navigation.

Function

A block of code that performs a specific task or operation. Managing functions is important for optimizing web performance, as poorly optimized or redundant code can impact the speed and efficiency of web pages and applications.

G

GET Parameters

GET parameters are values passed in the URL of an HTTP GET request to provide additional information or parameters to the web server.

  • ?gclid
  • ?wbraid
  • ?fbclid

GPU

Graphics Processing Unit is a specialized processor that is designed to handle the complex calculations required for rendering images, animations, and other visual content.

GUI

Graphical User Interface is the part of a software application that allows users to interact with it using visual elements, such as buttons, menus, and icons.

GZIP

A file compression format that is commonly used for compressing web files, such as HTML, CSS, and JavaScript, to reduce their size and improve page load times.

H

A part of an HTTP request or response that contains metadata about the message, such as the type of content, caching directives, and encoding.

Hero image

A large, visually impactful image that is often used as the centerpiece of a webpage or application.

HTML

Hypertext Markup Language is a markup language used to create and structure web pages and applications.

HTTP Request Method

The HTTP request method is a standardized way to specify the type of action to be performed on a web server, such as retrieving or updating data. Common methods include GET, POST, PUT, and DELETE.

HTTPS

Hypertext Transfer Protocol Secure is a secure version of HTTP that uses encryption to protect data transmitted over the internet.

Hostname

A domain name that is used to identify a server on the internet.

I

Idle time

The time that a processor or system is not being utilized.

Image optimization

The process of reducing the file size of images on a webpage or application without significantly impacting visual quality.

Image Priority

Image priority refers to the level of importance assigned to an image on a web page, which can affect how the image is loaded and displayed. There are three types of image priority:

  • Lazy
  • Eager
  • High

Inline

Inline refers to the practice of including code or resources directly within the HTML markup of a webpage, rather than in separate files. This can help reduce the number of requests needed to load a page and improve performance.

In-app browser

A browser that is integrated into a mobile application.

Input delay

The delay between a user input (such as a mouse click or tap) and the response of the application or webpage.

IP address

A unique numerical identifier assigned to each device connected to the internet.

Interaction to Next Paint (INP)

The INP measures how quickly the next visual change occurs after a user interacts with a web page. The FID measures only the first input, but the INP uses the total time on the page.

J

JavaScript

A programming language used to create dynamic and interactive web pages and applications.

JPEG

A popular image file format used for photographs and other complex images.

JSON (JavaScript Object Notation)

A lightweight data interchange format used to transmit data between a server and a web application.

K

Key Performance Indicators (KPIs)

Quantitative metrics used to evaluate the performance of a website or application.

KiloByte (KB)

A unit of digital information equal to 1,024 bytes. Kilobytes are commonly used to express the size of files, such as images or documents.

L

Lab Data

Lab data refers to the results of controlled tests on web page performance using tools such as Lighthouse or WebPageTest. It provides a snapshot of a web page's performance but does not necessarily reflect real-world user experience. Field data based on actual user interactions should also be analyzed for a more complete picture.

Largest Contentful Paint (LCP)

LCP is a Core Web Vital metric that measures the loading performance of a web page. It provides valuable feedback on the perceived loading speed of a web page, as well as the time it takes for the main content to become visible. To optimize the Largest Contentful Paint, developers can reduce the size of images and videos, use lazy loading techniques, and prioritize critical resources.

Layout

Layout performance is important for optimizing the visual rendering of a web page. It involves rendering HTML and CSS into a visual layout that is both accurate and efficient. To optimize layout performance, developers can use techniques such as flexbox, grid layout, and CSS transforms.

Lazy Loading

Lazy loading is a technique for deferring the loading of non-critical resources until they are needed. This can help improve page load times and reduce network usage. To optimize lazy loading, developers can use JavaScript libraries and frameworks that support lazy loading, or implement it manually using intersection observers.

Lighthouse

Lighthouse is a powerful tool for optimizing web performance and improving the quality of web pages. It provides detailed feedback on a wide range of metrics and can help developers identify opportunities for improvement. To use Lighthouse, developers can run it as a browser extension or directly from the command line.

M

Main Thread

When a webpage or web application loads, the system starts a new process to execute application events. The "main-thread" runs all components by default.

The browser renders/paints content and handles user interaction on the main-thread.

Main-thread browser tasks include:

  • Layouts
  • CSS/HTML parsing
  • Building the DOM (DOM)
  • Executing all JavaScript (by default)

Megabyte (MB)

A unit of digital information equal to 1,048,576 bytes. Megabytes are commonly used to express the size of large files, such as videos or software applications.

Metric Element

A metric element is a component on a web page that can be measured and analyzed to evaluate the page's performance and user experience.

Minification

The process of removing unnecessary characters from code to reduce file size and improve page load times. Minification can be applied to HTML, CSS, and JavaScript files.

Monitoring

The process of tracking and analyzing website and application performance over time. Monitoring can help identify performance issues and track progress toward performance goals.

N

Navigation type refers to the way in which a user moves from one web page to another, such as by clicking a link or using the browser's back button.

Network

The underlying infrastructure that allows devices to connect and communicate with each other over the internet.

Number of Requests

The total number of requests made by a web page to retrieve all of its assets, such as images, scripts, and stylesheets.

O

Offscreen Images

Images that are not currently visible on the screen but are still loaded as part of a web page.

Onload Event

An event that is triggered when a web page has finished loading. The onload event can be used to initiate JavaScript functions or track page load times.

Optimization

The process of improving web performance by reducing page load times, increasing responsiveness, and improving user experience. Optimization can involve a variety of techniques, such as code minification, image compression, and network optimization.

OS name

The OS name refers to the name of the operating system that is installed on a computer or mobile device. Examples of common OS names include Windows, macOS, iOS, Android, and Linux. The OS name can give you important information about the type and version of the operating system that is running on a device.

P

Pageview Count

Pageview count is the number of times a web page has been viewed by users.

Page Template

A page template is a pre-designed layout used to create consistent visual structure and functionality for multiple web pages.

Pageview Type

Pageview type refers to the way in which a user interacts with a web page.

  • Successive
  • Returning
  • Unique

Page Speed

A measurement of how quickly a web page loads and becomes interactive for the user.

Parsing

When a document (HTML/CSS/JavaScript) is "parsed," the code is read, looked at line by line, and then broken up into "tokens." Its main job is to find syntax errors and extract relevant information from the document being parsed. This information is then put into a format that the system's internal runtime engine can use.

Performance Budget

A set of performance goals and limits for a web page or application. Performance budgets can help developers prioritize optimization efforts and ensure that web performance remains within acceptable bounds.

PNG

Portable Network Graphics is the abbreviation for this. It is a file format for images and graphics that allows for lossless data compression. For images that must retain their original quality, such as graphics, logos, charts, and infographics, PNG is the best format to use.

Preconnect

A web API that allows developers to hint to the browser which origins the web page will likely connect to in the future.

Preloading

Preloading is a technique used to fetch and cache resources that will be needed on a webpage before they are requested. This can help reduce the perceived load time of a page and improve performance.

Q

Query String

The portion of a URL that follows the "?" character and contains parameters and values used by a web application or service.

A JavaScript library that uses predictive analytics to prefetch resources and preconnect to origins that are likely to be needed on the next navigation.

R

Reduced Data Usage

Reduced data usage refers to techniques used to minimize the amount of data transferred over a network, such as compressing images or using text-only versions of web pages.

Render Blocking

A phenomenon in which a web page's resources (such as CSS or JavaScript) prevent the page from rendering until they are fully loaded.

Request

A message sent by a web browser to a server in order to retrieve a resource, such as a web page or an image.

Resource Timing: A set of performance metrics related to the loading and processing of a web page's resources, such as images, scripts, and stylesheets.

Real User Monitoring (RUM)

A technique for collecting performance data directly from users' web browsers as they interact with a web page or application. Real user monitoring can provide insights into real-world web performance and user experience.

S

Server-Side Rendering (SSR)

A technique for rendering web pages on the server and sending fully-formed HTML to the client, rather than relying on client-side JavaScript to build the page.

Service Worker

A JavaScript script that runs in the background of a web page and can intercept network requests, cache resources, and provide offline functionality.

Site Speed User Experience (SUX)

Site speed user experience was introduced by RUMvision. By SUX we mean a set of metrics, filters and dimensions that allow you to see exactly where challenges lie.

Speed Index

A performance metric that measures how quickly visible parts of a web page are rendered. Speed index can provide insights into perceived page load times and user experience.

Start Render

A performance metric that measures when the first non-white content is painted on a web page.

Synthetic Monitoring

A technique for simulating user behavior on a web page or application in order to measure performance and identify issues. Synthetic monitoring can help proactively identify and address performance problems.

T

Time to First Byte (TTFB)

A performance metric that measures the amount of time it takes for a server to respond to a request and send the first byte of data. TTFB can be an indicator of server response time and can affect UX metrics such as the FCP and LCP.

Third-Party Scripts

JavaScript code that is loaded from a domain other than the main domain of a web page. Third-party scripts can impact page load times, user experience, and even security.

Time To Interactive (TTI)

A performance metric that measures how long it takes for a web page to become fully interactive and responsive to user input.

Total Blocking Time (TBT)

A performance metric that measures the total amount of time a web page is blocked from responding to user input during the page load process.

U

User Interface (UI)

The visual and interactive elements of a web page or application that users interact with.

Uncached Resource

A web resource (such as an image or stylesheet) that is not stored in the browser cache and must be downloaded from the server each time it is requested.

User-Centric Performance Metrics

Performance metrics that focus on user experience and engagement, rather than just technical aspects of page load times. Core Web Vitals are an example of user-centric performance metrics.

V

Video Compression

The process of reducing the file size of a video by removing unnecessary data while preserving image quality.

Viewport

The visible portion of a web page that is displayed in the browser window. The size and position of the viewport can impact layout and user experience, particularly on mobile devices.

Virtual DOM (Document Object Model)

A programming concept used in some JavaScript frameworks (such as React) to optimize updates to the web page. The virtual DOM is an in-memory representation of the actual DOM, and changes to the virtual DOM can be efficiently applied to the real DOM to update the page.

Visibility State

The visibility state is a property of a web page that indicates whether the page is currently visible to the user, such as when it is minimized or running in the background.

Visitor Footprint

Do you have a lot of ad traffic or visitors from a country with slower Internet? Then this is useful to know to adjust your expectations and/or make other development choices. You can also see how fast the device of your user is (device memory). With that information, you can decide whether you really need another JavaScript library.

W

Waterfall

The Waterfall Chart displays how your website loads requests one at a time. It lists every single resource that your page has requested, including scripts, media files, external resources, etc.

Web Fonts

Fonts that are downloaded from the server to the user's device when a web page is loaded, rather than being installed locally on the user's computer.

WebP

WebP is a new image format that uses both lossy compression and lossless compression. It is similar to the WebM format and was also made by Google.

WebP can be used on a wide range of images on the web, including photos, images with transparency, and graphics. The lossy compression ratio can be changed to find a good balance between the size of the file and the quality of the image.

Web Workers

A JavaScript feature that allows scripts to run in the background without blocking the main thread, enabling tasks such as complex calculations or file processing to be performed without impacting user experience.

X

XMLHttpRequest (XHR)

A JavaScript API that allows data to be sent and received between a web browser and a server. XHR requests can be asynchronous and allow web pages to update content without requiring a full page refresh.

Y

You Rock

I couldn't find any terms starting with the Y, but if you've read up to here or ever end up here. You rock!

 

Z

It's quite rare to find web performance terms that start with the letter "Z", but here is one related to Core Web Vitals:

Zone

In the context of web performance, a "zone" refers to a geographical region where content is served from a content delivery network (CDN). Using a CDN can improve page load times by delivering content from a server that is geographically closer to the user.

Share blog post