Lighthouse は、Web ページの品質を向上させるために Google によって開発されたオープンソースの自動ツールです。パフォーマンス、アクセシビリティ、ベスト プラクティス、SEO、プログレッシブ ウェブ アプリ (PWA) 基準など、さまざまな指標にわたってサイトを監査します。 Lighthouse の完璧なスコアを達成するのは困難ですが、体系的な最適化によって達成できます。このガイドでは、サイトを強化し、Lighthouse スコア 100% を目指すために必要な手順を説明します。

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 のロールと属性を使用して、Web アプリケーションのアクセシビリティを向上させます。


  
  
  タブオーダー


キーボードを使用したナビゲーションを容易にするために、インタラクティブな要素の論理的なタブ オーダーを確保します。


  
  
  ラベル


フォーム要素に説明的なラベルを追加して、スクリーン リーダーでアクセスできるようにします。


  
  
  3. ベストプラクティス


ベスト プラクティスに従うことで、サイトの安全性と適切なパフォーマンスを確保できます。


  
  
  HTTPS


安全なデータ送信を確保するために、HTTPS 経由でサイトを提供します。


  
  
  混合コンテンツを避ける


混合コンテンツの問題を避けるために、すべてのリソースが HTTPS 経由で読み込まれるようにしてください。


  
  
  セキュリティの脆弱性を監査する


コードにセキュリティ上の問題がないか定期的に監査し、脆弱性があれば修正します。


  
  
  4.SEO


SEO は、検索エンジンの結果におけるサイトの可視性を向上させるのに役立ちます。


  
  
  メタタグ


タイトル、説明、ビューポートに関連するメタタグを含めます。


  
  
  構造化データ


構造化データ (JSON-LD など) を使用して、検索エンジンがコンテンツをよりよく理解できるようにします。


  
  
  モバイルフレンドリー


サイトがモバイル フレンドリーであり、さまざまなデバイスのユーザーに対応できるよう応答性が高いことを確認してください。


  
  
  5. プログレッシブ ウェブ アプリ (PWA)


PWA は、ウェブ上でネイティブ アプリのようなエクスペリエンスを提供します。


  
  
  マニフェストファイル


サイトを PWA にするために必要なすべての情報を含むウェブ アプリ マニフェスト ファイルを作成します。


  
  
  サービスワーカー


Service Worker を実装してアセットをキャッシュし、オフライン機能を有効にします。


  
  
  HTTPS


PWA の要件であるため、サイトが HTTPS 経由で提供されていることを確認してください。


  
  
  テストと反復



  
  
  Lighthouse 監査を定期的に実行する


Chrome DevTools または Lighthouse CLI を使用して監査を実行し、問題に対処します。


  
  
  パフォーマンスを監視する


WebPageTest、Google PageSpeed Insights、GTmetrix などのツールを使用して、サイトのパフォーマンスを監視します。


  
  
  継続的改善


コードベースを定期的に更新して最適化し、高いパフォーマンスと優れたユーザー エクスペリエンスを維持します。


  
  
  例: プリロードによるリソース読み込みの最適化




    
    




  
  
  例: キャッシュ用の Service Worker の実装




// 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 スコアを大幅に向上させることができます。定期的なテストと反復は、優れたユーザー エクスペリエンスを提供する高品質な Web アプリケーションを維持するための鍵です。

Lighthouse スコアを向上させる近道を見つけたくなるかもしれませんが、真の最適化により、ユーザー エクスペリエンスが向上し、Web アプリケーションがより堅牢になることに注意してください。