表示速度を上げて内部対策
サイトをリニューアルしてから1ヶ月が立ちアナリティクスやウェブマスターツールの情報も少しですが集まってきましたので内部対策をはじめようと思っています。 キーワードやディスクリプションの見直しは随時やるとして、表示速度の改善に取り組んでみました。表示速度もSEO的に関係があるとかないとか言われていますが、表示速度の向上＝ユーザビリティーの向上であることは間違いありません。 Googleが提供するサービスのPageSpeed Insightsでサイトの読み込み速度を解析しました。 最初の計測速度がモバイル57/100、パソコン68/100でした。平均値がどんなものかはわかりませんが、何となく危機感がある数値です。PageSpeed Insightsは改善の提案もしてくれますので、できることをやってみました。
- 画像を最適化する
- JavaScript を縮小する
- CSS を縮小する
この3つは出来そうなのでやってみました。ほかにも「ブロッキング リソースを排除する」「ブラウザのキャッシュを活用する」「圧縮を有効にする」という項目がありましたが ブロッキングリソースの排除は現実的に無理です。ブラウザのキャッシュの活用はもうちょっとコンテンツが落ち着いてからやります。圧縮を有効にするは.htaccessに以下を記述してみましたが、CORESERVERではどうも効いてないっぽいです。
|
1 2 3 4 5 6 7 8 9 10 |
<ifModule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file \.(html?<##>txt<##>css<##>js<##>php<##>pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </ifModule> |
一部やった対策は
- ブロッキング リソースを非同期に読み込む
画像を最適化する
一番効果がありました。当サイトの画像ファイルは全てPNGファイルなので、PNGファイルを圧縮できるアプリ「ImageOptim」をつかいました。MAC用です。 ダウンロードして解凍するだけで使えます。使い方もすごく簡単で、ファイルをドロップするだけで元の場所でそのまま圧縮してくれます。元ファイルが圧縮されることになるので念のためにバックアップをおすすめします。 ファイルサイズは結構おちますが、見た目の劣化は気になりません！当サイトの画像も一通りこのアプリで圧縮してみました。 ちなみにwindowsはPNG Gauntletがおすすめらしいです。
ImageOptimのダウンロードはこちらから
PNG Gauntletのダウンロードはこちらから
JavaScript を縮小する
packerで圧縮しました。Base62 encodeとShrink variables両方にチェックを入れて圧縮しました。Base62 encodeにチェックを入れると難読化されShrink variablesにチェックを入れると変数が縮小されます。
CSS を縮小する
cssはsass+compassでコーディングしているので、設定ファイルを変更しただけで圧縮できました。 config.rbを
|
1 2 3 4 5 6 7 |
http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "images" javascripts_dir = "js" output_style = :expanded line_comments = false |
から
|
1 2 3 4 5 6 7 |
http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "images" javascripts_dir = "js" output_style = :compressed //ここを変更 line_comments = false |
ブロッキング リソースを非同期に読み込む
最初から読み込んでおく必要の無いページのjsにasyncとdeferを書き込んで非同期にしました。 とりあえずトップページは非同期だと格好悪いので条件分岐です。
|
1 2 3 4 5 |
<?php if (is_front_page()): ?> <script src="<?php bloginfo('wpurl'); ?>/js/jquery-1.10.2.min.js"></script> <?php else: ?> <script src="<?php bloginfo('wpurl'); ?>/js/jquery-1.10.2.min.js" async defer></script> <?php endif; ?> |
結果
モバイル57/100、パソコン68/100からモバイル62/100、パソコン74/100になりました！ なんか中途半端ですがまだまだノビシロがありますので徐々にやって行きます。
- 2013年10月19日土曜日
- ：Naruhiko Wakai
comments