크롬 이미지 로딩 속도 개선하는 방법

쇼핑몰 사이트, 갤러리처럼 이미지가 많은 웹페이지에서 첫 화면 이미지가 느리게 뜨거나, 화면을 빠르게 스크롤할 때 이미지가 버벅이고 온전히 표시되지 않는 경험이 한 번쯤 있으실 겁니다.

사용자의 네트워크 품질과 사이트 접속 속도도 중요하지만, 크롬의 기본값으로 인해 이미지 로딩 속도가 느릴 수 있습니다. 이로인해 내 PC가 버벅이는 듯한 느낌을 받을 수 있는데요.

이 글에서는 크롬 이미지 로딩 속도를 끌어올리는 대표적인 설정과 함께 어떤 경우 효과가 나는지까지 핵심만 정리했습니다. 크롬의 실험실 기능만 변경하는 것이니 부담 없이 따라와 주세요.

Parallel downloading

chrome://flags/#enable-parallel-downloading

하나의 파일을 여러 구간으로 쪼개 병렬로 내려받는 기능으로 전체 다운로드 시간을 줄이는 효과를 가집니다.

프로토콜에 따라 차이가 있지만 대형 서비스 대부분은 HTTPS/3를 지원하기 때문에 체감이 크며, 특히 웹툰, 네이버 쇼핑과 같이 한 번에 많은 이미지를 로딩할 경우 유리합니다.

GPU Rasterization

chrome://flags/#enable-gpu-rasterization

웹페이지를 실제 픽셀로 표현하는 ‘래스터’ 과정을 CPU 대신 GPU가 맡도록 해 로딩 속도의 병목을 개선할 수 있습니다. 이미지 표현을 하드웨어(GPU)에서 처리하는 것이죠.

Lazy load image

chrome://flags/#enable-lazy-load-image-for-invisible-pages

Lazy loading은 화면에 보이는 이미지를 우선적으로 연결해 표시하고 화면에 보이지 않는 영역 이미지는 스크롤 전까지 지연하는 기술입니다. 화면에 표시되는 이미지 영역에 우선 순위가 있으므로 많은 이미지 로딩 시 사용자의 체감이 올라가는 효과를 가지는데요.

보통 이 기술은 웹사이트 레벨에서 스크립트로 적용하지만, 크롬 76 버전부터 자체적으로 지연 로딩을 지원하기 시작해 Lazy loading이 구현되지 않은 웹사이트에서도 브라우저 레벨에서 사용할 수 있게 되었습니다.

Zero-copy rasterizer

chrome://flags/#enable-zero-copy

Zero-copy Rasterizer는 웹페이지를 그린 비트맵 데이터를 CPU에서 메모리에 적재하고 다시 GPU로 복사하는 과정을 줄여, GPU가 바로 읽는 버퍼에 직접 기록하는 기능입니다.

하드웨어 내부적으로 전송, 복사 오버헤드가 줄어 스크롤과 이미지 로딩이 매끄러워지는 효과가 있습니다.

마치며

위 방법을 모두 적용하면 크롬에서 웹페이지 안의 이미지를 표시할 때 다운로드 과정, 이미지 렌더링 과정이 최적화되며 많은 이미지를 한 번에 로딩할 때 좀 더 빠릿한 동작을 체감할 수 있습니다.

다만 사용자의 컴퓨팅 환경이 다르기 때문에 누군가에게는 효과가 미미할 수 있습니다.

특히 마지막 Zero-copy rasterizer의 경우 하드웨어에 따라 GPU보다 소프트웨어 처리가 체감이 더 나을 수 있으니 하나씩 적용해 효과가 높은 설정만 적용하시길 바랍니다.