Front-End Performance Checklist

front-end-performance-checklist.
front-end-performance-checklist.

 Front-End Performance Checklist  

https://github.com/thedaviddias/Front-End-Performance-Checklist

🎮 The only Front-End Performance Checklist that runs faster than the others.

One simple rule: “Design and code with performance in mind”

PRs Welcome
Discord
Licence MIT

  How To Use • Contributing • Roadmap • Product Hunt

🇨🇳 🇫🇷 🇰🇷 🇵🇹 🇷🇺 🇯🇵

Other Checklists:
🗂 Front-End Checklist • 💎 Front-End Design Checklist

Table of Contents

  1. HTML
  2. CSS
  3. Fonts
  4. Images
  5. JavaScript
  6. Server (in progress)
  7. JS Frameworks (in progress)

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:

  •  means that the item has a low priority.
  •  means that the item has a medium priority. You shouldn’t avoid tackling that item.
  •  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:

References


HTML

html
  •  Minified HTML:  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.
  •  Place CSS tags always before JavaScript tags:  Ensure that your CSS is always loaded before having JavaScript code.<!– Not recommended –> <script src=”jquery.js”></script> <script src=”foo.js”></script> <link rel=”stylesheet” href=”foo.css”/> <!– Recommended –> <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>.
  •  Minimize the number of iframes:  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:  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
  •  Embedded or inline CSS:  Avoid using embed or inline CSS inside your <body> (Not valid for HTTP/2)Why:One of the first reason it’s because it’s a good practice to separate content from design. It also helps you have a more maintainable code and keep your site accessible. But regarding performance, it’s simply because it decreases the file-size of your HTML pages and the load time.How:Always use external stylesheets or embed CSS in your <head> (and follow the others CSS performance rules)
  •  Analyse stylesheets complexity:  Analyzing your stylesheets can help you to flag issues, redundancies and duplicate CSS selectors.Why:Sometimes you may have redundancies or validation errors in your CSS, analysing your CSS files and removed these complexities can help you to speed up your CSS files (because your browser will read them faster)How:Your CSS should be organized, using a CSS preprocessor can help you with that. Some online tools listed below can also help you analysing and correct your code.

⬆ back to top

Fonts

fonts

⬆ back to top

Images

images

⬆ back to top

JavaScript

javascript
  •  JS Minification:  All JavaScript files are minified, comments, white spaces and new lines are removed from production files (still valid if using HTTP/2).Why:Removing all unnecessary spaces, comments and break will reduce the size of your JavaScript files and speed up your site’s page load times and obviously lighten the download for your user.How:⁃ Use the tools suggested below to minify your files automatically before or during your build or your deployment.
  •  No JavaScript inside:  (Only valid for website) Avoid having multiple JavaScript codes embedded in the middle of your body. Regroup your JavaScript code inside external files or eventually in the <head> or at the end of your page (before </body>).Why:Placing JavaScript embedded code directly in your <body> can slow down your page because it loads while the DOM is being built. The best option is to use external files with async or defer to avoid blocking the DOM. Another option is to place some scripts inside your <head>. Most of the time analytics code or small script that need to load before the DOM gets to main processing.How:Ensure that all your files are loaded using async or defer and decide wisely the code that you will need to inject in your <head>.
  •  Non-blocking JavaScript:  JavaScript files are loaded asynchronously using async or deferred using defer attribute.<!– Defer Attribute –> <script defer src=”foo.js”></script> <!– Async Attribute –> <script async src=”foo.js”></script>Why:JavaScript blocks the normal parsing of the HTML document, so when the parser reaches a <script> tag (particularly is inside the <head>), it stops to fetch and run it. Adding async or defer are highly recommended if your scripts are placed in the top of your page but less valuable if just before your </body> tag. But it’s a good practice to always use these attributes to avoid any performance issue.How:⁃ Add async (if the script don’t rely on other scripts) or defer (if the script relies upon or relied upon by an async script) as an attribute to your script tag.
    ⁃ If you have small scripts, maybe use inline script place above async scripts.
  •  Optimized and updated JS libraries:  All JavaScript libraries used in your project are necessary (prefer Vanilla JavaScript for simple functionalities), updated to their latest version and don’t overwhelm your JavaScript with unnecessary methods.Why:Most of the time, new versions come with optimization and security fix. You should use the most optimized code to speed up your project and ensure that you’ll not slow down your website or app without outdated plugin.How:If your project use NPM packages, npm-check is a pretty interesting library to upgrade / update your libraries. Greenkeeper can automatically look for your dependencies and suggest an update every time a new version is out.

⬆ back to top

Server

server-side
  •  Your website is using HTTPS: Why:HTTPS is not only for ecommerce websites, but for all websites that are exchanging data. Data shared by a user or data shared to an external entity. Modern browsers today limit functionalities for sites that are not secure. For example: geolocation, push notifications and service workers don’t work if your instance is not using HTTPS. And today is much more easy to setup a project with an SSL certificate than it was before (and for free, thanks to Let’s Encrypt).
  •  Serve files from the same protocol:  Avoid having your website serving files coming from source using HTTP on your website which is using HTTPS for example. If your website is using HTTPS, external files should come from the same protocol.
  •  Serve reachable files:  Avoid requesting unreachable files (404).
  • 📖 How to avoid bad requests
  •  Set HTTP cache headers properly:  Set HTTP headers to avoid expensive number of roundtrips between your browser and the server.
  • 📖 Using cache-control for browser caching
  •  GZIP / Brotli compression is enabled:  Use a compression method such as Gzip or Brotli to reduce the size of your JavaScript files. With a smaller sizes file, users will be able to download the asset faster, resulting in improved performance.

⬆ back to top


Performances and JS Frameworks

Angular

React

Vue

Performances and CMS

WordPress

Articles

Plugins recommended


Translations

The Front-End Performance Checklist wants to also be available in other languages! Don’t hesitate to submit your contribution!

Contributing

Open an issue or a pull request to suggest changes or additions.

Support

If you have any question or suggestion, don’t hesitate to use Discord or Twitter:

Author

**Build with ❤️ by David Dias

Contributors

This project exists thanks to all the people who contribute. [Contribute]

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

License

MIT

All icons are provided by Icons8

⬆ back to top

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *