페이지 로드 타임을 줄이는 몇 가지 방법

Puppyfinder라는 웹 서비스를 heroku에 deploy했는데 페이지 로드 타임이
정말 느렸다.

local 웹 서버에 접속할 경우 메인 페이지 로드 타임이 1.27초였고

heroku 웹 서버에 접속할 경우 4.63초였다.

그래서 페이지 로드 타임을 개선하기 위한 몇 가지 방법들을 적용해보기로 했다.

Minify Javascript

로딩하는 리소스 중에 제일 사이즈가 큰 파일이 bundle.js이었고 로딩 시간도 제일 길었다. 파일 크기를 줄이기 위해 uglify를 사용했는 데 uglify는 JS 코드를 읽어 abstract syntax tree로 만든 후 이 AST로부터 다시 JS 코드를 생성한다. 다시 생성할 땐 변수명을 짧게 하고 인덴트를 모두 없애고

var a = 10; var b = 20; ==> var a=10,b=20;
if (foo) bar(); else baz(); ==> foo?bar():baz();

와 같은 부가적인 최적화를 한다.

참고로 나는 gulp를 사용하고 있었기 때문에 gulp-uglify를 사용했다.

gulp.task(‘deployScripts’, function() {
 gulp.src(‘client/bundle.js’)
 .pipe(uglify())
 .pipe(gulp.dest(‘client’));
});

1.4MB → 224KB로 원래 사이즈의 84%가 줄었고 local에서 로드 시간도 106ms에서 18ms로 줄었다.

heroku에서도 3.47s → 1.42s로 현저하게 줄었다.

Enable compression

파일을 좀 더 줄이기 위해 gzip으로 압축을 해보기로 했다. 서버에서 압축된 파일을 보내면 클라이언트에서 압축된 파일을 풀어서 읽는다.

Node.js 내장 middleware인 compression을 사용해보았다.

app.use(compression())

그런데 생각과 다르게 로드 시간이 줄어들지 않았다.

사이즈는 1.4MB → 340KB로 줄었지만 로드 시간은 오히려 106ms →178ms로 늘어났는데 아마 요청이 왔을 때 압축을 하고 보내주는 lazy loading 방식이라서 그런 것 같다.

그래서 middleware를 사용하는 대신에 미리 압축 파일을 생성해놓고 제공하기로 했다. gulp-gzip plugin이 있었기에 이것을 사용했다.

gulp.task(‘deployScripts’, function() {
 gulp.src(‘client/bundle.js’)
 .pipe(uglify())
 .pipe(gzip())
 .pipe(gulp.dest(‘client’));
});

gzip 파일을 만들어 client가 bundle.js.gz 파일을 요청하도록 코드를 수정했다.

224KB → 76.5KB로 반 이상 사이즈가 줄었고 local에서는 18ms → 14ms, heroku에서는 1.42s → 1.29s로 줄었다.

Optimize images

Puppyfinder에서는 여러 이미지를 로딩하고 있는데 client에서 요구하는 width/height 보다 실제 파일의 width/height 가 상당히 컸다. 요구하는 크기로 이미지를 리사이징하면 이미지 파일 크기를 줄일 수 있을 것이다.

위의 이미지들을 Resizeit이라는 툴을 이용해 50% 줄였다.

확실히 사이즈와 시간이 많이 줄어들었다.

결과

방법들을 적용해 본 결과 heroku에서 페이지 로드 타임이 반 이상 줄어들었다.

heroku를 무료로 쓰고 있기 때문에 여전히 느리긴 하지만 그래도 전보다는 로드 타임이 많이 줄었기에 만족한다.