What methods can be used to optimize loading external…

Minification and compression: Reducing the size of CSS, JavaScript, and HTML files by removing spaces, line breaks, and comments, as well as using compression algorithms like Gzip or Brotli.
Lazy Loading: Loading images, videos, and other resources only when they enter the visible viewport. This can be implemented using the loading="lazy" attribute or JavaScript.
```
<img src="image.jpg" loading="lazy" alt="Image description">
```
Asynchronous and deferred script loading: Using the async and defer attributes for <script> tags.
- [async]: The script loads asynchronously and executes as soon as it is available, without blocking HTML parsing.
- [defer]: The script loads asynchronously but executes only after the entire HTML document has been parsed.
```
<script src="script.js" async></script>
<script src="another-script.js" defer></script>
```
Image optimization: Using modern image formats (WebP), lossless compression, choosing the correct resolution, and using srcset and <picture> attributes.
```
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Image description">
</picture>
```
HTTP/2 and HTTP/3: Using newer versions of the HTTP protocol that support multiplexing (simultaneous loading of multiple resources over a single connection) and header compression.
Browser caching: Configuring Cache-Control and Expires HTTP headers to specify how long the browser should store resources in cache.
CDN (Content Delivery Network): Distributing resources across servers located geographically closer to the user to reduce latency.
Preloading and preconnecting: Using rel="preload" for resources needed soon and rel="preconnect" to establish connections with external domains in advance.
```
<link rel="preload" href="style.css" as="style">
<link rel="preconnect" href="https://fonts.googleapis.com">
```
Reducing the number of HTTP requests: Combining CSS and JavaScript files, using sprites for images.
Eliminating render-blocking resources: Using the media attribute for <link> tags so styles are applied only under certain conditions.
```
<link rel="stylesheet" href="print.css" media="print">
```

What methods can be used to optimize loading external resources on a web page?