Add content to Frontend Best Practices

src/best-practices/frontend-performance/content/analyse-stylesheets-complexity.md

@@ -1 +1,12 @@
-# Analyse stylesheets complexity
+# Stylesheet Complexity
+
+> Analyzing your stylesheets can help you to flag issues, redundancies and duplicate CSS selectors.
+
+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).
+
+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.
+
+- [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)
+- [Project Wallace](https://www.projectwallace.com/) is like CSS Stats but stores stats over time so you can track your changes

src/best-practices/frontend-performance/content/analyze-js-for-perf-issues.md

@@ -1 +1,13 @@
-# Analyze js for perf issues
+# JavaScript Performance
+
+> Check for performance problems in your JavaScript files (and CSS too)
+
+JavaScript complexity can slow down runtime performance. Identifying these possible issues are essential to offer the smoothest user experience.
+
+Use the Timeline tool in the Chrome Developer Tool to evaluate scripts events and found the one that may take too much time.
+
+- [Speed Up JavaScript Execution | Tools for Web Developers](https://developers.google.com/web/tools/chrome-devtools/rendering-tools/js-execution)
+- [JavaScript Profiling With The Chrome Developer Tools](https://www.smashingmagazine.com/2012/06/javascript-profiling-chrome-developer-tools/)
+- [How to Record Heap Snapshots | Tools for Web Developers](https://developers.google.com/web/tools/chrome-devtools/memory-problems/heap-snapshots)
+- [Chapter 22 - Profiling the Frontend - Blackfire](https://blackfire.io/docs/book/22-frontend-profiling)
+- [30 Tips To Improve Javascript Performance](http://www.monitis.com/blog/30-tips-to-improve-javascript-performance/)

src/best-practices/frontend-performance/content/avoid-404-files.md

@@ -1 +1,7 @@
-# Avoid 404 files
+# Serve Reachable Files
+
+> Avoid requesting unreachable files (404)
+
+404 request can slow down the performance of your website and negatively impact the user experience. Additionally, they can also cause search engines to crawl and index non-existent pages, which can negatively impact your search engine rankings. To avoid 404 requests, ensure that all links on your website are valid and that any broken links are fixed promptly.
+
+- [How to avoid Bad Requests?](https://varvy.com/pagespeed/avoid-bad-requests.html)

src/best-practices/frontend-performance/content/avoid-base64-images.md

@@ -1 +1,20 @@
-# Avoid base64 images
+# Avoid Base64 Images
+
+> You could eventually convert tiny images to base64 but it's actually not the best practice.
+
+Using Base64 encoded images in your frontend can have several drawbacks.
+
+First, Base64 encoded images are larger in size than their binary counterparts, which can slow down the loading time of your website.
+
+Second, because Base64 encoded images are embedded directly in the HTML or CSS, they are included in the initial page load, which can cause delays for users with slower internet connections.
+
+Third, Base64 encoded images do not benefit from browser caching, as they are part of the HTML or CSS and not a separate resource. So, every time the page is loaded, the images will be re-downloaded, even if the user has visited the page before.
+
+Fourth, Base64 encoded images are not compatible with some old browser versions.
+
+Instead of using Base64 encoded images, it is generally recommended to use binary image files and reference them using an img tag in HTML, with a standard src attribute. This allows the browser to cache the image and use it for subsequent page loads, resulting in faster loading times and better user experience.
+
+- [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)

src/best-practices/frontend-performance/content/avoid-inline-css.md

@@ -1 +1,9 @@
-# Avoid inline css
+# Avoid Inline CSS
+
+> Avoid using embed or inline CSS inside your `<body>` (Not valid for HTTP/2)
+
+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.
+
+Always use external stylesheets or embed CSS in your `<head>` (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)

src/best-practices/frontend-performance/content/avoid-multiple-inline-js-snippets.md

@@ -1 +1,9 @@
-# Avoid multiple inline js snippets
+# Avoid Inline JavaScript
+
+> 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>`).
+
+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.
+
+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>`.
+
+- [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/)