お疲れ様です。みやすぐです。
皆さん、自分が運営しているブログページのアクセス速度、気にしてますか？
「アクセス速度が低いとgoogleに嫌われてSEO的に不利になる」だとか、「ページが表示されるまでに３秒以上かかると４０％の人ページバックする」だとか、巷ではいろんなことを言われていますが、確かに「おまえのサイト、アクセス速度おせーんだよ！」と言われると、なんだか気になってしまうものです。
かく言う私も、このブログを立ち上げてから約半年が経過しましたが、これまでずっとアクセス速度に悩まされてきました。
自分なりに調べて、画像圧縮したり、サイズ小さくしたり、なんか良くわからんプラグイン入れてみたりしても、「PageSpeed Insights」の結果は３０点程度。。。（Total Blocking Timeも、もちろんPOOR）
いろいろとネットで調べながら試行錯誤してみるも、一向に改善せず、ついには「使ってるテーマ（THE THOR）が悪いのかなぁ。。。」なんて、せっかく購入したテーマのせいにして諦めていました。
しかし先日、ひょんなことから改善方法を見つけることができ、ちょっとした修正をしただけで、なんと「PageSpeed Insights」で１００点を取るという劇的改善に至りました。
今回は、簡単にできるのに意外と気づいていないかも知れない、みやすぐが「PageSpeed Insights」で１００点とるまでにやった３つのことをご紹介します。
インターネットで調べると、難しそうな色んな対応方法が出てきてどうしたら良いかわからなくなっているそこのアナタ！
この記事に書いてあることは、効果がなくても簡単に元に戻せるものばかりなので、騙されたと思って試しにやってみてください。もしかしたら、簡単に改善してしまうかもしれませんよ。
ブログのアクセス速度を測ろう
この記事にたどり着いている人はすでに実施済みかもしれませんが、何を改善するにも、まずは現状の把握が必要です。
そんなときに最高に使えるサイトが、先ほどからチラホラ登場している「PageSpeed Insights（ページスピードインサイト）」です。
使い方は簡単。調べたいサイトのURLを検索バーに入力して「分析」ボタンをクリックするだけ！
「PageSpeed Insights」の何が良いって、ページのアクセス速度の総合評価がわかるだけでなく、何が原因で速度が遅くなっているかを教えてくれるところです。
付けられる点数はこんな感じ↓
- 0点～49点 ⇒悪い評価。googleに嫌われる。
- 50点～89点 ⇒改善要という評価。普通だけど、普通のページは見られない。
- 90点～100点 ⇒良い評価。検索結果にもどんどん引っかかる（かも知れない）
ちなみに、この「みやすぐろぐ」は、これまで何をやっても３５点と言う低評価が続いていました。ページ内の画像を圧縮したり解像度を下げたりしたけど何も変わらず、もはや文字が見えないくらい画質荒くしたのに評価は上がりませんでした。（特にモバイルの評価が悪かった。。。）
でも、私の場合、アクセス速度の改善のために重要だったのは、画像の質じゃなかったようです。
アクセス速度が遅い原因
改善前のこのサイトを「PageSpeed Insights」にかけてみると、いつも決まって次の２つが改善ポイントとして表示されていました。
- 使用していない javascript の削減
- 使用していない CSS の削減
まあ、他にもいろいろ出てたんですが、影響大きそうなのはこの２つでした。これに絞って対応しただけで、評価が１００点になったので、出てくる改善事項を全部直さなくても１００点は取れるみたいです。１００点ってパーフェクトってことじゃないんだね。
対応その１：「Autoptimize」のプラグインを入れる
Autoptimizeは、WordPressのソースコードを圧縮して高速化してくれるプラグインです。
HTML、CSS、JavaScriptから余計な改行やスペースを削除したり非同期読み込みを良い感じにやってくれたりしてくれて、このプラグインを入れるだけで評価が２０点くらいはアップします。
WordPressのダッシュボードの「プラグイン」から、「Autoptimize」って検索してインストールして、有効化させるだけでOK。
あとは細かい設定ですが、私の場合、↓の設定内容が一番高評価だったので、この内容で使っています。これはサイトの状況によって最適解が異なるかもしれないので、いろいろ試行錯誤してみると良いと思います。簡単だしね。
①JavaScriptオプション
・JSファイルを連結：チェック
・他の項目：チェック不要
※「JSファイルを連結」はやらないほうが高速になるという記事もネットで見たんですが、私の場合は連結した方が早かったです。
②CSSオプション
・CSSファイルを連結：チェック
・インラインのCSSも連結：チェック
・他の項目：チェック不要
※これについても、「CSSファイルを連結」しないほうが良いケースもあるみたいです。
③HTMLオプション
・HTMLコメントを維持：チェックしない
④その他オプション
全部チェック。
対応その２：「Flying Scripts by WP Speed Matters Settings」のプラグインを入れる
「Flying Scripts by WP Speed Matters」は、「使用していないjavascriptの削減」の評価に対して効果を発揮します。
このプラグインを入れると、使っていないjavascriptを読み飛ばしてくれるようになるのでページの表示速度を改善することができます。
例によって、WordPressのダッシュボードの「プラグイン」から、「Flying Scripts by WP Speed Matters Settings」って検索してインストールして、有効化させるだけでOK。
ただし、使っていないjavascriptを指定してあげる必要があります。
指定の仕方は、設定画面の「Include Keywords」に、「PageSpeed Insights」の「使用していないJavaScriptの削減」を開いて表示される「～.js」の部分をコピーするだけ。
※/の後から、「～.js」までをコピーする。
「PageSpeed Insights」で「使用していないJavaScriptの削減」がたくさん出てきている人は、出てきた全部を書いておきましょう。
対応その３：【THE THOR利用者のみ】CSSの非同期読み込み設定をする。
私の場合、最も劇的に改善されたのがこの「対応その３」でした。この対応で、６０点→１００点にたどり着きました。テーマを「THE THOR」にしといて良かったと、本気で思った瞬間でした。
私と同じく「THE THOR」のテーマを利用している人は、簡単に設定できるのでぜひ試してみてください。
この際、「THE THOR」のテーマに乗り換えるというのもアリですね。安くて使いやすいし↓
この対応は「使用していないCSSの削減」の評価改善に効果があります。
設定の仕方は、ワードプレスのダッシュボードから、「外観」→「カスタマイズ」→「SEO設定」→「CSS非同期読み込み設定」から、以下の３項目にチェックをします。
・GoogleフォントCSS(Lato)を非同期読み込みにする：チェック
・GoogleフォントCSS(Fjalla)を非同期読み込みにする ：チェック
・GoogleフォントCSS(Noto Sans JP)を非同期読み込みにする ：チェック
私は、この３項目にチェックするのが一番改善される組み合わせでした。これについても、他の項目もチェックして、いろいろ試してみるのが良いと思います。
以上、この３つの対応により、パフォーマンスは１００点を達成。モバイルのほうも９３点まで上昇しました。
＜デスクトップ＞
＜モバイル＞
おまけ：あんまり改善されなかった対応内容
最後に、ネットで調べて出てきた改善方法のうち、私のサイトであんまり効果がなかったものを少し紹介します。
①読み込ませたくないCSSやスクリプトを「functions.php」書く
インターネットで出てきた対応策その①。
functions.phpに「wp_deregister_style( ‘読み込ませたくないCSSのID’ )」を指定するようなコードを書くことで、速度アップするとのことでやってみたが、効果なし。
※詳しく知りたい方は「wp_deregister_style」で検索すると出てきます。
②「WebP Converter for Media」のプラグインで画像を最新の形式に変換
インターネットで出てきた対応策その②。
「WebP Converter for Media」というサイトで使っている画像を最新の形式である「WebP」に変換することで速度アップするとのことだったが、私のサイトには効果なし。
ただ、なんとなく最新の画像に変換されたのは気持ち的に良かった。googleも推薦してるみたいだからね。
