마이랩(MaiLab) | 마케팅 분석자동화 서비스 | 온라인 퍼포먼스 마케팅 분석솔루션

웹사이트 SEO 진단. 현재 점수를 측정하고, 최적화 방향을 제시합니다.

성능

접근성

권장사항

검색엔진 최적화

▶ 구조(Structure) 분석 결과

1. 이미지 <img> 태그 확인

총 이미지 개수: 4개

alt태그: 이미지에 대한 설명을 제공하는 대체 텍스트로, SEO 판단 기준이 됨

모든 이미지에 alt 속성이 존재합니다.

2. 필수 구조 태그 확인

Canonical 태그: 사용되지 않음

<table> 태그: 사용됨

<ul>/<ol> 태그: 사용되지 않음

누락된 태그 및 경고 메시지

주의 [Canonical 링크 누락] 중복 URL 통합을 위해 동일 콘텐츠가 여러 URL에 존재할 경우, 검색 엔진이 중복 콘텐츠로 인식하여 검색 순위가 급락할 수 있습니다. canonical 태그는 대표 URL을 명확히 지정하여 검색엔진이 올바르게 색인하도록 도와줍니다. 을 추가해 주세요.
[UL/OL 목록 태그 누락] 콘텐츠 구조화·접근성 향상을 위해 목록은 정보를 명확하게 나열하여 가독성과 정보 전달력을 높이는 데 핵심적인 역할을 합니다. 리스트 태그 없이 문장을 쉼표나 줄바꿈만으로 나열하면 접근성, 시각적 구조, SEO 점수 모두 저하됩니다. 순서가 없는 항목은 ul태그와 li태그를 그리고 순서가 필요한 항목은 ol태그와 li태그를 활용권장합니다. 패턴을 사용해 목록을 마크업해 주세요.

3. 헤더 계층 구조 분석

H1 태그 개수: 0개

헤더 구조가 계층적으로 올바르게 구성되어 있습니다.

페이지 내 헤더 계층 구조

H4: 실시간 인기 검색어

4. <iframe> 태그 사용 여부

iframe 개수: 1개

사용된 iframe src 목록

https://www.googletagmanager.com/ns.html?id=GTM-NJFTSM9B

SEO 단점

1. 콘텐츠 인식 불가: 검색 엔진은 iframe 내부 콘텐츠를 직접 인덱싱하지 못합니다. 중요한 콘텐츠를 iframe에 넣으면 검색 노출이 되지 않습니다.

2. SEO 점수 저하: 콘텐츠가 비어 있다고 판단될 수 있어 SEO 품질 점수에 악영향을 줍니다. 구글은 iframe 콘텐츠를 '외부 콘텐츠'로 간주하며 콘텐츠 일관성이 떨어집니다.

3. 모바일 최적화 문제: iframe은 반응형 웹 구현에 제약이 많아 사용자 경험(UX)에 부정적 영향을 줍니다.

4. 보안 및 속도 저하: 외부 iframe 로드는 보안 이슈와 페이지 로딩 속도 저하를 유발할 수 있습니다.

5. Open Graph 메타 태그 확인

OG 태그 사용 여부

og:title: 사용됨
og:type: 사용됨
og:url: 사용됨
og:description: 사용됨
og:site_name: 사용되지 않음
og:image: 사용되지 않음
og:image:alt: 사용되지 않음

누락된 OG 태그 중요성

[og:site_name 누락] → 사이트 이름이 공유 카드에 표시되지 않을 수 있습니다.
[og:image 누락] → 공유 시 대표 이미지가 표시되지 않습니다.
[og:image:alt 누락] → 이미지 접근성이 떨어지고, 일부 플랫폼에서 alt가 필요할 수 있습니다.

6. 기본 메타 태그 확인

Meta Title: 존재
Meta Description: 존재
Meta Keywords: 존재

핵심 성능 메트릭 상세

항목	측정값	권장 기준	판단	주요 해결 방안
speedIndex	2052	< 3 000 ms	양호	1) unused CSS/JS 제거(purifycss) 2) Critical CSS 인라인 및 비핵심 CSS 분리 3) HTTP/2 Server Push 활용
observedDomContentLoadedTs	342703113133	?	N/A
observedNavigationStartTs	342701886680	?	N/A
observedFirstContentfulPaintTs	342702978104	?	N/A
observedLargestContentfulPaint	2087	< 2 500 ms	양호	1) LCP 대상 요소 우선 렌더링 2) 서버 간 응답 시간 단축 3) CDN Edge 캐싱 활용
observedFirstContentfulPaintAllFramesTs	342702978104	?	N/A
observedLastVisualChange	4837	?	N/A
observedTraceEnd	4859	?	N/A
observedSpeedIndexTs	342703225654	?	N/A
observedCumulativeLayoutShiftMainFrame	0.17	< 0.10	주의	1) 메인 프레임 CLS 요소 크기 명시 2) 비동기 콘텐츠 자리 예약
largestContentfulPaint	10163	< 2 500 ms	매우불량	1) LCP 리소스 preload 태그 추가 2) 이미지 WebP/AVIF 포맷 변환 3) 백엔드 응답속도 개선
lcpLoadEnd	8748	LCP 내 포함	N/A	1) LCP 리소스 최종 렌더링 최적화 2) 크기·포맷 압축
observedDomContentLoaded	1226	< 2 000 ms	양호	1) 초기 불필요 DOM 요소 제거 2) 스크립트 지연 로드 3) HTML 파싱 블로킹 최소화
totalBlockingTime	513	< 300 ms	주의	1) JS 함수 최적화(minification) 2) task 쪼개기(requestIdleCallback 사용) 3) 메인 스레드 작업 분산
observedTimeOrigin	0	?	N/A
observedCumulativeLayoutShift	0.17	< 0.10	주의	1) CLS 주요 원인 요소 고정 크기 적용 2) 동적 콘텐츠 로딩 자리 확보
lcpLoadStart	2622	LCP 내 포함	N/A	1) LCP 리소스 preload 설정 2) 서버 측 우선 로드 구성
cumulativeLayoutShiftMainFrame	0.17	< 0.10	주의	1) 레이아웃 변경 최소화 2) CSS transition 사용 지양
observedSpeedIndex	1339	< 3 000 ms	양호	1) 시각적 페인트 최적화 2) CSS/JS 번들 최소화 3) 리소스 우선순위 지정
observedFirstPaintTs	342702978104	?	N/A
cumulativeLayoutShift	0.17	< 0.10	주의	1) 이미지/iframe width·height 명시 2) 광고 영역 자리 예약 3) 폰트 로드 관리(font-display: optional)
observedTimeOriginTs	342701886680	?	N/A
observedFirstVisualChangeTs	342702977680	?	N/A
observedLoad	2040	< 2 500 ms	양호	1) lazy-loading 미디어 리소스 2) CDN 호스팅 및 캐싱 3) 번들 크기 최적화
observedFirstVisualChange	1091	< 1 000 ms	주의	1) Critical CSS 적용 2) 주요 텍스트 인라인 스타일 3) WebP 포맷 초기 로드
observedFirstContentfulPaintAllFrames	1091	< 1 000 ms	주의	1) 모든 프레임에 대해 CSS 최적화 적용 2) iframe 크기 예약 및 lazy-loading
observedFirstContentfulPaint	1091	< 1 000 ms	주의	1) Critical CSS 인라인 및 비핵심 CSS 분리 2) 3rd-party 스크립트 지연 로드 3) 브라우저 캐시 활용
observedFirstPaint	1091	< 1 000 ms	주의	1) 초기 핵심 CSS 분리 로드 2) 폰트 로드 지연 설정 3) 이미지 사전 로드(preload) 적용
observedLargestContentfulPaintTs	342703973542	?	N/A
observedLargestContentfulPaintAllFramesTs	342703973542	?	N/A
observedTraceEndTs	342706745971	?	N/A
maxPotentialFID	167	< 100 ms	주의	1) 이벤트 핸들러 로직 경량화 2) 메인 스레드 타스크 분리 3) requestIdleCallback 사용
interactive	10163	< 5 000 ms	불량	1) 핵심 스크립트 async/defer 로드 2) 코드 스플리팅으로 초기 번들 축소 3) 긴 작업 Web Worker 분리
observedLoadTs	342703927154	?	N/A
observedLargestContentfulPaintAllFrames	2087	< 2 500 ms	양호	1) 모든 프레임 내 LCP 리소스 최적화 2) 크기 지정 및 압축
observedNavigationStart	0	?	N/A
timeToFirstByte	161	< 600 ms	양호	1) 애플리케이션 레이어 캐싱(Redis/Memcached) 구성 2) CDN 도입 및 정적 자산 캐싱 헤더 설정 3) 웹 서버(Gzip/Brotli) 압축 활성화 4) 초기 API 호출 수 감소 및 핸들러 최적화
observedLastVisualChangeTs	342706723680	?	N/A
firstContentfulPaint	630	< 1 000 ms	양호	1) 주요 콘텐츠 CSS 우선 로드 2) 이미지 width/height 속성 명시 및 lazy-loading 3) JS 번들 크기 최소화 및 코드 분리
lcpInvalidated	False	?	N/A

Performance

현재 상태:

** 현재 웹사이트의 성능 점수는 매우 낮으며, 특히 부트업 시간(부팅 시간), 누적 레이아웃 이동(누적 레이아웃 이동), 최대 콘텐츠풀 페인트(가장 큰 콘텐츠 표시), 총 차단 시간(총 차단 시간 (TBT))에서 심각한 문제가 발견되었습니다.
* **부트업 시간:** 부트업 시간이 매우 길어 웹사이트 초기 로딩 속도를 저하시키는 주요 원인입니다.
특히 `https://www.gstatic.com/recaptcha/releases/XrIDux0s7SoNe6_IHkjGC92W/recaptcha__en.js` 스크립트의 파싱/컴파일 및 실행 시간이 매우 깁니다.
이는 불필요한 코드, 최적화되지 않은 코드, 혹은 과도한 스크립트 사용 때문일 수 있습니다.
`https://mailab.kr/` 도 부트업 시간에 상당 부분 기여하고 있습니다.
Unattributable은 추적할 수 없는 스크립트로 원인을 파악하기 어렵지만, 336ms의 시간을 소모하고 있어 확인이 필요합니다.
총 1642ms의 낭비된 시간이 발생하고 있습니다.
* **누적 레이아웃 이동 (CLS):** CLS 점수가 0.71로 낮습니다.
이는 웹 페이지 로딩 중에 예상치 못한 레이아웃 이동이 발생하여 사용자 경험을 저해한다는 의미입니다.
특히 메인 프레임에서 발생하는 CLS가 0.17로, 사용자에게 눈에 띄는 수준입니다.
* **최대 콘텐츠풀 페인트 (LCP):** LCP가 10.2초로 매우 느립니다.
이는 사용자가 웹 페이지에서 주요 콘텐츠를 보기까지 너무 오래 걸린다는 의미입니다.
이로 인해 사용자 이탈률이 높아질 가능성이 큽니다.
* **총 차단 시간 (TBT):** TBT가 513ms로 높습니다.
이는 메인 스레드가 오랫동안 차단되어 사용자 인터랙션에 대한 응답성이 떨어진다는 의미입니다.
사용자가 페이지와 상호작용하려고 할 때 지연이 발생할 수 있습니다.
.

해결방안:

** 위에서 진단된 문제점을 해결하기 위해 다음과 같은 구체적인 방안을 제시합니다.
* **부트업 시간 개선:** * **Recaptcha 스크립트 최적화:** Recaptcha 스크립트의 사용 빈도와 필요성을 재검토하고, 불필요한 경우 제거하거나 페이지 로딩 후반에 로드하도록 변경합니다.
코드 스플리팅을 통해 초기 로딩에 필요한 부분만 로드하도록 최적화할 수 있습니다.
* **코드 최적화:** JavaScript 코드의 효율성을 높이기 위해 불필요한 코드를 제거하고, 최신 JavaScript 문법(ES6 이상)을 활용하여 코드를 간결하게 만듭니다.
코드 난독화 및 압축을 통해 파일 크기를 줄입니다.
* **Lazy Loading:** 초기 화면에 보이지 않는 이미지, 비디오, 스크립트 등을 Lazy Loading하여 초기 로딩 시간을 단축합니다.
* **Third-party 스크립트 관리:** 외부 스크립트 사용을 최소화하고, 필요한 경우 비동기적으로 로드하거나 defer 속성을 사용하여 페이지 로딩에 미치는 영향을 줄입니다.
* **Unattributable 스크립트 분석:** Unattributable 스크립트가 어디서 로드되는지 파악하고, 불필요한 경우 제거하거나 최적화합니다.
* **누적 레이아웃 이동 (CLS) 개선:** * **이미지 및 비디오 크기 명시:** 이미지 및 비디오 요소에 `width` 및 `height` 속성을 명시하거나 CSS의 `aspect-ratio` 속성을 사용하여 브라우저가 미리 공간을 확보하도록 합니다.
* **광고 크기 예약:** 광고 슬롯의 크기를 미리 정의하여 광고 로딩 후 레이아웃 이동을 방지합니다.
* **웹 폰트 최적화:** 웹 폰트 로딩 중에 레이아웃 이동이 발생하지 않도록 `글꼴 표시 방식` 속성을 사용하여 로딩 전략을 제어합니다.
`swap` 값을 사용하면 폰트가 완전히 로드되기 전까지 대체 폰트를 표시하여 레이아웃 이동을 최소화할 수 있습니다.
* **콘텐츠 삽입 시 사용자 상호 작용 유도:** 새로운 콘텐츠를 삽입할 때 사용자에게 알리거나 사용자 상호 작용(예: 클릭)을 통해 삽입하도록 유도하여 예기치 않은 레이아웃 이동을 방지합니다.
* **최대 콘텐츠풀 페인트 (LCP) 개선:** * **서버 응답 시간 단축:** 서버 응답 시간을 단축하기 위해 캐싱, CDN (콘텐츠 전송 네트워크) 사용, 서버 성능 최적화 등을 수행합니다.
* **이미지 최적화:** 이미지 형식을 WebP로 변경하고, 이미지 크기를 조정하고, 압축하여 파일 크기를 줄입니다.
Lazy Loading을 사용하여 초기 로딩에 필요한 이미지만 로드합니다.
* **중요 리소스 우선 로드:** LCP 요소에 해당하는 이미지, 비디오, 텍스트 등을 우선적으로 로드하도록 `` 태그를 사용합니다.
* **CSS 및 JavaScript 최적화:** CSS 및 JavaScript 코드를 축소하고, 압축하고, 불필요한 코드를 제거하여 파일 크기를 줄입니다.
코드 스플리팅을 통해 초기 로딩에 필요한 부분만 로드하도록 최적화합니다.
* **총 차단 시간 (TBT) 개선:** * **JavaScript 코드 최적화:** JavaScript 코드를 최적화하여 파싱, 컴파일, 실행 시간을 줄입니다.
불필요한 코드 제거, 비동기 코드 활용, Web Worker 사용 등을 고려합니다.
* **Long Task 분할:** 50ms 이상 소요되는 Long Task를 작은 Task로 분할하여 메인 스레드가 차단되는 시간을 줄입니다.
* **Third-party 코드 최적화:** 타사 코드의 실행 시간을 분석하고 최적화합니다.
불필요한 타사 코드를 제거하거나 비동기적으로 로드합니다.
* **브라우저 캐싱 활용:** 브라우저 캐싱을 활용하여 정적 자원을 캐싱하고 재사용하여 서버 요청을 줄입니다.
위의 해결 방안들을 적용하면 웹사이트의 성능을 크게 개선하고 사용자 경험을 향상시킬 수 있습니다.
개선 사항을 적용한 후에는 반드시 성능 측정 도구를 사용하여 개선 효과를 확인해야 합니다.

Accessibility

현재 상태:

** 제공된 데이터는 웹사이트의 '접근성' 카테고리가 아닌 '성능' 카테고리의 하위 항목인 `글꼴 표시 방식` 관련 정보입니다.
`글꼴 표시 방식`는 텍스트를 표시하는 데 사용되는 웹폰트가 로드되는 동안 브라우저가 텍스트를 어떻게 렌더링할지 제어하는 CSS 속성입니다.
현재 `글꼴 표시 방식` 점수는 0.5로 낮은 편이며, 이는 웹폰트 로딩 과정에서 사용자 경험에 부정적인 영향을 미칠 수 있음을 시사합니다.
세부 정보(`details.items`)를 살펴보면, 특정 웹폰트(S-CoreDream-3Light.woff, Roboto 관련 woff2 폰트) 로딩에 상당한 시간이 소요됨을 알 수 있습니다.
특히 `S-CoreDream-3Light.woff` 폰트의 경우 `wastedMs` 값이 160.33ms로 매우 높아 사용자 경험을 저해할 가능성이 큽니다.
`wastedMs`는 브라우저가 텍스트를 표시하기 전에 폰트가 로드되기를 기다리는 시간, 즉, 사용자에게 빈 화면이나 시스템 폰트로 대체된 텍스트를 보여주는 시간을 의미합니다.
이 시간이 길수록 사용자는 페이지가 느리게 로딩된다고 느끼게 됩니다.
Roboto 폰트의 `wastedMs` 값은 상대적으로 작지만, 웹사이트 전체 성능에 미치는 영향을 완전히 무시할 수는 없습니다.
낮은 `글꼴 표시 방식` 점수의 주요 원인은 다음과 같습니다.
* **폰트 파일 크기:** `S-CoreDream-3Light.woff` 파일의 크기가 클 가능성이 있으며, 이는 로딩 시간을 증가시키는 요인이 됩니다.
* **CDN 성능:** CDN(Content Delivery Network)의 성능 문제로 인해 폰트 파일 전송 속도가 느릴 수 있습니다.
* **폰트 형식:** woff 형식은 woff2 형식보다 일반적으로 파일 크기가 더 큽니다.
* **`글꼴 표시 방식` 속성 값:** `글꼴 표시 방식` 속성 값이 적절하게 설정되지 않았을 경우, 브라우저는 폰트 로딩이 완료될 때까지 텍스트 표시를 지연시킬 수 있습니다.
(예: `글꼴 표시 방식: block;` 사용시) 전반적으로, 현재 상태는 웹폰트 로딩 최적화가 필요하며, 이는 페이지 로딩 속도 향상과 사용자 경험 개선에 직접적인 영향을 미칠 수 있음을 보여줍니다.
.

해결방안:

** `글꼴 표시 방식` 점수를 높이고 웹폰트 로딩 성능을 개선하기 위한 해결 방안은 다음과 같습니다.
1. **`글꼴 표시 방식` 속성 최적화:** `글꼴 표시 방식` 속성 값을 적절하게 설정하여 폰트 로딩 전략을 개선합니다.
* `swap`: 가장 권장되는 값으로, 폰트가 로딩되는 동안 시스템 폰트를 사용하여 텍스트를 표시하고, 폰트 로딩이 완료되면 웹폰트로 대체합니다.
이는 초기 텍스트 표시를 빠르게 하여 사용자 경험을 개선합니다.
* `fallback`: `swap`과 유사하지만, 로딩 실패 시 시스템 폰트로 대체하는 시간을 제한합니다.
* `optional`: 폰트가 빠르게 로드될 수 있는 경우에만 사용하며, 그렇지 않은 경우 시스템 폰트를 사용합니다.
네트워크 환경이 좋지 않은 사용자에게 유용합니다.
2. **폰트 파일 최적화:** 폰트 파일 크기를 줄여 로딩 시간을 단축합니다.
* **woff2 형식 사용:** 가능한 경우 woff 형식 대신 woff2 형식을 사용합니다.
woff2는 압축률이 높아 파일 크기를 줄일 수 있습니다.
(이미 사용 중인 경우 해당사항 없음) * **폰트 서브셋팅 (Font Subsetting):** 웹사이트에서 실제로 사용하는 글자(예: 한국어, 영어, 숫자, 특수 문자)만 포함하도록 폰트 파일을 서브셋팅합니다.
이는 불필요한 글리프를 제거하여 파일 크기를 크게 줄일 수 있습니다.
* **폰트 압축:** 폰트 파일을 추가적으로 압축하여 파일 크기를 줄입니다.
(gzip, Brotli 등) 3. **CDN 활용 및 성능 개선:** CDN을 사용하여 폰트 파일을 전 세계 사용자에게 빠르게 전송하고, CDN 설정 및 성능을 최적화합니다.
* **CDN 선택:** 성능이 우수한 CDN을 선택하고, CDN 설정이 올바르게 되어 있는지 확인합니다.
* **캐싱 설정:** CDN 캐싱 설정을 최적화하여 폰트 파일이 효율적으로 캐싱되도록 합니다.
* **지리적 분산:** 사용자와 가까운 CDN 서버를 활용하여 전송 속도를 향상시킵니다.
4. **preload 지시문 사용:** 중요한 폰트 파일은 `` 지시문을 사용하여 브라우저가 우선적으로 다운로드하도록 지시합니다.
`` 와 같은 방식으로 사용합니다.
5. **웹폰트 로딩 전략:** Critical Path에 필요한 폰트만 먼저 로딩하고, 나머지 폰트는 Lazy Loading 방식으로 로딩합니다.
6. **폰트 로딩 라이브러리 활용:** `FontFaceObserver`와 같은 라이브러리를 사용하여 폰트 로딩 상태를 모니터링하고, 폰트 로딩 실패 시 대체 폰트를 적용하는 등 보다 정교한 제어를 할 수 있습니다.
7. **정기적인 성능 테스트:** 웹폰트 관련 성능을 지속적으로 모니터링하고, 필요에 따라 위 해결 방안을 반복적으로 적용하여 최적의 성능을 유지합니다.
PageSpeed Insights, WebPageTest 등의 도구를 활용합니다.
위 해결 방안들을 적용하면 `글꼴 표시 방식` 점수를 높이고 웹폰트 로딩 성능을 개선하여 사용자 경험을 향상시킬 수 있습니다.
특히, `S-CoreDream-3Light.woff` 폰트에 대한 최적화에 집중해야 합니다.
파일 크기 축소, CDN 설정 점검, 그리고 `글꼴 표시 방식: swap;` 적용이 중요합니다.

Practices

현재 상태:

특별한 피드백이 없습니다.

해결방안:

SEO

현재 상태:

특별한 피드백이 없습니다.

해결방안:

실시간 인기 검색어

1. 이미지 <img> 태그 확인

2. 필수 구조 태그 확인

누락된 태그 및 경고 메시지

3. 헤더 계층 구조 분석

페이지 내 헤더 계층 구조

4. <iframe> 태그 사용 여부

사용된 iframe src 목록

SEO 단점

5. Open Graph 메타 태그 확인

OG 태그 사용 여부

누락된 OG 태그 중요성

6. 기본 메타 태그 확인

핵심 성능 메트릭 상세

Performance

Accessibility

Practices

SEO