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

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

페이지에 Google Maps를 삽입할 이유는 많습니다. 회사 위치를 안내하기에 아주 유용합니다. 하지만 문제가 있습니다. Google Maps는 Google 서비스치고 기대만큼 빠르지 않습니다. 실제로 페이지에 지도를 올리면 페이지 속도를 심각하게 갉아먹습니다.

완벽했던 페이지 속도 100점에서 14점이 깎였습니다. Google Lighthouse 지표에 미친 영향은 다음과 같습니다:

1. First Contentful Paint + 0.8초. Google Maps가 페이지 로딩을 방해하여 첫 페인트가 거의 1초 지연됩니다.
2. Speed Index + 3.1초. 지도 렌더링과 main thread 차단으로 인해 Speed Index가 3배로 증가합니다.
3. Largest Contentful Paint + 0.8초. 첫 페인트와 마찬가지로 가장 큰 콘텐츠 페인트 역시 0.8초 지연됩니다.
4. Time to Interactive + 6.5초. Google Maps가 JavaScript에 크게 의존하기 때문에 페이지와 상호작용하기까지 6초 이상 더 걸립니다. 이후 Lighthouse는 TTI를 Total Blocking Time으로 대체했지만, 근본 원인은 동일합니다. Google Maps JavaScript가 main thread를 차단해 Interaction to Next Paint (INP)를 저하시킵니다.
5. Total Blocking Time + 320ms. Google Maps가 main thread를 320ms 동안 차단합니다. 성능 최적화에서 절대 있어서는 안 될 일입니다.
6. Remove unused JavaScript 경고. 설상가상으로 Google Maps JavaScript의 상당 부분을 사용하지 않는다는 경고까지 뜹니다. 고객에게 설명하기 난감한 문제입니다.

가장 먼저 iframe 속성인 loading="lazy"를 적용해 지도를 lazy loading하는 방법을 떠올릴 수 있습니다. 이 방법은 모던 브라우저에서 전 세계 95%의 지원율을 기록하며 실제로 동작합니다. 하지만 최고의 성능을 내기에는 부족합니다. Chrome은 빠른 연결 환경에서는 viewport 아래 약 1,250px, 느린 연결 환경에서는 약 2,500px 지점부터 lazy iframe을 로드하기 시작합니다. 지도가 화면에 보이는 영역 근처에 있다면 초기 페이지 렌더링 시점에 그대로 로드되어 핵심 리소스와 네트워크 경쟁을 벌입니다. 성능 영향을 완전히 없애려면 facade 방식이 필요합니다. 사용자가 지도와 실제로 상호작용하기 전까지는 아무것도 로드하지 않아야 합니다.

Step 1: 정적 지도

가장 쉬운 방법은 정적 지도를 사용하는 것입니다. 인터랙티브 지도 대신 지도 이미지 하나만 사용하는 방식입니다. 이미지는 로딩 속도가 훨씬 빠르다는 장점이 있습니다. 단점은 이미지와 상호작용할 수 없다는 점입니다. 확대, 스크롤, 이동이 불가능합니다.

우선 정적 지도로 시작합니다. 이후 페이지 속도를 저하시키지 않으면서 이 정적 지도를 인터랙티브 지도로 전환할 수 있습니다.

페이지에 정적 지도를 넣는 방법은 여러 가지가 있습니다. Static Map Maker 같은 도구를 활용할 수도 있지만 API 키가 필요합니다. 여기서는 정적 지도 이미지를 수동으로 직접 다운로드하는 방법을 보여드리겠습니다.

1. 페이지에 지도 배치

페이지에 지도를 배치합니다. Google Maps에서 위치를 검색한 뒤 '공유' > '지도 삽입'을 클릭합니다. 코드를 복사하여 페이지에 붙여넣습니다. 이제 페이지를 마우스 우클릭하고 '검사'를 선택합니다. 브라우저 개발자 도구의 요소 검사 창이 열립니다. iframe 코드를 찾아 마우스 우클릭한 뒤 '노드 스크린샷 캡처(capture node screenshot)'를 선택합니다.

2. 정적 이미지를 WebP 포맷으로 변환

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

Step 2: 정적 지도 이미지를 인터랙티브 지도로 전환

정적 지도를 사용하면 페이지 로드 과정에서 속도가 전혀 저하되지 않습니다. 페이지가 로드되는 시점에는 인터랙티브 Google 지도가 아직 로드되지 않은 상태입니다. 페이지 로드가 끝난 뒤 백그라운드에서 정적 지도를 인터랙티브 지도로 교체합니다. 페이지 렌더링과 페인트가 완전히 끝난 후에 이 작업을 진행합니다. 방법은 두 가지입니다. 첫 번째는 마우스를 지도 위에 올리는(hover) 즉시 교체하는 방식입니다. 두 번째는 브라우저가 idle 상태가 되었을 때 교체하는 방식입니다.

3. 플레이스홀더에 정적 지도 이미지 배치

모바일과 데스크톱 모두에서 지도가 깔끔하게 표시되도록, 방문자의 화면 크기와 무관하게 지도 비율을 항상 알맞게 유지해 주는 CSS 트릭을 사용합니다. 이 방식은 지도가 차지할 공간을 미리 확보하여 인터랙티브 지도가 로드될 때 layout shift (CLS)가 발생하는 것을 방지합니다. 이제 나중에 Google 지도의 소스 URL로 사용할 data-src 속성을 컨테이너에 추가합니다.

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

스타일시트에 스타일을 추가합니다. 아래와 같이 정적 지도 이미지를 배경 이미지로 사용하고, 올바른 종횡비를 위해 상단 패딩(padding-top)을 76.25%로 지정합니다. 최종 지도는 정적 지도의 전체 너비와 높이를 덮도록 absolute 위치로 배치됩니다.

#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 코드가 없다면 지도는 단순한 정적 이미지에 불과합니다. 이 스크립트는 플레이스홀더 컨테이너에 이벤트 리스너를 등록하고(실행 후 즉시 제거), '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. 배경 이미지 preload(선택 사항)

Google 지도가 viewport에 바로 보인다면 배경 지도 이미지를 preload하는 것이 효과적입니다. 다음 코드로 정적 지도 이미지를 preload하고, 페이지의 <head> 안에서 가능한 한 위쪽에 배치하십시오: <link rel="preload" href="/image.webp" as="image" type="image/webp" crossorigin>. 이 예시의 경우 플레이스홀더 이미지를 preload하면 LCP를 거의 1초 앞당길 수 있습니다.

Step 2b: 정적 지도 이미지 자동 교체

방문자가 지도와 상호작용할 가능성이 높다면 mouseover 이벤트를 굳이 기다리지 않아도 됩니다. 브라우저가 idle 상태가 되는 즉시 페이지에 지도를 주입하기 시작하십시오. 진행 과정은 앞서 설명한 내용과 거의 같습니다. 두 가지 방식을 함께 조합할 수도 있습니다.

4b. 인터랙티브 지도 자동 로드

여기서는 'load 이벤트'를 사용합니다. load 이벤트는 브라우저가 페이지 로딩을 끝마치는 즉시 발생시키는 신호입니다. 이 시점에 정적 지도를 인터랙티브 지도로 전환합니다. 이와 같은 기법을 더 확인하려면 JavaScript 지연 로딩을 위한 16가지 방법을 참고하십시오.

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의 모든 기능을 유지하면서도 Lighthouse 점수 100점, PageSpeed Insights 점수 100점으로 페이지를 로드할 수 있습니다.

2025 Web Almanac에 따르면 iframe을 사용하는 페이지의 91%는 loading 속성이 전혀 지정되어 있지 않습니다. 즉, 대다수의 Google Maps 임베드가 아무런 최적화 없이 로드된다는 뜻입니다. facade 방식을 적용하면 성능 면에서 압도적으로 앞서갈 수 있습니다.

수정한 내용이 실제 사용자 경험을 개선했는지 확인하려면 Real User Monitoring을 설정하십시오. lab data 점수는 디버깅에 유용하지만, Google이 순위 산정에 반영하는 것은 실제 방문자로부터 수집된 field data입니다.

Google Maps 속도를 성공적으로 개선하시길 바랍니다. 도움이 필요하시다면 언제든 문의해 주십시오.