PageSpeed Insightsとは？
サイトのURLを入力すると、そのサイトを減点方式で点数化してくれます。
携帯電話とデスクトップという項目があり、普通は携帯電話の方、すなわちモバイルの方が低いです。
しかし、なるべく合格点を取る方法を説明します。
パフォーマンスについて
このサイトは、LiteSpeedを導入したサーバーを利用しています。
プラグインLiteSpeed Cacheを導入しています。
これで、パフォーマンスはかなり改善され、モバイルだけ遅いということもなくなりました。
LiteSpeed Cacheの設定方法は、こちら！
LiteSpeedを導入したサーバーを利用してみよう！ LiteSpeedとは 「Apache」、「Nginx」に次ぐサーバーで、2016年頃から導入されていて、圧倒的スピードを生み出せる！らしい……ということで、LiteSpeedを導[…]
そして、1つちょっとした発見がありました。
CSSを追加する場合、2通りの方法があります。
外観 – カスタマイズ – 追加CSSに記入する方法と、子テーマのCSSファイルに記入する方法があります。
前者の方法は、styleタグを使って、HTML側からCSSを変更しています。
後者の方法は、テーマがアップデートになっても、デザインに影響を及ぼさないメリットがあります。また、読み込み速度が悪くなるなどのデメリットもあります。
計測すると、携帯電話（モバイル）のパフォーマンスのスコアが、後者の方が5～7点ぐらい悪くなってしまうことが確認出来ました。
ユーザー補助について
ボタンにユーザー補助機能名が指定されていません
数か月前のGoogleのスマホのCMでありましたよね。目の見えない人でも、音声読み上げを使って、きれいに簡単に写真が撮れるみたいなやつ。まさに、あれです。
要は、音声読み上げで認識できない様な書き方をしていると、減点になります。
今回は、検索窓の虫眼鏡ボタンのところなので、aria-label="サイト内検索ボタン"を付け加えるだけです。
<button class="widgetSearch__submit icon-search" type="submit" value="search" aria-label="サイト内検索ボタン"></button>/public_html/wp-content/themes/the-thor/searchformの中にあります。
<button class="searchHead__submit icon-search" type="submit" value="search" aria-label="サイト内検索ボタン"></button>/public_html/wp-content/themes/the-thor/headerの中にあります。
フォームの要素にラベルが関連付けられていません
これ最初何について指摘されているのか分からなかったんですけど（苦笑）
THE THORというテーマでは、記事の表示形式を自分で選べるコントローラー（レイアウト切替ボタン）を設置できるんですね。
ほとんどの人が、設置していません！（笑）
このサイトでも、今は設置していません。
ワイドタイプ、カードタイプ、ノーマルタイプから選べるんですけど、これのラジオボタンがあって、右側のボタンで切り替えられる様になっています。
そして、左側のはdisplay: none;で非表示になっています。（今回CSSをいじって表示）
要は、普段非表示にしているものに反応しているんですね。
<input type="radio" name="controller__viewRadio" value="viewWide" aria-label="ワイドタイプのラジオボタン" class="controller__viewRadio" id="viewWide" '.$wide.'><input type="radio" name="controller__viewRadio" value="viewCard" aria-label="カードタイプのラジオボタン" class="controller__viewRadio" id="viewCard" '.$card.'><input type="radio" name="controller__viewRadio" value="viewNormal" aria-label="ノーマルタイプのラジオボタン" class="controller__viewRadio" id="viewNormal" '.$normal.'>これは3つとも/public_html/wp-content/themes/the-thor/inc/front/archive_controllerの中にあります。
aria-label="～タイプのラジオボタン"が、追加分です。これで完了です。
リンクに識別可能な名前が指定されていません
トップに戻るボタンのところですね。
<a href="#top" aria-label="TOPに戻る" class="bottomFooter__topBtn" id="bottomFooter__topBtn"></a>これは/public_html/wp-content/themes/the-thor/footerの中にあります。
aria-label="TOPに戻る"が追加分です。これで完了です。
一部の要素にラベル要素が関連付けられていません
ヘッダーの虫眼鏡をクリックして、出てくる検索窓のカテゴリー選択のところですね。
<div class="widgetSearch__contents">
<label>
<h3 class="heading heading-tertiary"><?php echo $categoryH ?></h3>
<?php
$args = array(
'show_option_none' => $categoryH.'を選択',
'option_none_value' => '',
'show_count' => 0,
'id' => uniqid("cat_"),
'class' => 'widgetSearch__select',
);
wp_dropdown_categories($args);
?>
</label>
</div>
これは/public_html/wp-content/themes/the-thor/searchform-refineの中にあります。
<label></label>のタグだけが追加分です。中の部分は、元々あったやつです。これで完了です。
しかし、h3を囲むことになった為、カテゴリーと書いている行をホバーした時に、カテゴリー選択の枠の色が変わる様になります。
背景色と前景色には十分なコントラスト比がありません
薄い色を基調とした優しいタッチのサイトは、これでめっちゃひっかかります（笑）
文字色、背景色を入力して合格をもらえるまで試されるといいでしょう。
やってみたら分かるんですけど、結構濃いめじゃないとダメみたいですね。
見出し要素は降順になっていません
h2がないところで、いきなりh3を書いたら、ひっかかっちゃいました。
h2に変更したら、エラーは消えました。
おすすめの方法について
画像が低い解像度で表示されています
画像はちょっと大きめを用意する感じでしょうか。
SEOについて
タップターゲットのサイズが適切に設定されていません
これは、タップするものが小さすぎたり、隣との間隔が狭すぎたりすると、このエラーが出ます。
さっきと一緒で、普段非表示のものに反応するのはちょっと反則ですね（苦笑）
さいごに
簡単な反面、なんでもaria-label使うのは、あまりよくないみたいなんですよね。
もっといい方法があれば、教えて頂ければ幸いです。
今日は、ありがとうございました。では、また！