아베 히로시 사이트를 가속화

치마타에서 아베 히로시 사이트 이 빠르면 화제가 되고 있습니다.

dev.to와 아베 히로시 홈페이지 어느 쪽이 빠릅니까?
dev.to와 아베 히로시의 홈페이지에 대해 제대로 계측 해주세요.

아베 히로시 사이트는 최선을 다하고 있습니까?
그것을 조사하기 위해서, 아베 히로시의 사이트를 고속화시키고 싶습니다.

목표로 하는 속도

가장 빠른 것은 로컬의 파일에의 액세스라고 생각하기 때문에 이것을 목표로 하고 싶습니다.
file:///C:/abe_hiroshi/index.html



Chrome의 Developer Tool에서 렌더링 완료가 '173ms'였습니다.
뭐 여기까지는 무리구나…

아베 히로시의 사이트는 어떤 것입니까?

속도는 웹 파게 손 St. 오 rg 로 측정해 봅니다.


렌더링 완료 시간은 "359ms"입니다. 하네

S3에서 호스팅 해보기

서버를 세울 정도가 아니므로 S3에서 웹 호스팅하고 거기에 html과 이미지를 넣어 보겠습니다.




렌더링 완료 시간이 "698ms"이므로 아직 느립니다.

CDN (CloudFront)으로 캐시

이어서 S3의 객체를 CloudFront로 캐시 해 본다.




렌더링 완료 시간이 "379ms"가 되었습니다.
역시 CDN은 효과 절대입니다.

Webp를 사용해보기

에서 v. 그리고 에서는 Cloudinary 이라는 이미지 호스팅 사이트를 사용하고 있습니다.
이미지를 업로드하면 다양한 형식으로 사용할 수 있습니다.

dev.to에서도 사용하고 있는 「Webp」라고 하는 JPG/PNG보다 압축이 뛰어난 포맷으로
대폭적인 사이즈 삭감을 실현해 줍니다.
사이즈 삭감할 수 있으면 고속화할 수 있을 것. 조속히 시도해 봅시다.

이미지 변환 작업은 Cloudinary에서 이런 느낌의 화면에서 할 수 있습니다.


일반 이미지 크기
htp://아베 히로시. s3-웨 b해-아 p-r 손바닥 st-1. 아마조나 ws. 작은 m/이마게/아베와 p2-4. jpg
64KB

cloudinary에서 webp로 변경하면
htps : // / s. cぉ우우한 ry. 이 m/모리 x1500/눈썹/우 p아아 d/v1510926252/아베와 p2-4_99무2. 우우 bp
18.9KB

cloudinary URL을 html에 삽입하여 측정해 봅니다.



네, 모두 A가 되었습니다.
그러나 렌더링 완료 시간이 '1.337s'로 느려졌습니다 ... 왜?

이 페이지에서는 HTTP2를 사용할 수 있습니다.
동일 도메인이 아니면 불필요한 접속이 발생해 버리는 것이 아닐까 추측해,
같은 도메인에 이미지를 넣어 보겠습니다. (잘못하면 지적 부탁드립니다)

Cloudinary에서 직접 이미지를 로드하는 대신 Webp를 다운로드하여 S3에 배치해 봅니다.


오, 「328ms」가 되었습니다.
또 읽기 바이트수도 「70KB」에서 「18KB」가 되었습니다.
이것은 좋은 느낌입니다.

이제 아베 히로시 사이트를 넘을 수 있었습니다!

결론

이하의 기술을 사용하면 기존의 아베 히로시 사이트를 능가할 수 있었습니다.

S3에서 호스팅

CDN (CloudFront)에서 캐시

HTTP2

Webp

여기까지 하지 않으면 넘을 수 없는 기존 사이트… 무섭다.
Service Worker도 사용하고 싶었지만, 그것은 이번 기회에.

그럼!