pagespeed优化

Author: CatCodeMe

packages/pure/components/pages/PostPreview.astro

@@ -10,9 +10,10 @@ type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
   post: CollectionEntry<CollectionKey>
   detailed?: boolean
   class?: string
+  lazyLoadImage?: boolean
 }
 
-const { as: Tag = 'div', post, detailed = false, class: className } = Astro.props
+const { as: Tag = 'div', post, detailed = false, class: className, lazyLoadImage = true } = Astro.props
 
 const { data } = post
 
@@ -45,7 +46,7 @@ const postDate = data.updatedDate ?? data.publishDate
         <Image
           alt={data.heroImage.alt || data.title}
           class='cover-image absolute end-0 top-0 z-0 h-2/3 w-full rounded-2xl object-cover opacity-50 transition-opacity duration-300 group-hover/card:opacity-70 md:h-full md:w-3/5'
-          loading='eager'
+          loading={lazyLoadImage ? 'lazy' : 'eager'}
           {...data.heroImage}
         />
       )

public/styles/global.css

@@ -1,4 +1,4 @@
-@import url("https://fontsapi.zeoseven.com/89/main/result.css");
+/* External font loading - Will be loaded via JavaScript */
 
 /* Homepage specific styles, triggered by a class added via script */
 body.hide-scrollbar {

src/components/BaseHead.astro

@@ -30,7 +30,13 @@ const socialImageURL = new URL(ogImage ? ogImage : '/images/social-card.png', As
 
 {/* Font Preload */}
 <link rel="preload" href="/fonts/LinBiolinum.woff2" as="font" type="font/woff2" crossorigin />
+
+{/* External Font - Deferred Loading */}
 <link rel="preconnect" href="https://fontsapi.zeoseven.com" crossorigin />
+<link rel="dns-prefetch" href="https://fontsapi.zeoseven.com" />
+
+{/* DNS prefetch for performance */}
+<link rel="dns-prefetch" href="https://vercel.live" />
 
 {/* Canonical URL */}
 <link rel='canonical' href={canonicalURL} />
@@ -88,6 +94,17 @@ const socialImageURL = new URL(ogImage ? ogImage : '/images/social-card.png', As
 {/* Styles */}
 <link rel='stylesheet' href='/styles/global.css' />
 
+{/* Async font loading */}
+<script is:inline>
+  // Load external font after page load to improve initial render
+  window.addEventListener('load', function() {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = 'https://fontsapi.zeoseven.com/89/main/result.css';
+    document.head.appendChild(link);
+  });
+</script>
+
 {
   /* User script*/
   prod && (

src/pages/index.astro

@@ -110,8 +110,8 @@ const currentReading = bookshelfData.find((item: any) => item.status === 'readin
                   <a href='/blog' class='text-sm text-primary hover:underline group-hover:translate-x-1 transition-transform inline-block'>查看更多 →</a>
                 </div>
                 <ul class='flex flex-col gap-y-3'>
-                  {allPostsByDate.map((post) => (
-                    <PostPreview post={post} />
+                  {allPostsByDate.map((post, index) => (
+                    <PostPreview post={post} lazyLoadImage={index > 0} />
                   ))}
                 </ul>
               </div>
@@ -236,9 +236,11 @@ const currentReading = bookshelfData.find((item: any) => item.status === 'readin
     </div>
 
 <script is:inline>
-  // Force light theme on homepage
-  localStorage.setItem('theme', 'light');
-  document.documentElement.dataset.theme = 'light';
+  // Force light theme on homepage - Execute immediately
+  // (function() {
+  //   localStorage.setItem('theme', 'light');
+  //   document.documentElement.dataset.theme = 'light';
+  // })();
 
   // 数字滚动动画
   function animateCounter(element, targetValue, duration = 2000) {
@@ -266,18 +268,6 @@ const currentReading = bookshelfData.find((item: any) => item.status === 'readin
     requestAnimationFrame(updateCounter);
   }
 
-  // 邮箱混淆 - 防止爬虫抓取
-  function obfuscateEmail() {
-    // 将邮箱地址拆分成多个部分，避免明文出现
-    const parts = ['1020082805', '@', 'qq', '.', 'com'];
-    const email = parts.join('');
-    
-    const emailLink = document.getElementById('email-link');
-    if (emailLink) {
-      emailLink.href = 'mailto:' + email;
-    }
-  }
-
   // 更新总浏览量显示和进度条
   function updateViewsDisplay(viewsElement, progressElement, newValue, hasAnimated = false) {
     if (viewsElement && progressElement && newValue && newValue !== '-') {
@@ -372,15 +362,15 @@ const currentReading = bookshelfData.find((item: any) => item.status === 'readin
 <style>
   /* 卡片渐入动画 */
   .dashboard-card {
-    animation: fadeInUp 0.6s ease-out;
-    animation-fill-mode: both;
+    opacity: 0;
+    animation: fadeInUp 0.6s ease-out forwards;
   }
 
-  .dashboard-card:nth-child(1) { animation-delay: 0.1s; }
-  .dashboard-card:nth-child(2) { animation-delay: 0.2s; }
-  .dashboard-card:nth-child(3) { animation-delay: 0.3s; }
-  .dashboard-card:nth-child(4) { animation-delay: 0.4s; }
-  .dashboard-card:nth-child(5) { animation-delay: 0.5s; }
+  .reading-card { animation-delay: 0.1s; }
+  .posts-card { animation-delay: 0.2s; }
+  .avatar-card { animation-delay: 0.3s; }
+  .stats-card { animation-delay: 0.4s; }
+  .social-card { animation-delay: 0.5s; }
 
   @keyframes fadeInUp {
     from {