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.
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.
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 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.
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 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 (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 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 (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.
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.
The possible issue is that after concatenation, scripts can be stored in the new file in a different order, which can break your website:
The combination of CLS, LCP, and FID forms the so-called Core Web Vitals. CWV are these three metrics that represent the load time, interactivity, and visual stability of a page. From June 2021, Core Web Vitals are becoming Google’s latest ranking factor.
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 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.
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 (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 (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 (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 (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:
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 (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. Google recommends keeping FID below 100ms for a good user experience.
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) 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 (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 (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.
The HTTP Header contains information about the HTTP body and the request/response. There can be different headers based on their context:
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 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.
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 (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.
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.
Here’s how a CSS file looks before minification:
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 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.
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 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.
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 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.
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.
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.
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.
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 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.
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.
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:
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.
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.
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.
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.