프론트 엔드 성능 2021: 빠른 승리

게시 됨: 2022-03-10

요약 요약 ↬ 2021년을…빨리 만들자! 메트릭에서 도구 및 프론트 엔드 기술에 이르기까지 오늘날 웹에서 빠른 경험을 생성하기 위해 알아야 할 모든 것이 포함된 연간 프론트 엔드 성능 체크리스트. 2016년부터 업데이트되었습니다.

준비하기: 계획 및 측정항목
현실적인 목표 설정
환경 정의
자산 최적화
빌드 최적화
배달 최적화
네트워킹, HTTP/2, HTTP/3
테스트 및 모니터링
빠른 승리
한 페이지에 모든 것
체크리스트 다운로드(PDF, Apple Pages, MS Word)
한 페이지에 모든 것
체크리스트 다운로드(PDF, Apple Pages, MS Word)
다음 가이드를 놓치지 않으려면 이메일 뉴스레터를 구독하세요.

빠른 승리

이 목록은 매우 포괄적이며 모든 최적화를 완료하는 데 시간이 꽤 걸릴 수 있습니다. 그렇다면 상당한 개선을 위해 단 1시간이 주어진다면 무엇을 하시겠습니까? 모든 것을 17개의 낮은 행잉 과일 로 요약해 보겠습니다. 분명히 시작하기 전과 끝나면 3G 및 케이블 연결에서 가장 큰 콘텐츠가 포함된 페인트 및 대화형 시간을 포함하여 결과를 측정합니다.

실제 경험을 측정하고 적절한 목표를 설정하십시오. 가장 빠른 경쟁자보다 최소 20% 더 빠른 것을 목표로 하십시오. 가장 큰 콘텐츠가 포함된 페인트 < 2.5초, 첫 번째 입력 지연 < 100ms, 느린 3G에서 상호 작용 시간 < 5초, 반복 방문의 경우 TTI < 2초 이내로 유지하십시오. 최소한 첫 번째 콘텐츠가 포함된 페인트 및 대화형 시간을 위해 최적화하십시오.
Squoosh, mozjpeg, guetzli, pingo 및 SVGOMG로 이미지를 최적화하고 이미지 CDN으로 AVIF/WebP를 제공합니다.
주요 템플릿에 대한 중요한 CSS를 준비하고 각 템플릿의 <head> 에 인라인합니다. CSS/JS의 경우 최대 파일 크기 예산 내에서 작동합니다. 170KB gzip(0.7MB 압축 해제).
스크립트 다듬기, 최적화, 지연 및 지연 로드. 번들러 구성에 투자하여 중복을 제거하고 경량 대안을 확인하십시오.
항상 정적 자산을 자체 호스팅하고 항상 타사 자산을 자체 호스팅하는 것을 선호합니다. 타사 스크립트의 영향을 제한합니다. 정면을 사용하고 상호 작용 시 위젯을 로드하고 깜박임 방지 스니펫을 조심하십시오.
프레임워크를 선택할 때 선택하십시오. 단일 페이지 애플리케이션의 경우 중요한 페이지를 식별하고 정적으로 제공하거나 최소한 사전 렌더링하고 구성 요소 수준에서 점진적 수화를 사용하고 상호 작용 시 모듈을 가져옵니다.
클라이언트 측 렌더링만으로는 성능을 위해 좋은 선택이 아닙니다. 페이지가 많이 변경되지 않으면 미리 렌더링하고 가능한 경우 프레임워크 부팅을 연기합니다. 가능하면 스트리밍 서버 측 렌더링을 사용하십시오.
<script type="module"> 및 module/nomodule 패턴이 있는 레거시 브라우저에만 레거시 코드를 제공합니다.
CSS 규칙을 재그룹화하여 실험하고 본문 내 CSS를 테스트합니다.
리소스 힌트를 추가하여 더 빠른 dns-lookup , preconnect , prefetch , preload 및 prerender 로 전송 속도를 높입니다.
웹 글꼴의 하위 집합을 지정하고 비동기식으로 로드하고 빠른 첫 번째 렌더링을 위해 CSS의 font-display 를 활용합니다.
HTTP 캐시 헤더와 보안 헤더가 올바르게 설정되어 있는지 확인하십시오.
서버에서 Brotli 압축을 활성화합니다. (불가능하다면 최소한 Gzip 압축이 활성화되어 있는지 확인하십시오.)
서버가 Linux 커널 버전 4.9 이상에서 실행되는 동안 TCP BBR 혼잡을 활성화하십시오.
가능한 경우 OCSP 스테이플링 및 IPv6을 활성화합니다. 항상 OCSP 스테이플 DV 인증서를 제공하십시오.
HTTP/2에 대해 HPACK 압축을 활성화하고 사용 가능한 경우 HTTP/3으로 이동합니다.
서비스 워커 캐시에 글꼴, 스타일, JavaScript 및 이미지와 같은 자산을 캐시합니다.

체크리스트 다운로드(PDF, Apple Pages)

이 체크리스트를 염두에 두고 모든 종류의 프론트 엔드 성능 프로젝트에 대비해야 합니다. 체크리스트의 인쇄 가능한 PDF와 편집 가능한 Apple Pages 문서 를 자유롭게 다운로드하여 필요에 따라 체크리스트를 사용자화하십시오.

체크리스트 PDF 다운로드(PDF, 166KB)
Apple Pages에서 체크리스트 다운로드(.pages, 275KB)
MS Word에서 체크리스트 다운로드(.docx, 151KB)

대안이 필요한 경우 Dan Rublic의 프런트 엔드 체크리스트, Jon Yablonski의 "Designer's Web Performance Checklist" 및 FrontendChecklist를 확인할 수도 있습니다.

오프 위 고!

일부 최적화는 작업 또는 예산 범위를 벗어나거나 처리해야 하는 레거시 코드를 감안할 때 과도할 수 있습니다. 괜찮아! 이 체크리스트를 일반(그리고 포괄적인) 가이드로 사용하고 상황에 적용되는 문제 목록을 직접 만드십시오. 그러나 가장 중요한 것은 최적화하기 전에 문제를 식별하기 위해 자신의 프로젝트를 테스트하고 측정하는 것입니다. 2021년에도 행복한 공연 결과를 얻으세요 여러분!

준비하기: 계획 및 측정항목
현실적인 목표 설정
환경 정의
자산 최적화
빌드 최적화
배달 최적화
네트워킹, HTTP/2, HTTP/3
테스트 및 모니터링
빠른 승리
한 페이지에 모든 것
체크리스트 다운로드(PDF, Apple Pages, MS Word)
한 페이지에 모든 것
체크리스트 다운로드(PDF, Apple Pages, MS Word)
다음 가이드를 놓치지 않으려면 이메일 뉴스레터를 구독하세요.

Guy Podjarny, Yoav Weiss, Addy Osmani, Artem Denysov, Denys Mishunov, Ilya Pukhalski, Jeremy Wagner, Colin Bendell, Mark Zeman, Patrick Meenan, Leonardo Losoviz, Andy Davies, Rachel Andrew, Anselm Hannemann, Barry Pollard에게 감사드립니다. Hamann, Gideon Pyzer, Andy Davies, Maria Prosvernina, Tim Kadlec, Rey Bango, Matthias Ott, Peter Bowyer, Phil Walton, Mariana Peralta, Pepijn Senders, Mark Nottingham, Jean Pierre Vincent, Philipp Tellis, Ryan Townsend, Ingrid Bergman, Mohamed Hussain SH, Jacob Groß, Tim Swalling, Bob Visser, Kev Adamson, Adir Amsalem, Aleksey Kulikov 및 Rodney Rehm은 물론 모든 사람이 사용할 수 있도록 성능 최적화 작업에서 배운 기술과 교훈을 공유한 환상적인 커뮤니티 . 당신은 정말 스매싱입니다!

프론트 엔드 성능 2021: 빠른 승리

목차

빠른 승리

체크리스트 다운로드(PDF, Apple Pages)

오프 위 고!

목차