Lighthouse は、Web ページの品質を向上させるために Google によって開発されたオープンソースの自動ツールです。パフォーマンス、アクセシビリティ、ベスト プラクティス、SEO、プログレッシブ ウェブ アプリ (PWA) 基準など、さまざまな指標にわたってサイトを監査します。 Lighthouse の完璧なスコアを達成するのは困難ですが、体系的な最適化によって達成できます。このガイドでは、サイトを強化し、Lighthouse スコア 100% を目指すために必要な手順を説明します。
パフォーマンスは 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 を延期します。
JavaScript コードを最適化して実行時間を最小限に抑え、サイトの応答性を維持します。
アクセシビリティにより、障害のある人を含め、できるだけ多くの人がサイトを利用できるようになります。
テキストと背景の色には、読みやすくするために十分なコントラストがあることを確認してください。
ARIA のロールと属性を使用して、Web アプリケーションのアクセシビリティを向上させます。
キーボードを使用したナビゲーションを容易にするために、インタラクティブな要素の論理的なタブ オーダーを確保します。
フォーム要素に説明的なラベルを追加して、スクリーン リーダーでアクセスできるようにします。
ベスト プラクティスに従うことで、サイトの安全性と適切なパフォーマンスを確保できます。
安全なデータ送信を確保するために、HTTPS 経由でサイトを提供します。
混合コンテンツの問題を避けるために、すべてのリソースが HTTPS 経由で読み込まれるようにしてください。
コードにセキュリティ上の問題がないか定期的に監査し、脆弱性があれば修正してください。
SEO は、検索エンジンの結果におけるサイトの可視性を向上させるのに役立ちます。
タイトル、説明、ビューポートに関連するメタタグを含めます。
構造化データ (JSON-LD など) を使用して、検索エンジンがコンテンツをよりよく理解できるようにします。
サイトがモバイル フレンドリーであり、さまざまなデバイスのユーザーに対応できるよう応答性が高いことを確認してください。
PWA は、Web 上でネイティブ アプリのようなエクスペリエンスを提供します。
サイトを PWA にするために必要なすべての情報を含む Web アプリ マニフェスト ファイルを作成します。
Service Worker を実装してアセットをキャッシュし、オフライン機能を有効にします。
PWA の要件であるため、サイトが HTTPS 経由で提供されていることを確認してください。
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.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 を実行できます。
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();
})();
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
