크롬에서 이미지 많은 페이지 빠르게 로딩하는 방법

갤러리, 웹툰처럼 이미지가 많은 페이지는 모든 이미지가 완전히 뜰 때까지 시간이 오래 걸릴 수 있습니다. 브라우저가 수십 장의 이미지를 디코딩하고 화면에 표시할 준비를 하느라 CPU, GPU와 네트워크가 동시에 바빠지기 때문이죠.

사용자의 브라우저 환경에서 이미지 많은 페이지가 유독 느리다고 생각된다면 크롬 기본 옵션과 몇 가지 실험 플래그만 조정해도 초기 화면 로딩과 스크롤 체감이 확 달라집니다. 아래 내용을 순서대로 적용해 보세요.

페이지 프리로드 설정

크롬은 사용자가 곧 이동할 가능성이 높은 사이트를 미리 탐색하고 연결하여 초기 연결 시간을 줄일 수 있습니다.

크롬 우측 상단의 메뉴 ☰ → 설정(⚙) → 성능 탭(chrome://settings/performance) 화면으로 이동한 다음, 페이지 프리로드를 활성화합니다.

페이지 프리로드를 활성화하면 DNS 조회, 프리커넥트, 프리페치가 선행되어 이미지가 많은 페이지를 클릭했을 때 넘어가는 화면 로딩 속도가 개선되며 체감 속도가 올라갑니다.

다만 테더링, 모바일 요금제 환경에서는 데이터 사용량이 늘 수 있으니 상황에 맞게 온, 오프 하시길 권장합니다.

모바일 크롬에서는 설정 → 대역폭 웹페이지 미리 로드가 동일한 기능을 수행함니다. 프리로드만으로 부족하다면 네트워크와 DNS 점검을 함께 진행하는 편이 확실합니다.

레이지 로드는 화면에 보이지 않는 이미지를 스크롤 전까지 지연 로딩해 초기 렌더링 부담을 줄이는 기법입니다.

이 기술은 사이트 측에서 구현하는 것이 원칙이지만, 크롬 최신 버전에서는 브라우저 자체에서 이 기능을 지원하며 화면에 보이지 않는 아래쪽 영역의 초기 요청을 줄여 사용자 눈에 보이는 부분을 빠르게 로딩합니다.

다만 일부 사이트 스크립트와 충돌해 이미지가 늦게 표시되거나 누락되는 사례가 있으므로, 적용 후 체감 속도와 안정성을 테스트하고 활성화 하는 것을 권장합니다.

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

기본값 Default로 두어도 작동하지만 웹사이트에 따라 작동 여부가 달라지는 차이점이 있습니다.

Parallel downloading(병렬 다운로드)는 단일 파일을 여러 조각으로 분할해 동시에 내려받아 총 소요 시간을 줄이는 기능입니다.

웹페이지 렌더링 속도 자체에 미치는 영향은 제한적이지만, 대용량 이미지를 다수 받을 때 체감 속도에 차이가 있습니다.

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

적용 후에는 다운로드 속도와 CPU 점유율 변화를 함께 확인해 보시길 바랍니다.

브라우저에서 화면을 표현하는 방식(Rasterization)을 GPU로 넘기면, 이미지가 많은 페이지의 표현을 빠르게 처리할 수 있습니다.

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

참고로 chrome://gpu 페이지에서 크롬에서 GPU 가속 상태를 확인할 수 있습니다.

이미지가 많은 페이지의 첫 로딩, 첫 스크롤 화면은 작은 설정 차이로도 체감 속도가 크게 달라집니다.

위 4가지를 적용해 본 뒤에도 특정 사이트만 느리다면 크롬 문제가 아니라 네트워크 상태일 가능성이 큽니다. 구글 DNS 설정 방법을 참고해서 접속 경로나 차단 이슈인지 확인해 보시길 바랍니다.