WordPressを使いGoogle PageSpeed Insightsで5点出して焦ったので改善方法を書いて直していく

WordPressで運営しているこのサイト、約1年前にサイトを高速化するために、キャッシュプラグインやあれやこれやを導入してヒャッハー！めちゃめちゃ早いぞ！ってなってたわけですが、それから約1年後の今、管理ページの動作はダッシュボード開くのに1秒、2秒、5秒、10秒と時間が速くても10秒以上はかかり、プラグインの設定ページを開くと10回に一度は522エラーだしてサーバーが落ちるのです。

さすがに時間かかる＆サーバー落ちをダブル食らうとストレスになるので、久々に高速化とメンテナンスを重い腰を上げて実行することにしました。

最初にしたのが、インターネット速度をチェックできるGoogle PageSpeed Insightsで自分のサイトの速度の点数を確認することにしました。
Google PageSpeed Insightsとはなんぞや？はこちらのホームページ表示速度とその改善方法を教えてくれるツールから確認してみてください。

LIFE-IDEAのトップページ

Google PageSpeed Insightsでトップページを調べてみました。

パソコンは82点

モバイルは怪しげの31点

パソコンは82点とまあまあの点数でしたが、モバイルはアウトです。
1年前に撮ったGoogle PageSpeed Insightsの結果ないかなと探していたら見つけました。

72点

62点

1年前とは違いデザインも書き方も変わっており(そこにちょこっとプラグイン追加)点数も変わりますが、さすがに当時の半分以下まで下がっているのはGoogle様に怒られてしまいそうです。

パソコン82点でモバイル32点なら、「まだ大丈夫か」ということでこのときはまだ放置するか～の方に気持ちは傾いていました。しかし次のとあることで気持ちは反対に。

5点

LIFE-IDEAで一番アクセスがあるオンラインゲームのイルーナ戦記の記事「イルーナ戦記　美女、ビショップの装備やステータス振り方編」この記事は半年前からずっとランクの上位に入っていました。

今もサイドバーにある人気記事ランキングに載っているのではないでしょうか。
この記事がもっとも見られているのでとりあえずGoogleの点数を図っておこうと思った結果。

5点

パソコンも危ういものでした

これはいかんと思い。せっかくの一番アクセスされているページがGoogle様に追い出されるのはきついので改善に重い腰を上げました。

重い処理が落ちる原因から調べる

LIFE-IDEAの管理ページはメディアページやプラグインのページを開くと約10回に１度、Cloud Flareサイトが開いて522エラーで表示されないことがありました。

時間帯もあるのですがだいたい深夜にエラーが頻繁にありました。

高速化するにはプラグインの設定やキャッシュの設定をいじるので先にサーバーが522エラーを出さないように対策をしてみます。

Cloud Flareはサイトを高速化するための技術の一つ「CDN」を提供するサービスサイトです。
CDNとは、こちらのページがよくわかります。専門的な内容なのでもしわからなくてもそういうモノだとおもってくれれば大丈夫です。
参照URL：第１回ＣＤＮの仕組み（CDNはどんな技術で何が出来るのか）

実は522エラーが出ていてもレンタルサーバーからサーバー不都合などの連絡は来ませんし、FTP(filezilla)も普通に接続できます。
しかしCloud Flareは自分のサーバーに問題があるように表示されます。522の対処方法を調べてみると、同じような症状を持つ方がいました。

彼らは、プラグインやキャッシュなどを無効化にするなど調べてみても何もわからなかったけど
Cloud Flareを辞めると改善された！522エラーが無くなった！という報告がある一方ページ速度が落ちたという方もいました。

サーバーダウンを取るか、ページ速度を取るかという究極の選択。
僕はページ速度を選びました。

表示が遅くても待ってくれる人はいるので、表示されないよりは表示されたほうがいいかなと思いました。そういうことでまず最初にCloud Flareを停止してみます。

CLOUD FLAREのやめ方

１年前にCloud Flareを登録して設定したので当時の設定方法なんて覚えていません。
なので調べて簡単に説明してみます。

とても簡単でした。ドメインの管理サーバーにあるネームを元に戻すだけ。

ドメインに設定されているCLOUD FLAREのネームを削除します。
そしてLIFE-IDEAはレンタルサーバー「ミニバード」を利用しているのでns1.minibird.jp、ns2.minibird.jp、ns3.minibird.jpの３つを設置、変更します。

とても簡単にできました。但し、ネームを変更した後、数分は管理ページは触らない方がいいかもしれません。
この記事を書いているときにネーム変更したのでメディアの表示が調子悪くなりました。

ネーム変更後はCloud Flare側で自分のサイトを削除しておくと良いでしょう。今後続ける予定であればそのままおいても問題はないかと。
消し方はCLOUD FLAREにアクセスし、ログインします。

そのあと表示されるページにある「Advanced」という文字を探してクリックしてみてください。GoogleChrome使用の方でGoogle翻訳を利用している方は「上級」です。

そのあと、ピンク色で丸がついているところの「DELETE」をクリックすると消えるはずです。

CLOUD FLAREを止めたのでスピードが下がる人もそのままの人もいますので、うちのサイトは現状どうなったのか？チェックしてみます。

Google様は厳しかった。

パソコンも。

初めて見ました0点。
サーバーエラーを出す原因を持ってたCloud Flareを止めたのでGoogleが出す改善点を改善していきます。

いくつかの改善点

修正が必要

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

修正を考慮

表示可能コンテンツの優先順位を決定する
サーバーの応答時間を短縮する
ブラウザのキャッシュを活用する
javascriptを縮小する
cssを縮小する

最初に修正が必要な改善策をしていきます。

画像を最適化する

画像を圧縮する、画像のリサイズをすることで改善されるそうです。
ここで５点と０点を出したページ「イルーナ戦記　美女、ビショップの装備やステータス振り方編」に投稿している画像１枚１枚がスマホのスクリーンショットのサイズで表示されていました。つまりリサイズせずに投稿したので幅2392px高さ1493pxのサイズでした。

このサイトは写真特化サイトやギャラリーサイトではないのでそこまでのサイズは必要ありません。

WordPressの場合、メディアから画像を記事に追加するときにサイズを指定することができます。

そこからサムネイルか中サイズ、もしくは大サイズを選んで画像張り替えるだけで十分に最適化はされますが、設定からアクセスできるメディアの設定がデフォルトのままや最適なサイズでなければ効果は減少します。

効果を十分に発揮するためにもLIFE-IDEAは以下のことをしました。

メディアの画像サイズの設定
プラグイン(Regenerate Thumbnails)の使用で画像サムネイル再生成
プラグイン(Ewww Image optomizer)の使用で画像の最適化
ページにある画像の変更

難しいこと言っているように見えますが実はとても簡単です。
使用するのはプラグイン「EWWW Image Optimizer」「Regenerate Thumbnails」の２つとWordPressサイバーバーにある設定からアクセスできるメディア設定です。

１，メディア設定

一番最初に「メディア設定」から設定していきます。

まず最初に「設定」→「メディア」を開き、画像のサイズを設定します。
サムネイルサイズ、中サイズ、大サイズと分かれており、写真をアップロードすると自動的にオリジナルとは別にサムネイルサイズ、中サイズ、大サイズと３枚生成されます。

デフォルトの状態のメディア設定です。

サムネイルサイズは、今回はデフォルトのままで中サイズと大サイズの値を変更します。
先に大サイズから変更します。

写真といえばギャラリーサイトや写真をメインにしたサイトでなければ、自分のサイトの写真を表示させる範囲を超える写真を載せても意味はありません。
表示範囲を超えるサイズで掲載するとGoogleから画像の最適化をしなさいと注意されます。

もしプラグインなどで通常の大きさから少し大きく画像を出す方法もあるのでその場合は少し大きめのサイズを想定してください。

まず幅はこのLIFE-IDEAのコンテンツエリアの幅を計測してみます。
スタイルエディタ(CSS)を見るのが一番ですが以下の方法はCSSの見方がわからない人でも大丈夫です。
Google ChromeかOperaで自分のサイトを開き、右クリックで「検証」というのが一番下にあると思うのでそれを開いてみてください

写真を表示させる場所を左下の枠１番のところから探します。(このサイトだと両方向き矢印で指している部分が写真を表示させる範囲です。)
探してクリックすると２番目ところに現在の幅のサイズが表示されます。
※もっといい方法があるかもしれません。

２番目の数字非常に見えにくいですが、横幅は728pxと表示されています。
この728pxは当サイトで最大の横幅サイズになります。

次に高さですがこれは自分の好みで設定してください。設定しなくても一応は大丈夫です。

LIFE-IDEAは高さの限度を500pxにしました。
理由はスマホのアプリを紹介するときにスクリーンショットを取るのですがそのスクリーンショットの高さがとても高くページ１画面分占領されることがあるので高さの限度をつけておきます。

これで幅728px と　高さ 500pxと決まりこれを大サイズに設定します、
次に中サイズですが、728pxよりも少ない数字で自分の好みの大中小という感覚で設定をします。

LIFE-IDEAでは桁が良い数字幅500pxにしました。その場合比例させるように計算をして高さ343pxにします
逆に正方形でもいいアイデアですよ。比例の計算ができなくてもGoogle検索で「比例　計算」とでも調べるとツールがでてきます。

サイズの設定が終わったら「アップロードしたファイルを年月ベースのフォルダに整理」にはチェックをいれておき保存します

２, Regenerate Thumbnails

次にプラグイン「Regenerate Thumbnails」を使います。

プラグイン新規ページから「Regenerate Thumbnails」を検索してインストールしてください。
詳しい初心者向けのWordPressプラグインの導入方法はこちら。

Regenerate Thumbnails有効化したあと、「ツール」、「regen.Thumbnails」と進みます。

そして「すべてのサムネイルを生成する」をクリックします。あとは自動的にサムネイルが作成されます。
画像がたくさんあるとかなり時間がかかるので余裕があるときにしたほうが良いでしょう。

３,Ewww Image optomizer

再生成完了した後はもう一つのプラグイン「Ewww Image optomizer」の設定に入ります。

プラグイン新規ページから「Ewww Image optomizer」を検索してインストールしてください。
詳しい初心者向けのWordPressプラグインの導入方法はこちら。

Ewww Image optomizerでやってもらうことは、「最適化」です。

最適化は管理ページのサイドバーにある「メディア」をクリックし「一括最適化」、「スキャン」、「最適化」をしてみます。

EWWWプラグインは実行させるとサーバーにかなり負担がかかる作業なのでサーバーダウンのことを考えて人が少ない時間帯に行うとよいでしょう。
また平気で数時間かかることもありますので注意を。

最適化がすべて終わったら次は公開済みの画像が掲載されている記事の画像リンクを手動で変更していきます。

４,手動で画像のリンクを変更

自動で画像のリンクを一括で安全に変更できる情報を募集しています

画像の最適なサイズに画像の圧縮最適化を自動でしたあとは~~地獄の~~手動で画像のリンクを変更していきます。
今までに公開した記事すべての画像のリンクを張り替えなければなりません。これが一番大変な作業になりますね。

変更方法は以下の通り。

今回はイルーナ戦記　美女、ビショップの装備やステータス振り方編ページの点数を上げるのが目的なのでこの記事のみ変更していきます。(この記事公開後、他の記事を一人でポチポチと変更していきます)

この作業は画像の最適化をした投稿済みの記事にある画像のみで、新しくアップロードした画像などは自動的にリサイズし最適化してくれるので今回の1回限りです。大変なのは1回だけです。

これで画像の最適化はすべて終わりました。修正が必要な項目２つのうち１つは終わりです。
さて次は修正がかなり困難と有名な必要修正項目です。有名なサイトでも完全に修正はできていないという情報はたくさんありますので修正できなくても大丈夫です。（当サイトも含む）

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

スマホの表示速度改善案に出やすい必要な修正項目の一つです。

スクロールせずに見えるコンテンツのレンダリングをブロックしているjavascript/CSSを排除する。この意味を理解出来ていない方が以外とたくさんいるので簡単に説明しますと

スマホであなたのサイトが最初に表示される画面を表示させるのに必要ないコードは後に表示させよ。つまりフッター専用のcssやコンテンツの下の方に使うjavascriptやcssは最初に読み込んではいけません。後から読み込ませてくださいということです

自作テーマで運営している人なら大丈夫ですが有料テーマや無料テーマだと自分でカスタマイズをする必要がありHTMLやCSS関連の少々知識も必要なので少し大変かもしれません
今回の改善方法はGoogleがいくつかの改善策を出しておりそこに僕からのアドバイスを混ぜてみます。

Javascript

Javascriptの対策として、Googleが推奨されているのは以下の２点です

小さなJavaScriptをインライン化する
JavaScript の読み込みを遅らせる

こちらの「レンダリングを妨げる JavaScript を削除する」ページから確認できます。

そこに僕からのアドバイスとして以下の２点を。

JavaScript は body最下部にインラインで記述する
プラグインの停止

使用回数や使用していないプラグインは停止か削除する

使用回数が少ない、または使用していないプラグインでも有効化していると
ページの読み込み時にそのプラグインのjavasriptやcssも読み込まれます。

LIFE-IDEAはサイドバーにプラグインを使ってログインフォームを設置しているのですが最近調べてみると全く利用されていないことがわかりました。
標準のログインページをブックマークして直接ログインをしている方が多いことがわかったのでログインフォームを廃止しログインページへのリンクに変えました。

小さなJavaScriptをインライン化するとは、小さなコード数や少ない文字数のJavascriptはページ内に記述することです。

<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

small.jsの中身は以下の一行

/* Javascript-JavaScript-javaScript */

上記のスクリプトをインライン化すると以下のようになります

<html>
  <head>
    <script type="text/javascript">
      /* Javascript-JavaScript-javaScript */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

このインライン化ですが、HTMLのの上に設置したほうが良いです。
ただし最後に読ませることで問題がおきるJavascriptもあるので注意しましょう。

２つ目のJavaScript の読み込みを遅らせるとはHTMLのタグ async を使うこと。例は以下コード。

<script async src="my.js">

HTMLのタグ asyncとはまとめると「非同期で読み込み、読み込み終わり次第に実行します」。そのためスクリプト言語であるJavacriptにはすごく効果があります。
ただしJavaScript リソースで document.write を使用している場合は別の方法で使用するように変更することをおすすめします。

CSS

CSSの対策として、Googleが推奨されているのは以下の３点です

CSSインライン化する
大きなデータ URI をインライン化しない
CSS 属性をインライン化しない

CSSインライン化とはJavascriptと同様に、小さなコード数や少ない文字数のCSSはページ内に記述すると良いです。

<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="life">
      Hello, world!
    </div>
  </body>
</html>

small.cssの中身は以下の１行

.life {color: #000;}

上記のCSSをインライン化すると以下のようになります

<html>
  <head>
    <style>
      .life{color:#000;}
    </style>
    </head>
  <body>
    <div class="life">
      Hello, world!
    </div>
    <script>
  </body>
</html>

大きなデータ URI をインライン化しないとは
ブラウザは外部CSSのダウンロードと処理が完了するまで他のコンテンツは読み込まれないので最初の画面に見えない範囲のCSSのサイズが大きくなり、ページのレンダリング時間が遅くなる場合があります。

CSS 属性をインライン化しないとはHTML要素にCSSを入れてはなりません。例は以下のコード。

< p style=...>

ここまでで修正が必要な項目は終了します。

今回、僕はWordPressのプラグインのCSSや親テーマのCSSはアップデートするとリセットされますのであえて弄りません。
自分でできることはすべて(不要なプラグインの無効化など)してみました。

では点数を図ってみましょうか。

修正が必要な項目を修正するだけでこんなに変化が！

70点

88点

必要な修正をすることで効果を大きく得られます。
点数の3分の2が必要な修正な項目の部分ではないでしょうか。

スマホには修正が必要「スクロールせずに見えるコンテンツのレンダリングをブロックしているjavascript/CSSを排除する」がまだ残っているのですが、これ以上は改善できません。
理由は僕の力ではできないモノ、必要な「プラグイン」や「Google Analytics」、「AdSense」「Googleフォント」です。

あとは塵も積もれば点数も上がる、修正を考慮の部分を改善していきます。
ですが、これ見てください。

おいっ！
どこから突っ込めばいいのかわかりませんが、表示速度改善を表示するのはGoogleなのにGoogleが表示速度改善を妨げてるってどうなの。
個人がGoogleに叫んでもどうしようもありません。

Google AnalyticsやAdSenseをやめれば改善できそうですが現状では厳しいですね。

Google以外にも改善点が表示されたことを考えて一応の改善策を書いていきます。

画像を最適化する

プラグイン「EWWW Image Optimizer」を使用します。これ以外は使用することはありません。

EWWWの設定はバズ部さんが紹介しているページがとてもわかり易いです。
参照URL：EWWW Image Optimizer の設定方法と使い方

情報は古いですが今でもいくつかの設定は同じな上、現在のEWWWは日本語化されているのでこのページでも十分な情報を得られます。

サーバーの応答時間を改善する

この問題はとても複雑な要因が絡んでいるため、解決には時間がかかります。
Googleが改善方法を紹介しているのではそちらをご覧ください
参照URL：サーバーの応答時間を改善する

WordPressでページ表示速度を下げている大体の原因はプラグインなので、プラグインを無効にすることでサーバーの応答時間が改善されます。
一度すべてのプラグインを無効化してサーバーの応答時間を検証してみてはいかがでしょうか？

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

以下のページを参照しました。.htaccessに以下のコードを導入すると解決します。
Googleの提供するPageSpeed Insightsを参考にして、Webサイトを高速化したときにやったこと

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css “access plus 15 days”
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”
ExpiresByType application/x-javascript “access plus 10 days”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType application/javascript “access plus 1 month”
ExpiresByType application/x-javascript “access plus 1 month”
ExpiresByType text/js “access plus 1 month”
ExpiresByType text/javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
</ifModule>

HTML,CSS,JavaScriptを縮小する

プラグイン「Head Cleaner」を利用します。

プラグイン新規ページから「Head Cleaner」を検索してインストールしてください。
詳しい初心者向けのWordPressプラグインの導入方法はこちら。

EWWWの設定はこちらもバズ部さんが紹介しているページがとてもわかり易いです。
参照URL：Head Cleaner の最も理想的な設定方法

ただしこのプラグインを使用してサイトの表示がおかしくなった、されなくなったという報告もありますのでご注意ください。
もしこのプラグインを使用して効果がなかった場合、自分で手動で縮小することをおすすめします。

手動の場合は以下のサイトを利用します。
javascriptとcssは日本語のサイトなので使い方もすぐにわかります。

Javascript

JS Minifier (JavaScriptの圧縮)

CSS

CSS Minifier (スタイルシートの圧縮)

HTML

英語サイトになりますが、老舗サイトで安定をしており安心はできます。
Compress HTML

使い方は以下の通り。

まとめ

一つ一つ改善していくことは「Googleにも認められ検索結果の表示されやすく」なります。
そしてユーザーも快適なページ閲覧によりリピーター様が付きやすくアクセスアップにもつながります。

人気の記事の点数5点を0点にして、70点にする。そんな記事の内容でした。
最終的には100点にしたかったのですがどうやら調べているとWordPressはWordPressの特性上、100点にすることはとても厳しいものなのでなるべく高得点を取るようにした方が良いと言われています。

またGoogle PageSpeed Insightsでトップページの点数がサイト全体の点数だと思ってはなりません。忘れがちですがトップページだけではなく記事ページの一つ一つを確認することも大事です。
ページ一つ一つの確認方法はGoogleAnalyticsを開き「行動」、「サイト速度」「ページ速度」へとアクセスすると素早く確認ができます。

カテゴリー

WordPressを使いGoogle PageSpeed Insightsで5点出して焦ったので改善方法を書いて直していく

LIFE-IDEAのトップページ

5点

重い処理が落ちる原因から調べる

CLOUD FLAREのやめ方

いくつかの改善点

画像を最適化する

１，メディア設定

２, Regenerate Thumbnails

３,Ewww Image optomizer

４,手動で画像のリンクを変更

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

Javascript

CSS

修正が必要な項目を修正するだけでこんなに変化が！

画像を最適化する

サーバーの応答時間を改善する

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

HTML,CSS,JavaScriptを縮小する

Javascript

CSS

HTML

まとめ

カテゴリー

LIFE-IDEAとは？