Web performance, specifically site speed is critical to the success of a website. A slow website not only reduces usability, but increasingly impacts traffic delivery. From an organic perspective, following the Google “Speed Update” announced in July 2018, site speed is now a confirmed ranking factor. From a PPC perspective, page speed continues to form part of the Google Ads Quality Score.
In order to optimise web performance it is crucial to understand the many abbreviations, definitions and tools available to help achieve this increasingly complex task.
Jump to the following letter: A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
Asynchronous
Asynchronous loading of resources promotes improved page load times. Load speeds are essentially improved as a result of resources being loaded simultaneously, preventing the potential for bottlenecks from large / slow to download files.
Cache
Refers to the temporary storage of web content including web pages, images, scripts. Caching is utilised to reduce bandwidth usage, server load, and ultimately load times.
Content delivery network (CDN)
A content delivery network, commonly referred to simple as a CDN, is a system of geographically distributed servers that collectively deliver web pages and other content to a user. Such content is delivered from the closest web server based on the user’s geographic location. A CDN may provide additional benefits in addition to improved page load times including increased protection form from common malicious attacks.
Cumulative Layout Shift (CLS)
CLS is a user centric metric for measuring the visual stability of a webpage. It helps to quantify how often users experience unexpected layout shifts. CLS is calculated from the sum total of all individual layout shift scores for every unexpected layout shift that occurs. A layout shift occurs any time a visible element changes its position from one rendered frame to the next.To provide a good user experience, Google advises pages should maintain a CLS of less than 0.1
DNS-prefetch
A DNS-prefetch asks the browser to perform a dns resolution of a third-party domain in advance of a user loading it. A dns resolution of a third-party domain could occur for externally hosted fonts, script libraries, API requests or for the loading of resources from a CDN. The following syntax informs the browser to preload a resource: <link rel=”dns-prefetch”>.
Domain lookup time
The amount of time spent in DNS lookup for a page.
Domain sharding
Domain sharding is a method for splitting resources across multiple domains in order to help improve page load times. Splitting resources across multiple domains allows for simultaneous connections / file downloads. Commonly resources such as CSS, JavaScript or image files are split across multiple owned subdomains enabling parallelisation of downloading resources.
Expires headers
Expires headers informs the browser whether or not it should request a specific file from the server or whether it should load the file directly from the browser’s cache. Configuring expires headers not only reduces the volume of required downloads from the server but also the number of individual HTTP requests form the server. Expires headers can be set on both individual files and collectively at a file type level.
First contentful paint (FCP)
A measurement of the time from navigation to the time a browser renders the first piece of content from the DOM.
First meaningful paint (FMP)
Is a measure of the time at which all primary / hero content is visible to the user. While the exact moment of FMP can be subjective, it is most commonly traced back to the point after which the biggest above-the-fold layout change has happened and all web fonts have loaded.
First Input Delay (FID)
FID is a user centric metric for measuring load responsiveness as it helps quantify the experience users feel when trying to interact with unresponsive elements on a web page. FID specifically measures the time from when a user initially interacts with a page to the time when the browser is actually able to begin processing event handlers in response to that interaction. Example of user interactivity with the page could include: clicking a link, pressing a button or a custom JavaScript powered control. To provide a good user experience, Google specifies sites should aim to have a FID of less than 100 milliseconds.
Google Lighthouse
Google Lighthouse is an automated open-source tool to aid improving the quality of web pages. Key audits include performance, accessibility, progressive web apps and SEO. Lighthouse can be run within Chrome DevTools, from the command line, as a Node module, from a web UI or via a Chrome Browser Extension.
From a performance perspective Google Lighthouse provides an extensive information which details and analyses page load speed. In addition to the reporting of key metrics such as FCP, FMP and TTI, a frame by frame view is also captured of the page load. Finally Google Lighthouse also provides a breakdown of opportunities and guidance to promote faster page load speeds.
Gzip
Gzip is a single file / stream lossless data compression method originally created by Jean-loup Gailly and Mark Adler as a free replacement for the Compress program used in early Unix systems. Gzip is commonly used as a compression format for JavaScript and CSS files to help promote faster page load times. Files compressed utilising Gzip commonly have the file extension .gz.
HTTP2
A notable revision of the original HTTP network protocol. HTTP2 builds on the success of SPDY, as a result many of the aims of objectives of SPDY are accomplished by HTTP2. One notable update is the removal of the requirement for a HTTPS connection. However all browsers have decided to only implement HTTP2 for HTTPS connections. HTTP2 aims to deliver the following improvements over HTTP:
- Single Connection
- Multiplexing
- Server Push
- Prioritisation
- Binary
- Header Compression
Image sprites
An image sprite is a series of individual images combined into a single image. If a web page contains a high number of images then it can notably increase page load times. This is due to both the file size of individual images and the requirement for a seperate server request for each image. Utilising image sprites reduces the number of server requests which ultimatley saves bandwidth. It’s important to note the popularity of image sprites has decreased significantly in recent years. This is due to the inherent inflexibility of images sprites and the growing adoption of HTTP2 which can support multiplexing enabling server requests to occur simultaneously.
Inlining CSS
Inline CSS refers to CSS found in a HTML file, as opposed to within a dedicated external CSS file. Inlined CSS typically reduces the delay which is experienced while a browser downloads a separate CSS file. Inlining CSS techniques should primarily be utilised to load primary above the fold content in order to help reduce FMP timings.
Largest Contentful Paint (LCP)
The metric LCP is a user centric loading performance metric. It reports the render time of the largest image or text block visible within the viewport. The aim of LCP is to help measure perceived load speed as it marks the point in a page load timeline when the page’s main content has ‘likely’ loaded. In order to provide a good user experience Google states that LCP should occur within 2.5 seconds of when a webpage first starts to load.
Lazy loading
Lazy loading is a method that defers the loading of non-critical resources when a page initially loads. Where lazy loading is implemented such resources are downloaded at the moment of need, i.e. ahead of the user viewing them on screen. The goal of lazy loading resources is to reduce initial page load times, initial page weight and system resource usage.
Its key to note, from version 75 on wards the Chrome browser now features lazy loading functionality by default.
Minification
Refers to a method of removing unnecessary / redundant data without directly impacting how a resource is processed by a browser. The ultimate aim of reducing such data being to promote faster page load times. Common examples of removed data include code comments, formatting, substitution of long overly long variable names and general removal of unused code.
Multiplexing
Allows for multiple requests to be established on the same connection. HTTP/1.1 allows for only a single connection requiring each transfer to complete prior to initiating the next. In contrast HTTP2 allows for multiple requests to be established, promoting faster page load times.
Page load time
Is the measure for how long a specific web page takes to load in its entirety. This includes the downloading of all files including HTML, images, scripts etc.
Preconnect
Setting up aserver connection typically takes several hundred milliseconds. While it only takes a small amount of time, setting it up in advance within the background ensures you’ll save that time when loading resources from a specified domain. The following syntax informs the browser to preconnect to a domain: <link rel=”preconnect”>.
Prefetch
Similar to preload, prefetch focuses on fetching a resource and caching it but with a lower priority. This lower priority is due to the fact that the resource will only be required for future navigation to subsequent pages. Again as with preload, resources are downloaded but not executed / applied etc. The following syntax informs the browser to prefetch a resource: <link rel=”prefetch”>.
Preload
Informs the browser to download and cache a resource such as a JavaScript file CSS file as soon as possible. It’s key to note the browser doesn’t do anything with the resource after downloading it, i.e. JavaScript files are not executed but simply cached. Preload is different from prefetch in that it focuses on fetching a resource for the current navigation, rather than the next step of the navigation. The following syntax informs the browser to preload a resource: <link rel=”preload”>.
Prerender
Prerender asks the browser to load a URL and render it in a new essentially invisible tab. As a result when a user clicks on a link to that URL it is subsequently rendered immediately. Its important to note browser support for prerender currently remains limited. The following syntax informs the browser to preload a resource: <link rel=”prerender”>.
Redirection time
A measure of the total time spent in redirection before a page is fetched.
Render blocking
Render blocking resources most commonly consist of JavaScript and CSS files located in the head of a web page. Such resources load in above in the fold content area, which is visible prior to the user scrolling. As such a result they must load in their entirety before above the fold content is fully visible.
Server connection time
A measure of the time needed for a user to connect to the web server.
Server response time
The total time required for a web server to respond to a user’s request. This time includes the network time from the user’s location to your server.
Speed index
A commonly referred to page load performance metric which shows how quickly page content is visibly populated. Speed index is reported in milliseconds and dependent on size of the view port.
SPDY
Pronounced “speedy”, SPDY is a now retired open-specification networking protocol developed primarily at Google to help optimise the transport web content. The goal of SPDY was to reduce web page load latency and improve web security. Improved page load times were achieved via compression, multiplexing, and prioritisation.
Tree shaking
Commonly JavaScript files contain unused code due to the bundling of scripts. Tree shaking can significantly reduce the size of a JavaScript file due to the elimination of unused code. The less code which a file contains, the smaller the file size and ultimately the less time required to complete the download.
Time to first byte (TTFB)
A measurement of the duration from the user making a HTTP request to the first byte of a page being received by the browser. Time to first byte provides an indication of the responsiveness of a webserver / resource.
Time to first interactive (TTFI)
A measurement of how long it takes for a page to become interactive for a user. Crucually a page is typically defined as being interactive when it displays useful content, event handlers are registered for most visible page elements and finally the page responds to user interactions within 50 milliseconds
Website response time
Refers to how long it takes for a web server to connect and send initial data packets to a browser.
