Created
November 4, 2025 18:30
-
-
Save simonespa/65a062efa8266e3f4237d6f502e77d0e to your computer and use it in GitHub Desktop.
Web Performance
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Render-blocking assets live on the Critical Path | |
| Non render-blocking assets must stay off the Critical Path | |
| HTML and CSS are render-blocking and live on the Critical Path. OPTIMISE THEM | |
| JS can be both. Keep it off the Critical Path unless is vital it's loaded/executed asap | |
| Images and fonts are off the Critical Path. KEEP THEM OFF | |
| - Identify your critical assets | |
| - Don't add any redirects | |
| - Hit as few domains as possible | |
| - Keep file size small | |
| - Don't let any non-critical asset on the Critical Path | |
| - Prioritise critical assets | |
| - Compress using Brotli | |
| - Cache | |
| CSS is the BIGGEST PERFORMANCE BOTTLENECK | |
| - Because it's render-blocking, it holds everything up | |
| - Browsers will not start rendering a page until all of the CSS arrives | |
| - Get the CSS over the wire ASAP | |
| - @import in CSS files kills performances because it loads CSS sequentially | |
| OTHER TIPS: | |
| Include all the scripts last, after the "link" element. This will allow the CSS and JS to load in parallel. If ypu include them first, they will block the download of the CSS. | |
| <link /> | |
| <script></script> | |
| # Javascript | |
| ## Regular | |
| A regular JS blocks downloads and DOM construction, is downloaded and executed immediately, then the HTML download and DOM construction is resumed. This is good if you need to change the DOM. | |
| - Downloads: so that other scripts arrive in the correct order | |
| - DOM construction: in case the JS causes a layout recalculation | |
| ## Asynch | |
| - Downloads JS asynchronously without blocking downloads or DOM construction. | |
| - Executes the script immediately after the download is completed. | |
| - Good for scripts with no dependencies (e.g. responsive nav, UI components, etc.) | |
| ## Defer | |
| - Downloads JS asynchronously without blocking downloads or DOM construction. | |
| - Executes the script after everything else is done and respects the download order | |
| - Good for scripts with dependencies that are not needed to build the page (analytics, tracking code, etc.) | |
| # Resource Hints | |
| <link rel="dns-prefetch" />: DNS Lookup | |
| <link rel="preconnect" />: DNS Lookup + TLS negotiation + Opens the connection | |
| <link rel="prefetch" />: dns-prefetch + preconnect + download the resource for subsequent pages (e.g. player.js) | |
| <link rel="subresource" />: dns-prefetch + preconnect + download the resource needed later by the same page |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment