caadiq
6e2159cf67
개발자도구 Performance 분석 결과 CLS 0.17로 레이아웃 이동이 큼. JSDelivr Maplestory.css의 font-display: swap이 폰트 도착 시 텍스트 너비를 swap 시켜서 카드 애니메이션 중에 레이아웃 튀어 버벅임 발생. - JSDelivr CSS 링크 제거하고 @font-face를 index.html에 직접 선언하며 font-display: optional 로 변경 - woff2만 참조 (fallback 포맷 제거) - cdn.jsdelivr.net preconnect 추가해 첫 방문 시에도 빠르게 시도 첫 방문 시: fallback(Noto Sans KR)으로 즉시 렌더, Maplestory가 100ms 내 도착하지 못하면 그대로 유지. 이후 캐시된 재방문부터는 정상 적용. 레이아웃 이동 0, 애니메이션 부드럽게 진행. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
46 lines
1.9 KiB
HTML
46 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&display=swap" rel="stylesheet" />
|
|
<!-- MapleStory 폰트: font-display: optional 로 override. 첫 방문시 폰트가 100ms 내에
|
|
도착하지 않으면 fallback 유지, 이후 캐시되면 적용됨. 레이아웃 이동 제거 목적. -->
|
|
<style>
|
|
@font-face {
|
|
font-family: 'Maplestory';
|
|
font-weight: 300;
|
|
font-style: normal;
|
|
font-display: optional;
|
|
src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/Maplestory-Light.woff2') format('woff2');
|
|
}
|
|
@font-face {
|
|
font-family: 'Maplestory';
|
|
font-weight: 700;
|
|
font-style: normal;
|
|
font-display: optional;
|
|
src: url('https://cdn.jsdelivr.net/gh/fonts-archive/Maplestory/Maplestory-Bold.woff2') format('woff2');
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="https://openapi.nexon.com/js/analytics.js?app_id=274844" async></script>
|
|
<script>
|
|
(function () {
|
|
try {
|
|
var raw = localStorage.getItem('maple-theme');
|
|
if (!raw) return;
|
|
var theme = JSON.parse(raw).state && JSON.parse(raw).state.theme;
|
|
if (theme === 'light') document.documentElement.setAttribute('data-theme', 'light');
|
|
} catch (e) {}
|
|
})();
|
|
</script>
|
|
<title>메이플스토리 유틸리티</title>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.jsx"></script>
|
|
</body>
|
|
</html>
|