完璧な Lighthouse スコアの達成: 包括的なガイド-jsチュートリアル-php.cn

完璧な Lighthouse スコアの達成: 包括的なガイド

王林

リリース： 2024-07-25 21:16:23

オリジナル

844 人が閲覧しました

Achieving a Perfect Lighthouse Score: A Comprehensive Guide

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 < (window.innerHeight + scrollTop)) {
                    img.src = img.dataset.src;
                    img.classList.remove("lazy");
                }
            });
            if (lazyImages.length == 0) {
                document.removeEventListener("scroll", lazyLoad);
                window.removeEventListener("resize", lazyLoad);
                window.removeEventListener("orientationChange", lazyLoad);
            }
        };

        document.addEventListener("scroll", lazyLoad);
        window.addEventListener("resize", lazyLoad);
        window.addEventListener("orientationChange", lazyLoad);
    }
});

ログイン後にコピー

圧縮

アセットのサイズを削減し、読み込み時間を短縮するには、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 は、Web 上でネイティブアプリのようなエクスペリエンスを提供します。

マニフェストファイル

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

サービスワーカー

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

HTTPS

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

テストと反復

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

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

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

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

継続的な改善

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

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

<head>
    <!-- Preload key CSS -->
    <link rel="preload" href="/styles/main.css" as="style">
    <!-- Preload key JavaScript -->
    <link rel="preload" href="/scripts/main.js" as="script">
</head>
<body>
    <!-- Your content -->
    <script src="/scripts/main.js" defer></script>
    <link href="/styles/main.css" rel="stylesheet">
</body>

ログイン後にコピー

例: キャッシュ用の 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();
})();

ログイン後にコピー

Conclusion

Achieving a perfect Lighthouse score requires consistent effort and a commitment to best practices. By focusing on performance optimization, accessibility enhancements, following best practices, improving SEO, and implementing PWA features, you can significantly improve your Lighthouse score. Regular testing and iteration are key to maintaining a high-quality web application that provides a great user experience.

Remember, while it may be tempting to find shortcuts to improve your Lighthouse score, genuine optimization will result in a better user experience and a more robust web application.

以上が完璧な Lighthouse スコアの達成: 包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。