グシオ経営マーケティング・地方創生研究所@中小企業診断士 
みなさんは PageSpeed Insights を使っていますか？
PageSpeed Insights は表示速度を測定・評価する分析ツールです。ユーザーが快適にホームページを使ううえで表示速度は重要なパラメータです。表示速度を向上するうえで問題のある箇所を自動で抽出してくれるので、これらの問題点を改善することでSEO対策になります。
今回は僕のブログでPageSpeed Insightsを使用し、問題点として出てきた箇所を修正していく様子を記事にしたいと思います。留意点として、他の人が効果が出たとブログで発信している施策と全く同じことを試しても全くスコアに変動がなかったり、むしろ逆にスコアが下がることもありました。本記事に置いても例外ではないと思いますので、みなさんが試す際にはあくまでも参考程度＆自己責任でお願いします。
関連記事：『SEOの基本！WordPressでGoogleサーチコンソールを設定する方法と3つの特徴を解説』
目次
PageSpeed Insights とは
PageSpeed Insights は表示速度を測定・評価する分析ツールです。上記ホームページに分析したいホームページのURLを入力すると測定が開始されます。
Google Search Consoleの左メニュー内「ウェブに関する主な指標」からもツールを利用することができますGoogle Search Consoleの利用方法については以下記事を参照ください。
関連記事：『SEOの基本！WordPressでGoogleサーチコンソールを設定する方法と3つの特徴を解説』
PageSpeed Insights では①パフォーマンス ②ユーザー補助 ③おすすめの方法 ④SEO という4種類の大項目があり、それぞれの項目内で具体的な問題点を抽出してくれます。
基本的に「デスクトップ」(パソコン)の評価は高めに出て、「モバイル」(スマートフォン)の方が低く出ます。特に何も考えずに何となくWordPressを使っていると最初は辛口評価になりがちです。
良いスコアを取ると点数表記が緑色になるのですが、僕のモバイル結果はほとんどオレンジ色で改善の伸びしろの大きさが見てとれます（笑）
Googleはモバイルを重視しています。ここ数年はモバイルでインターネットに接続する人の割合が世界的に増えているので当然と言えば当然ですね。なので、モバイルのスコアが低いままだとSEOにも良くないのでPageSpeed Insightsでモバイルをスコアリングしていくことは重要な施策です。
施策をしたら速攻でアクセスがぐんっと上がるというものではありませんが、塵も積もれば山となるということでしっかり対策することが大切です。
では、実際に問題点の確認と改善をしていきましょう。
中々ハードですが頑張ります…！
PageSpeed Insights で抽出した問題点と対策 -パフォーマンス-
PageSpeed Insights の「パフォーマンス」の項目では重要課題2点と課題3点が抽出されました。
ページ速度を向上させるために、重要な JavaScript や CSS はインラインで配信し、それ以外の JavaScript やスタイルはすべて遅らせることを推奨されています。
色々調べた結果、レンダリングを妨げるリソースの除外 をする方法はWordPressの場合プラグインを利用すると手っ取り早く出来そうです。今回はプラグイン「Autoptimize」を採用しました。
- JavaScriptオプション：JavaScriptコードの最適化のみチェック
- CSSオプション：すべてチェックを外す(何も設定しない)
- HTMLオプション：HTMLコードを最適化のみチェック
- 「追加」タブ：Googleフォントの削除にチェック
- その他はデフォルトのまま
僕は上記のように設定しました。僕はCSSオプションは何も最適化しない方がスコアが高い状態で出ましたが設定条件は人によりけりで色々な情報が出ているので皆さんもご自身で試して一番スコアが上がる設定を探してみてください。
使用していないJavaScriptのなかで削除できるものがあれば良いのですが、Googleの分析ツールを使用する都合で削除できないものも少なくありません。この場合、JavaScriptの実行を遅らせることでレンダリング時間、インタラクティブまでの時間、最初のCPUアイドルなどを削減できるのでページ表示速度を向上できます。
というわけでJavaScriptの使用を遅らせるプラグイン「Flying Scripts」を導入してみました。プラグインをインストールした後、PageSpeed Insightsで問題視されていたJavaScriptを「Flying Scripts」設定画面の「Include Keywords」に入力して更新することで対応ができます。
「Knowledge Base」というブログ主様が記載していた方法を試したところ効果があったので、こちらを採用しました。
/** ブロックエディタ用googleフォントの読み込みを削除 **/
function ha_remove_wp_block_css_nonuser() {
if (!current_user_can('read')){
//ブロックエディタ用のGoogleフォント
wp_deregister_style( 'wp-editor-font' );
wp_register_style( 'wp-editor-font', false );
//ダッシュアイコン
wp_deregister_style( 'dashicons' );
wp_register_style( 'dashicons', false );
//管理画面用のスタイル
wp_deregister_style( 'wp-components' );
wp_register_style( 'wp-components', false );
//ブロックエディタ用のスタイル
wp_deregister_style( 'wp-block-editor' );
wp_register_style( 'wp-block-editor', false );
}
}
add_action( 'wp_enqueue_scripts', 'ha_remove_wp_block_css_nonuser' );テーマのfunctions.phpへ上記コードを追記して保存して完了です。
これはWordPressではなくサーバーの方のhtaccessの設定を変更します。
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>おそらく元々の記述は上記のような形になっているかと思います。これの設定を…
<IfModule mod_rewrite.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/js application/x-javascript application/javascript
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>上記のような形に変更して保存します。
具体的にどこが変わったのかというと、変更箇所は以下が追記された形になります。
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/js application/x-javascript application/javascriptこれの対応方法は、『画像のピクセル数を表示するピクセル数に合わせる』ことで改善が可能です。
僕の場合はロゴが引っかかったので、ロゴのサイズを再調整してアップロードしなおして対応しました。
PageSpeed Insights で抽出した問題点と対策 -ユーザー補助-
PageSpeed Insights の「ユーザー補助」の項目では4点の課題が抽出されました。
![画像要素に [alt] 属性が指定されていません](https://i0.wp.com/gushio.site/wp-content/uploads/2022/11/image-39.png?resize=857%2C468&ssl=1)
これもスッカリ忘れていたのですがTOPページのサイドメニューで、いくつかの画像にAlt(画像の名前)を設定し忘れていました。
サイドメニューで使用している画像のAltはWordPress管理画面左メニューの「外観」→「ウィジェット」→「サイドバー」から該当する画像のコードを見つけて、上記のようにコードを打ち込みます。
また、SANGOでウィジェット「プロフィール」を使っている方は背景画像やプロフィール画像のaltを設定できない問題が発生しているかもしれません。
この場合の対応方法として、ウィジェットを使わず自分でカスタムHTMLを入力するやり方があります。この手法を「ニワっち」さんという方が紹介していたので、そちらの記事をご参照ください。僕はこれでaltを設定出来ない問題を対処しました。
これはHTMLコードのなかに aria-label=”アイコンの説明テキスト” を追加すれば解決するようです。
つまり、こんな感じでコードを挿入できればOKです。
どうやらアイキャッチ画像したの日付のフォントカラーが灰色で視認性が悪い言うことで警告されたようです。
.cardtype time {
color: #カラーコード;
}WordPressのテーマ→カスタマイズ→追加CSSで上記コードを入力して任意のカラーコードを入れれば対応できます。
結論から言うと、この改善は断念しました…笑
サイドメニューのカテゴリー一覧でカテゴリ名が降順になっていないことが問題視されているようだと思ったので、カテゴリの順番を変えられるプラグイン「Category Order and Taxonomy Terms Order 」をインストールしてカテゴリの順番を降順に変えたのですがスコア改善にはなりませんでした。
見出し要素という名前に則りh1、h2、h3の使い方を確認していました。記事の分量的に見出しを区切っていないものもあったので、それが原因かなとも思ったのですが全部修正するのは中々の手間だったので一旦保留にします。100記事達成したらリライトしていく予定なのでそのときに見出し設定をして改善できるかどうか見ていきたいと思います。
PageSpeed Insights で抽出した問題点と対策 -おすすめの方法-
PageSpeed Insights の「おすすめの方法」の項目では2点の課題が抽出されました。
どうやらロゴ画像がhttpsに対応していなかったようです。httpsを取得する前にロゴ画像アップしたからかもしれません。というわけで画像を再アップして対応しました。
これは「HTTPSが使用されていません」に該当したロゴ画像を再アップしたら警告が消えました。何かよくわからないけどラッキー…！
PageSpeed Insights で抽出した問題点と対策 -おすすめの方法-
PageSpeed Insights の「SEO」の項目では3点の課題が抽出されました。
完全に盲点でしたがTOPページの帯にリンク設定ができたのを、この結果を見て初めて知りました（笑）
というわけで帯の<a href=” “>のなかにTOPページへのリンク(gushio.site)を記述 します。僕は「SANGO」というWordPressテーマを使っているのですが、この場合はWordPress管理画面左メニューの「外観」→「カスタマイズ」→「SANGOオリジナル機能」→「ヘッダーお知らせ覧」→「リンク先URL」から設定できました。
-ユーザー補助と同じ問題点・解決方法なので省略します。
結論から言うと、これは改善を断念しました…笑
カテゴリラベルの大きさは、以下のコードをカスタムCSSに入れてfont-sizeの数値を変えることで調整ができます。
#main .catid27 {
font-size: ☆任意のサイズ☆em;
}しかし、横長形状のこのラベルではPageSpeed Insightsが満足する設定がどうにも出来ませんでした。重要度で言えばオレンジレベル（中程度）だったので今回は見逃してやろうと思います。
ここまで対応した結果、スコアはこう変化した
対策前は見事なまでにオレンジ色一色でした。
ここまで紹介した施策を一通りやった結果、どうなったかと言うと…
- パフォーマンス：66→96(＋30)
- ユーザー補助：87→96(＋9)
- おすすめの方法：83→100 (＋17)
- SEO：84→98 (＋14)
ここまで改善できました！！
まとめ
以上、PageSpeed Insightsを使ってホームページを改善しSEO対策をしてみました。表示速度は重要な要素なので出来る限り良いスコアが取れるよう頑張りたいところですがプログラミングの知識が必要なところもあるので難易度や重要度の観点から優先順にを決めて取り組むのが良いと思います。
僕も取り急ぎ対策できるところは対策をしきりました。後は今後どう数値として結果が出てくるのか経過観測をしたいと思います。
