Chrome User Experience Report (CrUX)
A public data set released by Google Developers to demonstrate how real Chrome users experience websites “in the wild”. You can access this data set from https://developers.google.com/web/tools/chrome-user-experience-report/.
Client-side Rendering (CSR)
A method of reducing the overall size of a file. This can be through various methods which broadly speaking either reduces the file contents and then uses GZIP compression for transport.
Content Delivery Network (CDN)
A usually global network of server clusters which can host and distribute your website pages and/or assets to users at a faster speed than your own server. Also comes with additional benefits such as security, and sometimes denial of service protection.
Content Management System (CMS)
An interactive dynamic web application allowing simple interaction with a database to create, update and delete objects and entitles, such as pages, blog posts, products and more. Research “WordPress” if this is new to you.
Cross-origin Resource Sharing (CORS)
An HTTP protocol via additional HTTP headers that tells browsers to give a web application access to selected resources from a different/external origin.
Very similar to a Headless CMS but a more literal interpretation of the decoupling of the application from the CMS application entirely.
Document Object Model (DOM)
An API for programming HTML and XML documents. The DOM describes the logical structure of the nested nodes in a document and defines how the document can be accessed and modified.
Switching content serving at the server/edge-level based on user-agent strings, to ensure bots receive rendered HTML not empty SPA containers.
ECMAScript 6, ES6, ECMA Script 2015
First Contentful Paint (FCP)
The point when the browser renders the first bit of content from the DOM, which may be any visible element.
First Meaningful Paint (FMP)
As described by Google Developers, First meaningful paint (FMP) is the metric that answers the question: “is it useful?”. This varies from site to site, but is the point in time that the browser renders useful content for the user from the DOM.
A headless CMS is a content management system that is front-end agnostic, that means you can “bring your own” Single Page Application to render the content from the CMS via APIs.
Hydration involves the process where a framework, such as Vue.js, obtains data from the server which is then populated in the browser’s interactive DOM. Hydration can be performed server-side under server side rendered setups. Rehydration happens where previously hydrated content served as static HTML from the server is then picked up and enhanced by a SPA to become interactive once more.
A collection of useful code which provides functions to be called by the application code.
A file standard consisting of key-value data pairs. Can be used to transmit arrays, strings, and serializable objects between systems. Due to popularity and portability, it also often replaces the XML file format in JSON communications.
A performance optimisation practises which focuses on load order, file efficiency and compression (amongst others) which aims to make a web application/website render and paint faster in a web browser.
Markdown is a popular and easy to access markup language most typically used for writing developer documentation. Its simple syntax also lends itself to managing static websites through being a static data source.
The procedure of removing any irrelevant spaces, comments and characters to save on the overall loading time caused by file size. This can be achieved through command line build tools or popular CMS plugins.
Multi Page Application (MPA)
A description of a traditional website that has multiple singular page loads. The opposite of a SPA, whereby each individual page visit causes a browser load event.
Using a web service to produce HTML snapshots of website pages in advance in order to serve to Bot requests.
Progressive Web Application (PWA)
A PWA is a website application that effectively uses modern website capabilities to pass over an app-like experience to the users. The high-quality PWA should deliver a reliable, fast and engaging experience that benefits the end user. Features of PWAs include offline browsing, push notifications and background syncing and updates.
The process of a web browser fetching data within a website’s code and turning this into an output of a viewable page.
Render Blocking Source
A performance optimisation practise which focuses on server-side technology to produce static HTML and optimised application code to serve to users and internet bots.
Server-side Rendering (SSR)
Single Page Application (SPA)
Static Site Generation
This describes a type of website that is stored on the server as static HTML files, with no server-side processing. It can be built from a JAMStack web application but is stored in it’s “built” form. Once compiled into static files, these are usually then published to the server or content delivery network.
Time to First Byte (TTFB)
TTFB is the length of time taken for your browser to receive the first byte of the initial response from your website’s server. You can test this with the WebPageTest tool that will deliver granular performance results https://www.webpagetest.org/.
Time to Interactive (TTI)
TTI measures the time until a page is fully rendered for a user and responding to a user. Even once a page is fully or partially painted in a browser, if tasks are executing it may not be reliably responsive for users until this is completed. Code improvements will improve this.
The process of sending an application that has been fully rendered within the primary payload to the browser.
Web Rendering Service (WRS)