ページ表示速度の高速化(HTML/CSS)

ブログ

2015.12.09 コーディング

ページ表示速度の高速化(HTML/CSS)

blog02

WEBサイトの表示速度高速化!~フロントサイド~

WEBサイトの表示速度高速化は、ユーザーのストレス軽減だけではなく、離脱率を抑えSEO対策としても有効です。
ここでは表示速度の遅延によって発生する問題点と、フロント側でできる表示速度の高速化方法についていくつか解説していきたいと思います。

表示速度の遅延によって起こる問題点

まずはじめに表示速度の遅延によってどのような問題点が起こりうるかを解説していきます。

・ページ表示速度が2秒以上かかるとユーザーの離脱率が大きく上がってしまう。
・2012年にGoogle SEO部門担当者から、ページ表示速度を検索順位評価要素に含めていることを明言している。
・ECサイトでは約8割のユーザーが一度WEBサイトのパフォーマンスに幻滅すると、同じサイトから購入しようと思わない。

表示速度の遅延に対して検索をしてみると、上記のような情報が出てきてしまいました。
このことから約半数のユーザーは2秒以内にページがロードされることを期待していると言えますね。
次にGoogleの検索順位評価ですが、順位付けに使ってるのはページ表示速度ではなくクロール時間(サーバーにアクセスしてHTMLファイル単体をダウンロードする時間)という情報もありましたので一概に表示速度だけを直せば良いという訳ではないかもしれません。
ECサイトは目的やユーザー層によっても結果が大きく変わってしまうと思いますので参考にならないかもしれませんが、こういった情報を見つけることができました。

改善方法その1 画像ファイル

WEBサイトの高速化と聞いて一番に思い浮かべるのは画像の容量の削減ではないでしょうか。
画像の容量削減について解説していきたいと思います。

最適な画像形式を選択について!

・GIF
最大で256色まで使用可。GIFアニメーションの設定可。透過可(半透明は不可)。
使える色が少ない分、写真やグラデーション等には不向きですが、画像が軽く、アイコン等の保存形式に向いています。

JPEG
約1670万色(フルカラー)使用可。
写真やグラデーションなど色の多いものに向いています。その分画像が重くなってしまうことがあります。

PNG-8
PNG-8、GIF画像と同様に256色まで使用可。
PNG-24、JPEG形式と同様に約1670万色(フルカラー)使用可。透過・半透明可
※ファイルサイズはJPEGよりも肥大。

SVG
「Scalable Vector Graphics」の略でベクター形式の画像フォーマット。
IE等が未対応だったため注目されていませんでしたが、HTML5の実装と共に注目を集め始めた画像形式です。画像をベクター形式で描画しているため、高解像度ディスプレイ等でも荒れること無く、アニメーションにも適した形式になっています。

基本的には上記の形式から最適なものを選択して使うかと思いますが、ここで更に画像の容量を削減する工夫をご紹介いたします。

※今回のお話とは違うお話ですが、今ではGIFアニメーションと同じことがCSSアニメーションのtransition-timing-function:steps();を使うことでより高度に再現できます。
参考サイト:CSSスプライトとstepsを使ってアニメーション画像を作ろう

画質を保ちつつ容量を削減!

画質を損なわず容量を削減してくれるサービスがいくつかありますのでオススメのサイトをご紹介します。

JPEGmini
JPEG画像を品質を保ちつつ圧縮できます。200MBまで無料で使用できます。
JPEGmini
http://www.jpegmini.com/

TinyPNG
PNG画像を品質を保ちつつ圧縮できます。20枚まで一括で変換してくれます。
TinyPNG
https://tinypng.com/

CSSスプライトを使ってみる!

アイコンのような極めて容量の小さな画像ファイルの場合は画像ファイルのダウンロード時間よりもサーバへの要求・応答時間の方が長くなる場合があります。
そのためアイコン画像を1枚画像に纏めサーバへのリクエスト回数を減らすことで表示速度を上げることが出来ます。
css_sprite
CSSスプライトサンプル画像
参考サイト:CSSスプライトについてあれこれ。

改善方法その2 CSSファイル

次にCSSについて解説していきたいと思います。

CSSの読み込み方法とタイミング!

CSSの読み込み方法はいくつかありますが中でも遅延の原因になる書き方は@importを使った外部CSSの読み込みです。
基本的には複数のCSSを読み込んでいる場合、同時並行で処理していくのですが、@importで読み込んでいる際は1つずつ順番に処理することになってしまうことがあります。
このため表示までに時間がかかってしまうという訳ですね。
他には『common.css』『reset.css』『base.css』等のように目的ごとに切り分け読み込ませている場合もあるかと思いますが、この方法ではHTTPリクエスト回数が増えてしまい、これも若干遅くなってしまいますので、一つのCSSファイルにまとめて書いてしまうのが一番早く読み込まれます。また、読み込むタイミングは後の方に記述してしまうとCSSの読み込み後に再度HTMLが読み込み直されてしまうので、headタグの中に記述しておくのが良いとされています。
参考サイト:外部CSSと外部JavaScriptで表示速度の低下を防ぐには

CSSを圧縮!

CSSの読み込み方法の次は中身について考えてみたいと思います。
CSSの軽量化といえば改行の除去が一般的な気がします。
そこでお手軽に改行を除去してくれるサイトをいくつかご紹介します。

CSS Compressor
圧縮のレベルを4段階から選択できます。更に、使い方も直感的で分かりやすいです。
CSS-Compressor
http://csscompressor.com/

Code Beautifier
かなり細かく設定することができます。圧縮されているものを見やすい形に戻すこともできます。
Code-Beautifier--CSS-Formatter-and-Optimiser
http://www.codebeautifier.com/

CSSセレクタをシンプルに!

みなさんはCSSセレクタを指定するときにどのように記述しているでしょうか。

section#id div ul.class li{}

例えば上記のような記述の仕方をしていませんでしょうか。
ブラウザは右から左にセレクタを検索していきますので、階層が多いほど読み込みに時間がかかります。
また、この場合全てのliを検索してからul.classに括られているliと絞り込むことになります。
これをスッキリ書くと、

#id .class li{}

この記述で十分ですね。
他に少し極端な例ですが、

HTML
<ul class=”list”>

<li>テキスト</li>
<li>テキスト</li>
<li>テキスト</li>
</ul>

CSS
.list li{}

通常であればこのように記述するかと思いますが、速さだけに着目した場合、

HTML
<ul>

<li class=”list”>テキスト</li>
<li class=”list”>テキスト</li>
<li class=”list”>テキスト</li>
</ul>

CSS
.list{}

このように記述した方が早くなります。
これは、全てのliを検索してから.listで括られたliと絞り込むよりも、.listを検索するだけの方が余計な要素が引っかからずに済むためです。
参考サイト:CSSセレクタの効率的、効果的な使い方をいろいろ|Webpark

改善方法その3 JSファイル

最後にJavaScript(以下JS)について解説していきたいと思います。

JSの読み込みタイミング!

HTMLは上から順に表示されていきますが、JSが実行されるとHTMLの読み込みを一時的に停止させ、JSの処理の完了を待ってからHTMLの読み込みを再開させます。このため、JSの読み込みタイミングとしてはbodyの閉じタグの直前辺りに書いておくと、HTMLの読み込みがほぼ完了してからJSの読み込みになりますのでユーザーに遅延を感じさせずに済みます。
参考サイト:Webサイトの読み込み速度を上げるためのJavaScript / css の最適化

JSを圧縮!

JSもCSSと同じように圧縮し、高速化を図りましょう。
今度はJSをお手軽に圧縮してくれるサイトをご紹介します。

packer
使い方が直感的で分かりやすいです。
-packer-
http://dean.edwards.name/packer/

実際に表示速度をチェックしてみましょう!

最後に表示速度を計測できるサイトをご紹介します。

PageSpeed Insights
Googleが提供しているWEBサイトの表示速度を計測するサイトです。
PageSpeed-Insights
https://developers.google.com/speed/pagespeed/insights/

GTmetrix
表示結果をGradeで表示してくれますのでとても分かりやすいです。
Latest-Performance-Report-for--https---gtmetrix.com---GTmetrix
https://gtmetrix.com/

あとがき

いかがでしたでしょうか。
お役に立つ情報はありましたでしょうか。

なかなか全てをクリアすることは難しいと思います。
プログラムが絡んでいたり、SNSプラグイン等を読み込んでいたりいろんなケースが考えられます。
改善できるところから直していきましょう。

CONTACT
お問い合せ・お見積りはこちらから
  • 03-6279-3013 お問い合わせは 月~金 10:00~19:00

  • メールでのお問い合せはこちら
c