PageSpeed Insightsの仕様はどんどんアップデートされていきます。
一昔前はパフォーマンススコアのみの表示でした。
今は「ユーザー補助」「おすすめの方法」「SEO」という３つの指標についてもスコア化されています。
FIDに変わるINPなんていう指標も出てきましたし、じっとしていられませんね┐(´д｀)┌
こういった指標がある以上、ハイスコアを取るには越したことはありませんが、この記事では「ユーザー補助」にスポットを当て、私感でみていきます。
PageSpeed Insightsの「ユーザー補助」とは？
「ユーザー補助」とは、俗にいうアクセシビリティです。
アクセシビリティは、英語では“Accessibility”で、「使いやすさ」、「便利さ」などと訳されています。
PageSpeed Insightsというと、“ページの表示速度を測るもの” というイメージでしたが、表示速度とは異なる分類になります。
“PageSpeed” っていう名前が付いちゃってるのに・・・（ﾎﾞｿ
極端に言えば身体障害者の方でもサイトの内容を把握しやすくなっているかどうかという指標で、キーボード操作のみでコンテンツ移動ができたり、リンクや画像がどのようなものかなど、分かりやすくなっているかという指標になります。
アクセシビリティはまだまだ意識されることが少なく、WordPressではテーマ側で対応されていないとどうしても指摘はされてしまいます。
見やすいページにするために目次を設けたり表にしたり、、、という「使いやすさ」「便利さ」とはちょっと違っていて、htmlタグに特定の属性があるかどうかや、値が適切に指定されているか、といったところがチェックされています。
つまり、「ユーザー補助」の点数を稼ぐには専門知識が必要です。
PageSpeed Insightsの指標では「ユーザー補助」の項目の他に「SEO」という項目もありますので、SEOとは区別されていると思うのですが、”やらないよりはやった方が良い” のは確かだと思います。
「ユーザー補助」に力を入れている？
Googleは「ユーザー補助」すなわちアクセシビリティに力を入れてきていると感じています。
理由としてはそもそも「ユーザー補助」という項目をPageSpeed Insightsに表示するようになったということ。
更にPageSpeed Insightsで「ユーザー補助」を分析してスコアを上げても、時間とともに新たなチェックポイントができてスコアが下げってしまうことからです。
このブログはPageSpeed Insightsの「パフォーマンス」「ユーザー補助」「おすすめの方法」「SEO」は全て100点を目標にいじっているのですが、先日ふとチェックしてみると、、、
「ユーザー補助」が91点になっとるΣ(ﾟдﾟ)
理由をみてみると、
ラベルやalt属性絡みの模様。
https://dequeuniversity.com/rules/axe/4.7/image-redundant-alt
↑ここに詳しくは書かれているのですが、alt属性はなんでもかんでも値を入れとけばいい、というのもではないと書かれています。
「SEO的にalt属性は大事、でも画像1つ1つに設定するの面倒だからファイル名でいいや」は良くないというのが再確認できました。
alt属性は場合によっては空の方が良い
「ユーザー補助」の話からはちょっとズレてしまうのですが、alt属性は場合によっては空の方が良いっぽいです。
どんな場合かというと、サムネイル画像と記事タイトルを並べているような場合です。
WordPressでは新着記事一覧や関連記事一覧などで記事リストを表示させることが多いと思いますが、サムネイル画像のalt属性に記事タイトルを自動的に持ってくるようなことしていませんか？
私はやっていました。
とにかくaltは値を入れた方が評価されると思ってorz
でも画像のaltと記事タイトルが重複してしまって良くないらしいです。
実際、このブログではサムネイル画像と記事タイトルを並べていた個所に対してalt属性を空にするような修正をしたところ91点だった「ユーザー補助」が100点に回復しました。
アクセシビリティについてはまだまだ学ぶことは多そうです。
勘違いしないための補足として、画像にaltは必須です。
必要ない時は値を入れずに空にしてください、という意味合いになります。
「ユーザー補助」で高得点を取るコツ
ハイスコアを取るためには専門知識が必須なのですが、その中でも心がけで改善できるものを紹介します。
その１～アクセシビリティ対応済みのテーマを使う
ですよねって感じですが、しっかりしたテーマを選ぶことで「ユーザー補助」スコアを底上げできます。
その２～はっきりした配色に
色覚障害の方はコントラスト比が低いと文字が読みにくくなります。
黒背景にグレー文字やピンク背景に白文字など使っていませんか？
一番良いのは白黒はっきりですが、濃い色と薄い色をしっかり使った配色を心がけてみてください。
その３～見出しは順番通りに
正直そこまで詳しくありませんが、見出しはh1～h6を順番通りに使用しないといけないようです。
h1の次にh3を使ったり、h2の次にh5を使うとスコア低下に繋がります。
h1の次はh2、h2の次はh3ということです。
まとめ
「ユーザー補助」とは、誰でも使いやすいサイトかどうか、誰でもページの閲覧し易いかどうか、の指標です。
ちょっと目を閉じめてみてください。
使いやすいサイト、閲覧し易いページは好きですか？
自分が良ければそれでいいですか？
人は十人十色です。
身体に事情を抱えている人もいます。
そんな誰しもが満足できるサイト作りって未来を感じませんか？
あとがき
毎日がとても暑いです。
今年の東京は観測史上初のオール真夏日ってニュースで言っていました。
地球温暖化で住めない星になっちゃうよ？って言われていますが、もうすでになっていきている気がします。
宇宙人って本当にいるのかな。