リソースを圧縮して転送サイズを減らしブログを高速化する方法(CSS、JS、WEBフォントなどの圧縮)

スピード

先日から、ちょこちょこブログの高速化をしています。

この前は、ブラウザキャッシュの設定をしてPageSpeed Insightsのスコアが少し改善しました。

ブラウザキャッシュの設定をしてWordpressブログの表示スピードを上げる方法
先日、PageSpeed Insightsというツールを知りました。 PageSpeed Insightsとは、ウェブページの...

とりあえず、今回も1つずつ改善していきたいので、今回は「リソースを圧縮」をしてブログを高速化したいと思います。

photo by Dan DeChiaro

スポンサーリンク
レクタングル(大)広告

リソースの圧縮って?

PageSpeed Insightsの提案には以下のように出ています。

圧縮を有効にする

圧縮を有効にする
gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。
次のリソースの圧縮を有効にすると、転送サイズを 234.5 KB(70%)削減できます。

サーバーでgzipやdeflateを用いて、リソース(HTML、CSS、JavaScript、XML、WEBフォントファイルなど)を圧縮してから送ってもらい、ブラウザ側で展開して表示させます。それによって、少しでも転送サイズ数を減らすことによって通信の負担を減らし速度を上げることが目的のようです。

僕のブログで言えば、234.5KB(70%)もサイズを削減できるようです。234.KBといえば、ここのちょっと上で使用している画像(圧縮を有効にすると書いてある画像)が23.8KBなので、その約10倍も削減できることになります。結構なサイズですね。

リソースを圧縮する方法

リソースを圧縮するには、.htaccessを編集する方法が一般的のようです。

「DEFLATE」というアルゴリズムを使って、サーバーから出力時にフィルターをかける設定をします。

その設定をするには、.htaccessファイルに次のように記述します。

プレーンテキスト、HTML、CSS、XML、XHTML、RSS、WEBフォントなどを圧縮しています。

.htaccessファイルは、編集に失敗するとサイトが表示されなくなることもあるので、注意してください。 エックスサーバーの場合を例にすると、「/[ドメイン]/public_html」にある.htaccessファイルを編集します。

前回のブラウザキャッシュの設定も併せて記入すると、以下のようになります。

一応、フォントにブラウザキャッシュも設定。ほとんど変更するもんでもないので、有効期限は1年間。

ブラウザキャッシュとリソース圧縮をあわせた追記部分は、以下に載せておきます。

参考 apache – Setting expire headers for fonts not working – Stack Overflow

リソース圧縮の設定前と設定後の変化

PageSpeed InsightsGTmetrixWebsite speed testで、リソースの圧縮前後のスコアを計測してみました。

PageSpeed Insights

だいたい同時刻に計測。

リソース圧縮設定前

PageSpeed Insightsリソース圧縮前

リソース圧縮設定後

PageSpeed Insightsリソース圧縮後

スコアが64→77に大幅に改善しました。

「圧縮を有効にする」の提案は完全に消えました。リソースの圧縮は完璧なようです。

GTmetrix

だいたい同時刻に計測。

リソース圧縮前

GTmetrixリソースを圧縮前

リソース圧縮後

GTmetrixリソースを圧縮後

ページスピードグレードが86%(B)→90%(A)に改善。YSlowグレードが63%(D)→67%(D)に改善しました。Aはなんか輝いて見えます。

それとともに、注目したいのは、トータルページサイズです。1.42MBだったページサイズが、1.20MBに減少しています。GoogleのPageSpeed Insightsに削減可能と提案された数字と大体同じですね。

個別指標でいうと「Compress components with gzip」が大きく改善されました。

リソース圧縮前

Compress components with gzipリソース圧縮前

リソース圧縮後

Compress components with gzipリソース圧縮後

グレードが0(F)→67(D)に大きく改善しています。残ったリソースは、Twitterなどの外部WEBツールのリソースなので、これ以上どうしょうもできそうにないです。

Website Speed Test

だいたい同時刻に計測。

リソース圧縮前

Website Speed Testリソース圧縮前

リソース圧縮後

Website Speed Testリソース圧縮後

グレードが79→81に。読み込み時間と、ページサイズも減っています。

それでも、「他のウェブサイトより遅いよ」とは言われていますが。

以下は各パフォーマンスです。

リソース圧縮前

パフォーマンスグレードリソース圧縮前

リソース圧縮後

パフォーマンスグレードリソース圧縮後

なんか減っちゃった指標もあるけれど、「Specify a Vary: Accept-Encoding header」が71→91に改善して、平均値も79→81に増えています。

まとめ

今回は、サーバー側の圧縮を用いて、転送サイズの削減をしました。

おかげで、おそらく230KB弱の転送サイズを削減し、読み込み時間も減らすことができました。個人的には、GTmetrixで初めてグレードAが取れて嬉しいです。YSlowはまだまだだけど。

少しずつですけど、ブログが改善されていくのは見ていて気持ちがいいです。次回も、何か一つ改善できたらと思います。

『リソースを圧縮して転送サイズを減らしブログを高速化する方法(CSS、JS、WEBフォントなどの圧縮)』へのコメント

  1. 名前:藤原真寿美 投稿日:2017/01/18(水) 14:29:10 ID:5808bb459

    はじめまして。いつもブログを拝見させていただいております。
    Xeory Extentionを使用し、先月ブログを開設し、カスタマイズ等しておりました。
    PagespeedInsightでのスコアがモバイル 49/PC 61ほどでしたので、改善しようとずっと調べていましたが全く改善されず途方に暮れていましたが、Yhiraさんのこちらの記事を参考にリソースの圧縮をしたところ、スコアが モバイル 72/PC 93 に一気に跳ね上がりました!
    とても役に立つ記事をアップしてくださり、本当に有難うございます。
    とても助かりました!

  2. わいひら 名前:わいひら 投稿日:2017/01/18(水) 21:52:47 ID:abb42856a

    はじめまして。
    本当だ。PageSpeed Insightsでかなりの良いスコアになっていますね。
    僕も、このコードでそこまでスコアが改善された事例は初めて見ました。
    なにはともあれ、記事がお役に立てたようでよかったです!