WEBマスターの手帳 > WEBサイト作成 > WordPress > MinifyしたらWEBページの表示速度も1秒台に!YSlow Gradeの評価もBになったよ!

WordPress

2015年1月9日

MinifyしたらWEBページの表示速度も1秒台に!YSlow Gradeの評価もBになったよ!

ID-10089458.jpg
Twitter 1 Facebook Google+ はてブ 1 Pocket チャットワーク Eight Feedly

WordPressの表示速度を高速化させるぞ第2弾!GTmetrixのYSlow Grade評価がDとよくなかったので改善しようとしたら、あっさりBまで評価が上がりました。

というわけで「[保存版]wordpressの表示速度を高速化させる為にやった5つのこと」の続きです。

スポンサードリンク

GTmetrixのYSlow GradeがD判定

24365c2583a59e7c7b7d75f2265df121.png

ご覧の通り、GTmetrixでのYSlow Grade評価が悪く、表示速度も7秒となっています。他のツールでも計測したところ、平均3秒弱ぐらいだったので、これでも良いかなと思ったのですが、やるなら徹底的に!

ということでYSlow Gradeの評価を上げるべく修繕しました。

YSlow Gradeとは

「YSlow Grade」というのはYahooのWEBサイトの表示速度を計測する「YSlow」というツールでの評価値のことです。

ちなみにGTmetrixの「Page Speed Grade」はGoogleのWEBサイトの表示速度を計測する「Page Speed」での評価値のことです。

今回の修繕でD判定からB判定までランクアップ

今回の修繕でYSlow Gradeの判定がBまで上がりました。Page Speed Gradeの評価も上がりました。表示速度も「1.95秒」と合格点。
MinifyしたらGTmetrixのYSlow Gradeの評価がDからBに大幅ランクアップ

YSlow Gradeの評価を上げるためにやったこと

まず「なぜ評価が低いのか?」を確認したところ、やはりcssやjavaScriptが評価を下げていました。そこで、ソースコードの改善を施しました。

今回もソースコードをいじるのでレイアウトが崩れたり、WPが壊れたりしないように慎重に慎重に進めました。まずは出来ることをリストアップして改修を始めたのですが、いきなり1つ目で大幅に改善しました。

Minifyを実装した

1つ目にやったのが「Minify」です。これでYSlow Gradeの評価が一気にB判定に上がりました。

MinifyというのはWEBサイトで書かれている(使われている)CSS、JavaScriptのソースコードを圧縮することです。圧縮されるのでソースコードが軽くなり、表示速度も速くなります。

W3 Total Cacheで対応

W3 Total Cacheはトラブルリスクも高いですが、多機能で役に立つプラグインですね。「Minify」を設定することができるので、アッと言う間に終わりました。
W3 Total CacheでMinifyを設定

Minify用のWPプラグイン

WEBマスターの手帳ではW3 Total Cacheを使って対応しましたが、他にも専用プラグインがあるのでご紹介しておきます。

WP Minify

その名の通りで、Minifyのためのプラグインです。
WP Minify

Head Cleaner

Head部分を最適化する為のプラグインとして有名ですね。(自分は以前に痛い目にあったので使うのを避けています)
Head Cleaner

gzip圧縮を実装した

gzip圧縮とはWEBページが持つデータを圧縮することです。圧縮することでファイルデータ量が軽くなるため、パソコンとサーバーとのデータの転送量が軽くなるため表示速度も改善します。

今回はphp出力のみを圧縮するようにしました。エックスサーバーのphp.iniの編集で「zlib.output_compression = On」にするだけなので、簡単。

gzip圧縮でCSSやJSなどの転送量を減らす方法

WordPressとキャッシュについて

いろいろと参考記事を探していたら「wordpressとキャッシュについて」の素晴らしい解説をされている記事があったので載せておきます。図解も付いていて、とてもわかりやすいです。

W3 Total Cacheの設定を通して学ぶ、WordPressを高速化するキャッシュの仕組み | OXY NOTES

JavaScriptをいじったのでエラーがでるかもしれない

例えばGoogleアナリティクスやAdsenceなどJavaScriptで動いているものはエラーが生じる可能性があります。

この投稿を書いている時点ではエラーは出ていませんが、しばらく様子をみます。表示速度の改善についても日々精進していきます。

この記事が良いと思ったらシェアしてください

Pocket

御社のターゲット像を明確にする!ペルソナ作成シート

ペルソナ作成シート

WEBマーケティングで重要なのが「相手は誰?」というターゲット像を明確にすることです。

そこでWEBサイトを訪問する人は誰?企業ブログを訪問する人は誰?SNSで繋がりたい人は誰?これらターゲット像を明確にするための「ペルソナ作成シート」を【無料】で配布しています。

WEBマスターの手帳をフォローして最新情報をゲットしよう!

ID-10089458.jpg

この記事に「いいね」と思ったらフォローしてね!


この記事を読んだ方におすすめの記事

この記事を書いた人

遠藤 聡
中小企業のWEB担当者&ソーシャルメディア担当者としてWEBサイトの管理運用から企業ブログ、Facebookページ、Twitter、YouTubeチャンネルの管理運用(企画&実施)を行なっております。 具体的なサービス内容はサービス詳細ページをご覧ください。

コメント

  • ソーシャルメディア活用チェックシートのダウンロード
  • ペルソナ作成シートのダウンロード
  • @webmaster_note
  • Instagram

最新記事一覧

あなたにオススメの記事

ピックアップ記事一覧

カテゴリー

人気記事ランキング

  • 本日
  • 週間
  • 月間
  • 殿堂

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事