thedaviddias / Front-End-Performance-Checklist

🎮 Front-End Performance Checklist The only Front-End Performance Checklist that runs faster than the others! Performance is a huge subject, but it's not always a "back-end" or an "admin" topic: it's a Front-End responsibility too. The Front-End Performance Checklist is an exhaustive list of elements you should check or at least be aware of, as a Front-End developer and apply to your project (personal and professional). > One simple rule: "Design and code with performance in mind" **Other Checklists:** • 🗂 Front-End Checklist • 💎 Front-End Design Checklist > [!TIP] > ⭐️ I've recently launched UX Patterns for Devs and a curated list for indie developers, feel free to check it out! ⭐️ 📚 Table of Contents • How to use? • HTML • CSS • Fonts • Images • JavaScript • Performance Tools • References How to use? For each rule, you will have a paragraph explaining _why_ this rule is important and _how_ you can fix it. For more deep information, you should find links that will point to 🛠 tools, 📖 articles or 📹 medias that can complete the checklist. All items in the **Front-End Performance Checklist** are essentials to achieve the highest performance score but you would find an indicator to help you to eventually prioritised some rules amount others. There are 3 levels of priority: • ![Low][low] means that the item has a **low** priority. • ![Medium][medium] means that the item has a **medium** priority. You shouldn't avoid tackling that item. • ![High][high] means that the item has a **high** priority. You can't avoid following that rule and implement the corrections recommended. Performance tools List of the tools you can use to test or monitor your website or application: • 🛠 WebPagetest - Website Performance and Optimization Test • 🛠 ☆ Dareboost: Website Speed Test and Website Analysis (use the coupon WPCDD20 for -20%) • 🛠 Treo: Page Speed Monitoring • 🛠 GTmetrix | Website Speed and Performance Optimization • 🛠 PageSpeed Insights • 🛠 Web.dev • 🛠 Pingdom Website Speed Test • 📖 Make the Web Faster | Google Developers • 🛠 Sitespeed.io - Welcome to the wonderful world of Web Performance • 🛠 Calibre • 🛠 Website Speed Test | Check Web Performance » Dotcom-Tools • 🛠 Website and Server Uptime Monitoring - Pingdom (Free Signup Link) • 🛠 Uptime Robot • 🛠 SpeedCurve: Monitor front-end performance • 🛠 PWMetrics - CLI tool and lib to gather performance metrics • 🛠 Lighthouse - Google • 🛠 Checkbot browser extension - Checks for web performance best practices • 🛠 Yellow Lab Tools | Online test to help speeding up heavy web pages • 🛠 Speedrank - Web Performance Monitoring • 🛠 DebugBear - Monitor website performance and Lighthouse scores • 🛠 Gravity CI - Check your build artifacts sizes on every pull request. • 🛠 Exthouse - Analyze the impact of a browser extension on web performance • 🛠 LogRocket - Measure front-end performance in production apps References • 📖 The Cost Of JavaScript • AddyOsmani.com - Start Performance Budgeting • 📖 Get Started With Analyzing Runtime Performance  |  Google Developers • 📖 State of the Web | 2018_01_01 • 📖 Page Weight Doesn't Matter • 📖 [Front-End Performance Checklist 2021 [PDF, Apple Pages, MS Word]](https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/) • 📖 [Designing for Performance Weighing Aesthetics and Speed - By Lara Callender Hogan [eBook, Print]](http://designingforperformance.com/index.html) • 📖 fabkrum/web-performance-resources: Up to date collection of valuable web performance resources • 📖 Checkbot - Web Speed Best Practices • 🛠 Progressive Tooling - A list of community-built, third-party tools that can be used to improve page performance HTML ![html] • [ ] **Minified HTML:** ![medium] The HTML code is minified, comments, white spaces and new lines are removed from production files. _Why:_ > Removing all unnecessary spaces, comments and attributes will reduce the size of your HTML and speed up your site's page load times and obviously lighten the download for your user. _How:_ > Most of the frameworks have plugins to facilitate the minification of the webpages. You can use a bunch of NPM modules that can do the job for you automatically. • 🛠 HTML minifier | Minify Code • 🛠 Online HTML Compressor • 📖 Experimenting with HTML minifier — Perfection Kills • [ ] **Place CSS tags always before JavaScript tags:** ![high] Ensure that your CSS is always loaded before having JavaScript code. _Why:_ > Having your CSS tags before any JavaScript enables better, parallel download which speed up browser rendering time. _How:_ > ⁃ Ensure that and in your are always before your . • [ ] **Minimize the number of iframes:** ![high] Use iframes only if you don't have any other technical possibility. Try to avoid iframes as much as you can. • [ ] **Pre-load optimization with prefetch, dns-prefetch and prerender:** ![low] Popular browsers can use directive on tag and "rel" attribute with certain keywords to pre-load specific URLs. _Why:_ > Prefetching allows a browser to silently fetch the necessary resources needed to display content that a user might access in the near future. The browser is able to store these resources in its cache and speed up the way web pages load when they are using different domains for page resources. When a web page has finished loading and the idle time has passed, the browser begins downloading other resources. When a user go in a particular link (already prefetched), the content will be instantly served. _How:_ > ⁃ Ensure that is in your section. • 📖 What Is Prefetching and Why Use It • 📖 Prefetching, preloading, prebrowsing • 📖 What is Preload, Prefetch, and Preconnect **⬆ back to top** CSS ![css] • [ ] **Minification:** ![high] All CSS files are minified, comments, white spaces and new lines are removed from production files. _Why:_ > When CSS files are minified, the content is loaded faster and less data is sent to the client.…