이 페이지는 Cloud Translation API를 통해 번역되었습니다.

웹 성능 측정 자동화

Addy Osmani

웹 성능은 전체 사용자 환경에 큰 영향을 미칠 수 있습니다. 최근 사이트 성능을 개선하고자 했다면 페이지를 분석하고 모바일 및 데스크톱 웹 성능 권장사항에 따라 페이지 속도를 높이는 방법을 제안하는 도구인 PageSpeed Insights를 들어보셨을 것입니다.

PageSpeed 점수는 스크립트 최소화, 이미지 최적화, 콘텐츠 GZIP 처리, 탭 타겟 크기 적절, 방문 페이지 리디렉션 방지 등 여러 요소를 기반으로 합니다.

로드하는 데 3초 이상 걸리는 페이지는 40%의 사용자가 이탈할 수 있으므로 사용자 기기에서 페이지가 얼마나 빠르게 로드되는지 확인하는 것이 개발 워크플로에서 점점 더 중요한 부분이 되고 있습니다.

빌드 프로세스의 성능 측정항목

PageSpeed Insights로 직접 이동하여 점수를 확인하는 것도 좋지만, 빌드 프로세스에서 유사한 성능 점수를 얻을 수 있는지 궁금해하는 개발자가 많았습니다.

답은 '그렇습니다'입니다.

노드용 PSI 소개

오늘은 Gulp, Grunt 및 기타 빌드 시스템과 잘 작동하며 PageSpeed Insights 서비스에 연결하여 웹 성능에 관한 자세한 보고서를 반환할 수 있는 새로운 모듈인 Node용 PSI를 소개합니다. 이 기능을 통해 사용 설정되는 보고서 유형의 미리보기를 살펴보겠습니다.

위의 결과는 개선할 수 있는 유형을 파악하는 데 도움이 됩니다. 예를 들어 콘텐츠 크기를 뷰포트로 조절하는 데 5.92가 표시되면 '일부' 작업은 계속 실행될 수 있지만 렌더링 차단 리소스를 최소화하는 데 24가 표시되면 async 속성을 사용하여 JS 로드를 지연해야 할 수 있습니다.

PageSpeed Insights 진입 장벽 낮추기

이전에 PageSpeed Insights API를 사용해 보거나 이 API를 기반으로 빌드된 도구를 사용해 본 적이 있다면 전용 API 키를 등록해야 했을 것입니다. 이 작업은 몇 분 정도 소요되지만 정규 워크플로의 일부로 통계를 확인하는 데 방해가 될 수 있습니다.

PageSpeed Insights 서비스는 API 키 없이 5초마다 최대 1회 요청을 지원합니다 (누구나 충분히 사용할 수 있는 양). 더 정기적으로 사용하거나 심각한 프로덕션 빌드의 경우 키를 등록하는 것이 좋습니다.

PSI 모듈은 몇 분 이내에 설정할 수 있는 nokey 옵션과 조금 더 오래 걸리는 key 옵션을 모두 지원합니다. API 키를 등록하는 방법에 관한 세부정보가 문서화되어 있습니다.

시작하기

PSI를 워크플로에 통합하는 방법에는 두 가지가 있습니다. 빌드 프로세스에 통합하거나 시스템에 전역적으로 설치된 도구로 실행할 수 있습니다.

빌드 프로세스

Grunt 또는 Gulp 빌드 프로세스에서 PSI를 사용하는 것은 매우 간단합니다. Gulp 프로젝트를 사용하는 경우 PSI를 직접 설치하고 사용할 수 있습니다.

설치

npm을 사용하여 PSI를 설치하고 --save-dev를 전달하여 package.json 파일에 저장합니다.

npm install psi --save-dev

그런 다음 gulpfile에서 다음과 같이 Gulp 태스크를 정의합니다 (Gulp 샘플 프로젝트에서도 다룹니다).

var psi = require('psi');
gulp.task('psi', function (cb) {
    psi({
        nokey: 'true', // or use key: ‘YOUR_API_KEY’
        url: site,
        strategy: 'mobile',
    }, cb);
});

위의 경우 다음을 사용하여 태스크를 실행할 수 있습니다.

gulp psi

Grunt를 사용하는 경우 이제 PSI를 사용하여 보고를 실행하는 James Cryer의 grunt-pagespeed를 사용할 수 있습니다.

설치

npm install grunt-pagespeed --save-dev

그런 다음 Gruntfile에서 태스크를 로드합니다.

grunt.loadNpmTasks('grunt-pagespeed');

다음과 같이 구성합니다.

pagespeed: {
    options: {
    nokey: true,
    url: "https://www.html5rocks.com",
    strategy: "mobile"
    }
}

그런 다음 다음을 사용하여 태스크를 실행할 수 있습니다.

grunt pagespeed

전역 도구로 설치

시스템에 전 세계적으로 사용 가능한 도구로 PSI를 설치할 수도 있습니다. 다시 npm을 사용하여 도구를 설치할 수 있습니다.

$ npm install -g psi

터미널 창을 통해 사이트의 PageSpeed Insights 보고서를 요청합니다 (nokey 옵션 또는 다음과 같은 API별 key 사용).

psi http://www.html5rocks.com --nokey --strategy=mobile

또는 등록된 API 키가 있는 경우:

psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile

완료되었습니다.

실적을 조직 문화의 일부로 만들기

디자인과 구현이 사용자 환경에 미치는 영향에 대해 더 많이 생각해야 합니다.

PSI와 같은 솔루션은 데스크톱과 모바일에서 웹 성능을 모니터링할 수 있으며 정기적인 배포 후 워크플로의 일부로 사용하면 유용합니다.

보내주신 의견은 소중하게 전달되며 PSI가 팀의 성과 문화를 개선하는 데 도움이 되기를 바랍니다.