ノンエンジニアでも実践できるサイト高速化施策まとめ

アルコブログ TOP　>　ノンエンジニアでも実践できるサイト高速化施策まとめ

2016.10.24　アルコ編集部

未分類

ノンエンジニアでも実践できるサイト高速化施策まとめ

サイトの高速化、というと様々な手法が考えられますが、今回はHTML、CSSを記述するようなコーダーさんでも行える施策をまとめようと思います。

サーバサイドでの施策を行おうとすると、またサーバまわりを扱っているエンジニアさんの手が必要だったり、自前でないクライアント所有のサーバだったり、この業界ではよくある話です。
なので今回はエンジニアでない人でも比較的容易に高速化に貢献出来る箇所をいくつか書いてみます。

Googleはサイトの表示速度をランキングに反映すると公式で言っていますし Using site speed in web search ranking SEO的にもユーザビリティ的にも少しでも早いに越したことはありません。(ランキングへの影響は1%程度のごく僅かな影響のようですが)

各項目、作業コストと効果の高さからオススメ度(3段階)を付けていますので参考にしてください！

複雑なデザインを避けCSSで表現する ★★☆
外部のCSS、JavaScriptをまとめる ★★★
CSSスプライトをつかう ★★☆
jpegやpngのダイエット ★★★
小さな画像をインライン化 ★☆☆
jQueryなどのライブラリをCDNから使用する ★★★
JavaScriptをbodyの閉じタグ直前に配置する ★★★
JavaScriptを実行するタイミング ★★★

高速化を行うには

・リクエスト回数(サーバと通信する回数)を極力少なくする

Webサイトを表示する際には、簡単に言うとユーザがそのWebサーバにリクエストを行い、そのサーバがHTMLや画像などのデータを返して、それをユーザが使用しているブラウザが表示します。(厳密にいえばいろんな過程がありますが)
通常のWebサイトを表示するには何十、下手すれば何百ものリクエストを行うことになります。当然その回数が多くなれば多くなるほど、ページのレンダリング(表示)までに時間がかかります。そのリクエスト回数を極力減らそう、ということです。

リクエスト回数を減らすには？

・複雑なデザインを避けCSSで表現する【オススメ度: ★★☆】

デザインをよりシンプルに、画像を使わずにCSSで表現するなど、工夫が必要です。古いブラウザへの対応等を考えると難しいところですが、CSS3を使うと様々な表現が可能になっています。
CSS3をどうしても使えないブラウザを除外してもよいのであれば、画像より積極的に使うべきです。ただクライアントの要望で複雑なデザインをしないとならない場合は割り切らないとならないです。

・外部のCSS、JavaScriptをまとめる【オススメ度: ★★★】

管理上、分けたくなる場合も多いですが、可能な限りまとめましょう。短いものの場合はstyleタグでインラインで記述する方法も有効です。

・CSSスプライトをつかう【オススメ度: ★★☆】

効果は高いですが、製作段階から行わないと時間のコストがかかってしまいます。小さな画像がたくさんある場合などには積極的に使用してよいと思います。
最近スマホ向けのページなどレスポンシブデザインのサイトも増え、そういう場合に工夫が必要になってくるときもあります。

CSSのbackgroundプロパティを使用するのが基本になりますが、これでは画像にalt属性(代替テキスト)が設定出来ないという問題もあります。
imgタグでもCSSスプライト使えないことはないですが、同じ画像で違うalt属性を使用すると、画像検索などで思わぬ結果を招きかねないです。
必要なところではimgタグを、削減できそうなところではCSSスプライトを、適材適所に使うことが理想です。

ファイルの軽量化をしよう

大きなファイルの転送には時間が掛かります。単純ですが小さく出来るなら小さくした方が当然表示も早くなります。モバイル回線など低速の回線で見ている人にとっては特に恩恵の大きいことです。適切なコンテンツを用意することで、サイトの高速化につながります。

画像フォーマットの選び方

jpeg,png,gif,svg(webpいまいち流行りませんね…)などブラウザで表示出来る画像フォーマットは何種類かあります。 pngは可逆圧縮のフォーマットなので、積極的に使っていきたいところですが、不可逆圧縮のjpegと違って容量が大きくなりやすい傾向があります。gifは色が少ない時はいいですが、最大256色なので使い所が難しいです。
写真のような色の多い画像の場合、pngだと容量がとても大きくなってしまいます。写真はjpegを使うことで容量を抑えます。
メニューのボタンやアイコンといった色の少ないパーツの画像の場合、pngの方が容量が小さくなることのが多いと思います。またjpegは透過色を扱うことが出来ませんが、pngの場合は透過色も扱うことが出来ます。

・jpegやpngのダイエット【オススメ度: ★★★】

見た目にほとんど影響を与えずに、ファイルのサイズを小さくするサービスを使うと簡単です。 jpegの場合、JPEGminiなど使用するとよいです。データによってはかなり効果があります。
pngの場合、画質の劣化があってもよい場合はOptimizillaやTinyPNGなどを、画質の劣化をさせず、最適な圧縮方法を探るのであればAzConvPNG (Windowsアプリケーション)のようなものを使うという手もあります。

・小さな画像をインライン化【オススメ度: ★☆☆】

imgタグのsrc属性にbase64でエンコードしたデータを入れる方法です。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAACklEQVQImWNgAAAAAgAB9HFkpgAAAABJRU5ErkJggg==">

これは1×1の真っ黒なpngです。ただし、データ量は実はbase64でエンコードすると大きくなりますし、キャッシュも効きませんので小さなデータに有効となります。 1回目の表示は高速化が見込めますが、キャッシュが効かないので2回目以降は遅くなってしまう場合があります。時と場合によりますが、有効な手法のひとつです。

jsファイルの実行順序を考える

JavaScriptの内容に関してはコーダーさんが扱っていない可能性もありますが、最近は多岐に渡って作業を行うコーダーさんも多いと思うので項目に加えました。

・jQueryなどのライブラリをCDNから使用する【オススメ度: ★★★】

とても便利なjQueryなどのライブラリを使用するときにCDNを利用する方法です。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

このようなライブラリは多くのサイトでCDNを使って呼び出されており、知らずのうちにキャッシュされている可能性が大きいです。すでにキャッシュされている場合は高速に読み込みが完了します。
ただし呼び出す場合にはバージョン等に十分注意しましょう。

・JavaScriptをbodyの閉じタグ直前に配置する【オススメ度: ★★★】

HTMLに記述されている順に上からレンダリングを行っていきます。headタグ内にJavaScriptの記述をすることが多いと思いますが、ここに書くのは必要最低限にし、実行が後でよいものはbodyの閉じタグの直前に記述するようにすることで、レンダリングが早くなります。次の項目と一緒に検討しましょう。

<head>
<script src="script.js">
<script src="script2.js">
</head>

↓

<script src="script.js">
<script src="script2.js">
</body>

のように移動しましょう。

・JavaScriptを実行するタイミング【オススメ度: ★★★】

asyncやdefer属性をつけてレンダリングを停止させないようにします。

<script src="script.js" async>
<script src="script2.js" defer>

非同期的に実行したり、実行するタイミングを遅らせる属性です。読み込む順番が決まっている場合はこれらの属性を付加することがダメな事もあるので、HTMLやCSSしか書かないコーダーさんの場合は他のプログラマさん等に相談しましょう。
もちろんサーバを管理している人の協力があれば、高速化出来る項目は他にもたくさんありますが、コーダーさんが可能な限り施策しておくに越したことはありません。
サイトの表示が遅いとユーザも逃してしまいます。小さな気遣いで大きな成果があがります。せっかく作るのであれば、少しでも表示が早い快適なサイト作りを心がけて多くのユーザに見てもらいましょう！