세계 모든 웹 서버의 웹 페이지 정보들에 접근(조회)하고 싶다면
세계 모든 웹 서버의 도메인 네임(IP주소)을 통해 직접 일일히 웹 페이지 정보들에 접근해야될까?
무언가나 대신 세계 모든 웹 서버의 웹 페이지들을 미리다 찾아놓고,분류/정리한 뒤에
내검색어에 따라 적합한 웹 페이지들만 골라 전달해주면 어떨까?
무언가 : Google, Naver, Daum과 같은 검색엔진 서비스
다 찾아놓고 : 웹 크롤링 - 서계 모든 웹 서버의 웹 페이지 정보 수집(봇)
✅ 웹 크롤링의 제외 정책과 사이트맵
검색엔진은 전 세계의 웹 서버로부터 어떤 웹 페이지가 존재하는지 웹 크롤링으로 한번에 긁어 인덱싱한다.
웹 크롤러(봇)는 웹 페이지가 어떤 내용을 갖고 있고, 각 웹 페이지간에 어떤 관계인지 파악해야 하는데 추론하는 것보다 명시적인 것이 더 확실하다.
따라서 각 웹 서버는 robots.txt와 sitemap.xml을 통해 위 내용을 명시한다.
robots.txt
- 제외 정책
- 검색엔진 크롤러(봇)에게 웹 사이트의 어느 부분을 수집해도 좋은지,
또는 어떤 부분을 수집하지 말야야 할지를 지시하는 파일
User-agent: [크롤러 이름]
Disallow: [크롤링 금지 경로]
Allow: [크롤링 허용 경로]- robots.txt에 명시된 지침은 검색엔진 크롤러가 따르는 권장사항(강제사항이 아니다.)
sitemap.xml
- 홈페이지 지도
- 웹 사이트의 모든 페이지를 나열하여, 검색엔진이 사이트 구조를 이해하고 모든 페이지를 크롤링할 수 있도록 돕는 역할을 한다.
sitemap.xml은 검색엔진에 사이트의 구조를 명확히 알리고, 중요 페이지가 누락되지 않도록 한다.- 웹사이트의 URL 목록과 각 페이지의 메타데이터(최종 수정일, 우선순위 등)를 포함한다.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<url>
<loc>https://www.example.com/</loc>
<lastmod>2024-08-24</lastmod>
<changefreq>daily</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://www.example.com/about/</loc>
<lastmod>2024-08-20</lastmod>
<changefreq>monthly</changefreq>
<priority>0.8</priority>
</url>
</urlset>분류/정리한 뒤에 : 인덱싱, 앞서 수집한 전체 웹 페이지들을 상관관계별로 분류
검색어에 따라 적합한 웹 페이지들만 골라 반환 : 검색엔진의 검색 결과 반환
💻 검색엔진(Search Engine)
검색어와 검색 결과의 연관성 은 검색엔진을 사용하는 고객들의 만족도 및 검색엔진의 사명이다.
- 세상 모든 웹 서버의 웹 페이지는 다양하며, 가지고 있는 정보는 가지각색이다.
- 수많은 웹 페이지 속에서 내 웹 페이지를 관심있는 사람들이 검색했을 때
적절하게 노출시키는 방법(SEO)이 중요하다.
💻 검색엔진 최적화(Search Engine Optimization)
검색엔진 최적화(SEO)는 웹 사이트를 검색엔진에서 더 높은 순위에 노출되도록 하는
전략과 기법을 의미한다.
SEO 주요 목적
- 웹 사이트가 검색엔진 결과 페이지에서 상위 노출되도록 하여 사용자에게 더 많이 노출되고자 한다.
- 상위 노출로 인해 더 많은 트래픽을 얻을 수 있다.
- 웹 사이트의 품질과 관련성을 개선해 사용자 경험을 향상시킨다.
SEO 주요 요소
On-Page SEO
웹 페이지 내부에서 직접 조정할 수 있는 요소를 최적화한다.- 키워드 최적화 및 메타 태그
- 페이지 속도 - 성능(Performance Metrics)
- 웹 접근성
- Semantic HTML
- 양질의 컨텐츠
Off-Page SEO
웹 사이트 외부에서 이뤄지는 최적화 작업이며, 주로 링크 빌딩을 포함한다.- 백링크 - 다른 웹사이트에서 자신의 웹사이트로 연결되는 링크를 얻는 것
- 소셜 미디어 활용
Technical SEO
웹 사이트의 기술적인 측면을 최적화해 검색엔진이 사이트를 크롤링하고 인덱싱하는데 도움을 준다.- sitemap.xml
- robots.txt
- 구조화 데이터
⚙️ 웹 페이지 성능 Performance Metrics - Core Web Vital
웹 페이지의 만족도는 연관된 정보의 질과 양,
그리고 페이지 이동 및 이벤트 반응속도와 같은 성능에 의해 평가된다.
Performance Metrics
웹 페이지나 애플리케이션의 성능을 측정하고 평가하는데 사용되는 다양한 지표를 의미한다.
사용자가 웹 페이지를 로드하고 상호작용하는 동안 경험하는 속도와 반응성을 평가하는 데 중요한 역할을 한다.
Core Web Vital
웹 페이지의 사용자 경험을 평가하기 위해 정의한 성능 지표다.
이 지표들은 웹사이트의 성능, 특히 로딩 속도, 인터랙티브성, 시각적 안정성을 측정하며, 검색 순위에도 영향을 미칠 수 있다.
⏱️ 1. Load Time
사용자가 URL을 입력하거나 링크를 클릭한 순간부터 페이지의 모든 리소스가 로드되어
화면에 웹 페이지가 완전히 표시될 때까지 걸리는 총 시간
⏱️ 2. FCP(First Contentful Paint)
웹 페이지 내 처음으로 사용자가 인지할 수 있는 컨텐츠가 화면에 나타나는 시간
⏱️ 3. LCP(Largest Contentful Pain)
웹 페이지 내 가장 큰 주요 컨텐츠가 완전히 화면에 나타나는데 걸리는 시간
⏱️ 4. TBT(Total Blocking Time)
메인 스레드가 차단되어 페이지가 사용자 입력에 응답하지 못하는 총 시간
TBT가 높으면 페이지의 반응성이 떨어진다.
⏱️ 5. TTI(Time To Interactive)
웹 페이지가 사용자와 상호작용을할 수 있는 상태가 되기까지의 시간
페이지가 완전히 로드되어 사용자가 클릭하거나 스크롤할 때 즉각적으로 반응할 수 있는 상태를 의미
⏱️ 6. FID(First Input Delay)
사용자가 처음으로 페이지와 상호작용을 했을 때, 브라우저가 그 상호작용에 반응하는데 걸리는 시간
FID가 낮을 수록 더 나은 사용자 경험을 의미한다.
⏱️ 6. CLS(Cumulative Layout Shift)
페이지가 로딩되는 동안 레이아웃이 얼마나 많이 이동하는지 측정한다.
레이아웃 이동은 사용자가 예기치 않은 경험을 겪게 할 수 있어 좋지 않다.
CLS가 낮을수록 사용자는 더 안정적인 경험을 한다.
Performance Metrics와Core Web Vital은
웹 페이지나 애플리케이션의 속도, 상호작용성, 안정성 등을 평가하는 중요한 지표들이다.
이러한 지표들은 사용자 경험을 최적화하고, 웹 사이트의 성능을 개선하는 데 핵심적인 역할을 하며, 비즈니스 성과와 검색엔진 순위에도 직접적인 영향을 미칠 수 있다.
⚙️ Semantic HTML
Semantic HTML은 HTML 태그를 사용하여 웹 페이지의 내용과 구조를 의미적으로 표현하는 방식이다.
이는 웹 페이지의 요소들이 그 역할과 의미에 맞는 태그로 구성된다는 것을 의미한다.
Semantic HTML을 사용하면 브라우저와 검색엔진, 그리고 스크린 리더 등과 같은
접근성 도구들이 웹 페이지의 내용을 더 잘 이해할 수 있으며, 검색 결과에 더 관련성 있는
정보를 제공하여 SEO를 향상 시킬 수 있다.
주요 Semantic HTML 태그
<header><nav><main><section><article><aside><footer><figure>or<figcaption>
📊 웹 페이지 성능 검사 - Lighthouse
구글 Lighthoust는 웹 페이지의 성능, 접근성, SEO, 그리고 기타 웹 개발 관련 요소들을 자동으로 분석하고 개선할 수 있는 방법을 제안하는 오픈 소스 도구다.
개발자가 웹 페이지의 품질을 종합적으로 평가하고 최적화할 수 있도록 돕는다.
Chrome(또는 Edge) 개발자 도구를 이용해 Lighthouse를 사용할 수 있다.
F12개발자 도구 →Lighthouse탭페이지 로드 분석(Analyze Page Load)
내 벨로그를 털어보자 ..!
분석을 누르고 약간의 시간이 지나고 나면 결과를 볼 수 있다.
힘 좀 내봐요 벨로그씨 ...
