基于PageSpeed Insights的网站优化求助：渲染阻塞CSS与浏览器缓存问题

Hey there, let's break down how to fix those two PageSpeed Insights headaches you're dealing with—they’re super common, so you’re not alone in this!

It sounds like your preload attempt didn’t work because preloading alone doesn’t tell the browser to apply the CSS—it just downloads it early. Here’s how to fix that and avoid blocking rendering:

• Get the preload syntax right
  Use this snippet for your stylesheets instead of a regular link tag. It preloads the CSS and then converts it to a stylesheet once loaded, so it doesn’t block rendering:

  <link rel="preload" href="path/to/your-stylesheet.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="path/to/your-stylesheet.css"></noscript>
  

  The noscript fallback ensures the CSS loads if JavaScript is disabled, so you don’t break your site for those users.

• Split critical vs non-critical CSS (better long-term fix)
  Instead of preloading all CSS, inline the critical CSS (the styles needed for your above-the-fold content) directly in your HTML’s <head>. Then load non-critical CSS asynchronously with a media query trick:

  <!-- Inline critical CSS here -->
  <style>
    /* Your above-the-fold styles go here */
    body { margin: 0; font-family: Arial, sans-serif; }
    .hero { width: 100%; height: 500px; }
  </style>
  
  <!-- Load non-critical CSS asynchronously -->
  <link rel="stylesheet" href="path/to/non-critical.css" media="print" onload="this.media='all'">
  

  This way, the browser prioritizes rendering the page with the inline CSS, and loads the rest in the background without blocking.

If your .htaccess changes aren’t working, let’s rule out the most common issues:

• First, confirm your server uses Apache (and allows .htaccess)
  Nginx doesn’t support .htaccess at all, so if you’re on Nginx, you’ll need to add cache rules directly to your server config instead. For Apache, make sure your site’s httpd.conf or apache2.conf has AllowOverride All set for your website directory—without this, Apache ignores .htaccess files.

• Use a tested .htaccess cache configuration
  Replace your existing cache rules with this snippet (it covers common file types and sets appropriate expiration times):

  # Enable browser caching
  <IfModule mod_expires.c>
      ExpiresActive On
      # Images (cache for 1 year)
      ExpiresByType image/jpg "access plus 1 year"
      ExpiresByType image/jpeg "access plus 1 year"
      ExpiresByType image/gif "access plus 1 year"
      ExpiresByType image/png "access plus 1 year"
      ExpiresByType image/svg+xml "access plus 1 year"
      # CSS & JS (cache for 1 month)
      ExpiresByType text/css "access plus 1 month"
      ExpiresByType application/javascript "access plus 1 month"
      # HTML (cache for 1 hour—shorter to allow quick updates)
      ExpiresByType text/html "access plus 1 hour"
  </IfModule>
  
  <IfModule mod_headers.c>
      # Add Cache-Control headers for extra insurance
      <FilesMatch "\.(ico|jpg|jpeg|png|gif|svg|css|js)$">
          Header set Cache-Control "public, max-age=31536000, immutable"
      </FilesMatch>
      <FilesMatch "\.(html|htm)$">
          Header set Cache-Control "public, max-age=3600"
      </FilesMatch>
  </IfModule>
  

  Make sure the mod_expires and mod_headers modules are enabled on your Apache server. If you’re on a Linux server, run these commands to enable them:

  sudo a2enmod expires
  sudo a2enmod headers
  sudo systemctl restart apache2
  

• Check for conflicting CDN or server settings
  If you’re using a CDN, it might override your server’s cache headers. Log into your CDN dashboard and make sure its cache rules align with your .htaccess settings—you don’t want the CDN serving stale content or ignoring your expiration times.

• Verify with browser dev tools
  Open Chrome DevTools (F12), go to the Network tab, refresh your site, and click on any static file (like a CSS or image). Look in the Response Headers section—you should see Cache-Control and Expires fields with the values you set. If they’re missing, your server isn’t applying the .htaccess rules, so double-check your Apache config or server setup.

Hope these steps help you knock out those PageSpeed issues! If you hit specific error messages or need clarification on any part, feel free to share more details.

内容的提问来源于stack exchange，提问作者esdoodle