feat: enhance image handling and optimize loading performance

Author: longsizhuo

app/components/EditOnGithub.tsx

@@ -1,25 +1,26 @@
 import Link from "next/link";
 
-// 复用的编辑链接按钮，统一封装图标与样式
-interface EditOnGithubProps {
-  href: string;
-}
-
-export function EditOnGithub({ href }: EditOnGithubProps) {
+export function EditOnGithub({ href }: { href: string }) {
   return (
     <Link
       href={href}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="inline-flex items-center justify-center rounded-md border border-transparent w-9 h-9 text-muted-foreground transition-colors hover:bg-muted/80 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
-      aria-label="Edit on GitHub"
+      className="inline-flex items-center gap-2 rounded-md px-4 h-11 text-base font-medium hover:bg-muted/80 hover:text-foreground no-underline"
     >
-      <span
-        aria-hidden
-        className="material-symbols-outlined text-lg flex items-center justify-center"
+      <svg
+        aria-hidden="true"
+        className="h-8 w-8"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth={1.8}
+        strokeLinecap="round"
+        strokeLinejoin="round"
       >
-        edit
-      </span>
+        <path d="M12 20h9" />
+        <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z" />
+        <path d="m15 5 4 4" />
+      </svg>
+      Edit Me
     </Link>
   );
 }

app/components/Hero.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
-import { ZoteroFeed } from "@/app/components/ZoteroFeed";
+import ZoteroFeedLazy from "@/app/components/ZoteroFeedLazy";
 import { Contribute } from "@/app/components/Contribute";
+import Image from "next/image";
 
 export function Hero() {
   const categories: { title: string; desc: string; href: string }[] = [
@@ -30,19 +31,18 @@ export function Hero() {
     <section className="relative">
       <div className="container mx-auto px-6 pt-12 pb-0 text-center">
         <div className="relative mx-auto max-w-5xl mt-12">
-          <picture>
-            <source srcSet="/mascot.webp" type="image/webp" />
-            <source srcSet="/mascot.png" type="image/png" />
-            <img
-              src="/mascot.webp"
-              alt="Mascot"
-              className="mx-auto h-[25vh] w-auto object-contain"
-              loading="eager"
-              fetchPriority="high"
-              width="420"
-              height="400"
-            />
-          </picture>
+          <Image
+            src="/mascot.webp"
+            alt="Mascot"
+            width={420}
+            height={400}
+            priority
+            loading="eager"
+            fetchPriority="high"
+            sizes="216px"
+            className="mx-auto w-auto max-h-[25vh] object-contain"
+            style={{ maxWidth: "216px", height: "auto" }}
+          />
           <h1 className="pointer-events-none select-none text-4xl md:text-6xl font-semibold leading-tight bg-gradient-primary bg-clip-text text-transparent">
             内卷地狱
           </h1>
@@ -75,7 +75,7 @@ export function Hero() {
           </ul>
         </div>
         {/* 最新文献（Zotero，避免被 iframe 拒绝） */}
-        <ZoteroFeed groupId={6053219} limit={8} />
+        <ZoteroFeedLazy groupId={6053219} limit={8} />
       </div>
     </section>
   );

app/components/ZoteroFeedLazy.tsx

@@ -0,0 +1,57 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
+
+/**
+ * 懒加载 ZoteroFeed 的 props
+ * @param groupId - Zotero 组 ID
+ * @param limit - 显示的文献数量
+ */
+interface ZoteroFeedLazyProps {
+  groupId?: number;
+  limit?: number;
+}
+
+/**
+ * 动态导入真正组件
+ * @returns ZoteroFeed 组件
+ */
+const ZoteroFeed = dynamic(() => import("./ZoteroFeed"), {
+  ssr: false,
+  loading: () => null,
+});
+
+/**
+ * 懒加载 ZoteroFeed
+ * @param groupId - Zotero 组 ID
+ * @param limit - 显示的文献数量
+ * @returns 懒加载的 ZoteroFeed 组件
+ */
+export default function ZoteroFeedLazy({
+  groupId = 6053219,
+  limit = 8,
+}: ZoteroFeedLazyProps) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (!ref.current || visible) return;
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          setVisible(true);
+          io.disconnect();
+        }
+      },
+      { rootMargin: "200px 0px" },
+    );
+    io.observe(ref.current);
+    return () => io.disconnect();
+  }, [visible]);
+
+  return (
+    <div ref={ref}>
+      {visible ? <ZoteroFeed groupId={groupId} limit={limit} /> : null}
+    </div>
+  );
+}

app/layout.tsx

@@ -133,10 +133,15 @@ export default function RootLayout({
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
-        {/* 谷歌图标字体用于 Edit 按钮的 material symbol */}
+        {/* Preconnect to critical third-party origins to shrink the critical request chain */}
+        <link rel="preconnect" href="https://www.google-analytics.com" />
+        {/* Preload the decorative sky texture so the LCP background image is discovered immediately */}
         <link
-          rel="stylesheet"
-          href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=edit"
+          rel="preload"
+          href="/cloud_2.png"
+          as="image"
+          type="image/png"
+          fetchPriority="high"
         />
       </head>
       <body
@@ -162,9 +167,9 @@ export default function RootLayout({
         {/* 谷歌分析 */}
         <Script
           src="https://www.googletagmanager.com/gtag/js?id=G-ED4GVN8YVW"
-          strategy="afterInteractive"
+          strategy="lazyOnload"
         />
-        <Script id="gtag-init" strategy="afterInteractive">
+        <Script id="gtag-init" strategy="lazyOnload">
           {`
             window.dataLayer = window.dataLayer || [];
             function gtag(){dataLayer.push(arguments);}

next.config.mjs

@@ -48,6 +48,7 @@ const config = {
       },
     ],
     unoptimized: true,
+    formats: ["image/avif", "image/webp"],
   },
 };