front/index.html at dev · Team-PinLog/front · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!doctype html>
<!-- 372: lang="en"이면 화면이 한국어인데 영어 문서로 선언돼 Chrome이 번역 팝업을 띄운다. -->
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <!-- viewport-fit=cover가 없으면 iOS Safari에서 env(safe-area-inset-*)가 항상 0이다.
         하단 고정 탭바(AppLayout)가 홈 인디케이터에 가리지 않으려면 반드시 필요하다. 근거: S15P11A705-330 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <!-- 357: 외부 폰트 <link>(jsDelivr Pretendard, Google Fonts 손글씨체)와 preconnect를 모두
         제거했다. 세 서체 모두 public/fonts/의 서브셋 WOFF2로 번들해 같은 오리진에서 받는다.
         @font-face 선언은 src/index.css에 있다.

         본문 서체만 preload한다. 폰트는 CSS를 받아 파싱하고, 그 폰트를 쓰는 요소가 실제로
         레이아웃될 때까지 요청이 시작되지 않는다 — preload는 그 사슬을 건너뛰고 HTML을 읽는
         즉시 받기 시작한다. 첫 화면의 거의 모든 글자가 이 서체라 여기서 벌어들이는 시간이 크다.
         crossorigin이 빠지면 폰트를 두 번 받는다(preload는 CORS 모드로 요청되므로 같은 오리진
         이어도 반드시 붙여야 캐시가 재사용된다).

         나머지 셋은 일부러 preload하지 않는다 — 표제용 제주한라산(195K)·인용용 제주명조(241K)는
         쓰는 화면에서만 요청하고, 손글씨체(469K)는 포스트잇 전용이라 첫 화면에 없는 경우가 많다.
         전부 preload하면 정작 필요한 본문 서체와 대역폭을 다투어 초기 렌더가 밀린다.

         380: 본문 서체가 잘난고딕(154K)에서 제주고딕(92K)으로 바뀌면서 이 preload 한 건의
         전송량도 그만큼 줄었다. -->
    <link rel="preload" href="/fonts/jeju-gothic.woff2" as="font" type="font/woff2" crossorigin />
    <title>핀로그</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>