Google Maps 100% 페이지 속도 가이드

Google Maps가 Core Web Vitals에 미치는 영향

페이지에 Google Maps를 삽입해야 하는 이유는 많습니다. 예를 들어 회사의 위치를 보여줄 때 훌륭한 도구입니다. 하지만 한 가지 단점이 있습니다. Google Maps는 일반적인 Google 서비스에서 기대하는 것만큼 빠르지 않습니다. 사실, 페이지의 Google Maps는 페이지 속도를 상당히 저하시키는 원인입니다.

완벽했던 100% 페이지 속도 점수 중 14%가 이로 인해 하락했습니다. 제 Google Lighthouse 통계에 미친 영향은 다음과 같습니다.

1. First Contentful Paint + 0.8초. Google Maps가 페이지 로드를 방해하기 때문에 첫 번째 페인트가 거의 1초 늦게 실행됩니다.
2. Speed Index + 3.1초. 지도 렌더링 및 메인 스레드 차단으로 인해 Speed Index가 3배로 증가했습니다.
3. Largest Contentful Paint + 0.8초. First Contentful Paint와 마찬가지로 LCP 또한 0.8초 지연됩니다.
4. Time to Interactive + 6.5초. Google Maps는 JavaScript에 크게 의존하기 때문에 페이지와 상호작용하는 데 6초 이상 걸립니다. 이후 Lighthouse는 TTI를 Total Blocking Time으로 대체했지만 근본적인 원인은 동일합니다. Google Maps JavaScript가 메인 스레드를 차단하여 Interaction to Next Paint (INP)에 악영향을 미칩니다.
5. Total Blocking Time + 320ms. Google Maps는 메인 스레드를 320ms 동안 차단합니다. 이는 우리가 절대 원하지 않는 결과입니다.
6. 사용하지 않는 JavaScript 제거(Remove unused JavaScript) 경고. 설상가상으로 Google Maps JavaScript의 상당 부분을 사용하지 않고 있다는 경고까지 추가로 받게 됩니다. 이를 고객에게 설명한다고 상상해 보십시오.

가장 먼저 떠오르는 생각은 iframe 속성인 loading="lazy"를 사용하여 지도를 '지연(lazy)' 로드하는 것일 수 있습니다. 이는 실제로 전 세계 95%의 사용률을 보이는 최신 브라우저에서 작동합니다. 하지만 최고의 성능을 이끌어내기에는 충분하지 않습니다. Chrome은 빠른 연결에서는 뷰포트 아래 약 1,250px, 느린 연결에서는 2,500px 지점부터 지연된 iframe을 로드하기 시작합니다. 지도가 표시 영역 근처에 있다면 여전히 초기 페이지 렌더링 중에 로드되며 중요한 리소스와 경쟁하게 됩니다. 진정한 제로 임팩트를 달성하려면 퍼사드가 필요합니다. 즉, 사용자가 실제로 지도와 상호작용할 때까지 아무것도 로드하지 않아야 합니다.

1단계: 정적 지도(Static maps)

가장 쉬운 옵션은 정적 지도를 사용하는 것입니다. 즉, 상호작용이 가능한 지도 대신 지도의 이미지만 사용하는 것입니다. 이 방식의 장점은 이미지가 훨씬 빠르게 로드된다는 것입니다. 단점은 이미지와 상호작용할 수 없다는 것입니다. 따라서 확대/축소, 스크롤 또는 탐색이 불가능합니다.

먼저 정적 지도로 시작하겠습니다. 나중에 이 정적 지도를 페이지 속도를 방해하지 않는 상호작용 가능한 지도로 변환할 것입니다.

페이지에 정적 지도를 배치하는 방법에는 여러 가지가 있습니다. Static Map Maker와 같은 도구의 도움을 받을 수 있지만, API 키가 필요합니다. 여기서는 수동으로 정적 지도 이미지를 다운로드하는 방법을 보여드리겠습니다.

1. 페이지에 지도 배치하기

페이지에 지도를 배치합니다. Google Maps로 이동하여 위치를 찾은 다음 '공유 > 지도 퍼가기'를 클릭하세요. 코드를 복사하여 페이지에 붙여넣습니다. 이제 페이지를 마우스 오른쪽 버튼으로 클릭하고 '요소 검사(inspect element)'를 선택합니다. 그러면 브라우저의 '개발자 콘솔(dev console)'에 요소 검사기가 표시됩니다. 여기서 iframe 코드를 찾아 마우스 오른쪽 버튼으로 클릭한 다음 '노드 스크린샷 캡처(capture node screenshot)'를 선택합니다.

2. 정적 이미지를 WebP 형식으로 변환하기

방금 다운로드한 지도 이미지는 PNG 형식입니다. 페이지 속도를 최적화해야 하므로, 훨씬 빠른 WebP 형식을 사용할 것입니다. ezgif에서 온라인으로 이미지를 변환하거나, cwebp 도구를 사용하여 cwebp -q 60 image.png -o image.webp와 같이 직접 변환할 수 있습니다.

2단계: 정적 지도 이미지를 상호작용 가능한 지도로 변환하기

정적 지도는 페이지 로드 중에 페이지 속도가 저하되지 않도록 보장합니다. 이는 페이지 로드 시점에는 아직 상호작용 가능한 Google Maps가 없음을 의미합니다. 페이지 로드가 완료된 후 특정 시점에 백그라운드에서 정적 지도를 상호작용 가능한 지도로 교체하게 됩니다. 이 작업은 페이지 렌더링 및 페인팅이 완료된 후에 수행됩니다. 두 가지 방법이 있습니다. 첫 번째는 마우스를 지도 위에 올리자마자 정적 지도를 교체하는 방법입니다. 두 번째는 브라우저가 유휴(idle) 상태가 되면 정적 지도를 교체하는 방법입니다.

3. 자리 표시자에 정적 지도 이미지 배치하기

모바일과 데스크톱 모두에서 지도가 잘 보이기를 원하므로, 방문자의 화면 크기에 상관없이 항상 지도의 비율을 올바르게 유지하는 이 CSS 트릭(CSS trick)을 사용할 것입니다. 이는 지도를 위한 공간을 확보하고 상호작용 가능한 지도가 로드될 때 레이아웃 이동(CLS)이 발생하는 것을 방지합니다. 이제 나중에 Google Maps의 소스 URL로 사용할 data-src 속성을 컨테이너에 추가합니다.

먼저 페이지에 지도 컨테이너를 배치합니다.
<div data-src="https://maps.google.com/mapsq=fyn+()&z=9&output=embed" id="mymap"></div>

스타일시트에 약간의 스타일링을 추가합니다. 보시다시피 정적 지도 이미지를 배경 이미지(background image)로 사용하고, 올바른 종횡비를 위해 상단에 76.25%의 패딩(padding)을 적용했습니다. 최종 지도는 정적 지도의 전체 너비와 높이에 걸쳐 절대 위치(absolute position)를 갖게 됩니다.

#mymap{
    background: url(/image.webp);
    background-size: cover;
    position: relative;
    overflow: hidden;
    padding-top: 76.25%;
}
#mymap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

4. 첫 상호작용 시 상호작용 가능한 지도 로드하기

여기서부터 마법이 시작됩니다. 이 짧은 JavaScript 코드가 없다면 지도는 단지 정적 이미지에 불과합니다. 이 JavaScript는 자리 표시자 컨테이너에 이벤트 리스너를 추가(및 제거)하고 'mouseover' 이벤트(정적 지도 위에 마우스를 올릴 때)를 기다렸다가 컨테이너에 상호작용 가능한 지도를 주입합니다.

const map = document.getElementById('mymap');
const mapListener = function(e) {
    const frame = document.createElement('iframe');
    frame.src = this.getAttribute('data-src');
    map.appendChild(frame);
    map.removeEventListener('mouseover', mapListener);
};
map.addEventListener('mouseover', mapListener);

5. 배경 이미지 미리 로드하기(선택 사항)

Google Maps가 뷰포트에 즉시 표시된다면 배경 지도 이미지를 미리 로드(preload)하는 것이 현명한 선택일 때가 많습니다. 정적 지도 이미지를 미리 로드하려면 <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin> 코드를 사용하고 이를 페이지의 <head> 내에서 최대한 앞부분에 배치하세요. 이 예시의 경우 자리 표시자 이미지를 미리 로드하면 LCP 속도가 거의 1초가량 빨라집니다.

2b단계: 정적 지도 이미지 자동 교체하기

방문자가 지도와 상호작용할 가능성이 높을 때는 mouseover 이벤트를 기다리지 않는 것이 좋은 아이디어일 수 있습니다. 브라우저가 유휴 상태가 되는 즉시 페이지에 지도를 주입하기 시작합니다. 과정은 위와 거의 같습니다. 두 방법을 결합할 수도 있습니다.

4b. 상호작용 가능한 지도 자동 로드하기

여기서는 'load 이벤트'를 사용할 것입니다. load 이벤트는 페이지 로드가 완료되는 즉시 브라우저가 내보내는 신호입니다. 이때 정적 지도를 상호작용 가능한 지도로 변환합니다! 이와 유사한 추가 기술을 보려면 JavaScript를 지연시키는 16가지 방법(16 methods to defer JavaScript)을 확인하세요.

window.addEventListener('load',
    function(e) {
        const map = document.getElementById('mymap');
        const frame = document.createElement('iframe');
        frame.src = map.getAttribute('data-src');
        map.appendChild(frame);
});      

결과

이러한 기법 중 하나를 적용하면 Google Maps의 모든 기능을 유지하면서 100% Lighthouse 점수와 100% PageSpeed Insights 점수로 페이지가 로드되는 것을 확인할 수 있습니다!

2025 Web Almanac에 따르면 iframe을 사용하는 페이지의 91%가 여전히 loading 속성을 전혀 사용하지 않는 것으로 나타났습니다. 즉, 대다수의 삽입된 Google Maps가 어떠한 최적화도 없이 로드된다는 의미입니다. 퍼사드 접근 방식을 활용하면 훨씬 앞서 나갈 수 있습니다.

변경 사항이 실제로 사용자 경험(UX)을 향상시키는지 검증하려면 Real User Monitoring(RUM)을 설정하십시오. 랩(Lab) 점수는 디버깅에 유용하지만, Google에서 순위를 매기는 데 사용하는 것은 실제 방문자의 필드 데이터입니다.

Google Maps를 더 빠르게 만드는 작업에 행운을 빕니다. 도움이 필요하신가요? 그렇다면 저에게 연락해 주세요!