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

WordPress

2015年1月9日

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

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で動いているものはエラーが生じる可能性があります。

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

この記事をシェアして頂けると嬉しいです

LINEで送る
Pocket

この記事に対するあなたの評価をお教え下さい

星印をクリックして5段階評価で、この記事に対する、あなたの評価をお教え下さい。

ヒドイイマイチ普通良い凄く良い
Loading...

Webサイトのターゲット像を明確にする【ペルソナ作成シート】

ペルソナ作成シート

あなたのWebマーケティングをよりレベルアップさせよう!

Webサイトや企業ブログ、SNSであなたが相手にするのはどんな人か?それを明確にするための「ペルソナ作成シート」を無料でプレゼントいたします。

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

友だち追加

あなたにオススメする記事

この記事と同じカテゴリーの記事

この記事を書いた人

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

コメント

  •  Web担当者のための勉強会
  • ソーシャルメディア活用チェックシートのダウンロード
  • ペルソナ作成シートのダウンロード
  • @webmaster_note
  • Instagram
  • ほしいものリスト
  • 読みたい本リスト

最新記事一覧

ピックアップ記事一覧

カテゴリー

人気記事ランキング

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

本日の人気記事

週間の人気記事

月間の人気記事

殿堂の人気記事