perf(lcp): 优化 LCP 和第三方资源加载性能

关键优化：
- LCP 图片直接使用 WebP 格式，添加 fetchpriority=high
- 修复 jQuery 回退逻辑避免重复加载
- 移除过时的微信分享 hack 图片
- GA 延迟加载优化为 requestIdleCallback + 用户交互触发

预期影响：
- LCP 减少 ~200ms（消除 JPG 到 WebP 的双重请求）
- 减少 1 个网络请求（移除 icon_wechat）
- 减少 ~90KB 资源（避免 jQuery 重复加载）

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: calderbuild

_includes/footer.html

@@ -17,11 +17,21 @@
     </div>
 </footer>
 
-<!-- Critical JavaScript - Load Immediately via CDN with local fallback -->
-<script defer src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js"
-        integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8="
-        crossorigin="anonymous"></script>
-<script>window.jQuery || document.write('<script src="{{ "/js/jquery.min.js" | prepend: site.baseurl }}"><\/script>')</script>
+<!-- Critical JavaScript - Load via CDN with proper fallback -->
+<script>
+(function() {
+    var jq = document.createElement('script');
+    jq.src = 'https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js';
+    jq.integrity = 'sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=';
+    jq.crossOrigin = 'anonymous';
+    jq.onerror = function() {
+        var fallback = document.createElement('script');
+        fallback.src = '{{ "/js/jquery.min.js" | prepend: site.baseurl }}';
+        document.head.appendChild(fallback);
+    };
+    document.head.appendChild(jq);
+})();
+</script>
 
 <!-- Critical: Language Toggle Event Delegation (Must load before user interaction) -->
 <script>
@@ -490,25 +500,36 @@
 </script>
 <!-- Original work by Jason's Blog -->
 
-<!-- Google Analytics 4 - Deferred Loading -->
+<!-- Google Analytics 4 - Load after user interaction or idle time -->
 {% if jekyll.environment == 'production' %}
 <script>
-  // Load Google Analytics after page is interactive
-  window.addEventListener('load', function() {
-    setTimeout(function() {
-      var gaScript = document.createElement('script');
-      gaScript.src = 'https://www.googletagmanager.com/gtag/js?id={{ site.ga_track_id }}';
-      gaScript.async = true;
-      document.head.appendChild(gaScript);
-
+  // Load GA only when browser is idle or user interacts
+  (function() {
+    var gaLoaded = false;
+    function loadGA() {
+      if (gaLoaded) return;
+      gaLoaded = true;
+      var s = document.createElement('script');
+      s.src = 'https://www.googletagmanager.com/gtag/js?id={{ site.ga_track_id }}';
+      s.async = true;
+      document.head.appendChild(s);
       window.dataLayer = window.dataLayer || [];
       function gtag(){dataLayer.push(arguments);}
       gtag('js', new Date());
       gtag('config', '{{ site.ga_track_id }}', {
         cookie_flags: 'SameSite=Strict;Secure',
         anonymize_ip: true
       });
-    }, 1000); // Delay 1s to prioritize rendering
-  });
+    }
+    // Load on user interaction or after 3s idle
+    if ('requestIdleCallback' in window) {
+      requestIdleCallback(loadGA, { timeout: 3000 });
+    } else {
+      setTimeout(loadGA, 3000);
+    }
+    ['scroll', 'click', 'touchstart'].forEach(function(e) {
+      window.addEventListener(e, loadGA, { once: true, passive: true });
+    });
+  })();
 </script>
 {% endif %}

_includes/head.html

@@ -30,8 +30,10 @@
     <link rel="preconnect" href="https://pagead2.googlesyndication.com" crossorigin>
     <link rel="dns-prefetch" href="//seo-fixer.writesonic.com">
     {% if page.url == '/' %}
-    <!-- Preload hero header image to improve LCP with high priority -->
-    <link rel="preload" as="image" href="{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}" fetchpriority="high" imagesrcset="{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %} 1x" imagesizes="100vw">
+    <!-- Preload hero header image (WebP) to improve LCP with highest priority -->
+    {% assign header_img = page.header-img | default: site.header-img %}
+    {% assign webp_img = header_img | replace: '.jpg', '.webp' | replace: '.jpeg', '.webp' | replace: '.png', '.webp' %}
+    <link rel="preload" as="image" href="{{ site.baseurl }}/{{ webp_img }}" fetchpriority="high" type="image/webp">
     {% endif %}
 
     <!-- Twitter Card -->

_includes/intro-header.html

@@ -4,10 +4,12 @@
 {% endcomment %}
 
 {% if include.type == 'post' or include.type == 'page' %}
+{% assign post_header_img = page.header-img | default: site.header-img %}
+{% assign post_webp_img = post_header_img | replace: '.jpg', '.webp' | replace: '.jpeg', '.webp' | replace: '.png', '.webp' %}
 <style type="text/css">
     header.intro-header{
         position: relative;
-        background-image: url('{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}');
+        background-image: url('{{ site.baseurl }}/{{ post_webp_img }}');
         background: {{ page.header-bg-css }};
     }
 
@@ -127,7 +129,9 @@ <h2 class="subheading">{{ page.subtitle }}</h2>
 {% endif %}
 
 {% if include.type == 'page' %}
-<header class="intro-header" style="background-image: url('{{ site.baseurl }}/{% if page.header-img %}{{ page.header-img }}{% else %}{{ site.header-img }}{% endif %}'); aspect-ratio: 16/9; min-height: 420px;">
+{% assign page_header_img = page.header-img | default: site.header-img %}
+{% assign page_webp_img = page_header_img | replace: '.jpg', '.webp' | replace: '.jpeg', '.webp' | replace: '.png', '.webp' %}
+<header class="intro-header" style="background-image: url('{{ site.baseurl }}/{{ page_webp_img }}'); aspect-ratio: 16/9; min-height: 420px;">
   <div class="header-mask enhanced-header-mask"></div>
   <div class="container">
     <div class="row">

_layouts/default.html

@@ -42,10 +42,7 @@
 </nav>
 
 <!-- Background Switcher will be created dynamically by JavaScript -->
-
-<!-- Image to hack wechat -->
-<img src="/img/icon_wechat.png" width="0" height="0" alt="WeChat sharing helper image" title="微信分享优化图片" />
-<!-- Migrate from head to bottom, no longer block render and still work -->
+<!-- Note: WeChat sharing now uses Open Graph meta tags in head.html -->
 
 </body>