HTML 덩어리 콘텐츠 빨리 그리기

2021-12-17

HTML & CSS / HTML

LCP는 구글 핵심 성능 지표에 포함되는 항목
lighthouse: 크롬에 내장되어 있음
2.5초 이내에 로드하는 것이 목표

라이브러리 의존 줄이기

https://youmightnotneed.com

PreConnect / Preload

preconnect : 미리 해당 URL을 연결함
- 도메인을 알지만 자원의 최종 경로를 모르는 경우 서버와의 연결을 미리 설정
- DNS(Domain Name Server), TCP(Transmission Control Protocol), TLS(Transfer Layer Security) 왕복에 필요한 시간을 단축.
- 서드 파티 자원에 적합
preload : 필요한 자원을 병렬 다운로드
- 자원을 로딩하는 동안 렌더링을 차단하지 않음
- as 속성을 함께 명시해주어야 한다. (예 - as="style", as="script, as="image)

서드파티

<head>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="preload" as="style" href="x.css" onload="this.onload=null;this.rel='stylesheet'">
</head>

큰 이미지

<head>
    <link rel="preload" as="image" media="max-width:640px" href="small.avif">
    <link rel="preload" as="image" media="min-width:641px" href="large.avif">
</head>

이미지 loading / decoding

lazy
- 뷰포트 밖에 있는 이미지를 로딩하지 않는다.
- 대략 뷰포트 높이의 1~2배 지점까지 근접하면 로딩됨.
async
- 이미지 디코딩(복호화)을 병렬처리
- 디코딩을 지연시켜 다른 콘텐츠의 표시 속도가 빨라짐.
picture 요소에는 사용하지 않아도 되고, img일 때만 사용
1
2
3
4
<img src="x.jpg"
loading="lazy"
decoding="async"
>

REFERENCE
패스트 캠퍼스 The RED : 견고한 UI 설계를 위한 마크업 가이드 _ 정찬명 강사님