Skip to content

Latest commit

 

History

History
434 lines (348 loc) · 16.4 KB

checklist-frontend-performance.md

File metadata and controls

434 lines (348 loc) · 16.4 KB
Raw

Frontend Performance Checklist for Drupal websites

A checklist & guide to make sure you (Drupal 8.x+) website will be fast! Made for Drupal frontend developers and site builders.

Table of Contents

Table of contents generated with markdown-toc

1. Checklist

1.1 HTML

  • Core theme Classy is your friend. Most of the times you could use this a the base theme and its templates to make overrides.
  • Mobile first design except if there is no need
  • Critical link (aka css) tags are in head
  • Less critical link tags are end of body
  • Less critical link tags lazy load
    • <link rel="preload" as="style" onload="this.rel='stylesheet'" id='dashicons-css' >
  • JS loads with the async property
    • <script async src="https://hi.js"></script>
    • or defer when scripts need to be loaded in order, or require the DOMContentLoaded Event
  • Keep DOM simple and small (Maximum DOM Depth < 32 HTML Nodes, Total HTML Nodes by page < 800, Childs of a parent < 60). See https://web.dev/dom-size.
  • Create custom and simple 404, 403 error pages using twig template suggestions

1.2 Images

  • Always use next gen formats
    • webp -> chrome/firefox (Also use https://modernizr.com to inspect WebP support)
    • jpeg xr -> ie11/edge
    • jpeg 2000 -> safari
  • Use jpg for photography, not png
  • Size images properly
  • Use srcsets for multiple image sizes
  • Use the <picture> element to let the browser select the right image for a scenario
  • Lazy load images below the fold (see 1, 2)

1.3 CSS

  • Avoid using !important
  • Use svg instead of icon fonts like fontawesome
  • Create svg sprites (or png sprites if svg are not available)
  • Do not support olb browsers (remove too old prefixes)
  • Avoid expensive selectors when possible
    • border-radius
    • box-shadow
    • transform
    • filter
    • :nth-child
    • position: fixed;
    • Partial matching: [class^="wrap"]
  • Don't use universal selectors
    • Avoid universal selectors like *, [disabled], [type=“text”], etc. They are very expensive for the browser to match, as every element in the DOM must be checked.
  • Avoid deeply nested dependent selectors
    • The descendant selector is very costly, as the browser must check for a match with every descendant element. On a complex web page, this can result in thousands and thousands (perhaps even more) of descendant selector searches.
  • Use media queries to load files based on use case
<link href="style.css" rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css" rel="stylesheet" media="print">
<link href="desktop.css" rel="stylesheet" media="(min-width: 720px)">

1.4 JS

  • Bundles should always be minified
  • Bundles should have 0 comments, and all license text extracted to a separate file
  • Use Google Tag Manager for 3rd party scripts like Google Analytics, FB Pixel etc
  • Move js on bottom of the html page

1.5 Assets

  • All assets should be fingerprinted
  • All assets should have Cache-Control: max-age=365000000, immutable as a header
  • Assets should be served over http/2
  • Assets should only be served on a cookieless domain
  • All files should be cached by a CDN
  • Support Brotli compression if able
    • 15-30% smaller than gzip
  • Compress with gzip, or zopfli as a fallback to brotli
  • Do not ship unused css, js
  • Try to clone external js/css to local server and load them from there (eg Google Analytics script)

1.6 Fonts

  • Fonts should always load woff2 first
  • woff for fallback
  • Use font-display: swap; to allow the browser to use a fallback font while custom font files are being downloaded.
  • eot or truetype is only needed for IE < 10

1.7 PWA

  • Use a service worker to cache assets
  • Use a service worker to prefetch pages users will most likely navigate to next
  • Support offline, and spotty networks
  • Make sure that the tracking or other third party js/css files (eg Google Analytics etc) are not included on the PWA

1.8 Network

1.9 Server

  • Prefer Nginx over Apache2 (at least as a proxy)

2. Drupal modules

2.1 Development related

2.2 Caching related

2.3 Image optimizations

2.4 Other

3. Tools

3.1 Performance scoring - Online

3.2 Performance scoring - Offline (local installed)

3.3 Sprite Generators

3.4 Unused CSS - Online

3.5 Unused CSS - Offline

3.6 Critical CSS/AboveTheFold CSS - Online

3.7 Critical CSS/AboveTheFold CSS - Offline

3.8 Image optimization - Online

3.9 Image optimization - Offline CLI

WebP

JPEG

PNG

SVG

GIF

General

3.10 Image optimization - Offline GUI

3.11 Minify CSS/JS

3.12 CDN with free tiers

See also https://speedvitals.com/cdn-performance-tracker.

3.13 Other tools

4. Guides & Resources

4.1 Collections of tools, posts etc

4.2 Image Optimization

4.3 Drupal related articles

5. Similar projects