소개
빠른 웹 앱이 성공적인 웹 앱입니다. 개발자의 임무는 앱의 실제 성능과 인식된 성능을 모두 최적화할 때까지 완료되지 않습니다. 이는 단순히 사용자에게 우수한 환경을 제공하기 위한 올바른 조치일 뿐만 아니라 최적화해야 하는 매우 실용적이고 중요한 비즈니스 이유가 있습니다. Amazon은 사이트 지연 시간이 100ms마다 1% 씩 감소하고 Google은 지연 시간이 0.5초마다 20% 씩 감소하는 것으로 측정했습니다 (참조). 이러한 수치는 비즈니스와 웹 앱에 실질적인 영향을 미치는 실제 수치입니다.
웹 속도는 매우 중요하기 때문에 Google은 웹 속도를 높이는 데 전념하고 있습니다. 앱 성능을 최적화해야 하는 또 다른 이유가 필요한 경우 Google에서 페이지 속도가 순위 알고리즘에 추가되었다고 발표했습니다.
웹 앱의 성능을 최적화하기 위한 권장사항은 많이 있습니다. 그중 두 권의 책 (고성능 웹사이트 및 더 빠른 웹사이트)이 특히 유용합니다. 서버 (올바른 캐시 제어 헤더 구현) 및 클라이언트 (이미지 너비 및 높이 속성 제공)의 기술이 결합되어 성능을 최적화하기 위한 엔드 투 엔드 전략이 수립됩니다. 도움말과 유용한 정보가 너무 많아서 실제 생활과 실제 웹 앱에 어떻게 적용되는지 파악하기가 어려운 경우가 있습니다.
다행히 Chrome DevTools (모든 Chrome 인스턴스에 포함됨)는 웹 앱을 검사하고 성능을 개선하고 지연 시간을 줄이기 위한 맞춤 추천을 제공하는 훌륭한 도구를 제공합니다. 이 도움말에서는 매우 인기 있는 YSlow 도구와 범위가 유사한 감사 패널과 이를 사용하여 웹사이트 속도를 높이고 지연 시간을 줄이며 사용자 만족도를 높이는 방법을 설명합니다.
감사 패널 도구는 현재 Chrome에서만 사용할 수 있지만 다른 WebKit 브라우저에서도 통합될 예정입니다.
시작하기
감사 패널이 웹 앱 성능 개선을 추천하는 방법을 보여주기 위해 Google의 www.html5rocks.com을 대상으로 이 도구를 사용해 보겠습니다. 감사 패널을 사용하여 사이트 속도를 더욱 높이겠습니다.
DevTools를 시작하려면 Chrome 아이콘 (Chrome 창 오른쪽 상단)을 사용하고 도구 > 개발자 도구를 선택하기만 하면 됩니다.
DevTools를 시작하는 방법에 관한 자세한 내용은 공식 문서를 참고하세요.
감사 패널은 기본 도구 버튼 패널에 있습니다. 선택한 후에는 감사 패널에서 아직 웹 앱 분석을 실행하지 않았음을 알 수 있습니다. 모든 휴리스틱을 실행하는 데 시간이 오래 걸릴 수 있으며, 특히 GMail과 같은 대규모 웹 앱의 경우 더욱 그렇습니다. 따라서 이 도구는 기본적으로 사용 중지되어 있습니다.
실행 버튼을 클릭하여 살펴보겠습니다. 이 버튼을 클릭하면 성능 휴리스틱이 사용 설정된 상태로 웹 앱이 새로고침됩니다. 페이지를 새로고침하면 아래 스크린샷과 유사한 맞춤 콘텐츠 목록이 표시됩니다.
감사 패널은 심각도별로 추천을 분류하며, 가장 심각한 추천은 빨간색 점으로, 중간 심각도의 추천은 노란색 점으로 표시됩니다. 이 색상 코딩을 사용하면 가장 중요하고 가장 큰 이익을 가져다주는 추천에 먼저 집중하여 추천에 우선순위를 지정할 수 있습니다.
추천 뒤에 있는 괄호 안의 숫자는 감사 도구에서 감지한 인스턴스 수입니다. 예를 들어 '브라우저 캐싱 활용'이 12번 언급되었습니다. 이를 통해 추천을 적용할 수 있는 빈도를 파악할 수 있습니다.
속도 전략
앞서 언급한 것처럼 웹 앱 성능을 최적화하기 위한 잘 알려져 있고 철저히 테스트된 전략이 많이 있습니다. 이 도움말에서는 이러한 기능을 모두 자세히 다루지는 않지만 추가 정보와 세부정보를 쉽게 찾을 수 있습니다. 웹 앱 최적화에 관한 세부정보를 자세히 알아볼 수 있는 유용한 리소스로는 웹을 더 빠르게 가이드와 확장성이 뛰어난 앱의 지연 시간이 판매에 미치는 영향이 있습니다.
감사 패널은 제안사항을 네트워크 사용률 및 웹페이지 성능이라는 두 가지 카테고리로 그룹화합니다.
감사 패널에 따르면 네트워크 사용률을 개선하려면 다음을 실행해야 합니다.
- 브라우저 캐싱 활용
- 프록시 캐싱 활용
- 쿠키 크기 최소화
- 쿠키가 없는 도메인에서 정적 콘텐츠 제공
- 이미지 크기 지정
웹페이지 성능을 개선하려면 다음을 실행해야 합니다.
- 스타일 및 스크립트 순서 최적화
- 사용하지 않는 CSS 규칙 삭제
htmlrocks.com 실적을 개선하기 위해 집중할 수 있는 전략 중 하나를 살펴보겠습니다.
브라우저 캐싱 활용
예를 들어 먼저 브라우저 캐싱을 활용하는 권장사항을 살펴보겠습니다. 구체적으로 어떤 의미인가요? UI에서 옵션을 열면 다음 세부정보가 표시됩니다.
- 다음 리소스에 캐시 만료가 없습니다. 만료를 지정하지 않은 리소스는 브라우저에 캐시되지 않을 수 있습니다.
- 다음과 같은 캐시 가능한 리소스는 최신성 기간이 짧습니다.
- 다음 리소스는 명시적으로 캐시할 수 없습니다. 가능하면 캐시할 수 있도록 하는 것이 좋습니다.
리소스를 캐싱하면 네트워크 사용량을 개선할 수 있으므로 개발자의 대역폭 비용이 줄고 사용자의 응답 시간이 단축됩니다. 안타깝게도 이 도구는 정확히 무엇을 해야 하는지 알려주지 않으므로 권장사항을 자세히 살펴보고 웹 앱 성능 최적화에 대한 지식을 사용하여 이러한 추천을 적용해야 합니다.
캐싱
HTTP 캐싱을 자세히 살펴보지 않고도 몇 가지 기본사항을 다룰 수 있습니다. HTTP 프로토콜에는 캐싱 안내가 포함되어 있어 서버와 클라이언트가 전송 중에 전송해야 하는 데이터의 양을 줄일 수 있습니다. 예를 들어 서버는 클라이언트에게 일정 시간 동안 리소스를 로컬에 저장하도록 지시할 수 있으므로 리소스를 다시 요청할 필요가 없습니다. 클라이언트는 서버의 리소스가 로컬에 저장된 리소스보다 최신인지도 확인할 수 있습니다. 리소스가 정적인 경우 서버는 클라이언트에게 리소스를 로컬에 저장하고 나중에 서버에 리소스를 요청하지 않도록 지시하는 것이 좋습니다. HTTP 캐싱과 관련하여 엄청난 양의 세부정보가 있지만 일반적인 주제는 '클라이언트에 로컬로 리소스를 저장하여 전송되는 데이터의 양을 줄입니다.'입니다.
캐시 불가능한 리소스 수정
하나의 권장사항을 자세히 살펴보고 감사 권장사항을 DevTools 내의 다른 도구에 연결하는 방법을 알아보겠습니다. 특히 '다음 리소스는 명시적으로 캐시할 수 없습니다.' 오류를 수정하는 방법을 살펴보겠습니다.
캐싱은 HTTP 프로토콜을 통해 이루어지므로 http://www.html5rocks.com/ 리소스의 HTTP 요청과 응답을 살펴봐야 합니다. 리소스를 클릭하기만 하면 원래 요청 및 응답 헤더와 세부정보를 확인할 수 있습니다.
그러면 클릭한 리소스 유형에 따라 추가 정보가 포함된 네트워크, 리소스 또는 소스 패널로 이동합니다. 이 경우 네트워크 패널로 이동합니다.
서버가 클라이언트에게 'html5rocks.com의 홈페이지를 캐시하지 마세요'라고 전달했는지 확인하려고 합니다. 이렇게 하려면 리소스를 클릭하여 응답 헤더를 확인합니다. 응답 헤더는 서버에서 전송하는 헤더와 안내입니다.
Cache-Control 헤더실제로 서버는 클라이언트에 'Cache-Control: no-cache' 헤더를 전송했습니다. 짐작할 수 있듯이 이렇게 하면 클라이언트가 항상 리소스를 요청하고 로컬에 캐시하지 않도록 지시합니다. 구체적으로 'no-cache'의 HTTP 사양은 다음과 같습니다.
"no-cache 지시문에서 필드 이름을 지정하지 않으면 캐시는 원본 서버에서 다시 검증을 성공적으로 거치지 않고 응답을 사용하여 후속 요청을 충족해서는 안 됩니다. 이렇게 하면 원본 서버가 클라이언트 요청에 비활성 응답을 반환하도록 구성된 캐시에서도 캐싱을 방지할 수 있습니다."
그렇기 때문에 감사 패널에서는 캐싱을 사용 설정하는 것이 좋습니다. 그렇지 않으면 서버와 클라이언트가 중복될 수 있는 정보를 전송하게 됩니다.
감사 제안의 근본 원인을 확인했으므로 이제 어떻게 해결해야 하나요? 이 경우 솔루션에는 서버 측 구성 또는 코드가 포함됩니다. 설정에 따라 웹 서버 구성을 통해 캐싱을 사용 설정하거나 웹 앱 프레임워크의 구성을 통해 사용 설정할 수 있습니다. 특히 캐시하려는 모든 리소스에 Expires 헤더와 max-age 매개변수가 있는 Cache-Control: private을 포함해야 합니다.
추천은 추천일 뿐입니다.
감사 패널은 일반적인 휴리스틱을 기반으로 개선사항을 추천합니다. 수년간 얻은 권장사항을 특정 웹 앱에 적용하는 것입니다. 대부분의 경우 이러한 권장사항은 적절하므로 주의 깊게 살펴봐야 합니다.
하지만 추천이 올바르지만 실제로는 개선되지 않는 경우도 있습니다. 예를 들어 페이지에 큰 이미지가 하나만 있는 경우 <img> 태그에 너비 및 높이 속성을 추가하는 것이 좋습니다. 그러면 렌더링 엔진이 이미지를 다운로드하고 검사하지 않고도 이미지 크기를 알 수 있습니다. 일반적으로 좋은 조언이지만 이미지가 페이지의 유일한 요소인 경우에는 큰 도움이 되지 않습니다.
제안사항을 이해한 후 적용해야 합니다. 또한 실제로 개선되었는지 확인하기 위해 변경 전후에 성능을 측정하는 것도 잊지 마세요.
요약
감사 패널은 웹 앱의 성능을 최적화하는 방법을 빠르게 보여주는 간편하고 유용한 도구입니다. 많은 기업에서 성능과 수익 또는 활동 간에 직접적인 상관관계가 있음을 확인했으므로 속도는 중요한 웹 앱 속성입니다. 앱의 성능을 최적화하는 것은 사용자에게만 유익한 것이 아니라 비즈니스의 수익에도 도움이 됩니다.