If you ever wondered what a given term meant on your page speed report, here’s a list of 50+ web performance terms, explained and defined, so that you will no longer have to guess their meaning.
AJAX
AJAX (Asynchronous JavaScript and XML) allows a web page to send and receive information from a server to change that page dynamically without reloading. Basically, it is a method to exchange data with a server, allowing parts of a web page to be updated without reloading the entire page. It creates fast and dynamic web pages.
Application Performance Monitoring (APM)
Application Performance Monitoring (APM) refers to a collection of different tools and processes that help IT professionals determine the consistency, availability, and performance of web applications. A good APM strategy is focused on user experience, transaction profiling, application code-level diagnostics, application deep-dive analytics, and infrastructure visibility.
Important Disclaimer: Application Performance Monitoring should not be confused with Application Performance Management (they are used interchangeably as “APM”). The latter refers to a broad strategy of pursuing performance excellence, while Application Performance Monitoring is just one aspect.
Asynchronous/Synchronous Loading
Asynchronous loading is loading multiple scripts at the same time rather than in sequence. The advantage of this technique is faster loading time. However, there could be some technical issues, such as flickering, caused by the asynchronous loading.
With synchronous loading, a web page’s resources are loaded in sequence. This can cause slow load times but prevents the errors caused by asynchronous loading.
Browser Cache
Browser Cache is a type of caching where browsers store static assets on your computer’s hard drive. Once you've downloaded an asset, it lives (for a time) on your machine. Retrieving files from your hard drive is way faster than retrieving them from a remote server.
When you first visit a website, your browser saves a copy of its components on your computer. When you revisit the same web page, you can access it faster because you already have its data stored in the cache. You can use a cURL get request with parameters to retrieve specific cached assets for testing purposes.
CDN
CDN (Content Delivery Network) consists of a number of proxy servers at various points of presence around the world. These servers work together to provide fast delivery of Internet content. CDN creates and stores cached copies of web content at these points of presence and serves them to users upon command. CDNs allow for the fast transfer of things needed for loading Internet content, such as HTML pages, JavaScript files, stylesheets, etc.
CPU
CPU (central processing unit), also called the "processor,” is part of the computer that processes and executes instructions. The CPU is made up of the control unit, which executes the instructions, and the ALU, which performs the calculations and logical operations.
CSS
CSS files are cascading style sheets that describe how HTML elements should appear (e.g., color, fonts, layouts) and be presented on web pages. CSS is also responsible for how elements should adapt when viewed on different devices. If HTML is the skeleton, CSS rules define how the website looks.
CSS Object Model
CSS Object Model (CSSOM) contains all the styles of a page or, to put it differently, provides information about how to style the DOM. It’s important to remember that CSS is render-blocking, meaning that content can't be rendered until the CSSOM is complete. That’s why removing unnecessary CSS rules can speed up load time.
Cache Invalidation
Cache invalidation is a process whereby entries in a cache are replaced and removed. For instance, NitroPack offers cache invalidation, which marks the cached content as stale but keeps serving it until newly optimized content is available. This mechanism is especially useful during high-traffic campaigns.
Chrome UX Report
Chrome UX report (aka CrUX) is a public repository of real user performance data on millions of websites. Using this data, you can better understand how Chrome users are experiencing your website and your competitors’ sites.
Client-Side Rendering
Client-side rendering means that a website’s JavaScript is rendered in your browser rather than on the website’s server (server-side rendering). In this case, the server is responsible for rendering the bare minimum of the website. Everything else is handled by the client-side.
Compression
Compression (also known as “data compression'') is the process of modifying, encoding or converting the bits structure of data so that it consumes less space on disk. The main benefits of data compression are faster data transmission time and decreasing costs for storage hardware and bandwidth.
Concatenation
Although it might sound scary, concatenation is just the operation of combining similar website resources in a single file. For instance, you can combine several CSS or JavaScript resources into one bigger CSS or JavaScript file. It’s a common practice that allows the browser to find and download everything it needs to render the page much quicker.
Important note: Combining different JavaScript files can be tricky and eventually could cause website problems. Some websites have JS scripts in different places - code, framework, theme, or plugins. And the tricky part is that all of the scripts are dependent on each other to work correctly (they must be run in a specific order):
The possible issue is that after concatenation, scripts can be stored in the new file in a different order, which can break your website:
Core Web Vitals
The combination of CLS, LCP, and INP forms the so-called Core Web Vitals. CWV are these three metrics that represent the load time, responsiveness, and visual stability of a page. In June 2021, Core Web Vitals became an official Google ranking factor.
Critical CSS
Critical CSS (or critical path CSS) is the CSS applied to the above-the-fold (that part of the page you see without scrolling) elements. Put simply, it’s the CSS responsible for the content that’s immediately visible when a user opens your website.
Critical Rendering Path
The browser needs to go through a series of steps to render content, including Document Object Model, CSS Object Model, Render Tree, Layout, and Paint. This entire process of converting HTML, CSS, and JavaScript into pixels on your screen is called the critical rendering path. Optimizing it improves the time to first render, which is critical for user experience.
Critical Request Chains
Critical Request Chains are a series of dependent network requests important for page rendering. The greater the length of the chains and the larger the download sizes, the more significant the impact on page load performance.
Cumulative Layout Shift
The Cumulative Layout Shift (CLS) metric measures how much unexpected layout shifts affect the user experience on a page. These layout shifts occur when content moves around without prior user input.
DOM
DOM (document object model) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. In other words, the DOM represents a document with a tree, in which each branch ends in a node, and each node contains objects. Thus, with DOM methods, one can change the structure, style, or content of a document.
Edge Computing
Edge computing (or edge) is a networking philosophy that aims to reduce latency and bandwidth use. It’s achieved by running fewer processes in the cloud and moving those processes to local places (e.g., a user’s computer, an IoT device, or an edge server). Simply put, edge computing minimizes the amount of long-distance communication that has to happen between a client and server.
Etag
ETag (entity tag) is a feature of the HTTP protocol, which speeds up requests by ensuring that the data stored in a web cache is up-to-date. The ETag is an identifier assigned to a data resource in a server, and if that resource is ever updated, the ETag changes too.
Field Data
Field data (also known as real user monitoring/metrics/measurement or RUM) reflects the experience of real users who visit your website. Unlike the lab data, field data isn’t collected in a controlled environment as the results are affected by each individual user’s connection and device.
As far as the reliability of field data is concerned, Google says that it’s more reliable than lab data:
"Field data is probably a better indicator for how real users are experiencing your website than lab data. Because lab data is literally just someone’s server making a request to your thing. And then if that server happens to be quite beefy you get pretty good-looking numbers, but then the real world isn’t as beefy and nice."
First Contentful Paint (FCP)
FCP (First Contentful Paint) measures the time from a user’s navigation to when the browser renders the first bit of content from the DOM. In other words, FCP marks the time at which the first text or image is painted for the user. According to PageSpeed Insights, FCP should occur in under 2 seconds.
First Input Delay
First Input Delay (FID) measures the time from when the user interacts with your site for the first time (click a link, tap on a button, etc.) to the time when the browser is able to respond to that interaction. FID was part of the Core Web Vitals until March 12, 2024. Then, Google replaced it with Interaction to Next Paint (INP).
First Meaningful Paint
FMP (First Meaningful Paint) measures when the primary content of a page is visible. The raw score for FMP is the time in seconds between the user initiating the page load and the page rendering the primary above-the-fold content. FMP essentially shows the timing of the paint, after which the biggest above-the-fold layout change happens.
Front-end Optimization (FEO)
Front-end optimization (FEO) refers to enhancing the interaction between your website and the visitor’s browser. This is achieved through different content optimization techniques (e.g., image compression, script concatenation, minification, removing unused CSS, and more.) The primary goals of the FEO are - faster load time and minimizing the number of requests needed for a given page to load.
HTML
HTML (Hypertext Markup Language) is a standard markup language used to specify content for a web page. It consists of tags and attributes that tell the browser what content the web page contains, e.g., images and text are all specified with HTML. You can see a page’s HTML with your browser’s dev tools (right-click → Inspect → Elements).
HTTP
HTTP (HyperText Transfer Protocol) is how data is transferred from a computer server to a web browser. It is the standard protocol for transferring hypertext documents on the World Wide Web. HTTP defines commands and services used for transmitting webpage data. It is the underlying protocol that allows users to exchange information.
HTTP Caching
Simply put, caching is storing frequently demanded things close to those asking for them, so they can have quick access to them. In the context of web caching, the demanded things can be HTML pages, text, images, stylesheets (CSS), JavaScript files, and more.
HTTP Header
The HTTP Header contains information about the HTTP body and the request/response. There can be different headers based on their context:
- Request headers - contain information about the resource that needs to be fetched or the client requesting the resource;
- Response headers - contain additional information about the resource;
- Representation headers - contain information about the body of the resource (e.g., encoding/compression). These are the Content-Type, Content-Encoding, Content-Language, and Content-Location headers.
Image Optimization
Did you know that most of the page weight is comprised of images? Image optimization is a process that aims to deliver high-quality images in the right format, size, dimension, and resolution while keeping the smallest possible file size. Undoubtedly, reducing your page weight by optimizing your visuals will positively impact your website’s entire performance.
Image Compression
Image compression is one of the techniques used in image optimization. Image compression reduces the size of images by using different algorithms. By doing so, you can decrease the redundancy of your images, resulting in increased storage capacity, more efficient transmission, and faster load time. There are two different types of compression - lossy and lossless.
JavaScript
JavaScript is a programming language that allows developers to dynamically insert content, links, metadata, or other elements, on websites. Its features are used to make websites more engaging and can include things like interactive maps, animated graphics, and live content updates. JavaScript can sometimes make it difficult for search engine bots to find specific content and increase the time it takes for a page to load for users.
Lab Data
As the name suggests, lab data is collected in a controlled environment using a predetermined device and connection speed. If there is one thing that you need to remember, it’s that lab results don’t reflect how your visitors experience your website. Don’t jump to conclusions based only on lab data. However, lab data is useful when it comes to debugging performance issues.
Largest Contentful Paint
Largest Contentful Paint (LCP) is a metric that measures when the largest content in the viewport is rendered. It is used to measure how long it takes for the main content of your webpage to appear on the screen. Everything below 2.5s is considered good LCP time by PageSpeed Insights.
Layout
In the layout stage, the browser calculates the size and the position of every visible element on the page. It determines their width and height and where they are in relation to each other.
Lazy Loading
Lazy loading is a strategy to identify resources (CSS, JavaScript, Images) as non-critical and defer their initialization until the point at which they are needed. It’s a way of shortening the critical rendering path, which leads to faster page loading time.
Minification
Minification refers to the process of removing all unnecessary characters (e.g., comments, line breaks, white space) from the source code of your HTML, CSS, or JavaScript files without changing their functionality. These unnecessary elements are not contributing to anything. They enlarge the size of your files and make them slower for browsers to download.
Here’s how a CSS file looks before minification:
And after:
Nex-Gen Image Formats
Next-Gen Image Formats (JPEG 2000, JPEG XR, and WebP) are modern file types that have superior compression and quality characteristics compared to their predecessors. Using them lets you reduce the file size significantly while keeping the same quality.
Paint
Paint is the last step of the critical rendering path. Once the render tree is created and the layout occurs, the pixels can be painted on the screen.
Preloading
Preload is an instruction to the browser to download and cache a needed resource (like a script or a stylesheet) as soon as possible. It’s a high-priority download of resources needed right after loading the page, and you want to speed the process up.
Prefetching
Prefetching is the loading of a resource before it is required to decrease the time waiting. Unlike preloading, the download happens with a low priority, so it doesn’t interfere with more important resources. Prefetched resources are likely to be used in future navigations across multiple navigation boundaries.
Proxy Server
A proxy server (also known as a proxy, web proxy, or forward proxy) is a server that sits in front of a group of client computers. Let’s say that you are using a proxy - every time you make a request to sites on the Internet, the proxy server intercepts those requests and then communicates with web servers on your behalf. Simply put, a forward proxy ensures that no origin server (or web server) ever communicates directly with you. It looks like this:
The main reasons for using a forward proxy are several - avoiding browsing restrictions, blocking access to specific web content, and protecting your online identity.
Redirect Chain
Redirect Chain happens when a page on your website redirects to a page that’s already redirected. A redirected page is a page that sends the search engine or the user who requested one page to another webpage, which is also relevant. Redirect chains can possibly hurt your website loading speed.
Render Tree
The render tree is a result of the browser combining the DOM and CSSOM. The render tree contains both the content and the style information for all the visible content on the screen. When the render tree is in place, the browser can proceed to the Layout stage.
Render-Blocking Resources
Render-blocking resources are static files (usually CSS, and JavaScript files) vital for the successful rendering of a web page. When the browser encounters a render-blocking resource, it stops downloading the rest of the resources until these critical files are processed.
Reverse Proxy
The difference between a forward proxy and a reverse proxy is the position of the middlemen (proxy server). A reverse proxy is a server that sits in front of one or more web servers, intercepting clients’ requests. Simply put, a reverse proxy ensures that no client ever communicates directly with an origin server. It looks like this:
Reverse proxies are typically used for load balancing, caching, SSL encryption, and protection from attacks.
Server Cache
The difference between browser cache and server cache is where the data is stored. While the browser cache stores data on your computer, the server cache does it on a server. There are different types of server caching, such as object caching (storing database queries), CDN caching (using a network of servers all around the world and serving the cached content from the server closest to the end-user), opcode caching (compile of PHP code) and more.
Server-Side Rendering
Server-side rendering (SSR) is the process of rendering web pages in the server and passing them to the browser (client’s side). SSR works by converting HTML files in the server into usable information for the browser. This type of rendering can improve the performance of your website because the browser will fetch content and JavaScript from the server before rendering it for the user.
Service Level Agreement
SLA (Service Level Agreement) is a contract between the service provider and the user that specifies the level of service expected during its term, for example, for cloud storage, hosting, or CDN services. SLAs can specify bandwidth availability, response times for routine and ad hoc queries, response time for problem resolution (network down, machine failure, etc.).
Speed Index
Speed Index shows how quickly the content is visually displayed during page load. Speed Index is expressed and measured in milliseconds, and it is dependent on the size of the viewport.
Static Assets
Static Assets are non-changeable resources such as JavaScript files, style sheets, and images. These are objects that are sent to the user without being changed at all by the server. Static assets are, in a way, a public directory of objects.
Time To First Byte
TTFB (time to first byte) is the number of milliseconds it takes for a client’s browser to receive the first byte of the response from the web server. Usually, TTFB can be improved with faster hosting and server optimizations.
Time To Interactive
TTI (Time to Interactive) is the amount of time it takes for the page to become fully interactive. In this sense, a page is considered fully interactive when:
- The page displays useful content, which the FCP measures;
- Event handlers are registered for most visible page elements;
- The page responds to user interactions within 50 milliseconds.
Total Blocking Time
Total Blocking Time (TBT) is the amount of time during which Long Tasks (all tasks longer than 50ms) block the main thread and affect the usability of a page. It shows how unresponsive a page is to user input (mouse clicks, screen taps, or keyboard presses) before it becomes fully interactive. TBT, along with LCP, is the most important metric for your score in PageSpeed Insights.
User-Agent
A User-Agent is a line of text inside the HTTP header. Its job is to tell the server what type of browser, device, and operating system the client is using. Then, servers use this information to provide personalized experiences, like serving a mobile version of a page to mobile devices.
Waterfall Chart
A waterfall chart displays the request-by-request loading behavior of your website. By analyzing the chart, you can thoroughly understand the loading order, request details, and duration and execution time. All of this data is extremely useful in debugging performance issues and general page issues as a whole.
Web Performance Optimization
WPO (Web Performance Optimization) is the process, methodology, and different techniques to measure, benchmark, and improve app performance. In this sense, performance refers to the speed at which application pages are rendered on the end-user's browser. WPO leads to faster and smoother page loads and an overall better user experience.
WebFont
WebFont Loader is a JavaScript library that gives more control over font loading and lets one use multiple web font providers. WebFont Loader provides a common interface to loading fonts regardless of the source, then adds a standard set of events that one may use to control the loading experience.
