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

Frontend Performance Checklist for Drupal websites
1. Checklist
- 1.1 HTML
- 1.2 Images
- 1.3 CSS
- 1.4 JS
- 1.5 Assets
- 1.6 Fonts
- 1.7 PWA
- 1.8 Network
- 1.9 Server
2. Drupal modules
3. Tools
4. Guides & Resources
5. Similar projects
6. Licence

Table of contents generated with markdown-toc

1. Checklist

1.1 HTML

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

<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)">

Investigate using functional css instead of custom styles (eg Tailwind, Tachyons etc. See more at https://css-tricks.com/need-css-utility-library)
If you are able to run (automated) builds do not include compiled css or js in your vcs code but only their sources

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

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

Test site with Network Throttling. See a list of common Network speed

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

https://github.com/imagemin/imagemin-webp

JPEG

PNG

SVG

GIF

https://github.com/kohler/gifsicle

General

https://github.com/ravgeetdhillon/create-optimize-images (bash wrapper)
https://github.com/libvips/libvips
https://github.com/imagemin/imagemin
https://github.com/imagemin/imagemin-cli
https://github.com/lovell/sharp
https://github.com/google/zopfli
https://github.com/charlyie/resmushit-cli
https://github.com/psliwa/image-optimizer (PHP library)
https://github.com/avalanche123/Imagine (PHP library)
https://glide.thephpleague.com (PHP library)
http://image.intervention.io (PHP library)
https://github.com/joedicastro/img4web (Python script)
https://fengyuanchen.github.io/compressorjs (JS library)

3.10 Image optimization - Offline GUI

3.11 Minify CSS/JS

3.12 CDN with free tiers

https://anyone.cdn.biz.id
https://jetpack.com/pricing
https://www.cloudflare.com/plans
https://shift8cdn.com
https://www.coralcdn.org
https://cloudinary.com
https://github.com/thumbor/thumbor (OS, self-hosted)

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

https://frontendchecklist.io
https://github.com/thedaviddias/Front-End-Performance-Checklist
https://web.dev/fast
https://www.taskade.com/v/H1XaaoP0Ab
https://jonyablonski.com/designers-wpo-checklist
https://github.com/TerribleDev/WebPerformanceChecklist
https://docs.google.com/spreadsheets/d/1PQTsn_A24CCSXtp8NcXg3ciL6IVa9LVJ_fG_e9oEH_0

6. Licence

MIT

License

theodorosploumis/drupal-frontend-performance

ErrorLooks like something went wrong!

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks

Error
Looks like something went wrong!