この記事を読むのに必要な時間は約 28 分です。
もくじ
サイトを最適化する- WordPress&IIS
※この記事はIIS7.5にWordPressを入れて作ったサイトを最適化するという内容です。
一般にサイトを評価する基準として、ページがいかに早く開くか？=どれだけ軽いか？ということが重要視されます。
軽く作るにはテキストで白黒の文字だけのページが勿論一番早くなりますが、利便性を考えると画像や色などの装飾はある程度必要です。
GoogleのPageSpeed Insights を使うとページを細かく分析し、改善点を挙げてくれます。 例えば、このブログでよく見られているページ(日平均600Hit)のレポートを見てみます。 まず、モバイルでのレポート
速度が38/100となっていて、かなり修正が必要と出ています。
次にパソコンでのレポート
こちらも45/100と出ていて修正が必要ですね。
このPageSpeed Insights の凄いところは、詳細に修正ポイントを列挙してくれるところです。 このページは、以下の3点をおもに指摘されていました。
それぞれの詳細レポートです。
1.画像を最適化する
画像に適切なフォーマットと圧縮を選ぶことで、データ サイズを大きく削減できます。 次の画像を最適化すると、サイズを 529.3 KB（77%）削減できます。
テーマ(Simplicity2)で自サイトのカードを有効にするとこのページのデザインが崩れることがわかったので以下のコードでの自サイトのURLは(URL)に変更しました。
URL/images/2011/12/image.jpeg を圧縮してサイズを変更すると 143.3 KB（97%）削減できます。 URL/images/2013/12/IMG_4197.jpg を圧縮してサイズを変更すると 101.5 KB（97%）削減できます。 URL/images/2012/08/ultraS1.jpg を圧縮してサイズを変更すると 95 KB（97%）削減できます。 URL/images/2015/02/priori2.png を圧縮してサイズを変更すると 65.9 KB（82%）削減できます。 URL/…s/wordpress-popular-posts/4825-36x36.jpg をロスレス圧縮すると 24.7 KB（95%）削減できます。 URL/…log/images/2013/01/IMG_0553-225x3001.jpg を圧縮してサイズを変更すると 20.7 KB（87%）削減できます。 URL/…s/wordpress-popular-posts/7773-36x36.jpg をロスレス圧縮すると 17.8 KB（94%）削減できます。 URL/…blog/images/2012/12/1356938625660_1.jpeg を圧縮してサイズを変更すると 14.9 KB（86%）削減できます。 URL/…/images/2012/12/image-e1356044422291.png をロスレス圧縮すると 14.3 KB（33%）削減できます。 URL/images/2013/04/dengen_thumb1.jpg を圧縮してサイズを変更すると 11.6 KB（80%）削減できます。 URL/images/2012/10/iOS6.jpg を圧縮してサイズを変更すると 10.8 KB（83%）削減できます。 URL/…log/images/2012/12/onryoubar-199x300.gif をロスレス圧縮すると 3.9 KB（12%）削減できます。 URL/…1&si_form_id=com&prefix=Fs450R2Wzculkapc をロスレス圧縮すると 2.1 KB（43%）削減できます。 URL/images/etc/triangle1.gif をロスレス圧縮すると 720 バイト（86%）削減できます。 URL/images/2012/09/ios6-5.jpg をロスレス圧縮すると 635 バイト（9%）削減できます。
2.サーバーの応答時間を短縮する
3.ブラウザのキャッシュを活用する
静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。
URL/images/2011/12/image.jpeg（有効期限が指定されていません） URL/images/2012/01/line1.png（有効期限が指定されていません） URL/…blog/images/2012/02/img_rfc1-120x120.png（有効期限が指定されていません） URL/images/2012/08/ultraS1.jpg（有効期限が指定されていません） URL/images/2012/09/ios6-5.jpg（有効期限が指定されていません） URL/images/2012/10/iOS6.jpg（有効期限が指定されていません） URL/…blog/images/2012/12/1356938625660_1.jpeg（有効期限が指定されていません） URL/…08047553cedb34daa9b1d7ab2a3-150x1501.jpg（有効期限が指定されていません） URL/…/images/2012/12/image-e1356044422291.png（有効期限が指定されていません） URL/images/2012/12/iphone_oz.png（有効期限が指定されていません） URL/…log/images/2012/12/onryoubar-199x300.gif（有効期限が指定されていません） URL/…log/images/2013/01/IMG_0553-225x3001.jpg（有効期限が指定されていません） URL/images/2013/04/dengen_thumb1.jpg（有効期限が指定されていません） URL/images/2013/12/IMG_4197.jpg（有効期限が指定されていません） URL/images/2015/02/priori2.png（有効期限が指定されていません） URL/…s/wordpress-popular-posts/2071-36x36.jpg（有効期限が指定されていません） URL/…s/wordpress-popular-posts/2685-36x36.png（有効期限が指定されていません） URL/…s/wordpress-popular-posts/3708-36x36.gif（有効期限が指定されていません） URL/…s/wordpress-popular-posts/4432-36x36.png（有効期限が指定されていません） URL/…s/wordpress-popular-posts/4825-36x36.jpg（有効期限が指定されていません） URL/…s/wordpress-popular-posts/5484-36x36.png（有効期限が指定されていません） URL/…s/wordpress-popular-posts/7773-36x36.jpg（有効期限が指定されていません） URL/…es/wordpress-popular-posts/778-36x36.png（有効期限が指定されていません） URL/…s/wordpress-popular-posts/7838-36x36.png（有効期限が指定されていません） URL/…es/wordpress-popular-posts/844-36x36.png（有効期限が指定されていません） URL/…y-WP-Emoji2-d1a3479/images/confident.gif（有効期限が指定されていません） URL/…lly-WP-Emoji2-d1a3479/images/despair.gif（有効期限が指定されていません） URL/…ly-WP-Emoji2-d1a3479/images/scissors.gif（有効期限が指定されていません） URL/…Nully-WP-Emoji2-d1a3479/images/shine.gif（有効期限が指定されていません） URL/…ully-WP-Emoji2-d1a3479/images/wobbly.gif（有効期限が指定されていません） URL/…ontent/plugins/count-per-day/counter.css（有効期限が指定されていません） URL/…ontent/plugins/expand-morelink/expand.js（有効期限が指定されていません） URL/…ges-lazyload-and-slideshow/blank_1x1.gif（有効期限が指定されていません） URL/…lazyload-and-slideshow/blank_250x250.gif（有効期限が指定されていません） URL/… 4.1.13/4.1.13/graphics/loader.white.gif（有効期限が指定されていません） URL/…1.13/graphics/outlines/rounded-white.png（有効期限が指定されていません） URL/…slide 4.1.13/4.1.13/graphics/zoomout.cur（有効期限が指定されていません） URL/…/4.1.13/highslide-with-gallery.packed.js（有効期限が指定されていません） URL/…ts/highslide 4.1.13/4.1.13/highslide.css（有効期限が指定されていません） URL/…mages-lazyload-and-slideshow/loading.gif（有効期限が指定されていません） URL/…for-wordpress/captcha/images/refresh.png（有効期限が指定されていません） URL/…ent/plugins/single-post-widget/style.css（有効期限が指定されていません） URL/…log/wp-content/plugins/wp-note/style.css（有効期限が指定されていません） URL/…tent/plugins/wp-polls/images/loading.gif（有効期限が指定されていません） URL/…tent/plugins/wp-to-top/css/wp-to-top.css（有効期限が指定されていません） URL/…uch/resources/icons/elegant/Bookmark.png（有効期限が指定されていません） URL/…wptouch/resources/icons/elegant/Home.png（有効期限が指定されていません） URL/…ptouch/resources/icons/elegant/Paper.png（有効期限が指定されていません） URL/…ptouch/resources/icons/elegant/Photo.png（有効期限が指定されていません） URL/…8eee087452977f2dcb78b31a29836ac3dbce1.js（有効期限が指定されていません） URL/…ouch-data/icons/smallicons/briefcase.png（有効期限が指定されていません） URL/wp-includes/js/inall.js（有効期限が指定されていません） URL//widget.zenback.jp/_p/js/jquery.min.js（有効期限が指定されていません）
というわけで
1.画像を最適化する」
とりあえず、これが一番に問題です。 
Google先生が言うには、
画像圧縮ツールを使用する
画像の品質に影響を与えずに JPEG や PNG ファイルに対して高度なロスレス圧縮を実行するツールがいくつか提供されています。JPEG では、jpegtran または jpegoptim（Linux のみ。–strip-all オプションを指定して実行します）をおすすめします。PNG では OptiPNG または PNGOUT をおすすめします。
とのことです。
ブログツールWord Pressの場合、選択肢が2個あります。
A)個別の圧縮ツールを使用する
B)プラグインを活用する
まずは、「A)個別の圧縮ツール」を使用してみます。
jpegですが、私のサーバーはIISなので必然的にjpegtranになりますね。
linuxならコマンドから簡単にディレクトリごと指定して画像を圧縮出来るのですが、Windowsでは無理なので、どうしようかと探していたら見つかりました。
→ここのo6asanさん←が提供してくれているbatファイルをお借りすることにしました。
使い方は簡単で、jpegtranのフォルダに作ったbatファイル上に圧縮したいjpegファイルをドラッグ&ドロップすればOKです。
o6asanさんでは100個くらいまでを推奨していますが100以上でもなんとかいけそうです。
まず、画像フォルダのjpegファイルをまとめて「jpegtranフォルダ」へドラッグ
狙いを定めて「jpegtran.bat」へドロップ
するとコマンドプロンプトが立ち上がって処理を開始。
一瞬にして処理終了。(120個超のファイル)
次にpingの処理。
win系であるかな？と探してみたら→ここにPNGGauntlet←というのがありました。
OptiPNGも試したのですが、こっちのほうが処理できるファイル量が多いですね。
GUIで動くのでwin使いにはお手軽ですね。
150個くらいまとめてやったのですが、5分くらいかけてなんとかサイズ圧縮できましたが、処理中は上のjpeg処理に比べてかなりCPUを喰います。
使い方は、PNGGauntletを立ち上げ 上のjpegの処理と同様にpngファイルをまとめてドラッグ&ドロップ
①Overwrite Original Filesにチェック (元のファイルに上書きします)
②Optimizeをクリック
処理実行中は上の画像のように進行状況がわかります。
処理数、圧縮率、経過時間が表示されます。
Tools→optionでいろいろ設定変更できますが、Defaultで問題ないでしょう。
だいたい15%から75%くらいまで自動的に圧縮してくれます。
上のjpegもpingもオリジナルを残したければ、コピーをとって置いたほうがよいでしょう。
全て「上書き処理」されます。
B)プラグインを活用する
世界中で使われているword pressには用途に応じたプラグインがあります。
ここでは、多くのサイトが紹介している「EWWW
Image Optimizer」を使用します。
WordPress EWWW Image Optimizerは、画像ファイルを圧縮します。
使用されているツールはjpegtran、jpegmini、optipng、pngout、pngquant、gifsicle、およびGD、そしてImageMagick。GDとImageMagickはサーバーにインストールしてあることが必要です。
Winの場合、Pathを通すことも必要です。 設定は全てDefaultでOKです。
以下は「日本語化」後の表示での説明です。 インストール後、プラグインの設定で以下の矢印の「Expand」を開くと無事にインストールされているか確認できます。
足りないものは 「none」の表示で注意が出ます。
無事にインストールされていれば、「インストールされています」「有効」となります。 noneの表示がある場合、完全に動作しませんのでphpの設定見直し、Imagemagickのインストール等が必要です。
ここでは、詳細は省きます。
上の個別のツールで試したjpegtran、optipngもパック化されており、gifも扱えることから非常に優秀なツールです。 作者さんに感謝します。
上でnoneと表示された足りないものをインストール後、管理画面のメディアにBulk Optimizeが追加されるので、
これを選んでStart Optimizingをクリックすると自動でメディアファイルを最適化します。
進行中はこのように処理状況が見られます。
時間はサーバーの処理能力や画像の大きさ、種類、数によって変化すると思いますが、うちのサーバーは1000のファイルを処理するのに3時間くらい掛かりました。
(どうやら私の環境ですとgifの処理でエラーしているようです。
gifsicleを無効にして対応しました。)
上の個別処理に比べると、利便性は断然、こちらのほうがいいですが、導入時は今までサーバーにあげていたものを一度に処理するため、時間が掛かりますね。
導入後は、記事の投稿時に画像を自動的に圧縮してくれるため、一度に処理する数は減るものと思われます。 しかし、こんな便利なものが無料とは・・・
WordPress、恐るべしです。 これでGoogle先生から、画像についての警告はなくなるでしょう。
2.サーバーの応答時間を短縮する
これはWordPressでは結構重要な問題であり、サーバーの設定やサーバーの稼働率、サーバーの基本的な性能差に依存する為、改善するには設定云々よりも早いサーバーに乗り換えたほうが賢明です。
私は自鯖(自宅サーバー)なのであえて以下のように見直しました。
1.MySQLを5.7へバージョンアップ。
これはMySQLのデータベース移行を伴い時間がかかります。データ損失に最大の注意を払いました。また、5.1から一気に5.7へは移行できず、ステップを踏んだため何日も格闘しました。(￣ー￣; ヒヤリ
2.PHPを5.4から7.1にバージョンアップ。
これもかなり有効でした。OpCacheとWinCacheで体感できるくらい早くなりました。
3.HDDをSSDに交換。
これがなんといっても一番効きましたしお金もかかりました。
[amazonjs asin=”B077PPN5NN” locale=”JP” title=”Crucial SSD 500GB 7mm / 2.5インチ MX500シリーズ SATA3.0 9.5mmアダプター付 CT500MX500SSD1/JP”] 4.CPUをXEONに。
これもお金がかかりましたが快適な動作になりました。
[amazonjs asin=”B004O3DFHE” locale=”JP” title=”インテル Boxed Xeon E3-1230 3.2GHz 8M LGA1155 SandyBridge BX80623E31230″]
3.ブラウザのキャッシュを活用する
Google先生が言うには 静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。
とのことですので有効期限を設定することにします。
これもIISの場合ですが「ファイル名を指定して実行」から
InetMgr.exe
で IIS マネージャーを開き
HTTP機能から HTTP応答ヘッダーを選択 共通ヘッダーの設定を選択
もともとKeep-Aliveにはチェックが入っていたのですが、期限切れのWebコンテンツを指定してなかったので、 これを「即時」「失効までの期間」「有効期限」の中から、とりあえず「失効までの期間」を選ぶことにしました。
時間(秒、分、時)、日、月で細かく設定できるようですがよくわからないので「10日間」にしてみました。
他に修正を考慮として
- ・JavaScript を縮小する
- ・CSS を縮小する
- ・HTML を縮小する
- ・圧縮を有効にする
とありましたが、js及びcssに関しては一度WPプラグインでこれに関したツールを試したところ、ページデザインが大幅に狂ってしまったので外してしまいました。
圧縮はIISで「静的なコンテンツ」「動的なコンテンツ」とも「有効」にしてありますので問題ないのですが、プラグイン等を多用していることで指摘される結果となっています。wpでは仕方がないかと思います。
他の私が管理するサイトの静的なページではこのような修正を考慮というのは指摘されていません。
URL/2012/12/iphone-power-drops-suddenly/ を圧縮すると 63.6 KB（72%）削減できます。 URL/…s/foundation/default/style.css ver=3.6.2 を圧縮すると 23.3 KB（73%）削減できます。 URL/…/4.1.13/highslide-with-gallery.packed.js を圧縮すると 19.4 KB（53%）削減できます。 URL/…ts/highslide 4.1.13/4.1.13/highslide.css を圧縮すると 17.3 KB（83%）削減できます。 URL/…ighter2/styles/shThemeDjango.css ver=2.1 を圧縮すると 2.3 KB（66%）削減できます。 URL/…e/css/css3_light_blue_glossy.css ver=1.0 を圧縮すると 1.5 KB（76%）削減できます。 URL/…gins/wp-to-top/js/wp-to-top.js ver=4.1.1 を圧縮すると 1.5 KB（69%）削減できます。 URL/…hamazon/assets/css/hamazon.css ver=2.3.1 を圧縮すると 1.2 KB（66%）削減できます。 URL/…ontent/plugins/expand-morelink/expand.js を圧縮すると 1.2 KB（64%）削減できます。 URL/…/wp-tmkm-amazon/tmkm-amazon.css ver=2.01 を圧縮すると 975 バイト（68%）削減できます。 URL/…log/wp-content/plugins/wp-note/style.css を圧縮すると 867 バイト（60%）削減できます。 URL/…posts-plugin/style/related.css ver=4.1.1 を圧縮すると 854 バイト（65%）削減できます。 URL/t.dtscout.com/…81%25AA%25E3%2581%25A3%25E3%2581%259F%2F を圧縮すると 716 バイト（52%）削減できます。 URL/…s.css.php width=120&height=120&ver=4.2.4 を圧縮すると 556 バイト（63%）削減できます。
4.テーマの変更
思い切ってこの際、テーマも変更しました。
今までのテーマは長く使いすぎたせいでCSSや部品が乱雑になり管理も難しくなってきたからです。
定評のあるSimplicityに変更しました。
◎まとめ
ということで、PageSpeedInsightsで注意を指摘された3点＋テーマの変更
- 画像を最適化する
- サーバーの応答時間を短縮する
- ブラウザのキャッシュを活用する
- テーマの変更
を施した結果がこちらです。
結果は 87/100となり修正前より49ポイント上がりました
テーマをWpTouchからCSSで単純にモバイル表示できるSimplicityに変えたのが大きいですね。あとはプラグインを極力使わないとかしてやればもう少し早くなるのでしょうね
次いでパソコンのレポート
結果、61/100となり修正前の45/100から16ポイント改善しました
こちらは思ったほどではありませんでしたね。
(追記)
現在Wp Total CacheでモバイルもCacheしています。
そんなわけで、Google Developers Tool ページ分析ツールGoogle PageSpeed Insightsを使用して指摘された修正をいくつか試したところ、スピードが早くなりました。
WordPressは便利ですが、PHPによる動的処理のためページが重くなりがちです。
今後もマメにメンテを行いサーバーのスピード改善に努力したいと思います。
YUJIさん，早速ありがとうございます。
本当にいらぬお節介でしたね（汗）。無事，最適化できてるようでよかったです。
こちらこそ，今後もよろしくお願いいたします。