웹사이트 성능은 콘텐츠에서 시작됩니다.
출시 전에 자산 및 게시 결정을 내리십시오.
모든 관점 · · 1 분 읽기
자산 규칙을 초기에 설정하십시오.
콘텐츠 라이브러리가 확장되기 전에 이미지 크기, 형식 및 품질 목표를 정의하십시오. 사진, 제품 이미지 및 편집 일러스트레이션을 포함하십시오. 페이지에 추가하기 전에 자산을 최적화하고, 원본 마스터 파일은 공개 배포 경로 밖에 보관하십시오.
목표는 실제로 표시될 크기에 맞는 선명한 이미지를 제공하는 것입니다. 모든 방문자에게 큰 원본 파일을 전송하면 네트워크에 부담을 줄 뿐, 가시적 결과가 반드시 개선되는 것은 아닙니다.
모바일용 자체 구성을 제공하십시오.
파일 크기가 작다고 해서 항상 모바일에서 사용 가능한 이미지는 아닙니다. 좁은 크롭에서 주제, 텍스트 여백 및 초점을 확인하십시오. 데스크톱 아트워크가 넓은 여백 공간에 의존하는 경우 전용 구성이 필요할 수 있습니다.
반응형 이미지 후보는 브라우저가 디스플레이에 적합한 리소스를 선택할 수 있도록 합니다. web.dev는 이것이 제공된 이미지 차원과 디바이스 간의 매칭을 어떻게 개선하는지 설명합니다.
페이지를 순서대로 검토하십시오.
히어로 영역을 우선시하고 먼 거리의 자산은 필요할 때까지 지연시키십시오. 비디오, 인터랙티브 갤러리 및 애니메이션의 비용을 확인하고, 방문자가 모션 감소(reduced motion)를 선호할 때 발생하는 상황도 포함하여 점검하십시오.
여러 뷰포트에서 실제 콘텐츠를 사용하여 테스트하십시오. 이미지 디코딩, 레이아웃 이동, 깨진 자산 및 상호작용을 함께 검토하십시오; 페이지가 더 이상 명확하게 소통하지 못한다면 작은 파일은 성공적인 최적화가 아닙니다.