jaybe/landing-builder
1
0
Fork 0
Code Issues Pull Requests 9 Actions Packages Projects Releases Wiki Activity

Phase7-PerfSEO: 폰트 preload 옵션 및 이미지 loading/decoding UI 연동 TDD/구현 완료

Browse Source
This commit is contained in:
Jaybe
2025-11-16 04:10:52 +09:00
parent 689edeaf24
commit ed7f6189eb
5 changed files with 183 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/BuilderClientPage.tsx
+47 -6
View File
@@ -61,6 +61,9 @@ export default function BuilderClientPage() {
const [assetPathStrategy, setAssetPathStrategy] = useState<'flat' | 'grouped'>('flat')
// Font optimization: allow toggling Google Fonts preconnect links in exported HTML
const [fontPreconnect, setFontPreconnect] = useState<boolean>(true)
const [fontPreload, setFontPreload] = useState<boolean>(false)
const [imageLoading, setImageLoading] = useState<'lazy' | 'eager'>('lazy')
const [imageDecoding, setImageDecoding] = useState<'async' | 'sync'>('async')
const [viewport, setViewport] = useState<'desktop' | 'mobile'>(() => {
if (typeof window !== 'undefined') {
try {
@@ -194,7 +197,7 @@ export default function BuilderClientPage() {
w.__exportPreview = () => {
try {
// Export preview with current optimization options
return exportPage(pageSchema.parse(pageData), { assetManager: buildEffectiveAm(), fontPreconnect })
return exportPage(pageSchema.parse(pageData), { assetManager: buildEffectiveAm(), fontPreconnect, fontPreload, imageLoading, imageDecoding })
} catch {
const fixed: Page = {
...pageData,
@@ -204,12 +207,12 @@ export default function BuilderClientPage() {
spamProtection: pageData.form?.spamProtection ?? { honeypotFieldName: '_hp', minSubmitSeconds: 2 },
},
}
return exportPage(pageSchema.parse(fixed), { assetManager: buildEffectiveAm(), fontPreconnect })
return exportPage(pageSchema.parse(fixed), { assetManager: buildEffectiveAm(), fontPreconnect, fontPreload, imageLoading, imageDecoding })
}
}
}
} catch {}
}, [pageData, am, fontPreconnect, assetPathStrategy])
}, [pageData, am, fontPreconnect, fontPreload, imageLoading, imageDecoding, assetPathStrategy])
const doExport = useCallback(async () => {
let valid = pageData as Page
@@ -237,8 +240,8 @@ export default function BuilderClientPage() {
}
return clone
}
// Respect font optimization toggle when exporting
const exported = exportPage(valid, { assetManager: buildEffectiveAm(), fontPreconnect })
// Respect font and image optimization toggles when exporting
const exported = exportPage(valid, { assetManager: buildEffectiveAm(), fontPreconnect, fontPreload, imageLoading, imageDecoding })
try {
if (typeof window !== 'undefined') {
const w = window as unknown as { __captureExport?: boolean; __lastExport?: { html: string; css: string; js: string } }
@@ -285,7 +288,7 @@ export default function BuilderClientPage() {
}
const zipBytes = await buildZip({ html: exported.html, css: exported.css, js: exported.js, assets, extras })
download('landing.zip', zipBytes)
}, [pageData, am, manifestName, manifestShortName, manifestStartUrl, manifestDisplay, manifestThemeColor, robotsDisallow, sheetsMode, fontPreconnect, assetPathStrategy])
}, [pageData, am, manifestName, manifestShortName, manifestStartUrl, manifestDisplay, manifestThemeColor, robotsDisallow, sheetsMode, fontPreconnect, fontPreload, imageLoading, imageDecoding, assetPathStrategy])
return (
<div className="p-6 space-y-6">
@@ -375,6 +378,44 @@ export default function BuilderClientPage() {
/>
<span className="text-sm">Enable font preconnect (Google Fonts)</span>
</label>
<label className="flex items-center gap-2" htmlFor="ins-font-preload">
<input
id="ins-font-preload"
type="checkbox"
aria-label="Font Preload"
checked={fontPreload}
onChange={(e) => setFontPreload(e.target.checked)}
/>
<span className="text-sm">Enable font preload (Google Fonts)</span>
</label>
<div className="grid grid-cols-2 gap-2">
<label className="block" htmlFor="ins-image-loading">
<span className="sr-only">Image Loading</span>
<select
id="ins-image-loading"
aria-label="Image Loading"
className="border rounded px-3 py-2 w-full"
value={imageLoading}
onChange={(e) => setImageLoading(e.target.value as 'lazy' | 'eager')}
>
<option value="lazy">Image Loading: lazy</option>
<option value="eager">Image Loading: eager</option>
</select>
</label>
<label className="block" htmlFor="ins-image-decoding">
<span className="sr-only">Image Decoding</span>
<select
id="ins-image-decoding"
aria-label="Image Decoding"
className="border rounded px-3 py-2 w-full"
value={imageDecoding}
onChange={(e) => setImageDecoding(e.target.value as 'async' | 'sync')}
>
<option value="async">Image Decoding: async</option>
<option value="sync">Image Decoding: sync</option>
</select>
</label>
</div>
<label className="block" htmlFor="ins-manifest-name">
<span className="sr-only">Manifest Name</span>
<input