fix(cls): 修复严重布局偏移问题 CLS 0.374->目标<0.1

关键修复:
- Bootstrap CSS 改回同步加载(异步导致严重CLS)
- 内联完整的关键CSS:
  - Navbar 固定高度50px
  - Container/Row/Column Bootstrap网格基础
  - Intro-header 固定尺寸防止偏移
  - Post-preview 卡片固定结构
  - 图片max-width:100% height:auto
- Jason-blog.min.css 改回同步加载
- Font Awesome 保持异步(图标不影响布局)

预期效果:
- Mobile CLS: 0.374 -> <0.1
- Desktop CLS: 1.001 -> <0.1

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

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

Author: calderbuild

_includes/head.html

@@ -107,86 +107,80 @@
     <!-- RSS Feed -->
     <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}">
 
-    <!-- Critical CSS Inline - Enhanced for Core Web Vitals -->
+    <!-- Critical CSS Inline - Prevent CLS -->
     <style>
-        /* Critical above-the-fold styles */
+        /* Reset and base - prevent layout shift */
+        *,*::before,*::after{box-sizing:border-box}
         body{
             background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);
             min-height:100vh;
             font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
+            font-size:14px;
             line-height:1.6;
             color:#374151;
             margin:0;
             padding:0;
-            font-display:swap;
         }
+        /* Navbar - fixed height to prevent CLS */
+        .navbar{min-height:50px;margin-bottom:0;border:0}
+        .navbar-fixed-top{position:fixed;top:0;right:0;left:0;z-index:1030}
         .navbar-custom{
             background:rgba(255,255,255,0.95);
             backdrop-filter:blur(10px);
-            border:none;
             box-shadow:0 2px 10px rgba(0,0,0,0.1);
-            transition:all 0.3s ease;
+            height:50px;
         }
+        /* Container - Bootstrap grid basics */
+        .container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
+        @media(min-width:768px){.container{width:750px}}
+        @media(min-width:992px){.container{width:970px}}
+        @media(min-width:1200px){.container{width:1170px}}
+        .container-fluid{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}
+        .row{margin-right:-15px;margin-left:-15px}
+        .row::before,.row::after{display:table;content:" "}
+        .row::after{clear:both}
+        /* Column basics */
+        .col-lg-8,.col-md-10,.col-xs-12{position:relative;min-height:1px;padding-right:15px;padding-left:15px}
+        .col-xs-12{width:100%;float:left}
+        @media(min-width:992px){.col-md-10{width:83.33333%;float:left}.col-md-offset-1{margin-left:8.33333%}}
+        @media(min-width:1200px){.col-lg-8{width:66.66667%;float:left}.col-lg-offset-2{margin-left:16.66667%}}
+        /* Intro header - fixed dimensions prevent CLS */
         .intro-header{
             background-attachment:scroll;
             background-position:center center;
             background-repeat:no-repeat;
             background-size:cover;
+            margin-top:50px;
+            padding-top:100px;
+            padding-bottom:50px;
             min-height:400px;
-            display:flex;
-            align-items:center;
         }
+        @media(min-width:768px){.intro-header{min-height:500px;padding-top:150px;padding-bottom:75px}}
+        .intro-header .site-heading,.intro-header .post-heading,.intro-header .page-heading{color:#fff}
+        .intro-header .site-heading h1,.intro-header .post-heading h1{font-size:50px;margin-top:0}
+        @media(min-width:768px){.intro-header .site-heading h1,.intro-header .post-heading h1{font-size:80px}}
+        /* Post preview - fixed structure */
         .post-preview{
             margin-bottom:30px;
             padding:25px;
             background:rgba(255,255,255,0.9);
             border-radius:12px;
             box-shadow:0 4px 20px rgba(0,0,0,0.08);
             border:1px solid rgba(0,0,0,0.05);
-            transition:transform 0.3s ease,box-shadow 0.3s ease;
-            backdrop-filter:blur(5px);
-        }
-        .post-preview:hover{
-            transform:translateY(-2px);
-            box-shadow:0 8px 30px rgba(0,0,0,0.12);
-        }
-        .post-title{
-            color:#1f2937;
-            font-weight:700;
-            margin-bottom:10px;
-        }
-        .post-subtitle{
-            color:#6b7280;
-            margin-bottom:15px;
-        }
-        .post-meta{
-            color:#9ca3af;
-            font-size:14px;
-        }
-        /* Loading state */
-        .loading{
-            opacity:0;
-            transform:translateY(20px);
-        }
-        .loaded{
-            opacity:1;
-            transform:translateY(0);
-            transition:opacity 0.6s ease,transform 0.6s ease;
-        }
-        /* Prevent layout shift */
-        img{
-            max-width:100%;
-            height:auto;
-            display:block;
         }
+        .post-preview>.post-title{font-size:21px;margin-top:0;margin-bottom:10px}
+        .post-preview>.post-subtitle{font-size:15px;margin:0;font-weight:300;margin-bottom:10px}
+        .post-preview .post-meta{color:#9ca3af;font-size:14px;margin-top:0}
+        /* Prevent image CLS */
+        img{max-width:100%;height:auto;display:block}
+        /* Font display */
+        @font-face{font-family:'FontAwesome';font-display:swap}
     </style>
-    
-    <!-- Async CSS Loading - Non-blocking for better performance -->
-    <link rel="preload" href="{{ "/css/bootstrap.min.css" | prepend: site.baseurl }}" as="style">
-    <link rel="stylesheet" href="{{ "/css/bootstrap.min.css" | prepend: site.baseurl }}" media="print" onload="this.media='all';this.onload=null;">
-    <noscript><link rel="stylesheet" href="{{ "/css/bootstrap.min.css" | prepend: site.baseurl }}"></noscript>
 
-    <!-- Font Awesome - Async load with subset -->
+    <!-- Bootstrap CSS - MUST load synchronously for layout -->
+    <link rel="stylesheet" href="{{ "/css/bootstrap.min.css" | prepend: site.baseurl }}">
+
+    <!-- Font Awesome - Async load (icons don't affect layout) -->
     <link rel="preload" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" as="style">
     <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" media="print" onload="this.media='all';this.onload=null;">
     <noscript><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"></noscript>
@@ -307,12 +301,10 @@
     }
     </script>
 
-    <!-- Custom Blog Styles - Async loading -->
-    <link rel="preload" href="{{ "/css/jason-blog.min.css" | prepend: site.baseurl }}" as="style">
-    <link rel="stylesheet" href="{{ "/css/jason-blog.min.css" | prepend: site.baseurl }}" media="print" onload="this.media='all';this.onload=null;">
-    <noscript><link rel="stylesheet" href="{{ "/css/jason-blog.min.css" | prepend: site.baseurl }}"></noscript>
+    <!-- Custom Blog Styles - Synchronous to prevent CLS -->
+    <link rel="stylesheet" href="{{ "/css/jason-blog.min.css" | prepend: site.baseurl }}">
 
-    <!-- Async tail styles (low priority) -->
+    <!-- Async tail styles (low priority, non-layout) -->
     <link rel="stylesheet" href="{{ "/css/async.css" | prepend: site.baseurl }}" media="print" onload="this.media='all';this.onload=null;">
 
     <!-- Critical Font Preload -->