サイトやブログを運営しているのであれば、一度はPageSpeed Insightsを利用したことがあると思います。
思いのほかスコアが低く、いろいろな記事を見て改善を試みたという方もいらっしゃるでしょう。今回は、このブログで行ったPageSpeed Insightsのスコア改善方法を紹介していきます。
このブログの現在地
直近のPageSpeed Insightsのスコアはこのようになっています。
「100」ではなく「96」というのが微妙なところではあるのですが、このラインを維持していけばいいかなと考えています。
使用するプラグインを極力少なくした
このブログを作る時から心掛けていたことがあります。それはプラグインを極力使用しないという点です。
ちなみに、この記事作成時点で使用しているプラグインは以下のとおりです。
- All-in-One WP Migration
- Highlighting Code Block
- LiteSpeed Cache
- Regenerate Thumbnails
- WP Multibyte Patch
- XML Sitemap Generator for Google
「All-in-One WP Migration」と「Regenerate Thumbnails」に関しては一時的に使用したものですので削除してもいいかなと思ったのですが、ページ表示スピードにそれほど影響を与えないと思ったのでそのままにしています。
プラグインを減らす理由としては、まずページを表示する際に使用されるプラグイン固有のCSSやJavascriptを少なくするのが目的です。
プラグインは色々な機能を付加できるので便利なのですが、その分CSSやJavascriptのコードが多くなるので、後程触れる「キャッシュ系のプラグイン」にて圧縮したとしても読み込みに時間がかかってしまいます。
それを極力避けるためにプラグインの見直しは必須と言えます。
キャッシュ系のプラグインを使用
WordPressで作成したサイトやブログはアクセスがあるごとに、phpでデータベースから引っ張り出してきて動的にページを生成しています。
となると、アクセスが増えればそれだけサーバーにも負荷がかかり、どうしてもページの表示が遅くなってしまいます。
ただ、キャッシュ系のプラグインを利用することで、以前アクセスがあった際に生成されたキャッシュファイルを利用してページを表示するので、サーバーへの負荷も減り処理速度も上がってページ表示が速くなります。
WordPressには色々な機能を持ったキャッシュ系のプラグインがありますが、代表的なものは以下のプラグインです。
- WP Super Cache
- WP Fastest Cachek
- W3 Total Cache
- Cache Enabler
- LiteSpeed Cache
利用しているサーバーや利用中の他のプラグインとの相性、使用しているテーマで利用できる機能と重複しているなどを考慮して設定をしなければいけなかったりするのですが、上手く使えば効果はあるので色々試してみてください。
ちなみにこのブログでは、Webサーバーに「LiteSpeed」を採用しているロリポップ！レンタルサーバー（ハイスピードプラン）を利用していることもありLiteSpeed Cacheを使っています。
キャッシュ機能やCSS・JSの圧縮・結合といった機能だけでなく、画像の圧縮やWebPへの変換、CDNキャッシュの設定、データベースの最適化など、一つのプラグインで広範囲にわたってカバーしています。
細かい設定ができる分、扱うのが大変ですがサーバーとの相性も相まって効果はかなりあるように思います。
「レイアウトが大きく変わらないようにする」対策
実は、この項目が中々の割合でスコアを下げる要因となっていました。
この項目を改善しない状態で「LiteSpeed Cache」を使用しても80前半くらいしかスコアが伸びなかったというのもあって、根本的な見直しをすることにしました。
「レイアウトが大きく変わらないようにする」が出た原因は<img>タグにwidthとheightが指定されていないことでした。
記事作成時、エディタにある画像ブロックを使用したり、サムネイル画像の呼び出しする際にWordpressの関数を使用すると、余計なclassが付与されるのが嫌で、画像urlだけを引っ張り出して自分で整形したHTMLで吐き出すようにしていました。
どうもこれが良くなかったようで、記事内に挿入されている画像とサムネイルなどすべてをWordpressの機能や関数を使って表示するように変更しました。
それに加え、装飾以外で使用する<img>タグすべてにalt属性を指定しました。
このalt属性については「パフォーマンス」ではなく「SEO」のスコアを上げるために行なっています。上記のように画像の表示方法を見直したことで「パフォーマンス」のスコアが安定して90台後半が出るようになりました。
各スコアを上げるために行なった他の対策
PageSpeed Insightsにて「メタ ディスクリプションが指定されてない」という内容の指摘があったのでそれを解消しました。
今、使用しているテーマは「Underscores」というスタイリングされていないブランクテーマを使って作っています。おそらく、投稿ページの編集画面に「抜粋を追加…」があるので、そこに記事内容の抜粋を入力すれば「メタ ディスクリプション」が追加されるとは思うのですが…
これまで抜粋を使う機会がほとんどなかったため投稿した記事すべてに抜粋を入力していません。ですので、OGPタグの設定時に取得したdiscriptionの内容をそのまま流用することにしました。
この修正により「SEO」のスコアが改善されました。
次に「背景色と前景色には十分なコントラスト比がありません」を修正しました。
HTMLのタグや文中でポイントとなるキーワードにはこのような装飾をしています。今現在はこのスタイルになっていますが、この指摘を受ける前は違う色で表示させていました。
ここを修正したことで「ユーザー補助」のスコアが改善されました。
最後に、これは効果があったのですが、この方法が正しいのかどうかイマイチはっきりしないので参考までにしていただきたいのですが…
このサイトのアクセス解析にGoogleアナリティクス(GA4)を導入しています。
GA4を導入するにあたり、<head>タグ内にGA4の測定タグを記述してやらないといけません。ただ、以前からそうなのですが、この測定タグを記述するとPageSpeed Insightsでスコアが下がります。
これを解消するために「Partytown」というWeb Workerライブラリを使用しています。この「Partytown」を使用することでブラウザでのJavascriptの処理を並列で行うようにしてページ表示速度に影響が出ないようにしました。
一応、GA4にてアクセスの計測ができているので、何らかのエラーが発生しない限りこのまま使ってみようかと思っています。
他にも細かい修正や改善を行なってはいるのですが、比較的スコアの改善がみられたものを挙げていきました。
まあ、すべてのスコアが100になれば上位表示されるとかいうものではないので、こればかりに力を入れるのもどうかとは思います。ただ、どうしてもスコアを改善したいという場合は参考にされてみてもいいかなと思っております。