Checklist: performance #

This page is for designers who review a design's speed. Measure signed out, on the front page, an article and a list, once right after clearing caches and once again.

Contents #

1. Browser side
2. Server side
3. Numbers to record

Browser side #

• To do: One stylesheet request from the design (packed) (The packer).
• To do: At most two script requests; non-critical scripts deferred (Loading JavaScript).
• To do: No render-blocking script in the head except a tiny pre-paint guard.
• To do: Fonts self-hosted, font-display: swap, few weights (Fonts in a design).
• To do: Images in aliases near the displayed size, srcset where sizes vary (Image performance).
• To do: Images below the first screen lazy; the main image not lazy.
• To do: Width and height on images and embeds; CLS at most 0.05 (Measuring CLS and LCP).
• To do: No third-party request before consent (External resources and CDNs).
• To do: Page-specific CSS and JS required only by the templates that need them.

Server side #

• To do: Full views are view-cached; nothing user-specific in them (Caching for designers).
• To do: Menus and footers in cache-blocks with correct, small keys.
• To do: Every list fetch has a limit; no fetch inside a foreach (Fetch performance).
• To do: The current node fetched once in the pagelayout, reused by the parts.
• To do: The debug output (on a test siteaccess) shows a reasonable number of database queries for the page.

Numbers to record #

Record them at launch; compare after every design release.

Related pages #

• Theme performance
• Checklist: theme launch
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.