Glossary

A

Accelerated Mobile Pages
(AMP)

Accelerated Mobile Pages are web pages that load very quickly. AMP pages are built with three core components: AMP HTML, AMP JS, and the AMP Cache. AMP HTML is HTML with some restrictions for reliable performance. AMP JS is a library that ensures the fast rendering of AMP HTML pages. The AMP Cache is a proxy-based content delivery network used to serve cached AMP HTML pages.

add to home screen
(A2HS)

Add to home screen is a method where Progressive Web App developers can implement web app install banners to help users quickly and easily (with one touch) add web apps to their Android mobile device’s home screen, making it easy to launch and return to an app.

application shell

An application shell (or app shell) architecture is one way to build a Progressive Web App that reliably and instantly loads on your users' screens, similar to what you see in native applications. The app shell is the minimal HTML, CSS and JavaScript required to power the user interface and when cached offline can ensure instant, reliably good performance to users on repeat visits.

C

content delivery network
(CDN)

A CDN is a network of geographically distributed servers that cooperate to satisfy requests for content. CDNs optimize content delivery by distributing copies of files (such as videos, images, HTML, CSS and JavaScript) to multiple servers. This reduces latency by placing the content closer to the requestor. For example, if a user in India requests a web page from a Brazilian website, the request could be rerouted to deliver assets served from a local CDN server in Mumbai.

F

Fast, Integrated, Reliable, Engaging
(FIRE)

fetch API

The fetch API is a promise-based JavaScript interface for requesting resources and reading responses. It provides a global fetch() method that gives an easy, logical way to fetch resources asynchronously across the network. Fetch is a successor to the older XMLHttpRequest.

First Contentful Paint
(FCP)

Defined by the Paint Timing API and available in Chrome M60+:

First Contentful Paint reports the time when the browser first rendered any text, image (including background images), non-white canvas or SVG. This includes text with pending webfonts. This is the first time users could start consuming page content.

First Meaningful Paint
(FMP)

First Paint
(FP)

Defined by the Paint Timing API and available in Chrome M60+:

First Paint reports the time when the browser first rendered after navigation. This excludes the default background paint, but includes non-default background paint. This is the first key moment developers care about in page load – when the browser has started to render the page.

First, Last, Invert, Play
(FLIP)

FLIP is a technique to set up high-performance animations using CSS transforms. To avoid janking animations, start and end position are evaluated during the setup so that the animation doesn't have to do any expensive calculations.

flexbox

The Flexible Box Layout Module (Flexbox) is an API that provides tools to make web content responsive. Flexbox provides an efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown and/or dynamic. The API allows the rapid creation of complex, flexible layouts, and features that have historically proved difficult with CSS.

H

Hypertext Transfer Protocol Secure
(HTTPS)

HTTPS is a protocol in which the connection between the server and client is encrypted, helping to protect users' information and prevent tampering. APIs such as the Service Worker, Google Maps API, and File API must be served over HTTPS. HTTPS is implemented using the Transport Layer Security (TLS) protocol. Although TLS supersedes Secure Sockets Layer (SSL), it is often referred to as SSL.

Lighthouse

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

M

mutation observer

Mutation Observers are a web platform API to detect and react to change to the DOM tree. If an element is observed by a MutationObserver, events like appending a new element or removing and existing one will trigger a function to execute.

P

Progressive Web App
(PWA)

promise

A JavaScript promise is an object that is used as a placeholder for the eventual results of a deferred (and possibly asynchronous) computation. JavaScript promises are an addition to ECMAScript 6 that provide a cleaner, more intuitive way to deal with the completion (or failure) of asynchronous tasks.

Response, Animation, Idle, Load
(RAIL)

responsive design

Responsive web design is an approach to web design aimed at making web pages visually appealing and performant on any form factor. In addition, it is important to understand that responsive web design tasks include offering the same content to a variety of devices for a single website.

S

Service Worker

Service workers essentially act as proxy servers that sit between web applications, and the browser and network (when available). They are intended to (amongst other things) enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available and updated assets reside on the server. They also allow access to push notifications and background sync APIs.

shadow DOM

single page app
(SPA)

A single page app is user-friendly app that performs more like a desktop app. Typically, SPA content is rendered dynamically using JavaScript, rather than opening a new page. As a result, single-page applications typically load only data (e.g. in JSON or XML format) rather than pre-rendered HTML. This decreases the data transferred on the wire.

splash screen

A splash screen is a graphic that is shown to users while an application is loading in the background, giving immediate feedback to the user while the application is launching.

T

Time To First Byte
(TTFB)

Time To First Paint
(TTFP)

Time To Interactive
(TTI)

W

web app manifest

A web app manifest is a JSON-formatted file named manifest.json that is a centralized place to put metadata that controls how the web application appears to the user and how it can be launched. (Do not confuse this with a manifest file used by AppCache.) Some browsers, such as Chrome, use the web app manifest to enable 'add to homescreen'.

web components

Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Custom components and widgets build on the Web Component standards, will work across modern browsers, and can be used with any JavaScript library or framework that works with HTML.