From 454fb5943d85ea88007cab0cd34539bf02b73129 Mon Sep 17 00:00:00 2001 From: David Dias Date: Fri, 20 Jul 2018 10:37:15 -0400 Subject: [PATCH] Initial commit --- .DS_Store | Bin 0 -> 8196 bytes .gitignore | 63 +++ LICENSE | 21 + README.md | 510 ++++++++++++++++++ images/css.png | Bin 0 -> 369 bytes images/fonts.png | Bin 0 -> 572 bytes images/html.png | Bin 0 -> 510 bytes images/images.png | Bin 0 -> 1007 bytes images/javascript.png | Bin 0 -> 995 bytes .../logo-front-end-performance-checklist.jpg | Bin 0 -> 19304 bytes images/server-side.png | Bin 0 -> 644 bytes 11 files changed, 594 insertions(+) create mode 100644 .DS_Store create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 README.md create mode 100644 images/css.png create mode 100644 images/fonts.png create mode 100644 images/html.png create mode 100644 images/images.png create mode 100644 images/javascript.png create mode 100644 images/logo-front-end-performance-checklist.jpg create mode 100644 images/server-side.png diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..8d989688912ad71a1d84a3c216e28f0fc3c091b6 GIT binary patch literal 8196 zcmeHMPiz!b82`Suz?*^6DN@=27B+1vwe-&xfl>mpv?a6_g}8Kfrx>Kf&T*obY}Cy?sD!+Yg9)JL=4=Q4Dk0uoGy;Z5N9QdR|i!h1t8=p zfGE_aJV3<6LrjJ^D^Y~fJ!STQVJL239h_AD`7=!vq*Gwk&_2&rCYDA0!fAV@YY*s?}>4Q<++>o=J^+Q>nlR z@_wh0JI#NcFoN++*zWf{XR&Q$PTAH}THDy=xq)H3R!#)lrbR9z1GZ~=Q=MMkHGOfP zlr%7=FeR;Ro}O+??CxlaH}6Zd%{0ZQ+uIXO@x8nD%*-gPy1wmT@94yZi_@28p1vkm zhT+=*DweJE_2tWS{6d%fOi}Vmahcx~m#L_0^`2g}FRg7T(Cm*-2Daz=r>vY$nAR$M zT5)gIb5G;b{$OC84|r?X_i{m(a7=4j-nX8x z$j>fV-Q?{L+H^barlB&ot}0gh;LgOJ{f~4ll&`PQDmSR=FcISh_LH`iJ2_>W!T6Bj zXD!#X-LZj!?b{j0>UWI^s}h?OWnoiwO}V~V-&!;+4`Esz8_Z|yb9pr4@ry6w7tnp?VZ7S$$W3)=dMaUfMY}3` z^j+$1rkTn~$H-WY>}pp#nAWEZ6eOFnbAx)2DT7&WVuBXwi(wBXb^R`CftJC@ICwpKf^EZEBpq3Aj2xG#v0VI7F)0t6WD?K@cD z_&6TNemsL`aTE<4!$~}cJ_dLRpTpOpMa5+QOi>zlWzv6Cb#>-=&l7bUK(;nHUdI_V=8kJU0#ix&Q@kL_Tj zXRSos>!HS&s+E#-#dD&!w5l;}6{(a7>%+TMRVyPIOY6Q4vaTk<%3G;h)I*A*ffz=u zk15JO5Z_xc2Oq+xFi)cU3ciCM;3xQ<1h)z+NN_rC#TahG9oT@4xD%UkFSdu$JAy~C z7at}0_2VfV#33BUELtSKakMc<;w#`3p2uhKS-ea#yn?Q9VZm&IN{ +ย  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 +ย  +ย  +ย ย ย  Gitter +ย  +ย  ย  +ย ย ย  Licence MIT +ย  +

+ +

+ย  How To Use โ€ข +ย  Contributing +

+ +## Table of Contents + +1. **[HTML](#html)** +2. **[CSS](#css)** +3. **[Fonts](#fonts)** +4. **[Images](#images)** +5. **[JavaScript](#javascript)** +6. **[Content](#content) (in progress)** +7. **[Server](#server) (in progress)** +8. **[JS Frameworks](#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 exhausted 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 importante and *how* you can correct it. For more deep information, you should find links that will point to ๐Ÿ›  tools or ๐Ÿ“– articles that can complete the checklist. + +### Performance tools + +List of the tools you can use to test or monitor your website or application: + + * ๐Ÿ›  [WebPagetest - Website Performance and Optimization Test](https://www.webpagetest.org/) + * ๐Ÿ›  โ˜† [Dareboost: Website Speed Test and Website Analysis](https://www.dareboost.com/) + * ๐Ÿ›  [GTmetrix | Website Speed and Performance Optimization](https://gtmetrix.com/) + * ๐Ÿ›  [PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/) + * ๐Ÿ“– [Make the Web Fasterย | Google Developers](https://developers.google.com/speed/) + * ๐Ÿ“– [Sitespeed.io - Welcome to the wonderful world of Web Performance](https://www.sitespeed.io/) + +### References + + * ๐Ÿ“– [The Cost Of JavaScript - YouTube](https://www.youtube.com/watch?v=_bzqF05xsC4) + * ๐Ÿ“– [Get Started With Analyzing Runtime Performance ย |ย  Google Developers](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/) + * ๐Ÿ“– [State of the Web | 2018_01_01](https://httparchive.org/reports/state-of-the-web?start=2018_01_01) + * ๐Ÿ“– [Page Weight Doesn't Matter](https://www.speedshop.co/2015/11/05/page-weight-doesnt-matter.html) +--- + +## 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 break 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](http://minifycode.com/html-minifier/) + * ๐Ÿ“– [Experimenting with HTML minifier โ€” Perfection Kills](http://perfectionkills.com/experimenting-with-html-minifier/#use_short_doctype) + +- [ ] **Remove unnecessary comments:** Ensure that comments are removed from your pages. + + *Why:* + > Comments are not really useful for the user then should be removed from production files. One case where you want to keep comments could be if you need to keep the origin for a library. + + *How:* + > Most of the time, comments can be removed using an HTML minify plugin. + + * ๐Ÿ›  [remove-html-comments - npm](https://www.npmjs.com/package/remove-html-comments) + +- [ ] **Remove unnecessary attributes:** Type attributes like `type="text/javascript"' or `type="text/css anymore and should be removed. + + ```html + + + + + + ``` + + *Why:* + > Type attributes are not necessary as HTML5 implies text/css and text/javascript as defaults. Unused code should be removed when not used by your website or app as they add more weight to your pages. + + *How:* + > Ensure that all your `` and ` + + + + + + + + ``` + + *Why:* + > Having your CSS tags before any JavaScript enables better, parallel download which speed up browser rendering time. + + *How:* + > Ensure that `` and `` 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](https://www.smashingmagazine.com/2015/08/understanding-critical-css/) + * ๐Ÿ›  [Critical by Addy Osmani on GitHub](https://github.com/addyosmani/critical) automates this. + * ๐Ÿ“– [Inlining critical CSS for better web performance | Go Make Things](https://gomakethings.com/inlining-critical-css-for-better-web-performance/) + +- [ ] **Embedded or inline CSS:** Avoid using embed or inline CSS inside your `` *(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 help you have a more maintainable code and keep your site accessible. But regarding performance, it's simply because it decrease the file-size of your HTML pages and the load time. + + *How:* + > โƒ Always use external stylesheets or embed CSS in your `` (and follow the others CSS performance rules) + + * ๐Ÿ“– [Observe CSS Best Practices: Avoid CSS Inline Styles](https://www.lifewire.com/avoid-inline-styles-for-css-3466846) + +- [ ] **Analyse stylesheets complexity:** + + *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 above can also help you analysing and correct your code. + + * ๐Ÿ›  [TestMyCSS | Optimize and Check CSS Performance](http://www.testmycss.com/) + * ๐Ÿ“– [CSS Stats](https://cssstats.com/) + * ๐Ÿ›  [macbre/analyze-css: CSS selectors complexity and performance analyzer](https://github.com/macbre/analyze-css) + +**[โฌ† back to top](#table-of-contents)** +## Fonts + +![fonts] + +* ๐Ÿ“– [A Book Apart, Webfont Handbook](https://abookapart.com/products/webfont-handbook) + +- [ ] **Webfont formats:** You are using WOFF2 on your web project or application. + + *Why:* + > According to Google, the WOFF 2.0 Web Font compression format offers 30% average gain over WOFF 1.0. It's then good to use WOFF 2.0, WOFF 1.0 as a fallback and TTF. + + *How:* + > โƒ Check before buying your new font that the provider gives you the WOFF2 format. If you are using a free font, you can always use Font Squirrel to generate all the formats you need. + + * ๐Ÿ“– [WOFF 2.0 โ€“ Learn more about the next generation Web Font Format and convert TTF to WOFF2](https://gist.github.com/sergejmueller/cf6b4f2133bcb3e2f64a) + * ๐Ÿ›  [Create Your Own @font-face Kits ยป Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator) + * ๐Ÿ“– [Using @font-face | CSS-Tricks](https://css-tricks.com/snippets/css/using-font-face/?ref=frontendchecklist) + * ๐Ÿ“– [Can I use... WOFF2](https://caniuse.com/#feat=woff2) + +- [ ] **Use `preconnect` to load your fonts faster:** + + ```html + + ``` + + *Why:* + > When you arrived on a website, your device needs to find out where you site live and which server it needs to connect with. Your browser had to contact a DNS server and wait for the lookup complete before fetching the ressource (fonts, CSS files...). Prefetches and preconnects allow the browser + + *How:* + > โƒ Before prefetching your webfonts, use webpagetest to evaluate your website. + โƒ Look for teal colored DNS lookups and note the host that are being requested. + โƒ Prefetch your webfonts in your `` and add eventually these hostnames that you should prefetch too. + + * ๐Ÿ“– [Faster Google Fonts with Preconnect - CDN Planet](https://www.cdnplanet.com/blog/faster-google-webfonts-preconnect/) + * ๐Ÿ“– [Make Your Site Faster with Preconnect Hints | Viget](https://www.viget.com/articles/make-your-site-faster-with-preconnect-hints/) + * ๐Ÿ“– [Ultimate Guide to Browser Hints: Preload, Prefetch, and Preconnect - MachMetrics Speed Blog](https://www.machmetrics.com/speed-blog/guide-to-browser-hints-preload-preconnect-prefetch/) + +**[โฌ† back to top](#table-of-contents)** +## Images + +![images] + + * ๐Ÿ“– [Image Bytes in 2018](https://httparchive.org/reports/page-weight#bytesImg) + +* [ ] **Images optimization:** Your images are optimized, compressed without direct impact to the end user. + + *Why:* + > Optimized images load faster in your browser and consume less data. + + *How:* + > โƒ Try using CSS3 effects when it's possible (instead of a small image) + โƒ When it's possible, use fonts instead of text encoded in your images + โƒ Use SVG + โƒ Use a tool and specify a level compression under 85. + + * ๐Ÿ“– [Image Optimization | Web Fundamentals | Google Developers](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization) + * ๐Ÿ›  [TinyJPG โ€“ Compress JPEG images intelligently](https://tinyjpg.com/) + + +* [ ] **Images format:** Choose your image format appropriately. + + *Why:* + > To ensure that your images don't slow your website, choose the format that will + + *How:* + > โƒ Use [Lighthouse](https://developers.google.com/web/tools/lighthouse/) to identify which images can eventually use **next-gen formats** (like JPEG 2000m JPEG XR or WebP) + โƒ Compare different formats, sometimes using PNG8 is better than PNG16, sometimes it's not. + + * ๐Ÿ“– [Serve Images in Next-Gen Formats ย |ย  Tools for Web Developers ย |ย  Google Developers](https://developers.google.com/web/tools/lighthouse/audits/webp) + * ๐Ÿ“– [What Is the Right Image Format for Your Website? โ€” SitePoint](https://www.sitepoint.com/what-is-the-right-image-format-for-your-website/) + * ๐Ÿ“– [PNG8 - The Clear Winner โ€” SitePoint](https://www.sitepoint.com/png8-the-clear-winner/) + * ๐Ÿ“– [8-bit vs 16-bit - What Color Depth You Should Use And Why It Matters - DIY Photography](https://www.diyphotography.net/8-bit-vs-16-bit-color-depth-use-matters/) + +- [ ] **Use vector image vs raster/bitmap:** Prefer using vector image rather than bitmap images (when possible). + + *Why:* + > Vector images (SVG) tend to be smaller than images and SVG's are responsive and scale perfectly. These images can be animated and modified by CSS. + +* [ ] **Images dimensions:** Set `width` and `height` attributes on `` if the final rendered image size is known. + + *Why:* + > If height and width are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image, and cannot reserve the appropriate space to it. The effect will be that the page layout will change during loading (while the images load). + +* [ ] **Avoid using Base64 images:** Repeated tiny images can be convert to base64 to avoid multiple requests. + + *Why:* + > + + * ๐Ÿ“– [Base64 Encoding & Performance, Part 1 and 2 by Harry Roberts](https://csswizardry.com/2017/02/base64-encoding-and-performance/) + * ๐Ÿ“– [A closer look at Base64 image performance โ€“ The Page Not Found Blog](http://www.andygup.net/a-closer-look-at-base64-image-performance/) + * ๐Ÿ“– [When to base64 encode images (and when not to) | David Calhoun](https://www.davidbcalhoun.com/2011/when-to-base64-encode-images-and-when-not-to/) + * ๐Ÿ“– [Base64 encoding images for faster pages | Performance and seo factors](https://varvy.com/pagespeed/base64-images.html) + +* [ ] **Lazy loading:** Images are lazyloaded (A noscript fallback is always provided). + + *Why:* + > It will improve the response time of the current page and then avoid loading unnecessary images that the user may not need. + + *How:* + > โƒ Use [Lighthouse](https://developers.google.com/web/tools/lighthouse/) to identify how many **images are offscreen**. + โƒ Use a JavaScript plugin like to lazyload your images. + + * ๐Ÿ›  [verlok/lazyload: Github](https://github.com/verlok/lazyload) + * ๐Ÿ“– [Lazy Loading Images and Video ย |ย  Web Fundamentals ย |ย  Google Developers](https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/) + * ๐Ÿ“– [5 Brilliant Ways to Lazy Load Images For Faster Page Loads - Dynamic Drive Blog](http://blog.dynamicdrive.com/5-brilliant-ways-to-lazy-load-images-for-faster-page-loads/) + +* [ ] **Responsive images:** Ensure to serve images that are close to your display size. + + *Why:* + > Small devices don't need images bigger than their viewport. It's recommended to have multiple versions of one image on different sizes. + + *How:* + > โƒ Create different image sizes for the devices you want to target. + โƒ Use `srcset` and `picture` to deliver multiple variants of each image. + + * ๐Ÿ“– [Responsive images - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images) + +**[โฌ† back to top](#table-of-contents)** +## 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. + + * ๐Ÿ“– [uglify-js - npm](https://www.npmjs.com/package/uglify-js) + * ๐Ÿ“– [Short read: How is HTTP/2 different? Should we still minify and concatenate?](https://scaleyourcode.com/blog/article/28) + +* [ ] **No JavaScript inside:** *(Only valid for website)* Avoid having multiple JavaScript codes embed in the middle of your body. Regroupe your JavaScript code inside external files or eventually in the `` or at the end of your page (before ``). + + *Why:* + > Placing JavaScript embedded code directly in your `` 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 ``. 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 ``. + + * ๐Ÿ“– [11 Tips to Optimize JavaScript and Improve Website Loading Speeds](https://www.upwork.com/hiring/development/11-tips-to-optimize-javascript-and-improve-website-loading-speeds/) + +* [ ] **Non-blocking JavaScript:** JavaScript files are loaded asynchronously using `async` or deferred using `defer` attribute. + + ```html + +