웹의 상태

강력한 성능 향상을위한 안내서

인터넷은 기하 급수적으로 성장하고 있으며 우리가 만든 웹 플랫폼도 마찬가지입니다. 종종 우리는 우리의 연결 대상과 맥락에 대한 더 큰 그림을 반영하지 못하지만, 우리의 작품을 보는 사람들이 자신이 발견 할 수있는 상황을 보여줍니다. 성능을 염두에 두십시오.

그렇다면 오늘날 웹 상태는 어떻습니까?

이 지구상의 7.4 억 인구 중 46 %만이 인터넷에 액세스 할 수 있습니다. 평균 네트워크 속도는 인상적인 7Mb / s로 제한됩니다. 더 중요한 것은 인터넷 사용자의 93 %가 모바일 장치를 통해 온라인으로 접속하고 있다는 점입니다. 데이터는 종종 우리가 생각했던 것보다 더 비쌉니다. 500MB 패킷을 구매하는 데 1 시간에서 13 시간이 소요될 수 있습니다.

저희 웹 사이트는 완벽한 형태가 아닙니다. 평균 사이트는 오리지널 Doom 게임의 크기 (약 3MB)입니다 (통계적 정확성을 위해서는 중간 값을 사용해야합니다. Ilya Grigorik의 우수한 "평균 페이지"는 신화 : 평균 사이트 크기는 현재 1.4MB입니다. 이미지는 1.7MB의 대역폭과 400KB의 JavaScript 평균을 쉽게 설명 할 수 있습니다. 이것은 웹 플랫폼에만 국한된 문제가 아닙니다. 기본 응용 프로그램은 더 좋지 않습니다. 지정되지 않은 버그 수정을 얻기 위해 200MB를 다운로드해야했던 시간을 기억하십니까?

기술자로서 우리는 종종 특권의 위치에 있습니다. 최신의 고급 랩톱, 전화 및 고속 케이블 인터넷 연결을 사용하면 모든 사람에게 해당되는 것이 아니라는 사실을 잊기가 너무 쉬워집니다 (실제로는 거의 해당되지 않음).

우리가 특권의 관점과 공감의 부족에서 웹 플랫폼을 구축하는 경우 배타적이고 하위 경험을 낳습니다.

성능을 염두에두고 디자인하고 개발하여 어떻게 더 잘할 수 있습니까?

모든 자산 최적화

성능을 크게 향상시키는 가장 강력하지만 활용률이 낮은 방법 중 하나는 브라우저가 자산을 분석하고 제공하는 방법을 이해하는 것부터 시작합니다. 브라우저는 우선 순위를 분석하고 우선 순위를 결정하는 동안 리소스를 검색하는 데 매우 뛰어납니다. 여기 중요한 요청이 들어옵니다.

요청은 사용자의 뷰포트 내에서 콘텐츠를 렌더링하는 데 필요한 자산이 포함 된 경우 중요합니다.

대부분의 사이트에서 HTML, 필요한 CSS, 로고, 웹 글꼴 및 이미지 일 수 있습니다. 많은 경우에, 자산이 대신 요청 될 때 수십 개의 다른 것 (JavaScript, 추적 코드, 광고 등)이 밝혀졌습니다. 다행히 중요한 리소스를 신중하게 선택하고 우선 순위를 조정하여이 동작을 제어 할 수 있습니다.

를 사용하면 원하는 콘텐츠가 제 시간에 렌더링되도록 자산 우선 순위를 수동으로 높게 설정할 수 있습니다. 이 기술은 Time to Interactive 메트릭을 대폭 향상시켜 최적의 사용자 경험을 가능하게합니다.

중요한 요청은 여전히 ​​많은 사람들에게 블랙 박스처럼 보이고 공유 가능한 자료가 부족하더라도이를 바꾸는 데 도움이되지 않습니다. 다행스럽게도 Ben Schwarz는 주제에 관한 믿을 수 없을 정도로 포괄적이고 접근 가능한 기사 인 The Critical Request를 발표했습니다. 또한 Chrome에서 Addy의 사전로드, 프리 페치 및 우선 순위를 확인하십시오.

Chrome 개발자 도구에서 우선 순위 사용

requests 요청 우선 순위를 얼마나 잘 관리하고 있는지 확인하려면 Lighthouse 성능 도구 및 중요 요청 체인 감사를 사용하거나 Chrome 개발자 도구의 네트워크 탭에서 요청 우선 순위를 확인하세요.

일반 성능 점검표

  1. 적극적으로 캐시
  2. 압축 활성화
  3. 중요한 자산의 우선 순위
  4. 컨텐츠 전달 네트워크 사용

이미지 최적화

이미지는 종종 웹 페이지의 전송 된 페이로드의 대부분을 차지하므로 이미지 최적화가 가장 큰 성능 향상을 가져올 수 있습니다. 여분의 바이트를 제거하는 데 도움이되는 기존의 전략과 도구가 많이 있지만 가장 먼저 묻어 야 할 질문은 다음과 같습니다. "이 이미지는 메시지와 결과를 전달하는 데 필수적입니까?" 이를 제거 할 수 있다면 대역폭 절약뿐만 아니라 요청도 가능합니다.

경우에 따라 서로 다른 기술로 유사한 결과를 얻을 수 있습니다. CSS에는 그림자, 그라디언트, 애니메이션 또는 모양과 같은 아트 디렉션에 대한 다양한 속성이있어 자산을 적절한 스타일의 DOM 요소로 교체 할 수 있습니다.

올바른 형식 선택

자산을 제거 할 수없는 경우 적절한 형식을 결정하는 것이 중요합니다. 초기 선택은 벡터 그래픽과 래스터 그래픽 사이에 있습니다.

  • 벡터 : 해상도에 독립적이며 일반적으로 크기가 상당히 작습니다. 기본 모양 (선, 다각형, 원 및 점)으로 구성된 로고, 아이콘 및 간단한 자산에 적합합니다.
  • 래스터 : 훨씬 더 자세한 결과를 제공합니다. 사진에 이상적입니다.

이 결정을 내린 후 JPEG, GIF, PNG-8, PNG–24 또는 WEBP 또는 JPEG-XR과 같은 최신 형식 중에서 선택할 수있는 적절한 형식이 있습니다. 그러한 선택의 폭이 넓어지면 올바른 선택을 어떻게 할 수 있습니까? 가장 적합한 형식을 찾는 기본 방법은 다음과 같습니다.

  • JPEG : 다양한 색상의 이미지 (예 : 사진)
  • PNG–8 : 몇 가지 색상의 이미지
  • PNG–24 : 부분 투명도가있는 이미지
  • GIF : 애니메이션 이미지

Photoshop은 품질 감소, 노이즈 감소 또는 색상 수와 같은 다양한 설정을 통해 내보내기시 이들 각각을 최적화 할 수 있습니다. 설계자가 성능 관행을 인식하고 올바른 최적화 사전 설정으로 올바른 유형의 자산을 준비 할 수 있는지 확인하십시오. 이미지를 개발하는 방법에 대한 자세한 내용을 보려면 Lara Hogan의 귀중한 성능 설계를 방문하십시오.

새로운 형식으로 실험하기

이미지 형식의 스펙트럼에는 WebP, JPEG 2000 및 JPEG-XR과 같은 몇 가지 새로운 플레이어가 있습니다. 이들 모두는 브라우저 공급 업체 (Google의 WebP, Apple의 JPEG 2000 및 Microsoft의 JPEG-XR)에 의해 개발되었습니다.

WebP는 무손실 압축과 무손실 압축을 모두 지원하는 가장 인기있는 경쟁자입니다. 무손실 WebP는 PNG보다 26 % 작고 JPG보다 25-34 % 작습니다. 브라우저 지원이 74 %이면 폴 백과 함께 안전하게 사용하여 전송 된 바이트를 최대 1/3까지 절약 할 수 있습니다. JPG 및 PNG는 Photoshop 및 기타 이미지 처리 응용 프로그램과 명령 줄 인터페이스 (brew install webp)를 통해 WebP로 변환 할 수 있습니다.

이 형식들 사이의 시각적 차이를 살펴보고 싶다면 Github에서 멋진 데모를 추천합니다.

도구 및 알고리즘으로 최적화

매우 효율적인 이미지 형식을 사용해도 사후 처리 최적화를 건너 뛰는 것은 아닙니다. 이 단계는 매우 중요합니다.

일반적으로 크기가 작은 SVG를 선택한 경우 압축해야합니다. SVGO는 불필요한 메타 데이터를 제거하여 SVG를 신속하게 최적화 할 수있는 명령 줄 도구입니다. 웹 인터페이스를 선호하거나 운영 체제에 의해 제한되는 경우 Jake Archibald의 SVGOMG를 사용하십시오. SVG는 XML 기반 형식이므로 서버 측에서 GZIP 압축을 수행 할 수도 있습니다.

ImageOptim은 대부분의 다른 이미지 유형에 탁월한 선택입니다. pngcrush, pngquant, MozJPEG, Google Zopfli 등으로 구성되며 포괄적 인 오픈 소스 패키지에 여러 가지 훌륭한 도구가 번들로 제공됩니다. Mac OS 앱, 명령 줄 인터페이스 및 스케치 플러그인으로 제공되는 ImageOptim은 기존 워크 플로우에 쉽게 구현할 수 있습니다. Linux 또는 Windows 사용자의 경우 ImageOptim이 사용하는 대부분의 CLI를 플랫폼에서 사용할 수 있습니다.

올해 초 신흥 엔코더를 사용하려는 경향이있는 경우 Google은 WebP 및 Zopfli에 대한 학습에서 비롯된 오픈 소스 알고리즘 인 Guetzli를 출시했습니다. Guetzli는 다른 압축 방법보다 최대 35 % 더 작은 JPEG를 생성해야합니다. 유일한 단점은 느린 처리 ​​시간 (메가 픽셀 당 1 분의 CPU)입니다.

도구를 선택할 때는 원하는 결과를 제공하고 팀의 워크 플로에 적합해야합니다. 이상적으로는 최적화 프로세스를 자동화하므로 최적화되지 않은 균열을 통해 이미지가 미끄러지지 않습니다.

책임감 있고 반응이 좋은 이미지

10 년 전 우리는 모두를 해결하기 위해 하나의 해결 방법으로 벗어날 수 있었지만, 끊임없이 변화하는 반응 형 웹의 환경은 오늘날 매우 다릅니다. 그렇기 때문에 우리는 시각적 리소스를 구현할 때 각별한주의를 기울여 다양한 뷰포트 및 장치에 적합하도록주의를 기울여야합니다. 다행히도 반응 형 이미지 커뮤니티 그룹 덕분에 사진 요소와 srcset 속성 (85 % 이상 지원)을 완벽하게 갖추고 있습니다.

srcset 속성

Srcset은 사용자의 화면 밀도와 크기에 따라 이미지를 표시하려는 경우 해상도 전환 시나리오에서 가장 잘 작동합니다. srcset 및 크기 속성의 사전 정의 된 규칙 세트를 기반으로 브라우저는 뷰포트에 따라 제공 할 최상의 이미지를 선택합니다. 이 기술은 특히 모바일 사용자에게 큰 대역폭과 요청 절감 효과를 가져올 수 있습니다.

srcset 사용법의 예

그림 요소

그림 요소와 미디어 속성은 예술 방향을 쉽게 만들 수 있도록 설계되었습니다. 다양한 조건 (미디어 쿼리를 통해 테스트)에 대한 다양한 소스를 제공함으로써 해상도에 관계없이 이미지의 가장 중요한 요소를 항상 주목할 수 있습니다.

그림 요소 사용법의 예

두 가지 접근 방식에 대한 자세한 설명은 Jason Grigsby의 반응 형 이미지 101 안내서를 읽으십시오.

이미지 CDN과 함께 제공

퍼포먼스 비주얼을 향한 여정의 마지막 단계는 전달입니다. 모든 자산은 컨텐츠 전송 네트워크를 사용하면 이점을 얻을 수 있지만 Cloudinary 또는 imgx와 같은 이미지를 대상으로하는 특정 도구가 있습니다. 이러한 서비스를 사용하면 서버의 트래픽을 줄이고 응답 대기 시간을 크게 줄이는 것 이상의 이점이 있습니다.

CDN은 이미지가 많은 사이트에서 반응 형의 최적화 된 자산을 제공함으로써 많은 복잡성을 제거 할 수 있습니다. 제공되는 서비스는 가격이 다르지만 가격도 마찬가지입니다. 대부분 크기 조정, 자르기 및 장치 및 브라우저를 기반으로 고객에게 가장 적합한 형식 결정을 처리합니다. 또한 압축, 픽셀 밀도 감지, 워터 마크, 얼굴 인식 및 후 처리가 가능합니다. 이러한 강력한 기능과 사용자 중심 이미지를 제공하는 URL에 매개 변수를 추가 할 수있는 기능이 매우 쉬워졌습니다.

이미지 성능 점검표

  1. 올바른 형식을 선택하십시오
  2. 가능하면 벡터를 사용하십시오
  3. 변경이 눈에 띄지 않으면 품질 저하
  4. 새로운 형식으로 실험
  5. 도구 및 알고리즘으로 최적화
  6. srcset 및 그림에 대해 알아보기
  7. 이미지 CDN 사용

웹 글꼴 최적화

사용자 정의 글꼴을 사용하는 기능은 매우 강력한 디자인 도구입니다. 그러나 권력에는 많은 책임이 따른다. 웹 글꼴을 활용하는 웹 사이트의 68 %를 차지하는이 유형의 자산은 가장 큰 성능 위반자 중 하나입니다 (변형 및 서체 수에 따라 평균 100KB를 쉽게 구할 수 있음).

무게가 가장 큰 문제가 아닌 경우에도 FOIT (Flash of Invisible Text)가 있습니다. FOIT는 웹 글꼴이 여전히로드 중이거나 가져 오지 못한 경우에 발생하며, 이로 인해 빈 페이지가 생겨 내용에 액세스 할 수 없게됩니다. 웹 글꼴이 먼저 필요한지 신중하게 검사하는 것이 좋습니다. 그렇다면 성능에 대한 부정적인 영향을 완화하는 데 도움이되는 몇 가지 전략이 있습니다.

올바른 형식 선택

EOT, TTF, WOFF 및 최신 WOFF2의 네 가지 웹 글꼴 형식이 있습니다. TTF와 WOFF가 가장 널리 채택되어 90 % 이상의 브라우저 지원을 자랑합니다. 타겟팅하는 지원에 따라 WOFF2를 게재하고 구형 브라우저의 경우 WOFF로 대체하는 것이 가장 안전합니다. WOFF2 사용의 장점은 Brotli와 같은 사용자 정의 사전 처리 및 압축 알고리즘 세트로 약 30 % 파일 크기 감소 및 향상된 구문 분석 기능

@ font-face에서 웹 글꼴의 소스를 정의 할 때 format () 힌트를 사용하여 사용할 형식을 지정하십시오.

Google Fonts 또는 Typekit을 사용하여 글꼴을 제공하는 경우이 두 도구 모두 성능을 크게 줄이기위한 몇 가지 전략을 구현했습니다. Typekit은 이제 모든 키트를 비동기식으로 제공하여 FOIT를 방지하고 JavaScript 키트 코드에 대해 10 일의 확장 된 캐시 기간 (기본 10 분 대신)을 허용합니다. Google Fonts는 사용자 기기의 기능에 따라 가장 작은 파일을 자동으로 제공합니다.

감사 글꼴 선택

자체 호스팅 여부에 관계없이 서체, 글꼴 두께 및 스타일의 수는 성능 예산에 크게 영향을 미칩니다.

이상적으로는 일반 및 대담한 스타일 변형을 특징으로하는 하나의 서체로 벗어날 수 있습니다. 글꼴 선택 방법을 잘 모르는 경우 Lara Hogan의 무게 측정 미학 및 성능을 참조하십시오.

유니 코드 범위 하위 설정 사용

유니 코드 범위 하위 설정을 사용하면 큰 글꼴을 더 작은 세트로 분할 할 수 있습니다. 비교적 고급 전략이지만 특히 아시아 언어를 타겟팅 할 때 크게 절약 할 수 있습니다 (중국어 글꼴이 평균 20,000 개 문자 인 것을 아십니까?). 첫 번째 단계는 글꼴을 라틴어, 그리스어 또는 키릴 자모와 같은 필요한 언어 세트로 제한하는 것입니다. 로고 사용에만 웹 글꼴이 필요한 경우 유니 코드 범위 설명자를 사용하여 특정 문자를 선택하는 것이 좋습니다.

Filament Group은 파일 또는 URL을 기반으로 필요한 글리프 목록을 생성 할 수있는 오픈 소스 명령 줄 유틸리티 인 글리프 행거를 출시했습니다. 또는 웹 기반 Font Squirrel Web Font Generator는 고급 하위 설정 및 최적화 옵션을 제공합니다. Google Fonts 또는 Typekit을 사용하는 경우 언어 하위 세트를 선택하면 서체 선택기 인터페이스가 내장되어 기본 하위 설정이 더 쉬워집니다.

폰트 로딩 전략 수립

글꼴은 렌더링 차단입니다. 브라우저는 먼저 DOM과 CSSOM을 모두 빌드해야하기 때문입니다. 웹 글꼴은 기존 노드와 일치하는 CSS 선택기에서 사용되기 전에 다운로드되지 않습니다. 이 동작은 텍스트 렌더링을 크게 지연시켜 종종 앞에서 언급 한 보이지 않는 텍스트 (FOIT)의 플래시를 발생시킵니다. FOIT는 느린 네트워크와 모바일 장치에서 더욱 두드러집니다.

글꼴로드 전략을 구현하면 사용자가 콘텐츠에 액세스 할 수 없습니다. 종종 스타일이없는 텍스트 플래시 (FOUT)를 선택하는 것이 가장 쉽고 효과적인 솔루션입니다.

font-display는 JavaScript에 의존하지 않는 솔루션을 제공하는 새로운 CSS 속성입니다. 불행히도, 그것은 부분적으로 지원하며 (Chrome 및 Opera 만 해당) 현재 Firefox 및 WebKit에서 개발 중입니다. 여전히 다른 글꼴 로딩 메커니즘과 함께 사용할 수 있으며 사용해야합니다.

작동중인 글꼴 표시 속성

운좋게도 Typekit의 Web Font Loader와 Bram Stein의 Font Face Observer는 글꼴 로딩 동작을 관리하는 데 도움이 될 수 있습니다. 또한 웹 글꼴 성능 전문가 인 Zach Leatherman은 프로젝트에 적합한 접근 방식을 선택하는 데 도움이되는 포괄적 인 글꼴로드 전략 가이드를 게시했습니다.

웹 글꼴 성능 점검표

  1. 올바른 형식을 선택하십시오
  2. 글꼴 선택 감사
  3. 유니 코드 범위 하위 설정 사용
  4. 폰트 로딩 전략 수립

자바 스크립트 최적화

현재 JavaScript 번들의 평균 크기는 446KB이므로 이미 자산 크기별로 두 번째로 큰 자산 유형입니다 (이미지 팔로우).

우리가 깨닫지 못할 수도있는 것은 사랑하는 JavaScript 뒤에는 훨씬 더 불길한 성능 병목 현상이 숨겨져 있다는 것입니다.

얼마나 많은 JavaScript가 제공되는지 모니터링

전달 최적화는 웹 페이지 팽창과의 싸움에서 한 단계 일뿐입니다. JavaScript를 다운로드 한 후에는 브라우저에서 구문 분석, 컴파일 및 실행해야합니다. 인기있는 몇몇 사이트를 간략히 살펴보면 압축을 푼 후에 gzipped JS가 3 배 이상 커지는 것이 분명해집니다. 효과적으로, 우리는 거대한 코드를 전송합니다.

다른 장치에서 1MB의 JavaScript에 대한 구문 분석 시간 Addy Osmani와 그의 JavaScript Start-up Performance 기사의 이미지 제공.

구문 분석 및 컴파일 시간 분석은 앱과 ​​상호 작용할 준비가 된 시점을 이해하는 데 중요합니다. 이러한 타이밍은 사용자 장치의 하드웨어 기능에 따라 크게 다릅니다. 구문 분석 및 컴파일은 저가형 모바일에서 2-5 배 더 쉽게 높아질 수 있습니다. Addy의 연구에 따르면 일반 전화에서 앱이 대화 형 상태에 도달하는 데 데스크톱에서 8 초가 걸리는 데 16 초가 걸립니다. 이러한 측정 항목을 분석하는 것이 중요합니다. 다행히도 Chrome DevTools를 통해 분석 할 수 있습니다.

Chrome 개발자 도구에서 구문 분석 및 컴파일 조사

JavaScript Start-up Performance에 대한 Addy Osmani의 자세한 글을 읽으십시오.

불필요한 의존성 제거

최신 패키지 관리자의 작업 방식은 종속성의 수와 크기를 쉽게 모호하게 할 수 있습니다. webpack-bundle-analyzer 및 Bundle Buddy는 코드 복제, 최대 성능 위반자 및 오래되고 불필요한 종속성을 식별하는 데 도움이되는 훌륭한 시각적 도구입니다.

웹팩 번들 분석기가 작동 중입니다.

VS Code 및 Atom의 가져 오기 비용 확장을 통해 가져온 패키지 비용을 훨씬 더 잘 볼 수 있습니다.

가져 오기 코드 VS 코드 확장.

코드 분할 구현

가능할 때마다 원하는 사용자 경험을 창출하는 데 필요한 자산 만 제공해야합니다. 사용자가 볼 수없는 코드 처리 상호 작용을 포함하여 전체 bundle.js 파일을 사용자에게 보내는 것이 최적보다 적습니다 (방문 페이지를 방문 할 때 전체 앱을 처리하는 JavaScript 다운로드를 상상해보십시오). 마찬가지로 특정 브라우저 나 사용자 에이전트를 대상으로하는 코드를 보편적으로 제공해서는 안됩니다.

가장 많이 사용되는 모듈 번들 중 하나 인 Webpack에는 코드 분할 지원이 제공됩니다. 가장 간단한 코드 분할은 페이지 당 (랜딩 페이지의 경우 home.js, 연락처 페이지의 경우 contact.js 등) 구현할 수 있지만 Webpack은 동적 가져 오기 또는 지연 로딩과 같은 고급 전략을 거의 제공하지 않습니다. .

프레임 워크 대안 고려

자바 스크립트 프론트 엔드 프레임 워크는 지속적으로 증가하고 있습니다. JavaScript 2016의 설문 조사에 따르면 React가 가장 인기있는 옵션입니다. 신중하게 아키텍처 선택을 감사하면 Preact와 같은 훨씬 가벼운 대안을 사용하는 것이 더 나을 것입니다 (Preact는 완전한 React 재 구현이 아니라 성능이 뛰어나고 기능이 적은 가상 DOM 라이브러리 임) 마찬가지로, 더 작은 대안을 위해 더 큰 라이브러리를 교체 할 수 있습니다. date-fn의 경우 moment.js (또는 특히 moment.js의 경우 사용되지 않는 로케일을 제거합니다).

새 프로젝트를 시작하기 전에 어떤 종류의 기능이 필요한지 결정하고 요구 사항과 목표에 가장 적합한 프레임 워크를 선택하는 것이 좋습니다. 때때로 그것은 대신에 더 많은 바닐라 JavaScript를 작성하는 것을 의미 할 수 있습니다.

JavaScript 성능 점검표

  1. 얼마나 많은 JavaScript가 제공되는지 모니터링
  2. 불필요한 의존성 제거
  3. 코드 분할 구현
  4. 프레임 워크 대안 고려

실적 추적 및 발전

대부분의 경우 구축중인 제품의 사용자 환경에 긍정적 인 변화를 가져올 수있는 몇 가지 전략에 대해 이야기했습니다. 하지만 성능은 까다로울 수 있으므로 장기적인 조정 결과를 추적해야합니다.

사용자 중심 성능 지표

훌륭한 성능 지표는 가능한 한 사용자 경험을 묘사하는 데 가깝습니다. 오랫동안 확립 된 onLoad, onContentLoaded 또는 SpeedIndex는 사이트가 얼마나 빨리 상호 작용할 수 있는지에 대해 거의 알려주지 않습니다. 자산 전달에만 집중할 때 인식 된 성과를 정량화하는 것은 쉽지 않습니다. 다행스럽게도 컨텐츠가 얼마나 빨리 표시되고 대화 형인지에 대한 포괄적 인 그림을 그리는 몇 가지 타이밍이 있습니다.

이러한 메트릭은 First Paint, First Meaningful Paint, Visually Complete 및 Time to Interactive입니다.

  • 첫 번째 페인트 : 브라우저가 흰색 화면에서 첫 번째 시각적 변경으로 변경되었습니다.
  • 첫 번째 의미있는 페인트 : 텍스트, 이미지 및 주요 항목을 볼 수 있습니다.
  • 시각적으로 완료 : 뷰포트의 모든 내용이 표시됩니다.
  • 인터랙티브 한 시간 : 뷰포트의 모든 컨텐츠를 볼 수 있고 상호 작용할 준비가되었습니다 (주요 주요 스레드 JavaScript 활동 없음).

이러한 타이밍은 사용자가 보는 것과 직접적으로 일치하므로 추적을위한 훌륭한 후보가됩니다. 가능하면 모두 기록하고 그렇지 않으면 하나 또는 두 개를 선택하여 인식 된 성능을 더 잘 이해하십시오. 다른 측정 항목, 특히 우리가 전송하는 바이트 수 (최적화 및 언 패킹)를 주시하는 것이 좋습니다.

실적 예산 설정

이러한 수치는 모두 혼란스럽고 이해하기 어려울 수 있습니다. 실행 가능한 목표와 목표가 없으면 달성하려는 목표를 쉽게 잃을 수 있습니다. 몇 년 전 Tim Kadlec은 성과 예산 개념에 대해 썼습니다.

불행히도, 그것들을 설정하기위한 마법의 공식은 없습니다. 성능 예산은 종종 각 비즈니스마다 고유 한 경쟁 분석 및 제품 목표로 요약됩니다.

예산을 세울 때 눈에 띄는 차이를 목표로하는 것이 중요합니다. 이는 일반적으로 적어도 20 % 개선에 해당합니다. 성능 예산을 참조하여 Lara Hogan의 Approach New Designs를 활용하여 예산을 실험하고 반복하십시오.

budget 예산 작성에 도움이되도록 성능 예산 계산기 또는 브라우저 칼로리 크롬 확장 프로그램을 사용해보십시오.

지속적인 모니터링

모니터링 성능은 수동이어서는 안됩니다. 포괄적 인보고 기능을 제공하는 강력한 도구가 많이 있습니다.

Google Lighthouse는 성능, 접근성, 진보적 인 웹 앱 등을 감사하는 오픈 소스 프로젝트입니다. 명령 줄에서 또는 최근에 Chrome 개발자 도구에서 직접 Lighthouse를 사용할 수 있습니다.

성능 감사를 수행하는 등대.

성능 예산, 장치 에뮬레이션, 분산 모니터링 및 자체 성능 스위트를 신중하게 구축하지 않고는 얻을 수없는 기타 여러 기능을 제공하는 Caliber의 지속적인 추적 옵트 인의 경우.

Calibre의 포괄적 인 성능 추적.

어디에서나 추적 할 때 데이터를 전체 팀 또는 소규모 조직의 전체 비즈니스가 투명하고 액세스 할 수 있도록해야합니다.

성능은 개발자 팀보다 더 큰 책임입니다. 우리는 역할이나 직무에 관계없이 제작하는 사용자 경험에 대해 모두 책임을집니다.

제품 결정 또는 설계 단계에서 가능한 병목 현상을 포착하기 위해 속도를 옹호하고 협업 프로세스를 설정하는 것이 매우 중요합니다.

성과 인식 및 공감 구축

성과에 대한 관심은 비즈니스 목표 일뿐만 아니라 판매 통계를 통해 판매해야하는 경우 PWA 통계를 통해 판매해야합니다. 기본적인 공감과 사용자의 이익을 최우선으로 생각합니다.

기술자로서 사람들이 다른 곳에서 행복하게 보낼 수있는 시간과 관심을 가로 채지 않는 것이 우리의 책임입니다. 우리의 목표는 시간과 인간의 초점을 의식하는 도구를 만드는 것입니다.

성과 인식을 옹호하는 것은 모든 사람의 목표 여야합니다. 성과와 공감을 염두에두고 우리 모두를 위해 더 나은 미래를 만들어 봅시다.