What page optimization methods do you know?

Minification and compression of resources:
- HTML, CSS, JavaScript: Removing unnecessary spaces, comments, line breaks, shortening variable names.
- Images: Format optimization (WebP, AVIF), lossless compression, using responsive images.
Using CDN (Content Delivery Network): Distributing static resources from servers closest to the user reduces latency.
Browser caching: Setting appropriate HTTP headers (Cache-Control, Expires) for caching static resources on the client side.
Lazy Loading: Deferred loading of images, videos, and other heavy resources until they appear in the user's visible area.
Asynchronous and deferred loading of JavaScript and CSS: Using async and defer attributes to prevent scripts from blocking, loading CSS outside the critical rendering path.
Critical CSS optimization: Embedding a minimal set of CSS for rendering the first screen of the page directly into the HTML <head>, with the rest of the CSS loaded asynchronously.
Reducing HTTP requests:
- Combining CSS and JavaScript files.
- Using sprites for small images.
Font optimization:
- Using WOFF2 format.
- Applying font-display.
- Preloading critical fonts.
Applying Server-Side Rendering (SSR) or Static Site Generation (SSG): Rendering part or all of the page on the server before sending to the client, improving first contentful paint and SEO.
Image optimization:
- Proper image sizes for different devices.
- Using <picture> and srcset.
- Lossy compression.

Using Resource Hints (preconnect, prefetch, preload): Browser hints about resources that might be needed soon.

<!-- Connecting to a domain before requesting a resource -->
<link rel="preconnect" href="https://example.com">
<!-- Preloading a resource -->
<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Prefetching a resource -->
<link rel="prefetch" href="/next-page.html">

DOM optimization: Minimizing DOM tree depth, avoiding costly DOM read/write operations in loops.
Rendering optimization (Layout, Paint, Composite): Avoiding forced style recalculations and reflows, using CSS properties that do not trigger repainting of the entire page (e.g., transform, opacity instead of top, left).
Using Web Workers: Offloading resource-intensive computations to separate threads to prevent blocking the main UI thread.
Progressive loading: Displaying content as it loads.