WordPressでページ表示速度を改善する4つの方法

Googleは新アルゴリズムとして「スピードアップデート」を発表しましたよね。

といっても発表されたのは今年の1月なんですけどね。実際に開始されるのは7月ということで既に7月になりました。

僕もこのブログを開設してまだ1か月弱しか経ってないのですが気になってページの表示速度とやらを調べることにしました。

すると・・・とんでもない結果が待っていたのです!

7月から実施されるスピードアップデートとは

ページの読み込み速度がモバイル検索のランキングに影響を及ぼすとのことですね。

検索するユーザーは素早く知りたい情報を得たいため、スピードという要素は割と重要みたいなんですよね。

これまでも、デスクトップ検索(パソコンを使った検索)ではランキングに影響があったみたいですが今回はモバイルに対するものです。

モバイルユーザーって思っている以上に多いです。アナリティスクのデータを見ていてもスマホから訪れる人って非常に多いです。

ページ表示速度が遅いとどうなるの?

やはり検索エンジンからのイメージが悪くなる可能性がありますよね~。ほとんどの方は前もって対策を考えていたと思います。僕は今日7月に入るまでページ表示速度に関して何も意識していませんでした。

「ページの読み込みに3秒以上かかると53%のユーザーが離脱する」

というようなデータがあるぐらいですから対策しないわけにはいきませんね。

PageSpeed Insightsでこのブログのページ表示速度を調べてみた

Googleが提供している無料ツールにPageSpeed Insightsがあります。

このツールを利用すれば、デスクトップ及びモバイルのページスピードについて調べることができます。

僕は自分のブログの数値が気になり早速調べることにしました。

PageSpeed Insightsでページ表示速度を確認する

LOW!!!

LOWがどの程度の評価はこの時点で分かりませんでしたが率直に絶対低いよねって感じましたよね~・・・後ほど調べてみるとLOWは3段階評価の一番下!

Low(0~59)・・・最適化する部分がかなり多い

とのことでした。モバイルの値は47でデスクトップの値は59でした。デスクトップの値でもギリギリLOWなんかい!!!!トップページ以外でもページ速度を調べてみましたがほとんどがLOWでした。

これはちょっと気持ちが悪いのでなんとか改善したいという気持ちが芽生えました。

ページの読み込み速度を改善する

このツールの良い所は改善方法を教えてくれるところなんですよね。

僕のブログの場合

  • 圧縮を有効にする
  • 画像を最適化する
  • ブラウザのキャッシュを活用する
  • スクロールせずに見えるコンテンツのレンダリングをブロックしているJavascript/CSSを排除する
  • CSSを縮小する
  • JavaScriptを縮小する
  • HTMLを縮小する

といったように改善方法を教えてくれます。それにしてもめちゃくちゃ指摘されとるな。確かに心当たりがあります。

普段ブログを書くことばかりでスピードの事に関しては全然意識していなかったのでちょうどいいきっかけにはなりました。

サーバーはエックスサーバーを使ってるんで安定度抜群なはず。

PHPのバージョンも一応確認しましたが最新のバージョンを利用していました。

この辺は抜かりなさそうですね。

やはり上の箇条書きで書かれている部分を修正するべきでしょうね。

圧縮を有効にする

まずは圧縮を有効にします。

PageSpeed Insightsの最適化の提案

要するにサーバー側でコンテンツをgzipに圧縮するのでページの読み込み速度が速くなるとのことですね。

これを実現するには.htaccessをイジらないといけません。といってもちょっと追記するだけなんですね。幸いエックスサーバーを使っているので編集しやすいです。FTPソフトを使っている人はそちらから.htaccessを編集しましょう。

絶対にローカルにダウンロードして編集してださいね!!

何かあってからでは取り返しつかない場合もありますからね・・・

エックスサーバーを利用している場合はサーバーパネルから直接書き込むだけでOKです。

# mod_deflateを利用して Gzip圧縮

  SetOutputFilter DEFLATE

  # Mozilla4系、IE7、8の古いブラウザでは無効にする
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

  # GIF、JPEG、PNG、ICOなど圧縮済みの画像は再圧縮しない
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  # プロクシサーバが間違ったコンテンツを配布しないようにする
  Header append Vary Accept-Encoding env=!dont-vary

  # 各コンテンツを圧縮する設定
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/js
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/atom_xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-httpd-php
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-font-woff
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

このコードを末尾に追記して保存します。一応圧縮が出来ているのか確認してみます。

GIDNetworkでgzip化されているか確認する。

上のリンクで表示されたアドレスバーにURLを入力します。

GIDNetworkでgzip化されているか確認する

Web page compressedがYesになっていればOKです。

画像を最適化する

次は画像を最適化します。僕はpng画像をポンポンと投稿していました。サイズも意識せずに・・・。

ページに張り付けられている画像は当然容量が大きいと読み込む時間がかかります。ですから、画像の容量を小さくする必要がありますね。

今回は「EWWW Image Optimizer」というプラグインを使います。このプラグインは画質を劣化させることなく画像ファイルを圧縮してくれます。しかも既にアップロードした画像も圧縮することが可能なのでありがたいですね。

まずはEWWW Image Optimizerをインストールして有効化しておきます。

EWWW Image Optimizerの設定画面

「設定」→「EWWW Image Optimizer」と進むとこのような画面になります。

「基本設定」タブの中に「メタデータを削除」というチェックボックスがあります。

このチェックボックスにチェックが入っているか確認しましょう。入っていない場合はチェックを入れてください。僕の場合はインストールしたデフォルトの時点でチェックが入っていました。

EWWW Image Optimizerの設定画面2

続いて「変換設定」タブをクリック。コンバージョンリンクを非表示にチェックが入っているか確認します。ここまで設定したら「変更を保存」をクリックしましょう。

既にアップロードした画像を圧縮する

それでは実際に画像を圧縮してみます。

EWWW Image Optimizerで最適化されていない画像をスキャンする

「最適化されていない画像をスキャンする」をクリック。

EWWW Image Optimizerで画像の最適化を開始する

「最適化を開始」をクリック。しかし、1174個って!!!物凄い多い気がする。実際に横で「なぜたくさん画像があるのですか?」と聞かれているし!

EWWW Image Optimizerで画像の圧縮が完了した画面

このように表示されたら圧縮完了です。案の定この圧縮時間におよそ30分程度かかってしまいました・・・やはり放置はいけませんね!何事も先手必勝だと痛感した瞬間でした。

ほぼほぼ「png」で投稿していたのも問題ありでしたね。定期的に写真系の画像も取り入れているので場面に応じて「jpg」を使う必要があるのかも。

ちなみにブログの記事を書く際に投稿する画像のファイルサイズも圧縮された状態でアップロードされるのでとても便利になります。

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

これがちょっと小難しい内容になってきますよね。

レンダリングをブロックするjavascriptを排除してCSSの配信を最適化してあげないといけません。レンダリングはプログラムを使って画像や映像を生成することをいいます。

まずはレンダリングをスムーズにしてあげないといけません。となってくるとjqueryが問題になってきます。

jqueryはアニメーションなどに利用されることが多いjavascriptのライブラリです。

アニメーションなんて必要ない!っていう人は排除しても構わないんでしょうけど、アフィリエイトを始めたい場合は必要となることがあります。

ですから今回除去するという選択肢はないです。では、どうするか。

現在「head」内で読み込んでいるので「footer」で読み込むように設定します。headで読み込むとブラウザの表示速度に悪影響を与えてしまいます。しかしサイト表示された後だと遅くなりません。ですから、footer内でjqueryを読み込むようにします。

jqueryをfooter内で読み込む

これには子テーマの「function.php」を編集します。

// ヘッダー記載のものをフッターへ移動
function init_parent_action_child() {
remove_action(‘wp_head’,’wp_print_head_scripts’,9);
add_action(‘wp_footer’,’wp_print_head_scripts’,5);
}
add_action(‘init’,’init_parent_action_child’);

このコードをfunction.phpの下に追記すればOKです。

wordpressは子テーマのfunction.phpを読み込んだ後に親テーマのプログラムが動作しますので子テーマのfunction.phpにて親テーマを制御します。

CSS配信を最適化する

さて次はCSSを最適化します。

PageSpeedInsightsでCSSの最適化が指摘された画面

PageSpeedInsightsではこのように指摘されました。

スクロールせずに見えるコンテンツはファーストビューのことです。

ファーストビューはユーザーが最初にとあるサイトに訪れたとき目に入る部分のことを言います。

スキルアップチャレンジのトップページ

僕のトップページにアクセスしてみました。

下のほうが見切れてますよね?これがファーストビューです。これがつまり先ほど指摘されている「スクロールせずに見えるコンテンツ」という部分になります。スクロールせずにということは当然スクロールして見える部分が下に隠れていますよね。

CSSファイルではスクロールして見えるコンテンツのスタイルも含まれます。ですから、スクロールせずに見えるコンテンツ以外も読み込んでいるのでレンダリングが遅くなるわけです。

それを指摘されています。では、どうすればいいのか。

今回はプラグインに頼っちゃいます!

インラインでHTMLのheadタグにCSSを記述する方法もありますが、CSSファイルのどの部分がスクロールせずに見える場所なのか調べるのが厄介です。

ですから、今回はプラグインで対策したいと思います。

Autoptimizeで最適化する

まずはAutoptimizeというプラグインをインストールし、有効化します。

そしてAutoptimizeの設定画面に進みましょう。

場合によってはウェブサイトの表示が崩れる場合があるので、ローカル環境などで動作確認をしてから本番に実装することをオススメします。

Autoptimizeの設定画面

高度な設定を表示をクリックします。

Autoptimizeの高度な設定

CSSコードを最適化、インラインのCSSを連結、すべてのCSSをインライン化にチェックをいれます。この3つにチェックを入れたら変更を保存してキャッシュを削除をクリック。

これで設定完了です。

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

ブラウザのキャッシュを利用しましょう。

以前表示されたデータがキャッシュに残っているとそちらを利用することになるので読み込むファイルの数が減り表示速度が上がるようになります。

これによりサイトを再び訪れてくれるユーザーに対してストレスを減らすことができますね。

設定には.htaccessを編集する必要があります。

.htaccessはサーバーをコントロールするための設定ファイルのことですね。

僕はエックスサーバーを利用しているのでエックスサーバーを例に編集してみます。サーバーパネルにアクセスし、.htaccess編集と進みます。編集したいドメイン名を選択し.htaccess編集タブをクリックします。

注意!

.htaccessファイルは非常に大切なファイルです。
何かあった時のためにも最低限バックアップはとっておきましょう。

ExpiresActive On
ExpiresByType text/css “access plus 1 days”
ExpiresByType image/gif “access plus 1 weeks”
ExpiresByType image/jpeg “access plus 1 weeks”
ExpiresByType image/png “access plus 1 weeks”
ExpiresByType application/x-javascript “access plus 1 weeks”

上のコードを追記します。これでキャッシュする有効期限を指定します。

日数に関しては必要に応じて変更しましょう。

PageSpeedInsightsで更新して再び確認すると有効期限が設定されていると思います。

再びPageSpeed Insightsで分析してみた

一通り設定が完了したのでもう一度分析してもらいます。

ここまでかなりの時間を要しました。果たして結果はどうなったでしょうか!?

PageSpeed Insightsで再びページ表示速度を確認する

作業前

モバイル47 パソコン59

作業後

モバイル70 パソコン81

う~ん、これはどうなんでしょうか。

パソコンに関してはGood評価をもらえてるのでまあ問題ないと捉えていいのかな。

モバイルは及第点?

まぁそれでも元々47だったのが23プラスで70なので最適化してきた成果はでてるんじゃないでしょうか。

この辺はまた試行錯誤してGood評価してもらえるように頑張りたいですね。

まとめ

CSSやHTMLの縮小は圧縮した際に縮小されているようでPageSpeedInsightsで適用済の最適化になっていました。

とりあえずしばらくは様子見ですかね。

しかし、PegaSpeedInsightsで最初に分析を行った値には驚きました。

まぁこの評価に関しては神経質にならなくていいという意見もあるので最適化に夢中になりすぎて他の作業が億劫にならないようにしないといけませんね。

数値的にはかなり上昇してくれたのでとりあえず施策した甲斐はあったかな!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク