일상 블로그 배경
일상 블로그

LCP 이후 광고 로딩으로 블로그 속도 최적화하는 방법

openipc 12월 15, 2025

LCP 이후 로딩 방법: 웹페이지 속도 최적화와 광고/스크립트 지연 로딩

LCP(Largest Contentful Paint) 이후에 광고 및 외부 스크립트를 로딩하여 웹 성능을 높이고Core Web Vitals 점수 개선, CLS 방지를 통한 사용자 경험(UX) 향상시킬수 있는 구체적인 지연 로딩 코드 구현 방법을 다룹니다.

LCP(Largest Contentful Paint)의 이해: SEO에 왜 중요할까요?

웹사이트의 성공은 단지 좋은 콘텐츠에만 달려 있지 않습니다. '속도'는 구글이 가장 중요하게 평가하는 핵심 지표이며, 이는 곧 SEO 점수(검색 엔진 최적화)와 사용자 경험(User Experience, UX)으로 직결됩니다.

LCP란 사용자가 페이지를 열었을 때 화면에 보이는 가장 큰 콘텐츠 요소가 렌더링을 완료하는 데 걸리는 시간을 의미합니다. 구글은 LCP를 2.5초 이내로 유지할 것을 강력히 권장하며, 이는 곧 페이지 경험(Page Experience) 점수를 결정하는 Core Web Vitals의 핵심 지표입니다.

  • 블로그의 LCP 요소: 보통 메인 콘텐츠의 큰 이미지, 헤더 이미지, 또는 상단 대형 광고 배너가 LCP 요소가 됩니다.
  • LCP가 느릴 때의 문제점: 검색엔진의 SEO 랭킹이 하락하고, 방문자가 콘텐츠를 보기 전에 이탈할 확률(Bounce Rate)이 높아져 체류 시간에 악영향을 줍니다.

따라서 페이지 로딩 초기 단계에서 LCP 이후 광고 로딩을 통해 중요 콘텐츠가 먼저 렌더링되도록 브라우저의 작업을 조정해야 합니다. 이 과정이 웹페이지 속도를 획기적으로 개선하는 최적의 방입니다.

lcp 최적화 하는 방법 소개


광고 및 외부 스크립트가 LCP에 미치는 치명적인 영향 분석

일반적으로 구글 애드센스(Google AdSense)나 외부 분석/위젯 스크립트는 페이지의 렌더링을 차단합니다. 이로 인해 브라우저가 정작 중요한 콘텐츠를 표시하기 전에 외부 파일을 다운로드하고 실행하느라 시간을 낭비하게 됩니다.

광고 스크립트 삽입 방식별 LCP 영향도 비교

스크립트 삽입 방식 LCP에 미치는 영향 최적화 수준
HTML 직접 삽입 스크립트 다운로드 및 실행으로 LCP 렌더링 지연 최악 (렌더링 차단)
defer 속성 사용 렌더링은 유지되나, 스크립트 실행이 여전히 LCP를 방해할 수 있음 보통
LCP 이후 실행 LCP 우선 렌더링을 보장하고, 이후에 비동기적으로 광고 노출 최적 (SEO & UX 모두 확보)

결론적으로, LCP 이후 광고 로딩 및 외부 스크립트 지연 로딩은 웹페이지 속도 최적화를 위한 가장 확실한 방법입니다.

LCP 이후 광고 로딩 구현 예제 (PerformanceObserver 활용)

가장 쉬운 방법은 브라우저의 PerformanceObserver API를 사용하여 LCP 이벤트가 정확히 발생한 순간을 감지하는 것입니다. 이 코드는 광고 스크립트(adsbygoogle)를 LCP 이벤트 발생 이후에만 호출하도록 합니다.

(function () {
function loadAd() {
try {
(adsbygoogle = window.adsbygoogle || []).push({});
console.info('LCP 이후 광고 실행 완료');
} catch (e) {
console.error('광고 로딩 오류', e);
}
}

function afterLCP(fn) {
if (!('PerformanceObserver' in window)) {
setTimeout(fn, 1500); // Fallback: 미지원 브라우저는 1.5초 후 실행
return;
}

let called = false;
const obs = new PerformanceObserver((list) = {
for (const e of list.getEntries()) {
if (e.entryType === 'largest-contentful-paint' && !called) {
called = true;
obs.disconnect();
fn(); // LCP 이벤트 감지 후 광고 로드 함수 호출
}
}
});

try {
obs.observe({ type: 'largest-contentful-paint', buffered: true });
} catch (e) {
setTimeout(fn, 1500); // 에러 시 Fallback
}
}
afterLCP(loadAd);
})();
  • LCP 지연 로딩 이점:LCP가 먼저 완료되어 페이지 속도 점수가 높아지며, 광고 노출도 문제가 발생하지 않아 수익 유지에 유리합니다.
  • 안정성: PerformanceObserver를 지원하지 않는 구형 브라우저에서도 setTimeout(fn, 1500) 방식의 fallback 로직을 통해 외부 스크립트 지연 로딩이 안정적으로 실행됩니다.

외부 스크립트의 LCP 이후 지연 로딩 전략

광고뿐만 아니라, 댓글 플러그인, 소셜 공유 버튼, 비필수 분석 툴 등 모든 외부 JS 파일도 LCP 이후에 로딩해야 SEO에 유리합니다. 이들은 웹 성능을 저해하는 주요 원인 중 하나입니다.

LCP 이후 비동기 로딩 구현 예제

이 코드는 load 이벤트(페이지의 모든 요소가 완전히 로드된 시점) 이후에 스크립트를 생성하고, async = true 속성을 사용하여 비동기적으로 로드함으로써 렌더링을 방해하지 않습니다.

window.addEventListener('load', function() {
const scripts = [
// 외부 스크립트 URL 목록 (예시)
"https://tistory1.daumcdn.net/.../category-seo.js",
"https://tistory1.daumcdn.net/.../toc-lazy.js",
// ... (필요한 스크립트 목록)
];

scripts.forEach(src = {
const s = document.createElement('script');
s.src = src;
s.async = true; // 핵심: 비동기 로딩으로 렌더링 지연 최소화
s.crossOrigin = "anonymous";
document.body.appendChild(s);
});
});
  • LCP 이후 실행의 장점: LCP 이후에 실행되므로, 스크립트 다운로드 및 실행이 페이지의 초기 렌더링 시간을 늦추지 않습니다.
  • 비동기(async)의 장점: 스크립트가 로드되는 동안에도 브라우저는 다른 작업을 계속 수행할 수 있어 페이지 응답성을 높입니다.

LCP 요소와 CLS 방지를 위한 처리

헤더 영역에 배경 이미지나 자동 재생 동영상이 배치될 경우, 이것이 LCP 요소가 되어 점수를 낮출 수 있습니다. 또한, 광고가 로딩될 때 발생하는 레이아웃 밀림(CLS)도 SEO 점수에 치명적입니다.

배경 동영상 지연 로딩 예제

  • 해결책: LCP 요소가 되는 정적인 배경 이미지를 먼저 표시하고, 동영상 플레이어(iframe)는 LCP 이후에 로딩합니다.
setTimeout(function() {
const iframe = document.createElement('iframe');
iframe.src = "https://www.youtube.com/embed/n_GkpkanNJI?autoplay=1&mute=1&controls=0";
iframe.className = "bg-video";
document.getElementById('header').appendChild(iframe);
}, 2000); // LCP가 완료될 것으로 예상되는 시점(예: 2초) 이후에 실행

CLS 방지를 위한 CSS 최적화

LCP 이후 광고가 로딩될 때 레이아웃이 밀리는 현상(CLS, Cumulative Layout Shift)을 방지하려면, 광고가 들어갈 영역의 크기를 CSS로 미리 확보해야 합니다.

.adstop {
position: relative;
margin: 0 auto;
width: 100%;
height: 300px; /* 핵심: 광고 영역 높이를 미리 확보하여 CLS 방지 */
overflow: hidden;
display: block;
max-width: 1000px;
}

height 값을 고정하거나 min-height를 지정하여 광고가 로드되기 전후에 화면 요소들이 밀리는 것을 방지해야 합니다. 이는 Core Web Vitals 점수 중 CLS를 개선하는 가장 확실한 방법입니다.

자주 묻는 질문 (FAQ): LCP 이후 로딩 관련 SEO 질문

Q1. LCP 이후 광고 로딩은 모든 브라우저에서 지원되나요?

A: 대부분의 최신 브라우저는 PerformanceObserver를 지원합니다. 미지원 브라우저의 경우 위 예제 코드처럼 setTimeout(fn, 1500) 방식의 fallback 로직을 통해 광고를 안정적으로 실행할 수 있어 광고 수익 유지에 문제가 없습니다.

Q2. 외부 스크립트를 defer 대신 LCP 이후 로딩하는 것이 더 좋은가요?

A: 네. defer는 HTML 파싱이 끝난 후 스크립트를 실행하지만, LCP 이후 로딩은 가장 중요한 렌더링(LCP)이 끝난 후 실행되므로, LCP 점수를 최적화하는 데 훨씬 더 유리합니다. 이는 검색엔진의 평가를 높이는 직접적인 방법입니다.

Q3. LCP 최적화를 위해 가장 먼저 제거하거나 지연해야 할 것은 무엇인가요?

A: 가장 먼저 상단에 위치한 크기가 큰 광고 스크립트와 페이지 로딩을 차단하는 외부 CSS/JS 파일을 지연 로딩 대상으로 지정해야 합니다. 특히 뷰포트 최상단에 노출되는 대형 이미지나 배너의 처리 방법을 우선적으로 검토해야 합니다.

LCP 이후 광고 로딩 전략은 페이지 속도(Core Web Vitals)를 개선하고 SEO 점수를 높이는 가장 효과적인 방법입니다. 모든 비필수 스크립트와 광고를 LCP 완료 시점 이후로 지연시켜, 사용자에게 콘텐츠를 빠르게 제공하고 더 나은 페이지 경험을 제공해 보세요!

openipc

작성자: openipc