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.
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.
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
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.
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)
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.
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
- Server Push
- Header Compression
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.
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 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.
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.
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.
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”>.
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”>.
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”>.
A measure of the total time spent in redirection before a page is fetched.
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.
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.
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.
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.