Welcome to our essential glossary of web performance terms! In today’s fast-paced digital world, a website’s performance is crucial for success. A high-performing website not only ensures a seamless user experience but also boosts search engine rankings, driving more traffic and engagement.
Navigating the technical terminology associated with web performance can be overwhelming, whether you’re a developer, a digital marketer, or a business owner. Understanding these terms is vital for optimizing your site and achieving your goals.
This glossary aims to demystify the complex jargon of web performance. Here, you’ll find clear, concise definitions of key terms, from basic concepts like page load time and caching to advanced topics such as Time to First Byte (TTFB) and Content Delivery Networks (CDNs). Our goal is to provide you with the knowledge needed to enhance your site’s speed, reliability, and overall performance.
By mastering these terms, you’ll be able to interpret performance reports accurately, implement best practices effectively, and communicate clearly with developers and stakeholders. Dive in and empower yourself with the insights necessary to make your website faster, more reliable, and user-friendly. Let’s get started!
Glossary for Website Performance:
Refers to the portion of a webpage that is immediately visible without scrolling. Prioritizing the loading of above-the-fold content ensures that users see the most important parts of a webpage quickly, giving the impression that the page is loading faster.
An open-source project designed to enhance the performance of mobile web pages. AMP utilizes a streamlined version of HTML and JavaScript to minimize loading times and improve user experience on mobile devices.
Accessibility
Involves designing web pages, tools, and technologies to be usable by people with disabilities, including those with visual, auditory, or physical impairments. Ensuring accessibility enhances the overall user experience for all users.
Application Programming Interface (API)
A set of protocols, routines, and tools for building software applications. APIs specify how software components should interact, enabling developers to create applications that can integrate seamlessly with other software systems and services.
Asset
Any file required by a webpage or application to function correctly, such as images, videos, scripts, stylesheets, and more. Managing assets efficiently is crucial for optimizing page load times.
Asynchronous
A programming technique that allows a webpage to continue loading and rendering while specific tasks are executed in the background. For example, external scripts, images, or other resources can be loaded asynchronously, allowing the browser to render the page without waiting for these resources to be fully loaded. This technique improves overall page performance and user experience.
Bandwidth
The maximum amount of data transmitted over a network connection within a specific time frame. In web performance, bandwidth influences how quickly a webpage or application loads and operates.
Bandwidth Category:
This category denotes the range of network speeds available to a device. Categories include:
- 2G
- 3G / Fast 3G
- 4G LTE
- 5G
- Wi-Fi
Bitness
Indicates the number of bits used to represent data on a computer, affecting the performance and capabilities of devices or applications. Common bitness values are 32-bit and 64-bit, with 64-bit systems able to handle more significant memory amounts and perform certain tasks more efficiently than 32-bit systems. The bitness of a system can be checked via the OS name or system information.
Bits Per Pixel (BPP)
A metric describing the 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 provide a broader range of colors, resulting in more detailed and accurate images.
Brotli
Brotli is a lossless compression algorithm developed by Google. It is known for its efficiency in compressing text-based resources like HTML, CSS, and JavaScript. Brotli often outperforms other compression methods, such as GZIP, making it a preferred choice for optimizing web performance.
Cache
A storage area that holds frequently accessed data, such as webpage elements or images, to speed up subsequent access to that data. Caching enhances webpage performance by reducing the amount of data that needs to be transmitted over a network connection.
CDN (Content Delivery Network)
A network of geographically distributed servers which deliver web content, such as images, videos, and scripts, to users. CDNs improve web performance by reducing the distance data must travel to reach a user and by caching frequently accessed content.
Compression
Compression is the process of reducing the size of the file or data stream by removing redundant or unnecessary information. It enhances web performance by reducing the amount of data that needs to be transmitted over a network connection.
CSS (Cascading Style Sheets)
The language used to describe the visual appearance and layout of web pages. CSS can be external, internal, or inline:
- External stylesheets: Applied across an entire website via link tags in HTML.
- Internal stylesheets: CSS code embedded directly in the HTML header of a page.
- Inline CSS: CSS code placed directly within the HTML code of a page, typically used for small styling changes.
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 impact web performance, especially for applications requiring real-time data transfer or high-bandwidth content delivery.
Core Web Vitals (CWV)
A set of metrics introduced by Google that measure a website’s speed, responsiveness, and visual stability. These metrics directly affect user experience and a website’s search engine ranking.
Critical Render Path
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 crucial for page rendering, such as heading text or hero images. Non-critical requests, like images that load on scroll or footer widgets, can be deferred or loaded asynchronously after essential resources have loaded.
Cumulative Layout Shift (CLS)
Measures the stability of a web page’s layout during loading. Layout shifts occur when elements move within the viewport, leading to potential user frustration. Ensuring minimal CLS improves the user experience by maintaining visual stability.
Favicon
A small icon or image that appears in a browser tab or bookmark, used to identify a website.
Fetch Priority
Fetch priority indicates to the browser which resources should be fetched and loaded first, significantly improving the Largest Contentful Paint (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
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)
FCP measures the time it takes for the first piece of content to be painted on-screen, marking the moment the first pixel is drawn.
First Input Delay (FID)
FID measures the time it takes for the browser to respond to the user’s first interaction with a web page, such as a click or tap.
First User Experience (FUX)
In e-commerce, the initial experience of first-time visitors is crucial. Understanding their page speed experience helps prioritize Core Web Vitals optimizations.
Flexbox
A CSS layout model that allows for flexible and responsive page layouts, helping to optimize the layout and responsiveness of web pages and applications.
Font Loading
Font loading is the process of loading and rendering web fonts on a webpage. Effective management of font loading is important for optimizing web performance, as poorly optimized fonts can impact load times and user engagement.
Frames Per Second (FPS)
A measure of the frequency at which images or animations are displayed on a screen. Maintaining a high FPS is crucial 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 includes the user interface, design, and navigation.
Function
A block of code that performs a specific task or operation. Efficiently managing functions is vital for optimizing web performance, as poorly optimized or redundant code can slow down web pages and applications.
Idle Time
The period during which a processor or system remains inactive and performs no tasks.
The process of reducing the file size of images on a webpage or application to enhance performance without compromising visual quality.
Image Priority
Image priority determines the importance of an image on a webpage, influencing how quickly and prominently it is loaded and displayed. Priorities can be categorized as lazy, eager, or high.
Inline
Inline refers to embedding code or resources directly within the HTML markup of a webpage rather than linking to external files. This approach reduces the number of server-requests required for page loading, improving performance.
In-App Browser
A web browser integrated within a mobile application allows users to view the web content without leaving the app environment.
Input Delay
The time lapse between the user’s input action (such as a click or tap) and the corresponding response from the application or webpage.
A unique numeric identifier is assigned to each device connected to a network, enabling communication across the internet.
Interaction to Next Paint (INP)
INP measures the time it takes for the next visual change to occur after a user interacts with a web page. Unlike First Input Delay (FID), it encompasses all interactions, not just the first.
JavaScript (JS)
JavaScript is a programming language that creates interactive and dynamic web pages and applications.
JPEG
JPEG is a commonly used image file format optimized for photographs and images with complex color patterns.
JSON (JavaScript Object Notation)
JSON is a lightweight data interchange format to transmit data between servers and web applications. It is known for its simplicity and ease of use.
Key Performance Indicators (KPIs)
KPIs are quantitative metrics used to assess and gauge the performance and effectiveness of websites or applications.
Kilobyte (KB)
Kilobyte is a unit of digital information equal to 1,024 bytes, commonly used to measure the size of files like images or documents.
Lab Data
Lab data refers to performance metrics obtained from controlled tests on web pages using tools such as Lighthouse or WebPageTest. It provides insights into a page’s performance under specific conditions but may differ from real-world user experience (Field Data).
What Website Changes to Make After Google’s Recent Page Experience Update?
Largest Contentful Paint (LCP)
LCP is a Core Web Vitals metric that quantifies the loading speed of a web page’s main content. It is crucial to evaluate user perception of loading times and optimize content visibility.
Layout
Layout refers to rendering HTML and CSS into a visually coherent and efficient presentation on a web page. Optimizing layout involves flexbox, grid layout, and CSS transforms.
Lazy Loading
Lazy loading delays the loading of non-essential resources until they are needed, enhancing page load times and conserving network resources. It is implemented using JavaScript libraries or intersection observers.
How Can Fast Loading Of Websites Happen?
The Business Case for Investing in Web Performance Optimization: Real-Life Business Cases
Lighthouse
Lighthouse is a comprehensive tool for auditing and improving web page quality and performance. It offers detailed metrics and recommendations for optimizing various aspects of web development.
Main Thread
When a webpage or web application loads, a new process is initiated to handle application events, the “main thread” executes all default components.
Tasks on the main thread include:
- Rendering/painting content.
- Handling user interactions.
- Performing layouts.
- Parsing CSS/HTML.
- Building the DOM (Document Object Model).
- Executing all JavaScript.
Megabyte (MB)
A megabyte is a unit of digital information equivalent to 1,048,576 bytes. Megabytes are commonly used to measure the size of large files such as videos or software applications.
Metric Element
A metric element refers to a component on a webpage that can be measured and analyzed to assess the page’s performance and user experience.
Minification
Minification removes unnecessary characters from code (such as HTML, CSS, and JavaScript) to reduce file size and improve page load times.
Monitoring
Monitoring comprises of tracking and analyzing the performance of websites and applications over time. It helps identify performance issues and track progress toward performance goals.
Navigation Type
Navigation type describes how users move from one web page to another by clicking a link or using the browser’s back button.
Network
The network refers to the underlying infrastructure that enables devices to connect or communicate with each other over the Internet.
Number of Requests
The total count of requests a web page makes to fetch all its assets, including images, scripts, and stylesheets.
Offscreen Images
Images that are currently not visible on the screen but are still loaded as part of a webpage.
Onload Event
An event is triggered when a web page finishes loading. The onload event can initiate JavaScript functions or track page load times.
Optimization
Optimization involves enhancing web performance by reducing page load times, increasing responsiveness, and improving user experience. Techniques include code minification, image compression, and network optimization.
OS NameThe OS name refers to the operating system installed on a computer or mobile device, such as Windows, macOS, iOS, Android, or Linux.
Pageview Count
Pageview count indicates how many times users have viewed a web page.
Page Template
A page template is a pre-designed layout that creates consistent visual structure and functionality across multiple web pages.
Pageview Type
Pageview type categorizes how users interact with a web page, such as successive views, returning visits, or unique visitors.
Page Speed
Page speed measures how quickly a web page loads and becomes interactive.
Parsing
Parsing involves reading and breaking down code (HTML/CSS/JavaScript) line by line to identify syntax errors and extract relevant information for the system’s runtime engine.
Performance Budget
A performance budget sets goals and limits for web page or application performance. It helps prioritize optimization efforts and maintain acceptable web performance levels.
PNG
Portable Network Graphics (PNG) is a file format for images and graphics that supports lossless data compression. It is ideal for high-quality images such as graphics, logos, charts, and infographics.
Preconnect
Preconnect is a web API that allows developers to instruct the browser to establish early connections to origins likely to be used in the future, optimizing network performance.
Preloading
Preloading is a technique for fetching and caching resources needed by a webpage before they are actually requested. This technique reduces perceived load times and improves overall performance.
Query String
The query string is the part of a URL that follows the “?” character and contains parameters and values used by a web application or service.
Quicklink
Quicklink is a JavaScript library that uses predictive analytics to prefetch resources and preconnect to origins likely needed on the next navigation, thereby improving perceived page load times.
Reduced Data Usage
Reduced data usage refers to techniques employed to minimize the amount of data transferred over a network, such as compressing images or using text-only versions of web pages.
Render Blocking
Render blocking occurs when a web page’s resources (such as CSS or JavaScript) prevent the page from rendering until they are fully loaded.
Request
A request is a message a web browser sends to a server to retrieve a resource, like a web page or an image.
Resource Timing
Resource timing refers to performance metrics related to loading and processing a web page’s resources, such as images, scripts, and stylesheets.
Real User Monitoring (RUM)
Real User Monitoring (RUM) collects performance data directly from users’ web browsers as they interact with a web page or application, providing insights into real-world web performance and user experience.
Server-Side Rendering (SSR)
Server-side rendering (SSR) is a technique for rendering web pages on server and sending fully formed HTML to the client, reducing client-side processing and improving initial page load times.
Service Worker
A Service Worker runs in the background of a web page and can intercept network requests, cache resources, and provide offline functionality to enhance user experience.
Site Speed User Experience (SUX)
Site Speed User Experience (SUX) encompasses a set of metrics, filters, and dimensions that allow Monitoring and improving the user experience related to page speed.
This is a performance metric that measures how quickly visible parts of a web page are rendered. It provides insights into perceived page load times and user experience.
Start Render
Start Render is a performance metric that measures when the first non-white content is painted on a web page, indicating the initial visual loading progress.
Synthetic Monitoring involves simulating user behavior on a web page or application to measure performance and identify issues proactively, helping ensure optimal user experience.
Time to First Byte (TTFB)
Time to First Byte (TTFB) is a performance metric that measures the time it takes for a server to respond to the request and send the first byte of data. It influences user experience metrics like FCP and LCP.
Third-Party Scripts
Third-party scripts are JavaScript code loaded from a domain other than the main domain of a web page. They can impact page load times, user experience, and potentially security.
Time To Interactive (TTI)
Time to Interactive (TTI) is a performance metric that measures how long it takes for a web page to become completely interactive and responsive to user input. It is crucial for assessing user experience.
Total Blocking Time (TBT)
Total Blocking Time is a performance metric that measures the total amount of time a web page is unresponsive to user input during the page load process, affecting perceived speed and user engagement.
User Interface (U
The User Interface (UI) encompasses the visual and interactive elements of a web page or application that users interact with.
Uncached Resource
An Uncached Resource is a web resource (such as an image or stylesheet) not stored in the browser cache and must be downloaded from the server whenever requested.
User-centric Performance
Metrics focus on user experience and engagement rather than just the technical aspects of page load times, ensuring a holistic view of performance.
It reduces a video’s file size by removing unnecessary data while preserving image quality.
Viewport
The Viewport is the visible portion of a web page displayed in the browser window. It impacts layout and user experience, especially on mobile devices.
Virtual DOM (Document Object Model)
: A programming concept used in JavaScript frameworks (like React) to optimize updates by maintaining an in-memory representation of the actual DOM, ensuring efficient page updates.
Visibility State
The Visibility State of a web page indicates whether it is currently visible to the user. It affects how resources are managed, and performance optimizations are applied.
Visitor Footprint
Visitor Footprint refers to insights into visitor demographics, device capabilities, and network conditions that influence development decisions and performance optimizations.
Waterfall
The Waterfall Chart visually represents how a website loads resources one by one. It lists every resource the page requests, including scripts, media files, and external resources, showing their load times and dependencies.
Web Fonts
Web Fonts are downloaded from the server to the user’s device when a web page is loaded rather than installed locally on the user’s computer.
WebP
WebP is a modern image format Google developed that utilizes lossy and lossless compression techniques. It is suitable for a wide range of web images, including photos, images with transparency, and graphics. WebP allows adjusting the compression ratio to effectively balance file size and image quality.
Web Workers
Web Workers are a feature of JavaScript that enables scripts to run in the background without blocking the main thread. They are used to perform tasks such as complex calculations or file processing and enhance web page responsiveness and user experience.
XMLHttpRequest (XHR)
XMLHttpRequest (XHR) is a JavaScript API that facilitates sending and receiving data between a web browser and a server. XHR requests can operate asynchronously, enabling web pages to update content dynamically without requiring a full page reload.
You Rock
I couldn’t find any terms starting with the letter “Y,” but if you’ve read up to this point or ever ended up here, you rock!
Zone
In web performance, a “zone” refers to a geographic region where content is cached and served by a content delivery network (CDN). Utilizing CDNs with multiple zones can optimize page load times by delivering content from servers closer to the user’s location.
