### Problem Statement

You are required to load CSS asynchronously to improve the performance of a web page. The goal is to ensure that critical CSS is loaded immediately, while non-critical CSS is loaded after the initial page render to avoid blocking the rendering process.

### Requirements

1. **HTML Structure**:
   - Include the critical CSS that should be loaded immediately.
   - Load non-critical CSS asynchronously using the `media="print"` attribute and the `onload` event to switch the media to `all` once the CSS file is loaded.
   - Use the `preload` attribute for CSS files that need to be preloaded but not immediately applied.

2. **CSS Files**:
   - Use the following CSS files for the task:
     - `critical.css`: Critical CSS that should be loaded immediately.
     - `nonCritical.css`: Non-critical CSS that should be loaded asynchronously.
     - `style1.css`: Another non-critical CSS file to be loaded asynchronously.
     - `style2.css`: CSS file to be preloaded and then applied.

### Example

Consider the following HTML structure for your implementation:

**Input**:
- HTML file with `<link>` tags for the CSS files.

**Expected Behavior**:
- `critical.css` should be loaded immediately.
- `nonCritical.css` and `style1.css` should be loaded asynchronously.
- `style2.css` should be preloaded and then applied after loading.

### Constraints

- Ensure that the non-critical CSS files do not block the initial rendering of the web page.
- Use best practices to optimize the loading of CSS for better performance.

critical.css

index.html

nonCritical.css

style1.css

style2.css

Load CSS Asynchronously

### Editorial

Loading CSS asynchronously is a powerful technique to improve the performance of a web page by ensuring that the critical CSS is loaded immediately while deferring the loading of non-critical CSS until after the initial render. This approach reduces render-blocking resources and enhances the user experience by allowing the page to load faster.

### Approach

1. **Critical CSS**:
    - Critical CSS should be loaded immediately to ensure that the essential styles are applied as soon as possible.
    - Use a standard `<link>` tag to include critical CSS in the `<head>` section of the HTML.

2. **Non-Critical CSS**:
    - Non-critical CSS can be loaded asynchronously to avoid blocking the rendering of the page.
    - Use the `media="print"` attribute in the `<link>` tag and switch it to `media="all"` once the CSS file is loaded using the `onload` event. This ensures that the non-critical CSS is only applied after it is fully loaded.

3. **Preloading CSS**:
    - Preload CSS files that are necessary but not immediately needed using the `rel="preload"` attribute. This allows the browser to fetch these resources early but apply them later.

### Example Implementation

Here is an example implementation based on the given problem statement:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Load CSS Async</title>
    
    <link rel="stylesheet" href="nonCritical.css" media="print" onload="this.media='all'">
    <link rel="stylesheet" href="style1.css" media="print" onload="this.media='all'">
    
    <link rel="stylesheet" href="critical.css">
    
    <link href="style2.css" rel="preload" as="style" onload="this.rel='stylesheet'">
</head>
<body>
    
</body>
</html>
```

### Explanation

1. **Critical CSS**:
    - `<link rel="stylesheet" href="critical.css">` ensures that the critical CSS is loaded immediately without any delay.

2. **Non-Critical CSS**:
    - `<link rel="stylesheet" href="nonCritical.css" media="print" onload="this.media='all'">` and `<link rel="stylesheet" href="style1.css" media="print" onload="this.media='all'">` load non-critical CSS asynchronously. Initially, the `media` attribute is set to `print`, which delays the loading of these styles. Once the CSS is loaded, the `onload` event changes the `media` attribute to `all`, applying the styles.

3. **Preloading CSS**:
    - `<link href="style2.css" rel="preload" as="style" onload="this.rel='stylesheet'">` preloads the `style2.css` file, allowing the browser to fetch it early but apply it later when needed.

### Benefits

- **Improved Performance**: By deferring non-critical CSS, the initial page load is faster, leading to a better user experience.
- **Optimized Resource Loading**: Preloading ensures that necessary resources are available when required without blocking the initial render.

### Conclusion

Loading CSS asynchronously is an effective strategy to enhance web performance. By prioritizing critical CSS and deferring non-critical CSS, developers can ensure faster page loads and improved user experiences.