웹 성능은 전체 사용자 환경에 큰 영향을 미칠 수 있습니다. 최근에 사이트 성능을 개선하고자 하는 분이라면 아마 PageSpeed Insights에 대해 들어보셨을 것입니다. PageSpeed Insights는 모바일 및 데스크톱 웹 성능 권장사항에 따라 페이지를 분석하고 속도를 높이는 방법에 관한 조언을 제공합니다.
PageSpeed 점수는 스크립트의 최소화 상태, 이미지 최적화, 콘텐츠 gzip으로 압축, 탭 타겟의 적절한 크기, 방문 페이지 리디렉션 방지 등 다양한 요소를 바탕으로 결정됩니다.
사용자의 40%가 로드에 3초 이상 걸리는 페이지를 이탈할 가능성이 있는 만큼 사용자 기기에서 페이지가 얼마나 빨리 로드되는지에 대한 관심이 Google 개발 워크플로에서 점점 더 중요한 부분이 되고 있습니다.
빌드 프로세스의 성능 측정항목
점수가 얼마나 높은지 알아보기 위해 PageSpeed Insights를 직접 방문했지만, 빌드 프로세스에서 유사한 성능 점수를 얻을 수 있는지 묻는 개발자들이 많았습니다.
정답은 물론입니다.
노드용 PSI 소개
오늘 Google은 노드용 PSI를 소개합니다. 이 새로운 모듈은 Gulp, Grunt 및 기타 빌드 시스템과 잘 작동하며 PageSpeed Insights 서비스에 연결하여 웹 성능에 대한 자세한 보고서를 반환할 수 있는 새로운 모듈입니다. 이 보고서를 통해 확인할 수 있는 보고서 유형을 미리 살펴보겠습니다.
위의 결과를 통해 개선이 필요한 유형을 파악할 수 있습니다. 예를 들어 콘텐츠 크기를 표시 영역에 맞게 조정하는 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를 사용하는 경우 James Cryer의 grunt-pagespeed를 사용할 수 있습니다. James Cryer는 PSI를 사용하여 보고 기능을 제공합니다.
설치
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
감사합니다
이제 성능을 문화의 일부로 만드세요
이제 Google의 디자인과 구현이 사용자 환경에 미치는 영향에 대해 더 생각해 보아야 합니다.
PSI와 같은 솔루션은 데스크톱과 모바일에서의 웹 성능을 지켜볼 수 있으며 일반적인 배포 후 워크플로의 일부로 사용할 때 유용합니다.
소중한 의견을 듣고자 합니다. PSI가 팀의 성과 문화를 개선하는 데 도움이 되기를 바랍니다.