WordPressでもPageSpeed Insightsで100点満点を取る方法

PageSpeed Insights とは Google が提供している Web ページの表示スピードを測定して点数をつけてくれるツールです。点数が高いほど Google 検索において有利だと言われているので、高いに越したことはありません。今回はその点数を満点である100点にする方法を紹介します。

「WordPress は遅い」「PHP は遅い」という話を聞いたりもしますし、WordPress だから高得点は無理だと思い込んでいる人もいるのでそんなことは無いよ、というお話です。これを真似すれば基本的には誰でも、WordPress であっても PageSpeed Insights で100点を取れるはずです。

PageSpeed Insightsで100点

Google アナリティクスを外す

PageSpeed Insights では、JavaScript ファイルのブラウザキャッシュ時間を長め（10日程度）に設定しないと点数が下がります。Google アナリティクスを入れると自動でキャッシュ時間が2時間の JavaScript が読み込まれてしまいますので、その結果1点ほど減点されます。ですので、100点を目指す場合は Google アナリティクスを外しましょう。

https://www.google-analytics.com/analytics.js (2 時間)

という表示が出て点数が下がります。ただ、アナリティクスを外すのは無理、というところがほとんどだと思います。当ブログも外すことが出来ません。よって、アナリティクスを入れた状態での最高点は99点だという事になります。Google が提供している PageSpeed Insights が Google アナリティクスによって点数が下げられるというのは何だか納得できませんが仕方ありません。仕様です。

当ブログは、基本記事ページは99点になるように作っています。

PageSpeed Insights で99点

一番上のアイキャッチ画像で使われている100点のページは、Google アナリティクスを入れていない About ページです。

参考：About ページ
参考：About ページの PageSpeed Insights

Google アドセンスを外す

考え方はアナリティクスと同じです。当ブログはアドセンス系は入れていないので、詳しくはわかりませんがアドセンスを入れることによって、キャッシュ時間が短い JavaScript ファイルが2つほど入ってしまうようです。100点もしくは99点を目指したい場合は Google アドセンスを入れることはできません。

https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 分)
https://pagead2.googlesyndication.com/pagead/osd.js (60 分)

の2つの JavaScript ファイルが挿入されて点数が下がります。ほかの広告も同じく基本 JavaScript が挿入されます。広告系は入れられないと考えます。

CSS は head 内にインラインで

上の2つはブログの構成上厳しいというブログが多いと思いますが、これ以降はやる気があれば実現可能な項目になります。

PageSpeed Insights では CSS のファーストビュー以外で使うものを link タグで読み込むことで点数が下がります。ファーストビューとはブログが表示された瞬間にディスプレイに写る部分です。そこの部分の表示に使われる スタイルはlink タグで読み込んでもよいのですがそれ以外はダメです。それ以外はインラインで style 要素を使って CSS を書かなくてはいけません。

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

という項目です。ただし、ファーストビューとそれ以外の部分の CSS を分けて考えるのも大変なので、CSS の量にもよりますが、全てインラインにしてしまっても構いません。あまりにも多いと怒られるようですが、基本は大丈夫です。

<head>

・・・

    <style>
        /*style タグ内にCSS*/
    </style>

・・・

</head>

WordPress には CSS をインラインにしてくれるプラグインがあるようですが、イマイチ上手く動かないようが多いようです。基本プラグインに頼らずインラインにしましょう。

JavaScript は body 最下部でインラインで

上記と同様に、

スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

の対応をします。JavaScript は基本 head で読み込んではいけません。body の最下部、インラインにして読み込み用にしましょう。ファーストビューのレンダリングをブロックしていると判定され、点数が下がります。

・・・

    <script>
        //script 要素内に JS コード
    </script>
</body>
</html>

HTML、CSS、JavaScript は全て縮小する

次の3つの項目の対策です。

CSS を縮小する
HTML を縮小する
JavaScript を縮小する

ここでいう縮小というのは、改行や不要な半角スペース等を消すことです。これも100点を取るには必要な事で、インラインにしたうえで改行を取ってしまいましょう。

参考：Refresh-SF

上記のサイトでオンラインで CSS、JavaScript の縮小が可能です。HTML の縮小に関してはプラグイン、もしくは PHP ファイル自体の改行、半角スペースを消しましょう。

画像は表示サイズで作成する

画像は全てPCで表示するときに表示されるサイズで作成しなくてはなりません。

画像を最適化する

小さい画像を拡大して表示することは問題ないですが、大きい画像を縮小して表示すると画像を最適化するよう求められます。例えば 600px × 400px で表示したければそのサイズで作る。もし大きければ画像変種ソフトなどで縮小して表示します。

ただし、モバイル表示の場合の縮小は許可されています。その際の縮小では点数が下がりません。また、レティナ対応など高密度ディスプレイのために大きめの画像を入れることは現状最適化されていないと判定されます。100点を取りたい場合は対応をあきらめましょう。

画像は全て TinyPNG にかける

画像を表示サイズで表示するだけではまだ足りません。JPG、PNG、GIF 画像は圧縮していないと点数が下がります。

TinyPNG

参考：TinyPNG

TinyPNG を使って圧縮するのがおススメです。プラグインもあるようですが使ったことがないので効果はわかりません。

.htaccess でブラウザキャッシュ時間を長めに設定する

ブラウザキャッシュ項目の対策です。

ブラウザのキャッシュを活用する

大抵のレンタルサーバーで利用可能な htaccess を変更して、画像や HTML ファイルのキャッシュ時間を長めにします。

.htaccess

ExpiresActive On
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"

詳しくは htaccess について書いてあるページを参考にしてほしいですが、こんな感じの記述で画像のキャッシュ時間での点数減少は防げます。100点を目指す場合、CSS と JavaScript に関してはインラインで記述するのでキャッシュする必要はありません。

.htaccess で gzip 圧縮を有効にする

圧縮項目の対策です。

圧縮を有効にする

点数を下げないためには各ファイルを gzip 圧縮する必要があります。これも詳しくは検索して調べてほしいのですが、

.htaccess

SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary

の記述を .htaccess に加えます。ただし、default はサーバーによっては対応してない事もありますので注意してください。

.htaccess とかよくわからない、という場合は Xサーバーがおススメです。Xサーバーを使い、PHPを最新版にすると自動でこの辺の高速化設定をしてくれるので、gzip 設定が必要なくなります。

wp_head()、wp_footer() を消す

wp_head()、wp_footer() は ページの状態を自動で判断して CSS ファイルや JavaScript ファイルを挿入してしまいます。勝手に入れられてしまうと、レンダリングブロック判定をされてしまったり、キャッシュ時間の問題があるので点数が下がります。絵文字のための JavaScript ファイルなどがそれに当たります。

ただし、wp_head()、wp_footer() を消すとほぼすべてのプラグインが動かなくなります。注意してください。

wp_head() は header.php に、wp_footer() は footer.php に大抵あります。

参考：関数リファレンス/wp head
参考：テンプレートタグ/wp footer

プラグインについて

「プラグインを使いすぎると遅くなる」はよく言われていますが、実際そうです。100点にする上で使うことが出来ないプラグインは、CSS ファイルや JavaScript ファイルをソース上に追加してしまうプラグインです。具体的にはシェアボタンのためのプラグインであったり、見た目にかかわるプラグインは大体それに当たります。

それ以外の見た目に直接かかわらないプラグインに関しては、PageSpeed Insights のスコアという事だけ考えるとそれほど影響はありません。ただし、見た目にかかわるプラグインが CSS ファイル等を挿入するときは 、wp_head()、wp_footer() を感知して挿入してますので、これらがなければ基本的には挿入されません。見た目にかかわるプラグインはほぼ使えないので、それらはプラグインに頼らず自作するという事になります。

ついでに当ブログで使っているプラグインは現在4つです。なるべくプラグインを使わないようにすることが大事です。

リダイレクトをしない、表示コンテンツの優先順位、サーバー時間の修正

あとは基本的に変わったことをしなければ問題が起こらない部分です。リダイレクトはしなければいいだけですし、表示コンテンツの優先順位というのは、普通にブログをデザインをしていれば問題は起こらないです。

サーバーの応答時間対策は一言二言で言えることではないですので、ここでは書けません。

まとめ

実際100点と99点の差、99点と90点の差が、どれほど検索において有利不利があるのかはわかりません。ここまでくると趣味の領域です。

ただこだわれる部分ではあると思うので、こだわってみるのも楽しいです。

コメントフォーム

メールアドレスが公開されることはありません。