しま★りん.blog @ayurina

そこはかとない日常を綴るブログです。主にはゲーム、ガジェットレビュー、ドライブ記録です。

俺のブログサーバー、ngx_pagespeedちょこっと有効化してPageSpeed Insightsのスコアアップ。

time 2016/06/09

Googleのpagespeed module(Apacheだとmod_pagespeed、nginxだとngx_pagespeed)を『ちょっとだけ』有効にして、PageSpeed Insightsのスコアをちょっとだけ上げてみました。

そもそも、過去いろいろあって、pagespeed moduleはインストールはしつつ有効化はしていませんでした。結局HHVMでシンプルに速いサーバーに仕立てたほうが感触が良かったというのが、これまでの結論だったと。

ただ、Materialテーマを使うようになって、PageSpeed Insightsのスコアがもの凄く落ちたんですよね。

スクリーンショット 2016-06-08 23.01.06

理由は簡単、サムネイル画像の表示が増えて、これらのサムネイルが、専用サイズのイメージを生成しているわけでもなく、imgタグのサイズ指定で表示しているからなんです。これがPageSpeed Insightsで、「非効率な画像表示」となっていたと。サムネイルのサイズなのに、フルサイズのイメージ使ってることもあって、そりゃ、仰るとおりってところ。Materialテーマの前は、TwelveFifteen等のシンプルなテーマを使っていたので、こういう事象は無かったんですが。

これを解決する方法として、pagespeed moduleのresize_imagesフィルターがあります。このフィルタは、HTMLを解釈して、imgタグで指定されたサイズのイメージを動的に生成してしまうというものです。詳しくはPagePeedのドキュメントに書いてあります。

https://developers.google.com/speed/pagespeed/module/reference-image-optimize

さて、という訳で、pagespeed moduleを再度有効化しよう!と思うわけですが、以前、「何でもかんでも有効化して、訳がわからなくなった」苦い経験があるので、今回はターゲットを絞って、必要なものだけを有効化してみました。

pagespeed on;
pagespeed MemcachedThreads 1;
pagespeed MemcachedServers "172.17.0.1:11211";
pagespeed RewriteLevel CoreFilters;
pagespeed FileCachePath /var/cache/ngx_pagespeed_cache;
pagespeed EnableFilters trim_urls;
pagespeed CssInlineMaxBytes 32768;

「結局CoreFilters有効化してんじゃん!」ってツッコミは無視します(苦笑)。具体的に効果を期待しているのは以下のフィルタです。

  • rewrite_images(resize_images)
    • サムネイル問題への対策になるのはresize_imagesのほうなんですが、rewrite_imagesが包含していますので、CoreFilters設定で有効になります。そもそもイメージをアップデートする段階でWordpressのプラグイン(EWWW Image Optimizer)で画像は圧縮されているので、画像最適化の効果はあまり無いと想定します。
  • inline_css、inline_javascript
    • PageSpeed Insightsで「css/javascriptの配信の最適化をしろ」と言われるヤツへの対する対策です。css側はMaterialテーマのスタイルシートのサイズを目安に、サイズも指定してみました。
  • trim_urls
    • これはWordpressの癖なのかテーマの癖なのか詳しくは分かりませんが、Wordpressって普通に動かしてると、画像リンクも含め、内部リンクもすべてドメイン込みのフルのURLで指定されます。かなりうっとおしいし、データサイズも増大します(かつ、resize_imagesがフルパスだと反応しないんじゃないか?という懸念もあり)。ということで、相対パスにするためのフィルタです。

結果、スコアアップしました。

スクリーンショット 2016-06-09 0.18.01

まぁ悪くないスコアかな、と思っています。きちんとサムネイル画像のURLがpagepeed moduleの内部URIに書き換えられていることも確認できました。バッチリです。

さらに設定を詰めて・・・と行きたいところですが、これね、過去やり過ぎて、表示がおかしくなった経験があるので、あまり凝ったことはしたくないんです。様子を見ながら、また気になるところがあったら、ピンポイントでpagespeed moduleの機能は使っていきたいな、と思っています。

この辺のバランスが難しくて、面白いところです。これでサムネイルがいっぱいのテーマでも、怖くないです。

sponsored link

down

コメントする




このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください



sponsored link

アーカイブ