⚡️ Google Chrome Labs의 Quicklink로 웹페이지 UX 향상시키기

Chris Yang·2019년 2월 17일
8
post-thumbnail

이 글에서는 Google Chrome Labs에서 2018년 11월에 공개한 quicklink에 대해 알아보고 간단하게 사용해보는 방법을 다룹니다.


Google Chrome Labs에서 작년 11월 quicklink를 Github에 공개했습니다.

quicklink는

웹페이지의 첫 로딩이 끝난 뒤 네트워크가 idle time일 때, 사용자가 이동할 수 있는 다음페이지에 존재하는 에셋들(js, css, image 등)을 미리 가져와(prefetch), 이후 페이지의 로딩속도를 향상시키는 JavaScript 라이브러리입니다.

동작 방식

Github에 설명되어있는 동작방식을 보면 다음과 같습니다.

설치방법

npm 모듈 설치:

$ npm install quicklink

CDN:

<script src="https://unpkg.com/quicklink@1.0.0/dist/quicklink.umd.js"></script>

사용법

quicklink()를 호출하면, quicklink는 네트워크가 idle time일 때 Viewport에 있는 링크 URL들을 자동으로 prefetching 합니다.

<script src="dist/quicklink.umd.js"></script>
<!-- 초기화 (원하는 때 아무때나 초기화 할 수 있습니다) -->
<script>
quicklink();
</script>

ES Module Import:

import quicklink from "quicklink/dist/quicklink.mjs";
quicklink();

위 사용 방식은 멀티페이지 애플리케이션 방식에 적합합니다. 싱글페이지 애플리케이션에서는 라우터와 함께 아래와 같이 사용할 수 있습니다.

  • 새로운 경로로 이동을 완료했을 때 quicklink() 호출

  • 특정 DOM Element나 Component에 대해 quicklink() 호출

  • prefetching할 URL들을 직접 지정해서 quicklink({urls:[...]}) 와 같이 호출

데모

아래 예제는 제가 직접 사용해보면서 작성한 예제입니다.

index.html에는 index2.html로 가는 링크가 있으며, index2.html에는 큰 사이즈의 이미지가 포함되어있습니다.

아래 버튼을 클릭하고 Go to index2 링크를 눌러보세요. 누른 후에 이미지를 로드하기 시작하기 때문에 로딩이 오래걸리는 걸 확인할 수 있습니다.

Edit 5zol9lp1p4

Imgur

image.png

(4.4MB 짜리 이미지를 받는데 26.61초나 걸렸네요.)

이제 브라우저캐시를 지우고 다시 아래링크로 들어가서, 조금 기다린 뒤에 Go to index2 링크를 눌러봅시다.

브라우저캐시 삭제하는 방법: Chrome Devtool을 키고 왼쪽위에 새로고침 버튼을 길게 누른 다음 Empty Cache and Hard Reload 버튼으로 새로고침합니다.

Edit my0o7l7v29

image.png

(from disk cache)를 보면 알 수 있듯이, 첫 index.html 로딩이 끝난 후 index2.html에 존재하는 큰 이미지를 미리 prefetching했기 때문에, index2.html 페이지가 로딩되었을 때 즉시 캐시된 이미지를 가져와 41ms밖에 걸리지 않는 것을 볼 수 있습니다.

HTTP 캐시는 GET Method 요청에 대한 응답만 캐시됩니다. 자세한 내용은 MDN의 HTTP Caching을 참고하세요.

너무 과도한 prefetching은 사용자의 데이터를 무분별하게 낭비할 수 있으므로 적절한 prefetching 및 caching 전략이 중요합니다.

관련 프로젝트

  • Gatsby에는 Intersection Observer를 사용해 이미 이러한 기능이 기본적으로 들어가 있습니다.

  • Guess.js는 Google Analytics와 머신러닝을 사용해 사용자가 사이트를 네비게이션하는 빈도수를 기반으로 리소스를 prefetching하는 Data-Driven 접근방식을 사용합니다.

  • (추가) Nuxt.js도 v2.4.0 버전부터 자체적으로 quicklink가 빌트인 되어있습니다. (링크)


정리

이 글에서는 사용자가 웹사이트를 라우팅할 때 필요하게 될 에셋들(이미지, 번들링된 js, css파일 등)을 네트워크 idle time에 prefetch하여, 사용자가 페이지를 네비게이션할 때 빠른 로딩으로 네이티브앱과 같은 사용자 경험을 주는 라이브러리 quicklink에 대해 알아보고 간단하게 사용해보았습니다.

브라우저 호환성, 상세한 API 등은 Github Repository의 README를 참고하세요.

4개의 댓글

comment-user-thumbnail
2019년 2월 18일

좋은 포스트 감사합니다 !!

답글 달기
comment-user-thumbnail
2019년 2월 19일

워우.. 리액트 환경의 게시판에 적용해봤는데, 프리패칭 중에 매우 버벅이네요. 스크롤이 툭툭 끊기는 수준으로..
분명 서버의 프로세싱이 많은 동적인 페이지보다는,, 파일로 캐싱된 페이지나 기타 정적인 페이지에만 활용할 수 있지 않을까 싶네요..
그래도 브라우저 캐싱의 기술력이 계속해서 진보하고 있다는 점은 고무적인 듯 합니다

1개의 답글
comment-user-thumbnail
2020년 8월 20일

글 감사합니다!

답글 달기