Wordpressサイトの高速化チューニングをしました。 高速化というよりもGoogleのPageSpeed Insights対策と言った方が正しいかもしれません・・・w
昨今はインフラの整備が進み、Webページを閲覧していても遅いと感じる事は殆どなくなりましたが、高速化できるなら高速化したほうがユーザーにやさしいサイトと言えます。

今回のミッション

• PageSpeed Insightsでモバイル、パソコン共にスコアを65/100以上にする
• レスポンシブでパソコンとスマートフォンに対応する
• スマートフォンはRetinaディスプレイに対応する

といった感じのデザインリニューアル案件です。
ちなみにリニューアル前のスコアはモバイル47/100パソコン57/100です。
Retinaディスプレイ対応って事はリニューアル前より画像サイズが大きくなるのが懸念点です。

リニューアル前の問題点

• 圧縮を有効にする
• ブラウザのキャッシュを活用する
• スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSS を排除する
• 画像を最適化する
• サーバーの応答時間を短縮する
• HTML を縮小する
• JavaScript を縮小する
• CSS を縮小する

圧縮を有効にする・JavaScript を縮小する

サーバーによりできる事、できない事があります。今回は「さくらサーバー」でしたので予め、gzipファイルに圧縮し.htaccessに以下を記入しgzipを読みにいかせました。

html側の呼び出しを変更する必要はありません。以下の様に記述していれば対応しているブラウザではjquery-1.10.2.min.js.gzを読みにいきます。

モダンブラウザでgzipを読めないブラウザは無いとは思いますが僕の環境での検証では、Android2系でgzを読みにいっていませんでした。ファイルの圧縮にはYUI Compressorを使いました。 YUI Compressorはファイルを縮小してくれた上で圧縮してくれます。便利です。

YUI Compressor

ブラウザのキャッシュを活用する

未対策です。今回は対応しません。

スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSS を排除する

全ての要素を削除する事はできませんので、できる範囲で対策します。CSSファイルはheadに残し、jsファイルは影響の無い範囲でbodyの閉じタグの直上に記述します。今回はアナリティクスタグ以外は全て移動できましたので効果が大きかったです。

画像を最適化する

以前ご紹介したImageOptimでロスレス圧縮しました。

サーバーの応答時間を短縮する

今回は指定のサーバーなので対策できず。

HTML を縮小する

インデントを解除しHTMLを縮小

CSS を縮小する

sassの設定でcssを縮小します。

以上の対策で、モバイル67/100パソコン75/100になり増した！ギリですw

レスポンシブでPCとスマホのみの場合の注意点

今回レスポンシブで初めてスマホとPCのみの対応をしたのですが、タブレットで崩れてしまいました。原因はoverflow: hidden;です。 overflow: hidden;の箇所の表示がパッツリときれていました。流石にすぐにoverflow: hidden;が原因だと気付いたので、すぐに修正できましたが、今後スマホとPCだけのレスポンシブ案件制作時には注意が必要です。

今回の教訓はAndroid2系はgz読まないとoverflow: hidden;の多用は禁物の２点です