Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?

Background info for Chrome team’s Loading survey (present)

  • HTTP/2 Push: allows a web server to send resources to the browser before they are explicitly requested.
  • Brotli compression: offers higher compression ratios (avg ~25%) over gzip with comparable decompression speed.
  • link rel=preload: allows developers to instruct the browser to proactively load specific resources that will be needed by the page without delaying the onload event.
  • link rel=preconnect: allows developers to instruct the browser to proactively establish a connection to a specific origin that will be used later to fetch additional resources.
  • Service Worker: a script that your browser runs in the background to handle features like network requests interception and handling, push notifications, or background sync.
  • Navigation Preload in Service Worker: an API for Service Worker designed to offset the service worker startup latency through parallelization. Developers can use this API to send the initial network request in parallel with starting up the service worker.
  • Streams API: allows JavaScript to programmatically access streams of data received over the network and process them as desired by the developer.
  • Fetch API: provides an interface for fetching resources (including across the network). It will seem familiar to anyone who has used XMLHttpRequest, but the new API provides a more powerful and flexible feature set.
  • ES6 Modules: native support for JavaScript modules via the <script type="module"> element with the following advantages: fetch granular dependencies in parallel, take advantage of caching, avoid duplications across the page and ensure that script executes in the correct order.
  • CSS font-display: allows developers to decide how their web fonts will render (or fallback), depending on how long it takes for them to load.
  • CSS Font Loading API: provides events and interfaces for dynamically loading font resources.
  • Web Workers: a simple means for web content to run scripts in background threads.
  • Minify css/js: refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.
  • Image optimization chain (automated): ensure that your images are automatically optimized for a given device (e.g. best compression, appropriate size and resolution, best format, etc.)
  • Lazy loading (i.e. IntersectionObserver to load images reaching the viewport): only load what’s needed at the moment, dynamically load additional resources as they become needed or when the browser is idle.
  • Code splitting / Tree shaking in bundlers (e.g. webpack): Code splitting is the act of splitting your code into various bundles so that they can be loaded on demand or in parallel more efficiently (i.e. smaller bundles). Tree shaking is a term commonly used in the Javascript context for dead-code elimination.

See the survey.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment