thedaviddias/front-end-performance-checklist

★ 17,289Audience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((front-end-performance-checklist))
    What it does
      Performance checklist
      Priority labels
      Tool recommendations
    Topics Covered
      HTML and CSS
      Fonts and images
      JavaScript
      Measurement tools
    Use Cases
      Pre-launch audit
      Page speed review
      Team alignment
    Audience
      Frontend devs
      Product managers
      Designers

mindmap root((front-end-performance-checklist)) What it does Performance checklist Priority labels Tool recommendations Topics Covered HTML and CSS Fonts and images JavaScript Measurement tools Use Cases Pre-launch audit Page speed review Team alignment Audience Frontend devs Product managers Designers

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Audit a website's front-end performance item by item before launch using the prioritised High/Medium/Low checklist

USE CASE 2

Find specific JavaScript optimisation steps to reduce page load time and Time to Interactive

USE CASE 3

Review font and image loading strategies to cut page weight without changing the visual design

USE CASE 4

Share a structured performance vocabulary between developers, designers, and product managers on a team

Tech stack

HTMLCSSJavaScript

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

The Front-End Performance Checklist is a community-maintained reference document, not a piece of software. It is an organised list of concrete things a front-end developer can check to make sure their website loads and runs fast. The README opens with the rule "Design and code with performance in mind," and the file walks through what that means in practice. The list is grouped into sections, HTML, CSS, Fonts, Images, JavaScript, Performance Tools, and References, and each item explains both why a rule matters and how to fix it, often with links to articles and free tools. Items carry one of three priority labels (Low, Medium, High) so a reader can decide what to tackle first, High items are ones you can't skip. Sample HTML items include minifying the markup, placing CSS link tags before JavaScript script tags so the browser can render in parallel, minimising iframes, and using prefetch, dns-prefetch and prerender hints to pull resources in before the user needs them. The Performance Tools section is a curated list, WebPagetest, GTmetrix, PageSpeed Insights, Lighthouse, Sitespeed.io, SpeedCurve, DebugBear, LogRocket, and more, so you can measure whether the changes helped. Someone would use this if they are building or auditing a website and want one place to read through, item by item, what to verify before shipping or during a performance review. It is aimed at front-end developers but is also useful for product managers and designers who want shared vocabulary with engineering. The repository is a documentation project with no specific programming language, the topics it covers are HTML, CSS, and JavaScript. The full README is longer than what was provided.

Copy-paste prompts

Prompt 1

Using the front-end-performance-checklist, audit my site's HTML and CSS and list all High-priority items I am not yet doing.

Prompt 2

Based on the front-end-performance-checklist image section, rewrite my page's image loading to use modern formats, lazy loading, and correct sizing.

Prompt 3

Apply the font loading recommendations from front-end-performance-checklist to my site so fonts don't block rendering or cause layout shift.

Prompt 4

Using WebPageTest and the front-end-performance-checklist, produce a before-and-after performance report for my landing page targeting a 90+ Lighthouse score.

Open on GitHub → Explain another repo

← thedaviddias on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.