以前は「PageSpeed Insights」を使ってコーディングの改善点などを調査していたのですが、最近はもっぱらGoogle Chromeのデベロッパーツール内にある「Lighthouse（※リンク先は拡張機能版）」を使用しています。
とある特設ページの評価点は以下になりました。
それぞれの意味は以下の通りです。
- Performance…閲覧時の操作によるサイト内のスピードに関する評価
- Accessibility…マシンリーダブル及びコントラスト比などに関する評価
- Best Practices…スマートデバイス対応時の品質向上に関する評価
- SEO…検索エンジン最適化に関する評価
- ProgressiveWebApp…PWAに関する評価（今回は触れません）
100点満点にするのが望ましいですが、インターネットの速度、処理しているデバイス／ブラウザの性能、WordPressやCMSの影響といった諸般の理由によりなかなか難しいのが現実ですので、システム化前の初期構築の時点で80点以上ならまぁよかろう…という感覚でやっています。
チェック以前にしていること
システム化の予定のない、数ページ程度の小規模サイトや特設ページであれば、時間の許す限り改善点に従って対処を行っていますが、それ以前のチェック前までの作業で主に気を付けている事といえば…
- 基礎マークアップの見直し
- jsやcssの外部読み込み順の試行
- 画像、外部読み込みに関するプリロードの設置
- イメージのファイルサイズチェック
- イメージの非同期・遅延読み込み
といったコーディング超初心者がやるようなことをメインに行なっています。ただやはりいくら気を付けても漏れは出てしまうので、Lighthouseのアドバイス（※英語）を参照して時間的に処理が可能なら改善を行います。
改善してみよう！
ちょうど「Best Practices」内のアドバイスがされているので、改善して点数が変わるのか試してみましょう。
Links to cross-origin destinations are unsafe
Add `rel=”noopener”` or `rel=”noreferrer”` to any external links to improve performance and prevent security vulnerabilities.クロスオリジンへのリンクは安全ではありません
外部へのリンクには、パフォーマンスの向上とセキュリティの脆弱性を防ぐために、`rel=”noopener”`または`rel=”noreferrer”`を追加してください。
クロスオリジンに関する説明は主題から外れるので省略。要するに何が起こるかというと…
新規ウィンドウのリンクを開いた時に、リンク先から元のウィンドウ内で別のサイトにリダイレクトされる可能性があります。なのでリンク先でリダイレクト命令が記述されてても不許可（noopener）の記述をしてください（またはnoreferrerで足跡は残さないように処置してください）…というアドバイスがされてあります（参考）。
※ 制作サイトのブランクリンクに関しては信頼性のサイトにリンクされてあるので問題ないと判断しています
というわけでブランクリンクにrel=”noopenerを設置した結果…
まさかのPerformance以外は100点満点になりました。
いかがでしたでしょうか。コーディングの評価基軸はなかなか数字として出せないので、とても助かっています。
