2020.09.12
ウェブサイトの品質向上のためにLighthouseの検証結果の改善点を解消していく
このブログをLighthouseで検証して改善点をひとつづつ解消していきました。基本的にLghthouseの指示に従えば問題は解決できるはずですが、あとはデザイン的な要素など、どこまで妥協するか・・・です。
※この記事で触れているエラーや改善点は、このブログ（オリジナルテーマ）の検証結果です。
Lighthouseについてはこちら
この記事の目次
Performance｜パフォーマンス
サイトの表示速度を計測して、時間がかかっているところを診断してくれます。
高速化のためにしたこと
■ AMP化するだけでもだいぶんと表示スピードは上がります。
■ プラグインの使用を最小限にしました。
■ AMPにしたこともあって、下記の機能をJavascriptを使用しないものに。
・記事内目次
・ブログカード
・シンタックスハイライト(hightlight.php) ※最終的には使用をやめました。
■ oEmbed（ブログカード）をやめて、無効化。
remove_action('wp_head','rest_output_link_wp_head');
remove_action('wp_head','wp_oembed_add_discovery_links');
remove_action('wp_head','wp_oembed_add_host_js');■ ウェブフォント（googleフォント）をやめた。
■ ウェブアイコンをIcoMoonに変更して軽量化。
Accessibility｜アクセシビリティ
わかりやすく、使い勝手の良いサイトなのかを診断してくれます。HTMLの構造的な問題や識字しやすいかなどのデザイン的な改善点について指摘してくれます。
Names and labels｜名前とラベル
Buttons do not have an accessible name
ボタンにアクセス可能な名前がありません
検索フォームのボタンにaria-labelを追加。
Form elements do not have associated labels
フォーム要素には関連付けられたラベルがありません
検索フォームの入力欄（input）にaria-labelを追加。
<form method="get" class="searchform" action="<?php echo esc_url( home_url('/') ); ?>">
<input type="text" placeholder="SEARCH" name="s" class="searchfield" value="" aria-label="検索ワード">
<button type="submit" class="search-btn" aria-label="検索"></button>
</form>Links do not have a discernible name
リンクには識別可能な名前がありません
記事へのリンクだけでなく、ホームへ戻るヘッダーのロゴや「次の記事へ」などなど<a>タグに追加。
<a href="<?php the_permalink(); ?>" aria-label="<?php the_title(); ?>" >
<?php the_title(); ?>
</a>Contrast｜コントラスト
Background and foreground colors do not have a sufficient contrast ratio.
背景色と前景色には十分なコントラスト比がありません。
文字色と背景のコントラストがあまりないと読みにくくなるので、それを改善しましょう。このブログの場合は投稿の日付のカラーが#cccだったため薄くてダメだったみたいで、#666ではOKでした。
Internationalization and localization｜国際化とローカリゼーション
<html> element does not have a [lang] attribute
<html>要素に[lang]属性がありません
html要素に言語指定をします。日本語の場合はlang="ja"を追加。
<html lang="ja" >Tables and lists｜テーブルとリスト
Lists do not contain only <li> elements and script supporting elements (<script> and <template>).
リストには、<li>要素とスクリプトサポート要素（<script>および<template>）のみが含まれていません。
ulやolの中にliとスクリプトサポート要素以外を入れてはいけない、ってことです。このブログの場合は、パンくずリストのセパレーターとして” > “が素のまま入っていたので、<li>で括って<li> > </li>と修正しました。
修正前
<li><a href="home">ホーム</a></li>
> <!-- これがダメ -->
<li><a href="/category/wordpress/"> WordPress </a></li>修正後
<li><a href="home">ホーム</a></li>
<li> > </li> <!-- <li>で括る -->
<li><a href="/category/wordpress/"> WordPress </a></li>Best Practices｜ベストプラクティス
セキュリティやパフォーマンス低下の原因になる要素がないかを診断してくれます。
一般的な｜General
Browser errors were logged to the console
ブラウザのエラーがコンソールに記録されました
これは凡ミス・・・。アンリティクスのタグでした。プラグインでAMP化しましたが、header.phpに元々のタグを入れたままにしてました。AMP用のアナリティクスのタグを追加したときに消し忘れてたみたい。なので削除しました。
SEO
検証ページが検索結果の順位に対して最適化されているかを確認できます。検索順位に関しては、Lighthouseがチェックしない要素もあるので、この項目を改善したからといって順位が上がるわけではないです。
Mobile Friendly｜モバイルフレンドリー
Tap targets are not sized appropriately
タップターゲットのサイズが適切ではない
ボタンやリンクなどは48x48px以上にして、他の要素と重ならないようにスペースをとって、タップしやすいようにしましょう。ってことです。 問題だったのは、記事ページの目次のアンカーリンクでした。
まとめ＆検証結果
パフォーマンスがちょっと残念な結果でしたが、「28」から「74」なのでこれでも大分と向上しています。100が並ぶと気持ちいいですね。デザインなど妥協しないといけない場合もあるので、別にオール100を目指す必要はないかと思いますが。リストアップされた項目を一つづつ改善していくのは意外と楽しかったです。正直、自己満足的なところもありますね。あーだ、こーだ工夫して、いろいろと勉強にもなりました。
