친환경 문서
웹 산업이 기후에 미치는 영향에 대한 추정치는 전 세계 탄소 배출량의 2% ~ 4% 범위이며, 이는 항공 산업의 배출량과 비슷합니다. 웹 사이트의 생태학적 영향을 계산하기 위한 여러 복잡한 요소가 존재하지만, 이 가이드는 문서 사이트의 환경적 영향을 줄이기 위한 몇 가지 팁을 포함합니다.
좋은 소식은 Starlight를 선택하는 것이 좋은 시작이라는 것입니다. Website Carbon Calculator에 따르면 이 사이트는 테스트된 웹페이지의 99%보다 깨끗하며 페이지 방문당 0.01g의 CO₂를 배출합니다.
페이지 크기
섹션 제목: “페이지 크기”웹페이지가 전송하는 데이터가 많을수록 더 많은 에너지 자원이 필요합니다. 2023년 4월, HTTP Archive의 데이터에 따르면 웹페이지 중앙값은 2,000KB 이상을 다운로드해야 했습니다.
Starlight는 최대한 가벼운 페이지를 구축합니다. 예를 들어, 사용자는 첫 방문 시 50KB 미만의 압축 데이터를 다운로드하게 됩니다. 이는 HTTP Archive 중앙값의 2.5%에 불과합니다. 좋은 캐싱 전략을 사용하면 후속 탐색에서 10KB 정도만 다운로드할 수 있습니다.
이미지
섹션 제목: “이미지”Starlight는 좋은 기준을 제공하지만 문서 페이지에 이미지를 추가하면 페이지의 크기가 빠르게 증가할 수 있습니다. Starlight는 Astro의 최적화된 자산 지원을 사용하여 Markdown 및 MDX 파일에서 추가한 로컬 이미지를 최적화합니다.
UI 컴포넌트
섹션 제목: “UI 컴포넌트”React 또는 Vue와 같은 UI 프레임워크로 구축된 컴포넌트는 페이지에 많은 양의 JavaScript를 추가합니다. Starlight는 Astro 기반으로 구축되었고, Astro 자체 컴포넌트는 Astro 아일랜드 덕분에 기본적으로 클라이언트 측 JavaScript가 전혀 로드되지 않습니다.
캐싱은 브라우저가 이미 다운로드한 데이터를 저장하고 재사용하는 기간을 제어하는 데 사용됩니다. 좋은 캐싱 전략은 콘텐츠가 변경될 때 새 콘텐츠를 최대한 빨리 얻을 수 있도록 하며, 변경되지 않은 동일한 콘텐츠를 무의미하게 반복해서 다운로드하는 것을 방지합니다.
캐싱을 구성하는 가장 일반적인 방법은 Cache-Control
HTTP 헤더를 사용하는 것입니다.
Starlight를 사용할 때 /_astro/
디렉터리의 모든 항목에 대해 긴 캐시 시간을 설정할 수 있습니다.
이 디렉터리에는 불필요한 다운로드를 줄여 영원히 안전하게 캐시할 수 있는 CSS, JavaScript 및 기타 번들 자산이 포함되어 있습니다.
Cache-Control: public, max-age=604800, immutable
캐싱을 구성하는 방법은 웹 호스트에 따라 다릅니다. 예를 들어 Vercel은 구성 없이 이 캐싱 전략을 적용하는 반면, 프로젝트에 public/_headers
파일을 추가하여 Netlify용 사용자 정의 헤더를 설정할 수 있습니다.
/_astro/* Cache-Control: public Cache-Control: max-age=604800 Cache-Control: immutable
전력 소비
섹션 제목: “전력 소비”웹 페이지가 구축되는 방식은 사용자 장치를 실행하는 데 필요한 전력에 영향을 미칠 수 있습니다. Starlight는 최소한의 JavaScript를 사용하여 사용자의 휴대폰, 태블릿 또는 컴퓨터가 페이지를 로드하고 렌더링하는 데 필요한 전력을 감소시킵니다.
분석 추적 스크립트나 동영상 삽입과 같은 JavaScript 중심 콘텐츠를 추가할 때 페이지의 전력 사용량이 증가할 수 있으므로 주의하세요.
분석이 필요한 경우 Cabin, Fathom 또는 Plausible과 같은 가벼운 옵션을 선택하는 것이 좋습니다.
YouTube 및 Vimeo와 같은 동영상 삽입은 상호 작용 시 동영상 로드를 통해 개선될 수 있습니다.
astro-embed
와 같은 패키지는 일반적인 서비스에 도움이 될 수 있습니다.
호스팅
섹션 제목: “호스팅”웹 페이지가 호스팅되는 위치는 문서 사이트가 얼마나 친환경적인지에 큰 영향을 미칠 수 있습니다. 데이터 센터와 서버 팜은 높은 전력 소비와 물의 집중적 사용 등으로 인해 생태학적으로 큰 영향을 미칠 수 있습니다.
재생 가능 에너지를 사용하는 호스트를 선택하면 사이트의 탄소 배출량이 줄어듭니다. Green Web Directory는 호스팅 회사를 찾는 데 도움이 되는 도구 중 하나입니다.
다른 문서 프레임워크와 어떻게 비교되는지 궁금하십니까? Website Carbon Calculator를 사용한 이러한 테스트는 서로 다른 도구로 작성된 유사한 페이지를 비교합니다.
프레임워크 | 페이지 방문당 CO₂ | 등급 |
---|---|---|
Starlight | 0.01g | A+ |
Read the Docs | 0.07g | A+ |
Sphinx | 0.07g | A+ |
VitePress | 0.07g | A+ |
Docus | 0.10g | A |
docsify | 0.11g | A |
mdBook | 0.13g | A |
MkDocs | 0.15g | A |
Fumadocs | 0.16g | A |
Nextra | 0.16g | A |
Docusaurus | 0.25g | B |
Mintlify | 0.99g | F |
GitBook | 1.19g | F |
2025년 4월 12일에 수집된 데이터. 최신 수치를 보려면 링크를 클릭하세요.
더 많은 자료
섹션 제목: “더 많은 자료”기사 및 강연
섹션 제목: “기사 및 강연”- “더 친환경적인 웹 구축”, Michelle Barker의 강연
- “조직 내의 지속 가능한 웹 개발 전략”, Michelle Barker의 기사
- “모두를 위한 지속 가능한 웹”, Tom Greenwood의 강연
- “웹 콘텐츠가 전력 사용량에 미치는 영향”, Benjamin Poulain 및 Simon Fraser의 기사