feat : 6 astra improve it

components/public/google-adsense.tsx

@@ -23,7 +23,7 @@ export function GoogleAdsense() {
     <Script
       id="google-adsense"
       src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${encodeURIComponent(clientId)}`}
-      strategy="afterInteractive"
+      strategy="lazyOnload"
       crossOrigin="anonymous"
     />
   );

components/public/structured-guide.tsx

@@ -30,7 +30,6 @@ import { TeamArtifactIcon, TeamSearch } from "@/components/public/team-search";
 import { GuideImageExport } from "@/components/public/guide-image-export";
 import { ExportText } from "@/components/public/export-language";
 import { WeaponImageExport } from "@/components/public/weapon-image-export";
-import { WeaponChart } from "@/components/public/weapon-chart";
 import { WeaponDisplayMode, WeaponDisplayModeProvider } from "@/components/public/weapon-display-mode";
 import { ArtifactImageExport } from "@/components/public/artifact-image-export";
 import { GuideExportBranding } from "@/components/public/guide-export-branding";
@@ -217,8 +216,8 @@ function GuideOverview({
             alt={`ไกด์ ${guide.name}`}
             fill
             sizes="(min-width: 1280px) 600px, (min-width: 1024px) calc(50vw - 44px), calc(100vw - 32px)"
-            quality={100}
-            priority
+            quality={75}
+            fetchPriority="high"
             className="object-cover"
           />
         </div>
@@ -456,14 +455,14 @@ function WeaponSectionContent({
           ) : <span />}
           {showExportActions ? (
             <WeaponImageExport
-              guide={guide}
+              guide={{ name: guide.name, coverUrl: guide.coverUrl, character: { name: guide.character.name, splashImageUrl: guide.character.splashImageUrl } }}
               group={group}
               conditionIndex={groupIndex}
             />
           ) : null}
         </div>
         {group.note ? <p className="whitespace-pre-wrap text-muted-foreground">{group.note}</p> : null}
-        <WeaponDisplayMode exporting={exporting} chart={!exporting ? <WeaponChart rows={group.rows} /> : null}>
+        <WeaponDisplayMode exporting={exporting} rows={group.rows}>
         <div
           className={cn("grid gap-3", useCompactExportGrid && "grid-cols-2")}
         >

components/public/weapon-display-mode.tsx

@@ -1,9 +1,17 @@
 "use client";
 
+import { Skeleton } from "@/components/ui/skeleton";
+import dynamic from "next/dynamic";
+import type { PublicGuide } from "@/lib/guides/queries";
+
 import { createContext, useContext, useState, type ReactNode } from "react";
 
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 
+const LazyWeaponChart = dynamic(() => import("./weapon-chart").then((module) => module.WeaponChart), {
+  loading: () => <Skeleton className="h-80 rounded-xl" aria-label="กำลังโหลดกราฟ" />,
+});
+
 const WeaponModeContext = createContext<{
   mode: string;
   setMode: (mode: string) => void;
@@ -21,11 +29,11 @@ export function WeaponDisplayModeProvider({ children }: { children: ReactNode })
 
 export function WeaponDisplayMode({
   children,
-  chart,
+  rows,
   exporting = false,
 }: {
   children: ReactNode;
-  chart: ReactNode;
+  rows: PublicGuide["weaponGroups"][number]["rows"];
   exporting?: boolean;
 }) {
   const context = useContext(WeaponModeContext);
@@ -48,7 +56,7 @@ export function WeaponDisplayMode({
         <ToggleGroupItem value="normal">List</ToggleGroupItem>
         <ToggleGroupItem value="chart">Chart</ToggleGroupItem>
       </ToggleGroup>
-      {mode === "chart" ? chart : children}
+      {mode === "chart" ? <LazyWeaponChart rows={rows} /> : children}
     </div>
   );
 }

components/public/weapon-image-export.tsx

@@ -21,6 +21,10 @@ import {
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import type { PublicGuide } from "@/lib/guides/queries";
 
+type WeaponExportGuide = Pick<PublicGuide, "name" | "coverUrl"> & {
+  character: Pick<PublicGuide["character"], "name" | "splashImageUrl">;
+};
+
 type WeaponGroup = PublicGuide["weaponGroups"][number];
 type DamageMetric = "overallPercent" | "personalPercent";
 
@@ -37,7 +41,7 @@ export function WeaponComparisonImage({
   metric,
   conditionLabel,
 }: {
-  guide: PublicGuide;
+  guide: WeaponExportGuide;
   group: WeaponGroup;
   metric: DamageMetric;
   conditionLabel: ReactNode;
@@ -117,7 +121,7 @@ export function WeaponImageExport({
   group,
   conditionIndex,
 }: {
-  guide: PublicGuide;
+  guide: WeaponExportGuide;
   group: WeaponGroup;
   conditionIndex: number;
 }) {