サイトのページスピードを改善するために実際にやった5つのコト
by MIYASHITA
サイトの表示スピードの改善はユーザーの使いやすさの向上だけでなく、SEOにも効果的であると言われています。
高速化のためのアプローチはフロントエンドからのものとサーバーサイドからのものがありますが、今回は主にフロントエンド側での対策を行いました。
実際にどれくらい効果があるのかを一つ一つ確認しながら対策を行いましたので、サイト表示のスピードが気になる方は是非試してみてください。
目次
- サイトのページスピードを確認する方法
- 01.CSSを圧縮する
- 02.JavaScriptを圧縮する
- 03.頻繁に読み込む画像をCSSスプライトでまとめる
- 04.画像を非可逆圧縮する
- 05.CSSやJavaScriptなどのキャッシュを設定する
- まとめ
サイトのページスピードを確認する方法
ページ速度はGoogleAnalyticsの行動＞サイトの速度＞ページ速度で一番詳細なデータを見ることが出来ます。
ブラウザ別、OS別、デバイス別に表示速度の平均がどれくらいかを知ることが出来ます。
今回はよりページスピードの改善を分かりやすくするため、Googleの提供する『PageSpeed Insights』で計測します。
当サイトの対策前の数値は以下の通り69/100です。
01.CSSを圧縮する
CSSの縮小にはいくつか方法があります。
@importを使用しない
外部ファイルとしてCSSを呼び出す@importを使用するとリクエストに時間がかかり、結果読み込みの速度が悪化します。
@import "default.css"; @import "common.css"; @import "inpage_style.css";
当サイトでは3つのCSSファイルを@importで呼び出していましたので、これを<head></head>内に直接マークアップします。
CSSファイルをまとめる
全ページで共通して読み込んでいるCSSファイルを統合します。読み込むファイル数を減らすことでHTTPリクエスト数が減り、読み込みスピードが向上します。
先程@importを取りやめたCSSファイルは共通して読み込まれていましたので、この3ファイルを統合します。
CSSファイルを圧縮する
CSSファイルの圧縮とは、CSSの記述から改行やコメントを削除したものになります。
CSSではありませんが、よく目にするのはjQueryをダウンロードした際に同梱されているjquery.min.jsというファイルではないでしょうか。これは改行やコメントなどを削除し、1行～数行にまとめたものです。ファイルが少し軽くなりますので読み込み速度の向上が期待できます。
圧縮はエディターで行えますが、膨大なCSSを圧縮するのはかなりの気力と時間を消費します。ブラウザ上でCSSを圧縮できるツールがありますので、そちらを使うのも一つの手です。
具体的には以下のように改行とコメント、スペースなどを削除し、容量を節約します。
/* 共通設定 */
body{
width: 100%;
background-color: #FFF;
}
/* header */
header{
background-color: #eee;
width: 980px;
}
↓
body{width: 100%;background-color: #FFF;}
header{background-color: #eee;width: 980px;}
↓さらに圧縮すると1行になります。
body{width: 100%;background-color: #FFF;}header{background-color: #eee;width: 980px;}
※ツールを使用しての圧縮は本来必要なスペースも削除してしまい、場合によってはCSSが効かなくなる可能性がありますので注意して下さい。
対策の結果
CSSの圧縮による対策の結果です。
僅かですが数値が向上しました。
CSSの圧縮は、改行などを無くしてしまうためメンテナンス性が著しく低下します。ですので、圧縮はアップロードの直前にするようにし、無圧縮のCSSファイルはローカルなどに保存しておきましょう。次回以降の編集は無圧縮のファイルから行えるためメンテナンス性を損なうことがなくなります。
02.JavaScriptを圧縮する
JavaScriptもCSSと同様に圧縮を行います。手順はCSSの時と同様ですので結果だけ掲載します。
こちらも僅かですが、JavaScriptの縮小もCSSと同様に数値が向上しました。こちらもメンテナンス性を考慮した上で実行して下さい。
03.画像をCSSスプライトでまとめる
CSSスプライトとは、画像を一枚のファイルにまとめCSSで表示領域を制御して表示させる技法です。1枚1枚画像を読み込むより、HTTPリクエスト数を削減することができ、読み込み時間が短縮されます。
ただ、すべての画像をCSSスプライトでまとめてしまうとメンテナンス性が悪くなってしまうため、頻繁に読み込むグローバルナビゲーションやフッターといった各ページ共通で読み込むようなものをまとめるようにしましょう。
今回は赤枠で囲われたフッターとヘッダーに使用している画像をまとめます。
CSSスプライトの具体的なやり方はコチラを参照して下さい。
→サイト表示速度の改善に期待大！CSSスプライトでナビゲーションを作ってみた
対策の結果
CSSスプライトによる対策の結果です。
リクエスト数が減ったことでサイトスピードがかなり改善されました。スマートフォンサイトの評価が黄色になりましたね。各ページごとに使用する画像も別ファイルでまとめればさらなる効果が期待できます。
04.画像を非可逆圧縮する
非可逆圧縮とは
非可逆圧縮とは、ロッシー圧縮ともいい圧縮前のデータと圧縮後のデータが完全には一致しない圧縮形式のことです。この圧縮は見た目にはほとんど変化することはありませんが、実際にはデータの欠損が発生しています。圧縮前の状態に戻すことができない、つまり可逆性がないので非可逆圧縮（または不可逆圧縮）と呼びます。
反対に圧縮前のデータと圧縮後のデータが完全に一致する圧縮形式を可逆圧縮、またはロスレス圧縮と呼びます。非可逆圧縮とは違い、データの欠損が発生しないため、いつでも圧縮前の状態に戻すことが可能です。
可逆圧縮に対応しているファイル形式はPNGとGIFで、JPEGは対応していません。JPEGの圧縮を行う場合は、非可逆圧縮にて行います。
PNG画像を圧縮する
PNG画像は可逆圧縮に対応していますが、今回はより大きな効果を期待して非可逆圧縮を行います。
TinyPNGは、見た目をほとんど変えることなく高圧縮率を実現できるWEBツールです。使い方も簡単で、圧縮したいPNG画像を枠線内にドラッグアンドドロップするだけで、あっという間に圧縮が完了します。
トータルでどれぐらい圧縮できたかも表示してくれます。2MB近かった画像が600KBまで圧縮することが出来ました。パンダも喜んでくれています。
非可逆圧縮したデータは元の状態に戻すことはできません。念の為、元のファイルはしっかりとバックアップをとっておきましょう。
JPEG画像を圧縮する
JPEG画像の圧縮は基本的にPhotoshopのWEB用に書き出しの際に調整しているので、違うアプローチから圧縮を行いたいと思います。
ImageOptimは、Mac用の画像圧縮アプリケーションです。ImageOptimは画像のメタデータを削除することで圧縮を行います。
メタデータとは、データのためのデータと呼ばれるもので、この場合は撮影日時、ISO感度、撮影場所などのExif情報を指します。このメタデータは画像を表示する際には関係ないデータですので、これらを削除することによって容量を小さくすることができます。
こちらも圧縮したいデータをドラッグアンドドロップすれば自動的に圧縮が始まります。
フォルダーごとドラッグアンドドロップすることができます。
圧縮後のサイズと圧縮率が表示されます。コピーを取ってから圧縮するわけではなく元ファイルを直接編集するので、元の状態をバックアップとして保持しておきたい場合は気をつけましょう。
対策の結果
画像の圧縮は思ったよりも効果が薄かったです。読み込み速度に大幅に影響する画像に対する対策だったので意外でした。
05.CSSやJavaScriptなどのキャッシュを設定する
CSSやJavaScript、画像などのサーバーに置いてあるデータは、キャッシュの保持期間を設定することが出来ます。あまり編集しないようなデータは毎回サーバーから読み込むのではなく、前回の閲覧時に保存されたデータを利用することでHTTPリクエストを削減することが可能です。
.htaccessへの記述
.htaccessにキャッシュをどれくらいの期間保持しておくかを設定します。
#キャッシュ設定ExpiresActive On ExpiresByType image/jpg "access 1 week" ExpiresByType image/jpeg "access 1 week" ExpiresByType image/gif "access 1 week" ExpiresByType image/png "access 1 week" ExpiresByType text/css "access 1 week" ExpiresByType application/x-javascript "access plus 1 week" ExpiresByType text/javascript "access plus 1 week" ExpiresByType application/javascript "access plus 1 week" ExpiresByType image/x-icon "access 1 week"
こちらの記述で前回のアクセスから1週間経過していれば新たにサーバーから読み込むように設定されます。weekをmonth(s)やday(s)にも変更可能です。
※サーバーによって設定方法が異なる場合がありますので、動作しない場合はサーバーに問い合わせてみて下さい
対策の結果
劇的に数値が向上しました。この対策が一番効果があるようです。
ただ、キャッシュを保持している間は変更が適応されないなどの問題もあります。更新方法を工夫すれば避ける事が出来ますので機会があれば解説したいと思います。
まとめ
今回は実測値で2秒ほど表示速度を速めることが出来ました。
表示速度は、ウェブサイトの生命線です。表示が遅くなればなるほどユーザーが離脱する確率も上がっていきます。ユーザーが使いやすいページを目指すために、まだ行っていないものがありましたらぜひ試してみてください。また、非対応ブラウザがある関係で行わなかった対策もありますので、後々紹介していきたいと思います。