tadghh / web-performance

I didnt make this

Performance Optimization Strategy in 2023 - Source

Compiled by Vitaly Friedman. https://smashed.by/perf-strategy

Get a big picture

• Run a test with Yellow lab Tools
• Check the state of things in CrUX
• Check resource loading priorities in Chrome’s Network panel + differences
• Check Bulk Core Web Vitals
• Show Core Web Vitals overlay in Chrome DevTools
• Make good use of DevTools
• Check the performance panel in Chrome
• Run a test for HTML site analyzer
• Run a test for resource hints with a resource hints validator
• Check the waterfall in WebPageTest
• Check the Search Console, PageSpeed Insights and Lighthouse Metrics
• Check the carbon footprint impact
• Check the third-parties with Requestmap
• Consider ways to accelerate JavaScript in the browser
• Check what browsers we are supporting, and how
• Check: Can Include, CanIEmail, WhatTheTag, WhoCanUse, Which Icon Is That, IsItAccessible?

1. Clean up and reorder the

• Turn on Brotli compression
• Use fewer but larger bundles for fast delivery
• Reduce the markup of SVG favicons
• Pre-connect to critical domains
• Preloading critical fonts
• Not loading fonts for users with saveData on and prefers-reduced-data on
• Preload critical files
• Measure timings with Local Overrides
• Validate your resource hints
• Use ct.css and Capo.js to sort the

2. Manage critical CSS and CSS loading

• Define and inline critical CSS per template, but beware of implications
• Create critical.css and non-critical.css for each template
• Use outline: 3px solid red to check layout shifts
• Remove all external SVGs (inlined into CSS)
• Adjust Browserslist to avoid legacy browsers (IE)
• Use the print stylesheet loading trick to load non-critical CSS async

3. Improve Web Font Loading

• Always self-host fonts on your own servers
• Check high-performance web font loading and best practices for fonts
• Use [font-display: optional](https://glitch.com/~font-display) (or swap) for fast rendering
• Group repaints to avoid reflows
• Subsetting fonts (alternatively with Glyphhanger)
  • $, §, ×, ", ',’,“,Á,Â, É,Í, Ó, é, é, é, â, î , ô, ñ, ö, ü, ä, ć, ç, ß, á, é, í, ó, ú, š, ž, å, £, €, ÷, –, —, “, ”, ć, ¢, %, ‰, …, ¶
• Move to Latin-1 Supplement
• Subset variable fonts with Slice
• Match font fallback with web fonts via Fallback Font Generator

4. Optimize the rendering for LCPs

• Maximize image loading performance with AVIF
• Run an image analysis tool for images
• Add preload for LCPs (usually images or large headings)
• Preload responsive images with img srcset and image sizes
• Choose the lightest SQIP option or BlurHash
• Add Early hints if the server needs “server think time” to return pages
• Optimize images for high-density displays
• By default all non-critical images include [loading=](https://web.dev/browser-level-image-lazy-loading/)``["](https://web.dev/browser-level-image-lazy-loading/)``[lazy](https://web.dev/browser-level-image-lazy-loading/)``["](https://web.dev/browser-level-image-lazy-loading/) and [decoding="async"](http://www.js-craft.io/blog/what-does-the-html-image-decoding-async-attribute-do-and-how-can-it-help-us-to-improve-performance/) (what decoding means)
• All images should have [height](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/) and [width](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/) defined
• Above-the-fold images should include loading=``"``eager``"
• Use facades for videos
• Base64 encoding LCP to improve perf on mobile (AVIF and/or JPEGs) (maybe)
• Always convert GIFs to MP4
• Check LCPs in Chrome’s performance panel

5. Deferring/delaying JS and third-parties

• Find your biggest JavaScript offenders
• Find the true size of an npm package
• Define priorities for critical and non-critical JS
  • critical JS needs to be coming early / sync or async
  • non-critical JS needs to be delayed as far as possible
• Use SSR + progressive hydration
• Delay service worker installation until the onload event
• Add lazy loading and async decoding to CodePen, Vimeo, YouTube
• Use facades for third-party resources
• Replace large libraries like Moment.js with smaller counterparts
• Consider moving third-parties to a web worker with Partytown
• Use tools like Instant.page for early prefetching
• Delay JavaScript until interaction
• Use a service worker to reliably cache assets
• Break down long tasks with isInputPending and [setTimeout](https://web.dev/optimize-inp/)
• Follow along with framework-specific optimizations
• Get the Cache-Control directives in order
• Consider new JavaScript and TypeScript features