Webパフォーマンスの改善について

HTML・CSS

こんにちは。
モンハンでは大刀→チャージアックス→片手剣と変わった中川です。
今日はTAMのパフォーマーとして認知されるべく、パフォーマンスの改善について触れたいと思います。
　
この話をすると、どうしてもブラウザにどうやってコンテンツが表示されるか、ということに触れてしまうのですが、このブログがTips Noteというくらいなので、今回はWebページ表示のパフォーマンスアップのために最低限やっておけば捗る、ということに絞っています。
　

1.HTTPリクエストを減らす

httpリクエストが増えることで、サーバーとのやりとりが増えてしまい、表示が遅くなってしまいます。
そのため
　
・CSS Spriteを使う
・jsファイルとcssファイルを結合する

の2つの対策を行っています。
　
CSS Spriteについては、なんでもspriteにしてしまうと、1枚にした画像が大きくなってしまい余計に読み込みに時間がかかるということが起こってしまう可能性があります。
そのため個人的にはいつもタイトルやリンク先のときに使う小さいアイコンなど、一つ一つは小さいのに、数が多いものを一つにまとめています。
　
jsファイルとcssファイルについては、
　
js→grunt-contrib-concat
css→grunt-contrib-sass(scss→css)
　
を使ってひとつにまとめています。
基本的にgruntを使って自動化しています。（gulpでもできますが、僕はgulpどうも苦手でgrunt使ってます）
　
　

2.Expiresヘッダを設定する

html、css、jsファイルなどをキャッシュさせてhttpリクエストを減らします。
共通のcssや静的なページ、画像などは一度アップしてしまえば、ほぼ更新されることのないので、キャッシュさせてしまったほうが、表示される速度は早くなります。

対応方法としては、.htaccsssに

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpeg "access plus 7 days"
ExpiresByType image/png "access plus 7 days"
ExpiresByType text/css "access plus 7 days"
ExpiresByType text/javascript "access plus 7 days"
</ifModule>

このように、該当するファイルに対して、キャッシュさせる期限を指定してあげます。
この例では、画像とcss、jsに対して7日間はキャッシュさせるように、と指定しています。
　
　

3.ファイルをgzipする

ファイルのサイズを小さくして、ネットワークで送信される容量を減らし、表示に必要な時間を短くします。
これには、Appachのmod_deflateというモジュールを設定します。
(Appach1.3には、mod_gzipモジュールを使いますが、今のところそれに出会ったことはありません。)
　
対応方法としては、.htaccessに
　

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript application/javascript text/javascript
</IfModule>

　
と1行追加して、html、css、jsファイルをgzipします。
こちらを追加することで、gzipが有効になります。

また、gzipする場合、cssがソートされているほうが圧縮率は高いので、grunt-csscombを使ってソートするようにしています。
　
　

4.スタイルシートは先頭に置く

これは普段から特に意識せずにやっていました。昔から間違ってはいないようでした。
ただ、@importで一括して読み込む形式があり、こちらにするとcssの記述は1行で済むので早くなりそうな気もします。
元に自分も昔はこの方法でやっていました。
　
基本、ファイルは並行で読み込まれるのですが、@importにすると、ファイル内に書かれたcssを上から順番に読み込むことになり、結果的にcssの読み込みに時間がかかってしまいます。
なので、@importを使っても読み込みは遅くなるだけなので、やめましょう。
　
　

5.スクリプトは最後に置く

以前はよく部分に置かれているサイトを見かけましたが、これをするとスクリプト以下のコンテンツは、スクリプトが読み込まれるまで表示されないません。
　
そのため、スクリプトが重かったりファイルにエラーが入っていると、ページ全体のレンダリングとダウンロードが止まってしまうので、やめましょう。
　
　

6.JavaScriptとCSSは外部ファイル化する

インラインで書くほうが早いときもありますが、外部ファイルに書くことによってファイルがブラウザにキャッシュされるので、外部ファイルに書くほうが効果的です。
（これも今はだいたいどこでも行われているので、大丈夫でしょう。。）
　
　

7.JavaScript、cssを縮小化する、画像を圧縮する

jsファイルとcssファイルは、

js→grunt-contrib-uglify（圧縮）
css→grunt-contrib-cssmin

を使ってひとつにまとめています。

ただ、たまにクライアントさんのほうから「cssは自分たちで触って修正したい」という依頼があるので、
その場合は、共通のファイルのみをminify化しています。
　
common.css（←minify済み。こちらを触るのは制作者のみ）
page.css （←個別ページのcss。クライアントさんが触るのはこちらにしてもらう。minifyはしない。）
　
このような感じです。
なお、上記のような依頼がない場合はminifyします。

画像についても、grunt-contrib-imageminなどを使い画像のmeta情報などを削除し容量を減らします。
GUIを使う場合は
　
Win→PNGGauntlet、JPEGmini
Mac→ImageOptim、JPEGmini
　
などを使って、pngとjpegを圧縮します。
そういえばここ2年ほど、自分で担当したサイトではgifは使ってないですね。
　
　

対応策の確認

YSlowとPageSpeed Insights
を使うと、現在の評価と改善点などが表示されるので、何が対応可能かということをこちらで確認しつつ、実践していくのがいいかと思います。
　
その他には、WebPagetestでチェックして、もう少し細かく中身を見たりします。
　
上記の対策を行うとだいたい、Yslowでは「B」くらいの判定は出るかと思います。

　
　

まとめ

この作業は突き詰めていくと終わりが見えないので、どこまでを行って、目標をどこにするかを決めておかないと、本来するべき作業が蔑ろになってしまうので気をつけたいところです。
（判定でAになるに越したことはないですが、Aまで持っていくのに時間を使っても大丈夫なのか、体感速度的にはこれでも問題ないのではないか、、ということはよく考えます。）
　
画面の表示が1秒遅れるだけで、かなりのユーザーが逃げていくという調査も出ています。
プラットフォームが、通信速度がPCに比べて遅いモバイルに移りかけている今こそ、パフォーマンスに注力するということは、いつの時代になっても軽視できない問題です。
今まで注意を払っていなかったなら、一度自分の作ったサイトを見直してみるといいのではないでしょうか。
　
それでは今日はこのへんで。
次回はできれば、表示後のパフォーマンス改善について触れられたらいいなと思います。
　
以上、Performer RYOSUKEでした。