Lighthouse는 웹페이지 품질을 개선하기 위해 Google에서 개발한 오픈소스 자동화 도구입니다. 성능, 접근성, 모범 사례, SEO 및 PWA(프로그레시브 웹 앱) 기준을 포함한 다양한 지표를 통해 사이트를 감사합니다. 완벽한 Lighthouse 점수를 달성하는 것은 어려운 일이지만 체계적인 최적화를 통해 가능합니다. 이 가이드는 사이트를 개선하고 100% Lighthouse 점수를 목표로 하는 데 필요한 단계를 안내합니다.

1. 성능 최적화

성능은 Lighthouse 점수의 중요한 구성 요소입니다. 이를 개선할 수 있는 방법은 다음과 같습니다.

지연 로딩

이미지와 비디오가 뷰포트에 나타날 때만 로드되도록 지연 로딩을 구현합니다.

document.addEventListener("DOMContentLoaded", function() {
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // Fallback for browsers without IntersectionObserver
        let lazyLoad = function() {
            let scrollTop = window.pageYOffset;
            lazyImages.forEach(function(img) {
                if (img.offsetTop 




  
  
  압축


자산에 Brotli 또는 gzip 압축을 사용하여 크기를 줄이고 로딩 시간을 단축하세요.


  
  
  축소


JavaScript, CSS, HTML 파일을 축소하여 불필요한 문자를 제거하고 파일 크기를 줄이세요.


  
  
  캐싱


적절한 캐시 헤더를 설정하여 브라우저 캐싱을 활용하여 재방문자의 로드 시간을 개선하세요.


  
  
  중요한 CSS


중요 CSS를 인라인하여 페이지의 주요 콘텐츠가 빠르게 로드되도록 하고 중요하지 않은 CSS를 연기하세요.


  
  
  JavaScript 실행 시간 단축


JavaScript 코드를 최적화하여 실행 시간을 최소화하고 사이트의 응답성을 유지하세요.


  
  
  2. 접근성 향상


접근성은 장애가 있는 사용자를 포함하여 최대한 많은 사람들이 귀하의 사이트를 사용할 수 있도록 보장합니다.


  
  
  색상 대비


텍스트와 배경 색상의 대비가 쉽게 읽을 수 있도록 충분한지 확인하세요.


  
  
  ARIA 역할


ARIA 역할 및 속성을 사용하여 웹 애플리케이션의 접근성을 향상시킵니다.


  
  
  탭 순서


키보드를 사용하여 쉽게 탐색할 수 있도록 대화형 요소에 대한 논리적 탭 순서를 확인하세요.


  
  
  라벨


화면 리더에서 액세스할 수 있도록 양식 요소에 설명 라벨을 추가합니다.


  
  
  3. 모범 사례


모범 사례를 따르면 사이트를 안전하게 보호하고 제대로 작동하는 데 도움이 됩니다.


  
  
  HTTPS


HTTPS를 통해 사이트를 제공하여 안전한 데이터 전송을 보장하세요.


  
  
  혼합 콘텐츠 피하기


혼합 콘텐츠 문제를 방지하려면 모든 리소스가 HTTPS를 통해 로드되는지 확인하세요.


  
  
  보안 취약점 감사


코드의 보안 문제를 정기적으로 감사하고 취약점을 수정하세요.


  
  
  4. SEO


SEO는 검색 엔진 결과에서 사이트의 가시성을 높이는 데 도움이 됩니다.


  
  
  메타 태그


제목, 설명, 표시 영역에 관련 메타 태그를 포함합니다.


  
  
  구조화된 데이터


구조화된 데이터(예: JSON-LD)를 사용하여 검색 엔진이 콘텐츠를 더 잘 이해할 수 있도록 돕습니다.


  
  
  모바일 친화적


사이트가 모바일 친화적이고 반응성이 뛰어나 다양한 기기의 사용자를 수용할 수 있는지 확인하세요.


  
  
  5. 프로그레시브 웹 앱(PWA)


PWA는 웹에서 기본 앱과 유사한 경험을 제공합니다.


  
  
  매니페스트 파일


사이트를 PWA로 만드는 데 필요한 모든 정보가 포함된 웹 앱 매니페스트 파일을 만듭니다.


  
  
  서비스 워커


자산을 캐시하고 오프라인 기능을 활성화하는 서비스 워커를 구현합니다.


  
  
  HTTPS


PWA의 요구 사항이므로 사이트가 HTTPS를 통해 제공되는지 확인하세요.


  
  
  테스트 및 반복



  
  
  Lighthouse 감사를 정기적으로 실행


Chrome DevTools 또는 Lighthouse CLI를 사용하여 감사를 실행하고 문제를 해결하세요.


  
  
  성능 모니터링


WebPageTest, Google PageSpeed ​​Insights, GTmetrix와 같은 도구를 사용하여 사이트 성능을 모니터링하세요.


  
  
  지속적인 개선


고성능과 우수한 사용자 경험을 유지하려면 코드베이스를 정기적으로 업데이트하고 최적화하세요.


  
  
  예: 사전 로드를 통한 리소스 로드 최적화




    
    




  
  
  예: 캐싱을 위한 서비스 워커 구현




// service-worker.js
self.addEventListener('install', function(event) {
    event.waitUntil(
        caches.open('my-cache').then(function(cache) {
            return cache.addAll([
                '/',
                '/index.html',
                '/styles/main.css',
                '/scripts/main.js',
                '/images/logo.png'
            ]);
        })
    );
});

self.addEventListener('fetch', function(event) {
    event.respondWith(
        caches.match(event.request).then(function(response) {
            return response || fetch(event.request);
        })
    );
});





  
  
  프로그래밍 방식으로 Lighthouse 실행


Lighthouse 노드 모듈을 사용하여 프로그래밍 방식으로 Lighthouse를 실행할 수 있습니다.


const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
    const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
    const options = {logLevel: 'info', output: 'html', onlyCategories: ['performance'], port: chrome.port};
    const runnerResult = await lighthouse('https://example.com', options);

    // `.report` is the HTML report as a string
    const reportHtml = runnerResult.report;
    console.log(reportHtml);

    // `.lhr` is the Lighthouse Result as a JS object
    console.log('Report is done for', runnerResult.lhr.finalUrl);
    console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100);

    await chrome.kill();
})();





  
  
  결론


완벽한 Lighthouse 점수를 얻으려면 지속적인 노력과 모범 사례에 대한 헌신이 필요합니다. 성능 최적화, 접근성 향상, 모범 사례 따르기, SEO 개선 및 PWA 기능 구현에 집중함으로써 Lighthouse 점수를 크게 향상시킬 수 있습니다. 정기적인 테스트와 반복은 뛰어난 사용자 경험을 제공하는 고품질 웹 애플리케이션을 유지하는 데 핵심입니다.

Lighthouse 점수를 높이기 위한 지름길을 찾고 싶은 유혹이 있을 수 있지만 진정한 최적화를 통해 더 나은 사용자 경험과 더욱 강력한 웹 애플리케이션을 얻을 수 있다는 점을 기억하세요.