Front-End-Performance-Checklist

<h1 align="center"> <br> <a href="https://github.com/thedaviddias/Front-End-Performance-Checklist"><img src="https://raw.githubusercontent.com/thedaviddias/Front-End-Performance-Checklist/master/images/logo-front-end-performance-checklist.jpg" alt="Front-End Performance Checklist" width="170"></a> <br> <br> Front-End Performance Checklist <br> </h1>

<h3 align="center">🚨 Currently working on new version of frontendchecklist.io <br>(that will include the current performance).<br>Feel free to <a href="https://github.com/thedaviddias/Front-End-Checklist/discussions/513">discuss</a> any feature you would like to see. Thanks for your support!</h3>

<h4 align="center">🎮 The only Front-End Performance Checklist that runs faster than the others.</h4> <p align="center">One simple rule: "Design and code with performance in mind"</p> <p align="center"> <a href="http://makeapullrequest.com"> <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" alt="PRs Welcome"> </a> <a href="https://discord.gg/btHQRkm"> <img src="https://img.shields.io/badge/chat-on_discord-4837E2.svg?style=flat-square" alt="Discord"> </a> <a href="https://opensource.org/licenses/MIT"> <img src="https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square" alt="Licence MIT"> </a> </p> <p align="center"> <a href="#how-to-use">How To Use</a> • <a href="#contributing">Contributing</a> • <a href="https://www.producthunt.com/posts/front-end-performance-checklist">Product Hunt</a> </p> <p align="center"> <a href="https://github.com/JohnsenZhou/Front-End-Performance-Checklist">🇨🇳</a> <a href="https://github.com/WilliamDASILVA/Front-End-Performance-Checklist">🇫🇷</a> <a href="https://github.com/ParkSB/Front-End-Performance-Checklist">🇰🇷</a> <a href="https://github.com/fernandofawkes/Front-End-Performance-Checklist">🇵🇹</a> <a href="https://github.com/lex111/Front-End-Performance-Checklist">🇷🇺</a> <a href="https://github.com/GameWith/Front-End-Performance-Checklist">🇯🇵</a> <a href="https://github.com/ms-fadaei/Front-End-Performance-Checklist">🇮🇷</a> </p> <p align="center"> <span>Other Checklists:</span> <br> 🗂 <a href="https://github.com/thedaviddias/Front-End-Checklist#---------front-end-checklist-">Front-End Checklist</a> • 💎 <a href="https://github.com/thedaviddias/Front-End-Design-Checklist#front-end-design-checklist">Front-End Design Checklist</a> </p>

Introduction

Performance is a huge subject, but it's not always a "back-end" or an "admin" subject: 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).

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
🛠 Varvy - Page speed optimization
🛠 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
🛠 packtracker.io - Check your webpack bundle size on every pull request.
🛠 Exthouse - Analyze the impact of a browser extension on web performance
🛠 LogRocket - Measure front-end performance in production apps

References

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.
```

<script src="jquery.js"></script>
<script src="foo.js"></script>
<link rel="stylesheet" href="foo.css"/>


<link rel="stylesheet" href="foo.css"/>
<script src="jquery.js"></script>
<script src="foo.js"></script>
```
Why:

Having your CSS tags before any JavaScript enables better, parallel download which speed up browser rendering time.

How:

⁃ Ensure that <link> and <style> in your <head> are always before your <script>.
- 📖 Ordering your styles and scripts for pagespeed
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 <link> 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 <link> is in your <head> section.

⬆ 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. It's important to always minify CSS files in production. It is beneficial for the user as it is for any business who wants to lower bandwidth costs and lower resource usage.

How:

⁃ Use tools to minify your files automatically before or during your build or your deployment.
- 🛠 cssnano: A modular minifier based on the PostCSS ecosystem. - cssnano
- 🛠 CSS Minfier
- 🛠 @neutrinojs/style-minify - npm
- 🛠 Online CSS Compressor
Concatenation: ![medium] CSS files are concatenated in a single file (Not always valid for HTTP/2).
```

<link rel="stylesheet" href="foo.css"/>
<link rel="stylesheet" href="bar.css"/>


<link rel="stylesheet" href="foobar.css"/>
```
Why:

If you are still using HTTP/1, you may need to still concatenate your files, it's less true if your server use HTTP/2 (tests should be made).

How:

⁃ Use online tool or any plugin before or during your build or your deployment to concatenate your files. <br> ⁃ Ensure, of course, that concatenation does not break your project.
- 📖 HTTP: Optimizing Application Delivery - High Performance Browser Networking (O'Reilly)
- 📖 Performance Best Practices in the HTTP/2 Era
Non-blocking: ![high] CSS files need to be non-blocking to prevent the DOM from taking time to load.
```
<link rel="preload" href="global.min.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="global.min.css"></noscript>
```
Why:

CSS files can block the page load and delay the rendering of your page. Using preload can actually load the CSS files before the browser starts showing the content of the page.

How:

⁃ You need to add the rel attribute with the preload value and add as="style" on the <link> element.
Unused CSS: ![medium] Remove unused CSS selectors.

Why:

Removing unused CSS selectors can reduce the size of your files and then speed up the load of your assets.

How:

⁃ ⚠️ Always check if the framework CSS you want to use don't already has a reset / normalize code included. Sometimes you may not need everything that is inside your reset / normalize file.
- 🛠 UnCSS Online
- 🛠 PurifyCSS
- 🛠 PurgeCSS
- 🛠 Chrome DevTools Coverage

CSS Critical: ![high] The CSS critical (or "above the fold") collects all the CSS used to render the visible portion of the page. It is embedded before your principal CSS call and between <style></style> in a single line (minified if possible).

Why:

Inlining critical CSS help to speed up the rendering of the web pages reducing the number of requests to the server.

How:

Generate the CSS critical with online tools or using a plugin like the one that Addy Osmani developed.
- 📖 Understanding Critical CSS
- 🛠 Critical by Addy Osmani on GitHub automates this.
- 📖 Inlining critical CSS for better web performance | Go Make Things
- 🛠 Critical Path CSS Generator - Prioritize above the fold content :: SiteLocity
- 📖 Reduce the size of the above-the-fold content