ホームページ >ウェブフロントエンド >jsチュートリアル >完璧な Lighthouse スコアの達成: 包括的なガイド
完璧な Lighthouse スコアの達成: 包括的なガイド
- 王林オリジナル
- 2024-07-25 21:16:23881ブラウズ
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 サイトの他の関連記事を参照してください。