구글 Quicklink 소개

https://github.com/GoogleChromeLabs/quicklink

구글 크롬 개발팀에서 작년 11월, 오픈소스로 공개한 자바스크립트 라이브러리입니다. 

어떤 기능인지를 간단히 요약하자면,,

1) 브라우저가 놀고 있는 시간에 내가 이동할만한 링크들의 데이터를 미리 불러와서 캐싱한다. (브라우저 캐싱) 

2페이지 이동속도가 급격히 향상된다.

비슷한 컨셉의 라이브러리가 일전에 아예 없었던 것은 아니지만, idle callback (브라우저 유휴타임 체크) 방식이나  intersection-observer (스크롤 위치에 따라 이벤트를 실행) 방식을 적용한 라이브러리는 최초인 듯 합니다 

게다가 압축된 js파일의 용량은 1kb 미만 ㄷㄷ..

물론 ie 등의 환경에서는 폴리필이 필요하지만요. (크롬개발팀에서 만들었으니 크롬 최적화이긴 하겠죠.)

작동 원리는 다음과 같습니다. 

1) viewport(현재 사용자가 보고 있는 화면)에 포함된 모든 링크를 미리 감지

(옵션에서 viewport를 특정할 수도 있고, prefetching 우선순위,  url 예외규칙 등을 등록할 수도 있습니다),

 

2) 브라우저가 Idle time(유휴 상태)이 될 때까지 대기,

 

3) 사용자가 느린 인터넷 환경인지, 데이터 절약 모드 중인지 체크

 

4) 1)에서 감지한 링크의 데이터(css,js,이미지 등)를 미리 불러옴(prefetching)

만약 위 방법으로 미리 불러온 페이지 안에 이미지가 있었고, 사용자가 그 링크로 이동한다면, 이미지는 이미 disk-cache 상태!

사용자의 네트워크 환경이나 컴퓨터 성능이 많이 좋아지다보니, 실시간 프리패칭 + 브라우저 캐싱의 기술까지 연계되다니 놀랍습니다. 

그러나 개인적으로 테스트도 해봤을 때, 몇가지 한계를 발견하긴 했습니다.

1) 불필요한 요청들..

내가 실제로 지금 이동하지 않을 링크의 데이터까지 여러차례 요청하게 되니, 서버에 부담을 주게됩니다.

사용자 경험(UX)은 향상되지만, 비용 또한 늘어나버리는거지요.

2) 정적인 페이지에서만 사용 가능하려나..

위 문제와 연결됩니다만, 로직이 많이 들어가는 여러 페이지를 연달아 prefetching 한다면, 서버는 힘들어할겁니다.  이 상황을 방지하려면 불러오게 되는 주 대상이 완전히 정적인 페이지이거나, 캐싱 설계가 아주 면밀히 되어 있어야할 것 같습니다. 

그 때문인지 아직까지는 정적인 페이지를 generate 해주는 Gatsby, Nuxt 등의 프레임워크에서만 응용되고 있는 듯 합니다. 워드프레스에서도 누군가 포팅을 해서 플러그인으로 올려놓았지만, 인기는 그닥인 것 같더군요.. 아무튼 막 적용할 수는 없겠습니다.

3) 모바일에서는? 데이터 폭탄

뭐,, 물론 와이파이 환경을 미리 확인하는 방법도 있고, 라이브러리 자체적으로 데이터 절약모드인지 확인해주긴 하지만, 데이터 사용량이 훠얼씬 늘어나게 되는 것도 아직까지는 한계로 봐야겠죠. 

xe 에서도 설계만 잘 된다면, 충분히 사용할만합니다. (물론 커뮤니티는 무리..) 

슈퍼캐시 같은 프로그램과 연계된다면 갱신이 많지 않은 사이트에서는 사용할 수 있으려나요?..

여튼 전 처음 발견하고 오! 했다가 다시 넣어두었습니다.

그래도 앞으로 지켜보고 연구할만한 가치는 충분할듯 합니다.