2

Author: S-Riku-tus

application/client/src/components/foundation/CoveredImage.tsx

@@ -7,12 +7,14 @@ import { Modal } from "@web-speed-hackathon-2026/client/src/components/modal/Mod
 interface Props {
   src: string;
   alt: string;
+  /** 複数枚あるときは 1 枚だけ true（LCP・帯域の競合を避ける） */
+  isLcpCandidate?: boolean;
 }
 
 /**
  * LCP を安定させるため、バイナリ取得/解析は行わず直に表示します
  */
-export const CoveredImage = ({ src, alt }: Props) => {
+export const CoveredImage = ({ src, alt, isLcpCandidate = true }: Props) => {
   const dialogId = useId();
   // ダイアログの背景をクリックしたときに投稿詳細ページに遷移しないようにする
   const handleDialogClick = useCallback((ev: MouseEvent<HTMLDialogElement>) => {
@@ -25,9 +27,9 @@ export const CoveredImage = ({ src, alt }: Props) => {
         alt={alt}
         className={classNames("absolute inset-0 h-full w-full object-cover")}
         src={src}
-        loading="eager"
         decoding="async"
-        fetchPriority="high"
+        fetchPriority={isLcpCandidate ? "high" : "low"}
+        loading={isLcpCandidate ? "eager" : "lazy"}
       />
 
       <button

application/client/src/components/foundation/InfiniteScroll.tsx

@@ -13,10 +13,8 @@ export const InfiniteScroll = ({ children, fetchMore, items }: Props) => {
 
   useEffect(() => {
     const handler = () => {
-      // 念の為 2の18乗 回、最下部かどうかを確認する
-      const hasReached = Array.from(Array(2 ** 18), () => {
-        return window.innerHeight + Math.ceil(window.scrollY) >= document.body.offsetHeight;
-      }).every(Boolean);
+      const hasReached =
+        window.innerHeight + Math.ceil(window.scrollY) >= document.body.offsetHeight;
 
       // 画面最下部にスクロールしたタイミングで、登録したハンドラを呼び出す
       if (hasReached && !prevReachedRef.current) {
@@ -33,10 +31,10 @@ export const InfiniteScroll = ({ children, fetchMore, items }: Props) => {
     prevReachedRef.current = false;
     handler();
 
-    document.addEventListener("wheel", handler, { passive: false });
-    document.addEventListener("touchmove", handler, { passive: false });
-    document.addEventListener("resize", handler, { passive: false });
-    document.addEventListener("scroll", handler, { passive: false });
+    document.addEventListener("wheel", handler, { passive: true });
+    document.addEventListener("touchmove", handler, { passive: true });
+    document.addEventListener("resize", handler, { passive: true });
+    document.addEventListener("scroll", handler, { passive: true });
     return () => {
       document.removeEventListener("wheel", handler);
       document.removeEventListener("touchmove", handler);

application/client/src/components/post/ImageArea.tsx

@@ -24,7 +24,11 @@ export const ImageArea = ({ images }: Props) => {
                 "row-span-2": images.length <= 2 || (images.length === 3 && idx === 0),
               })}
             >
-              <CoveredImage src={getImagePath(image.id)} alt={image.alt} />
+              <CoveredImage
+                alt={image.alt}
+                isLcpCandidate={idx === 0}
+                src={getImagePath(image.id)}
+              />
             </div>
           );
         })}

application/client/src/components/post/PostItem.tsx

@@ -23,6 +23,8 @@ export const PostItem = ({ post }: Props) => {
             >
               <img
                 alt={post.user.profileImage.alt}
+                decoding="async"
+                fetchPriority="low"
                 src={getProfileImagePath(post.user.profileImage.id)}
               />
             </Link>

application/client/src/containers/AppContainer.tsx

@@ -5,6 +5,7 @@ import { Route, Routes, useLocation, useNavigate } from "react-router";
 import { AppPage } from "@web-speed-hackathon-2026/client/src/components/application/AppPage";
 import { AuthModalContainer } from "@web-speed-hackathon-2026/client/src/containers/AuthModalContainer";
 import { NewPostModalContainer } from "@web-speed-hackathon-2026/client/src/containers/NewPostModalContainer";
+import { PostContainer } from "@web-speed-hackathon-2026/client/src/containers/PostContainer";
 import { TimelineContainer } from "@web-speed-hackathon-2026/client/src/containers/TimelineContainer";
 import { fetchJSON, sendJSON } from "@web-speed-hackathon-2026/client/src/utils/fetchers";
 
@@ -36,12 +37,6 @@ const DirectMessageListContainer = lazy(() =>
   })),
 );
 
-const PostContainer = lazy(() =>
-  import("@web-speed-hackathon-2026/client/src/containers/PostContainer").then((m) => ({
-    default: m.PostContainer,
-  })),
-);
-
 const SearchContainer = lazy(() =>
   import("@web-speed-hackathon-2026/client/src/containers/SearchContainer").then((m) => ({
     default: m.SearchContainer,
@@ -55,7 +50,6 @@ const TermContainer = lazy(() =>
 );
 
 // ルート初期表示でだけ lazy chunk の取得を前倒しする
-// (render delay の短縮: Lighthouse が LCP 候補を決める前に chunk を揃える)
 if (typeof window !== "undefined") {
   const path = window.location.pathname;
 
@@ -67,8 +61,6 @@ if (typeof window !== "undefined") {
     void import("@web-speed-hackathon-2026/client/src/containers/DirectMessageListContainer");
   } else if (path.startsWith("/dm/")) {
     void import("@web-speed-hackathon-2026/client/src/containers/DirectMessageContainer");
-  } else if (/^\/posts\/[^/]+$/.test(path)) {
-    void import("@web-speed-hackathon-2026/client/src/containers/PostContainer");
   }
 }
 

application/client/src/containers/PostContainer.tsx

@@ -15,7 +15,7 @@ const PostContainerContent = ({ postId }: { postId: string | undefined }) => {
   );
 
   const { data: comments, fetchMore } = useInfiniteFetch<Models.Comment>(
-    `/api/v1/posts/${postId}/comments`,
+    postId != null ? `/api/v1/posts/${postId}/comments` : "",
     fetchJSON,
   );
 

application/client/src/index.tsx

@@ -5,12 +5,10 @@ import { BrowserRouter } from "react-router";
 import { AppContainer } from "@web-speed-hackathon-2026/client/src/containers/AppContainer";
 import { store } from "@web-speed-hackathon-2026/client/src/store";
 
-window.addEventListener("load", () => {
-  createRoot(document.getElementById("app")!).render(
-    <Provider store={store}>
-      <BrowserRouter>
-        <AppContainer />
-      </BrowserRouter>
-    </Provider>,
-  );
-});
+createRoot(document.getElementById("app")!).render(
+  <Provider store={store}>
+    <BrowserRouter>
+      <AppContainer />
+    </BrowserRouter>
+  </Provider>,
+);

application/server/src/routes/static.ts

@@ -15,6 +15,80 @@ import { parseSearchQuery } from "@web-speed-hackathon-2026/server/src/utils/par
 
 export const staticRouter = Router();
 
+/** HTML 埋め込み用: 説明文など巨大フィールドを除き、インラインスクリプトのパース時間を抑える */
+function trimUserForClientPreload(u: unknown): Record<string, unknown> | null {
+  if (u == null || typeof u !== "object") return null;
+  const raw = u as Record<string, unknown>;
+  const pi = raw["profileImage"];
+  const profileImage =
+    pi != null && typeof pi === "object"
+      ? {
+          alt: (pi as Record<string, unknown>)["alt"] ?? "",
+          id: (pi as Record<string, unknown>)["id"],
+        }
+      : pi;
+  return {
+    id: raw["id"],
+    name: raw["name"],
+    profileImage,
+    username: raw["username"],
+  };
+}
+
+function trimPostForClientPreload(raw: Record<string, unknown>): Record<string, unknown> {
+  const images = raw["images"];
+  const trimmedImages = Array.isArray(images)
+    ? images.map((im) => {
+        const row = im as Record<string, unknown>;
+        return { alt: row["alt"] ?? "", id: row["id"] };
+      })
+    : images;
+
+  const movie = raw["movie"];
+  const trimmedMovie =
+    movie != null && typeof movie === "object"
+      ? { id: (movie as Record<string, unknown>)["id"] }
+      : movie;
+
+  const sound = raw["sound"];
+  const trimmedSound =
+    sound != null && typeof sound === "object"
+      ? { id: (sound as Record<string, unknown>)["id"] }
+      : sound;
+
+  return {
+    createdAt: raw["createdAt"],
+    id: raw["id"],
+    images: trimmedImages,
+    movie: trimmedMovie,
+    sound: trimmedSound,
+    text: raw["text"],
+    user: trimUserForClientPreload(raw["user"]),
+  };
+}
+
+/** 投稿詳細の LCP 候補（先頭画像 or 動画 GIF）を先読みして、JS 実行前から取得を開始する */
+function buildPostDetailLcpPreloadTags(post: Record<string, unknown> | null): string {
+  if (post == null) return "";
+  const parts: string[] = [];
+  const images = post["images"];
+  if (Array.isArray(images) && images.length > 0) {
+    const first = images[0] as { id?: string } | undefined;
+    if (first?.id != null && first.id !== "") {
+      parts.push(
+        `<link rel="preload" as="image" href="/images/${first.id}.jpg" fetchpriority="high">`,
+      );
+    }
+  }
+  const movie = post["movie"] as { id?: string } | null | undefined;
+  if (movie != null && typeof movie === "object" && movie.id != null && movie.id !== "") {
+    parts.push(
+      `<link rel="preload" as="image" href="/movies/${movie.id}.gif" fetchpriority="high">`,
+    );
+  }
+  return parts.join("");
+}
+
 // index.html テンプレートをキャッシュ
 let _htmlTemplate: string | null = null;
 function getHtmlTemplate(): string {
@@ -139,7 +213,8 @@ async function buildPreloadData(req: Parameters<Parameters<typeof Router>[0]>[0]
         // 投稿詳細ページ
         const postId = postMatch[1];
         const post = await Post.findByPk(postId);
-        data[`/api/v1/posts/${postId}`] = post ? post.toJSON() : null;
+        data[`/api/v1/posts/${postId}`] =
+          post != null ? trimPostForClientPreload(post.toJSON() as Record<string, unknown>) : null;
       }
     }
 
@@ -255,8 +330,14 @@ staticRouter.use(async (req, res, next) => {
 
   try {
     const preloadData = await buildPreloadData(req);
+    const postMatch = req.path.match(/^\/posts\/([^/]+)$/);
+    const postKey = postMatch != null ? `/api/v1/posts/${postMatch[1]}` : null;
+    const postPayload =
+      postKey != null && postKey in preloadData ? (preloadData[postKey] as Record<string, unknown> | null) : null;
+    const lcpPreload = postKey != null ? buildPostDetailLcpPreloadTags(postPayload) : "";
     const script = `<script>window.__PRELOAD_DATA__=${JSON.stringify(preloadData)};</script>`;
-    const html = template.replace("</head>", `${script}</head>`);
+    let html = lcpPreload !== "" ? template.replace("<head>", `<head>${lcpPreload}`) : template;
+    html = html.replace("</head>", `${script}</head>`);
     return res.type("text/html").send(html);
   } catch {
     return next();