旧项目升级fancyBox/jQuery v3：如何实现极速加载且不丢PageSpeed评分？

Great question! Upgrading to fancyBox v3 and jQuery v3 while keeping PageSpeed scores high requires optimizing resource loading to avoid render-blocking, using reliable CDNs with fallbacks, and ditching outdated practices like document.write. Here's a step-by-step solution tailored to your needs:

1. Upgrade jQuery to v3.x (Non-Render-Blocking with Fallback) #

First, replace your old jQuery code with this modern version. We use defer to prevent render-blocking, and replace document.write (which breaks in deferred scripts) with dynamic script injection for the local fallback:

<!-- Load jQuery v3 from Google CDN (deferred to avoid render-blocking) -->
<script defer type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script defer type="text/javascript">
  // Wait for the document to be fully parsed before checking jQuery
  window.addEventListener('DOMContentLoaded', function() {
    if (typeof jQuery === 'undefined') {
      // Fallback to local jQuery if CDN fails
      const localJQuery = document.createElement('script');
      localJQuery.src = '/scripts/jquery-3.6.4.min.js';
      localJQuery.type = 'text/javascript';
      localJQuery.defer = true;
      document.body.appendChild(localJQuery);

      // Initialize fancyBox once local jQuery loads
      localJQuery.onload = initFancyBox;
    } else {
      // jQuery loaded from CDN, proceed to init fancyBox
      initFancyBox();
    }
  });
</script>

2. Upgrade fancyBox v3 (Optimized CSS + JS Loading) #

fancyBox v3 requires both CSS and JS files. We'll optimize their loading to avoid hurting PageSpeed:

Optimize CSS Loading (In <head>)

Add this to your <head> to preload the fancyBox CSS without blocking rendering. This uses two techniques for broad browser support:

<!-- Preload CSS for modern browsers (prioritizes loading) -->
<link rel="preload" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<!-- Fallback for browsers that don't support preload -->
<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css"></noscript>
<!-- Media="print" trick to avoid render-blocking in older browsers -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" media="print" onload="this.media='all'">

Load fancyBox JS (Dependent on jQuery)

Add this function to handle loading fancyBox JS with a CDN fallback, and initialize it only after jQuery is available:

function initFancyBox() {
  // Load fancyBox v3 from CDN
  const fancyBoxScript = document.createElement('script');
  fancyBoxScript.src = 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js';
  fancyBoxScript.type = 'text/javascript';
  fancyBoxScript.defer = true;

  // Fallback to local fancyBox if CDN fails
  fancyBoxScript.onerror = function() {
    const localFancyBox = document.createElement('script');
    localFancyBox.src = '/scripts/jquery.fancybox.min.js';
    localFancyBox.type = 'text/javascript';
    localFancyBox.defer = true;
    document.body.appendChild(localFancyBox);
    
    // Run setup once local script loads
    localFancyBox.onload = setupFancyBox;
  };

  // Run setup once CDN script loads
  fancyBoxScript.onload = setupFancyBox;

  document.body.appendChild(fancyBoxScript);
}

function setupFancyBox() {
  // Your fancyBox initialization code here
  // Update this to match your existing fancyBox usage
  $('[data-fancybox]').fancybox({
    loop: true,
    buttons: ["zoom", "share", "slideShow", "fullScreen", "download", "thumbs", "close"]
  });
  
  // If your old code used a different selector (e.g., .fancybox), use that instead:
  // $('.fancybox').fancybox({ /* options */ });
}

3. Extra PageSpeed Boosts #

• Minify Local Assets: If serving local copies of jQuery/fancyBox, ensure they’re minified (CDN versions are already optimized).
• Cache Headers: Configure your server to send long cache headers (e.g., 1 year) for static JS/CSS files. Use filename hashing (like jquery-3.6.4.min.abc123.js) to bust cache when updating files.
• HTTP/2/3: Enable HTTP/2 or HTTP/3 on your server to allow parallel loading of multiple resources.
• Lazy Load Media: If your fancyBox targets offscreen images/media, add loading="lazy" to those elements to reduce initial load time.
• Clean Up Old Code: Remove any deprecated fancyBox v2 code (like old callbacks or options that don’t exist in v3) to reduce unnecessary JS execution.

Testing Tips #

• Disable your internet temporarily to verify local fallbacks work.
• Use Google PageSpeed Insights to check for render-blocking resources after implementing these changes.
• Test fancyBox functionality across browsers to ensure compatibility with jQuery v3.

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