IT・Web

表示速度改善!SEOに効果的な必ずやるべきサイト高速化手法40選

現在のSEOにおいて、検索順位の評価にはあらゆる要素が考慮されていますが、サイトの表示速度もその1つであるとGoogleは発表しています。

しかし、その高速化の評価比重は全体の数パーセントにすぎないのでやる必要がないという人もいます。

ですが、サイトの高速化はユーザビリティーの向上にもつながりますし、SEOに少しでも効果があるのなら、やっておいて損はありません。

サイトの表示は遅ければいらいらしますが、速すぎても誰も文句は言わないとよく言われます。速ければ速いほど良いことなのです。

そこで今回は、サイトの高速化手法について紹介します。

サイトの高速化手法40選

基本編

1.HTML・CSS・JSの無駄な部分の削除

HTMLやCSS、Javascriptのファイルで余計な空白・改行、無駄なコードはなくして、容量を削減しましょう。ダウンロード時間が短くなります。

HTMLは以下のツールを使うことで簡単に空白や改行を削除できます。

Compress HTML

CSSは以下のツールを使用すると、空白・改行と共に、それぞれのプロパティを文字数が一番少なくなる記述方式に変えて容量を削減できます。

Online YUI Compressor

Javascriptは以下のツールを使用すると、空白・改行と共に、コードを文字数が少なくなるように変更し、変数も短いものに変えて、容量を削減することができます。

Closure Compiler Service

2.複数のCSSファイルはすべて1つのファイルにまとめる

CSSの外部ファイルを複数読み込んでいるときは、その数だけHTTPリクエストが発生して時間がかかってしまうので、すべて1つのファイルにまとめてHTTPリクエストを削減しましょう。

多すぎて、手間がかかる場合は以下の記事などを参考にするとよいでしょう。

3.複数のJSファイルはすべて1つのファイルにまとめる

Javascriptも、CSSと同じようにHTTPリクエストを削減するために1つのファイルにまとめましょう。

手間のかかるときは、上記の「CSSを1つにまとめる」の章で貼った、最初と最後のリンクを参考にしてください。

4.scriptタグはbodyタグの閉じる直前に記述する

scriptタグを読み込むときはコンテンツのレンダリングがストップされて、表示するまでに時間がかかってしまいます。

読み込むタイミングがいつでも良い場合は、以下のようにbodyの閉じる前で読み込むことでレンダリングブロックを防ぐことができます。

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

5.外部JSを読み込むscriptタグにはdeferかasync属性を付ける

外部Javascriptファイルをbodyの閉じタグの直前で読み込む場合にはやらなくても大丈夫ですが、それ以外のbodyの途中や、headに記述する際はdeferかasync属性を付けましょう。

そうすることで、JSファイルを非同期に読み込むことができ、レンダリングのブロックが妨げられません。

両者の違いは、deferはページ読み込みが完了した後処理され、asyncはそのJSファイルの読み込みが完了次第実行されます。

対応していないブラウザもあるのでどちらの属性も付与することをおすすめします。どちらも対応している場合はasyncが優先されるそうです。

<script src="..." async defer></script>

6.CSSは上、JSは下

headに外部CSSと外部JSを読み込むタグが両方ある場合は、CSSの方を上にして書くようにしましょう。これはCSSを読み込まないといつまで経ってもコンテンツが表示されないためです。

読み込みをブロックするJSの前にCSSを読み込ませることで、コンテンツの表示が改善されます。

<link rel="stylesheet" href="...">
<script src="..."></script>

7.gzip圧縮をする

gzipとはファイルの圧縮形式の1つです。ファイルのデータそのものを容量が少なくなるように特殊な形式で圧縮します。

このgzipを使うと、7~8割ほどファイルの容量が削減できます。こうすることでファイルのダウンロード時間が大幅に減少し、高速化につながります。

gzipで圧縮するファイルは画像以外の、HTML・CSS・JSなどのテキスト形式のファイルです。

gzipをすべてのファイルに適用するには、サーバー側でモジュールを使用します。Apacheの場合は以下の記事を参考にしてください。

Gzipを有効にしてサイト表示速度を向上させる|1000ch.net

gzip圧縮のモジュールを使えない場合は、最初からgzipしたものをサーバーにアップする必要があります。 CSSとJSは以下の上記でも紹介した「YUI Compressor」を使うことでgzipしたものもダウンロードできます。

Online YUI Compressor

HTMLのファイルは、PHPなどのサーバープログラムでgzip圧縮できます。

PHPでコンテンツをgzip圧縮する方法 zlib編

8.静的ファイルのブラウザ側のキャッシュ時間を長くする

CSSやJS、画像などの内容が頻繁に変更されないファイルに関してはキャッシュを効かせることで、ダウンロードを省略でき、高速化することができます。

そして、ただキャッシュさせるだけでなく、長い期間キャッシュさせることで継続的に高速化することができます。

やり方としてはApacheのモジュールを使ったりすることで設定できます。詳しくは以下の記事を参考にしてください。

mod_expires のキャッシュ制御によるアクセス不可軽減・転送量の節約/レンタルサーバーBIG-server.com

9.CSSのセレクタはなるべくタグ名、id、classの単体のみにする

CSSでスタイルを決める際のセレクタはなるべくタグ名、id、classの単体のみにしましょう。

ユニバーサルセレクタ子孫セレクタなどは処理に時間がかかる傾向があります。

使用を避ける
*{...}
div nav ul li{...}
div>dl>.aaa{...}
h1+p{...}
推奨
div{...}
.aaa{...}
#bbb{...}

10.CSSの使わないセレクタは削除する

無駄なセレクタは、余計な解析の手間がかかり、全体的にページの表示速度が遅くなってしまいます。

CSSで使わないけど記述してあるセレクタは、そのままにしておかないで、しっかりと削除しましょう。

11.[email protected]

[email protected]容を読み込むことができます。

しかし、これはそのたびにリクエストが発生するのでかなり時間がかかります。

[email protected][email protected]う。

12.画像の容量を削減する

画像が重いとダウンロード時間が長くなってしまったり、他のファイルのダウンロードにも影響します。

3000pxなどの大きな画像を使用するときはそのまま使用せず、サイトの画面サイズに合わせて、画像編集ツールであらかじめサイズを適切な大きさに編集して使用することで、容量の削減をしましょう。

また、無駄な情報や色を削除することも容量削減に効果があります。以下のツールを使うと、目に見えない無駄な情報や、色の削減をして、見た目は変わらないのに大幅に容量を削減してくれるので、ぜひ使用しましょう。

13.画像のwidth・heightはなるべく指定する

画像の幅と高さが決まっているものは、widthとheightのサイズを指定しましょう。

そうすることで、ブラウザの画像の幅などの解析の手間が省くことができ、画像の表示の高速化が見込めます。

<img src="..." alt="..." width="300" height="300">

14.無駄な画像は減らす

画像が増えると、HTTPリクエストも増えるので、コンテンツの表示が遅くなります。

無駄な飾りの画像や、文字の代わりに使う画像などは使用しないようにするべきです。

文字の代わりに使う画像は、普通のテキストを用いることで画像も減らせるし、SEOにも多少効果があります。

グラデーションや影などの装飾目的で使用しているもので、CSSで再現できるものは画像を使わず、CSSで表示させるようにすることで、HTTPリクエストを減らすようにしましょう。

15.アイコンなどの大量の小さい画像はCSSスプライトを使用する

CSSスプライトとは、アイコンなどの小さな画像をくっつけて1つの画像にして、CSSのbackground-imageでそのひとまとめの画像の中から必要な画像のところだけを表示させるというテクニックです。

詳しい仕組みは身につけておきたいWebサイト高速化テクニック#6|HTTPリクエスト数削減テクニック02:CSS Sprite編 | Developers.IOをご覧ください。

これはHTTPリクエストの大幅な削減につながり、ぜひやるべきです。CSSスプライトは以下のツールで簡単に作れます。

16.小さいは画像はbase64形式で埋め込む

CSSスプライトは便利ですが、小さい画像はあるけれどもスプライトにするほど大量にはないというサイトや、レスポンシブデザインの関係でCSSスプライトが使えないというサイトがあると思います。

そのようなサイトは、1kb以下の小さい画像はbase64形式に変換してsrc属性に指定することで、テキストと同じように直接ファイルに埋め込む形にしましょう。

base64形式とは、画像を文字列に変換したバイナリ形式の1つです。

こうすることで、テキストと同じように画像が直接埋め込まれているので、画像を読み込むHTTPリクエストを削減でき、表示の高速化につながります。

注意するのは、あまり大きい画像をbase64にするとHTML自体のダウンロードに時間がかかってしまうので、1kb以下などの小さい画像だけにするようにしましょう。

以下のツールで、画像をbase64形式に変換できます。変換した後は、その文字列をimgタグのsrc属性に指定するだけで、HTTPリクエストなしで通常通りの画像が表示されます。

画像をBase64に変換するツール(data URI scheme)-シングスブログ

17.SNSボタンは遅延ロードさせる

いいねやツイートなどの SNSボタンは読み込むのにかなり時間がかかります。超重いです。

なので、ファイルの内容が読み込まれた後に表示させるようにすれば、コンテンツの表示を妨げません。

遅延ロードの方法は様々です。参考として以下のリンク先をご覧ください。

Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め!-Web学び

18.tableは「table-layout:fixed」を指定する

tableタグや、「display:table」などでスタイルしてある要素は、列の幅などが決められていない時は、ブラウザはその中のセルの幅を中身のコンテンツの長さに合わせて表示しようとします。

そのため、計算処理が必要となり、表示に時間がかかってしまいます。

そのようなtable要素には「table-layout:fixed」をCSSで指定しておけば、ブラウザはその列の数で均等に幅を分割しようとします。

結果的に、いちいちtableの中のコンテンツの長さを調べたりしないので、処理の時短が実現できて、表示が高速になります。

19.CSSのアニメーションを利用する

コンテンツの動きなどのアニメーションを実現するときはJavascriptを使うことが多いですが、結構重いです。スマホだとカクカクになります。

そのため、CSSで再現できるアニメーションはCSSアニメーションを使いましょう。

注意が必要なのは、コンテンツを動かすときにはtransitionやtransformの要素を使用してください。

leftやmarginなどはCPUを使うので、CSSでも重くなります。CSS3の新要素のtransitionやtransformはGPUで処理されますので、この2つでアニメーションを実現させましょう。

GPUで処理されるものは高速にアニメーションできます。

20.リダイレクトを避ける

リダイレクトを設定すると、そのリダイレクトの時間だけ表示が遅くなってしまいます。

スマホ用サイトなどもレスポンシブデザインや、サーバー側でリダイレクトしないで表示を変えたりして、リダイレクトを避けるようにしましょう。

中級編

21.base64形式の画像がたくさんあるときはCSSにまとめる

上記で述べたbase64形式ですが、テキストと同じように直接埋め込んであるのでキャッシュされません。

しかも、数が多ければ多いほどHTMLの容量が肥大化してしまいます。

その場合はCSSのbackground-imageでそれぞれのbase64画像を背景画像として設定しておけば、CSSのリクエストだけで一括に指定できるし、CSSファイルのキャッシュも効くようになるのでおすすめです。

.image1{background-image:url('data:image/png;base64,iVBORw0KGgoAAAAN....')}
.image2{background-image:url('data:image/png;base64,iVBORw0KGgoAAAAN....')}
.image3{background-image:url('data:image/png;base64,iVBORw0KGgoAAAAN....')}
  

22.容量が大きいCSSは遅延ロード

上記のbase64画像をCSSでまとめた場合、CSSも肥大化しますので、コンテンツの表示のCSSとは別に画像用のCSSで分けた方が、コンテンツの表示は速くなります。

そして、そのような容量が大きいCSSは、後から読み込んで表示しても大丈夫なものは遅延ロードするとさらに高速化が見込めます。

逆に遅延しないと、HTMLの解析が終了しても、CSSの解析がまだ終わらないということが生じ、CSSが原因で表示が遅くなってしまいます。

CSSの遅延は以下を参考にしてください。

HTTPリクエストを減らすために【DataURI編】遅延ロードでレンダリングブロックを回避 — MOL

なお、コンテンツの表示に大きな影響を与えるCSSを遅延すると、再レンダリングされて、表示が一瞬消える場合があります。気になるようでしたら、画像のCSSなどのコンテンツの表示にはあまり影響を与えないものだけを遅延しましょう

23.lazyloadで画像の遅延ロード

画像を大量に使っているサイトは、それらのHTTPリクエストが完了するまで表示されません。

特にスマホでHTTPリクエストは多ければ多いほど、表示にかなり時間がかかります。そのため、画像も遅延ロードさせることでコンテンツの表示を高速化できます。

画像の遅延ロードは、jQueryプラグインのlazyloadがおすすめです。これは、画像を最初は読み込まず、スクロールして表示領域に入ったら読み込むということで、最初の表示に関わるHTTPリクエストを削減して高速化することができます。

lazyloadについては以下を参考にしてください。

24.Ajaxを使ったコンテンツの遅延ロード

コンテンツも遅延ロードすることで高速化が見込めます。

サーバー側での処理に時間がかかる部分や、メインでないサイドバーなどの部分、ファーストビューに表示されないページ下部の部分などをAjaxで取得して後から表示させることで、最初の表示を高速化させることができます。

サーバーの処理が重い場合や、ページ自体の容量が大きい場合は、Ajaxで無駄な部分を遅延ロードさせると表示速度が改善できるでしょう。

25.Pjaxを活用する

Ajaxの欠点はそのページのURLを変更できないことでした。

しかし、HTML5のpush Stateとpop StateのHistoryAPIの登場により、Javascriptでブラウザの履歴とURLを書き換えられるようになり、Ajaxでもページ遷移(に見せかけたもの)が可能になりました。

PjaxとはそのAjaxとHistoryAPIを活用したページ遷移のことです。

Pjaxはページ遷移の際にAjaxでコンテンツを取得するので、ページ全体がリロードされず、さらに固定ヘッダーなどの共通部分はそのままで、書き換える部分だけ更新すればよいので、取得するコンテンツの容量が削減でき、ページ遷移の高速化をすることができます。

jQueryでもプラグインがあるので、導入できるサイトはぜひ導入することをおすすめします。

26.短いJSやCSSはインラインにする

1つのプロパティしか設定していない短いCSSや、Javascriptはstyletタグ・属性やscriptタグでインライン化した方が高速に動作します。

短いCSSじゃJavascriptのコードがあるときはインライン化することをおすすめします。

27.ファーストビューのコンテンツはインラインCSSでスタイルする

ファーストビューとは表示されるコンテンツの中でスクロールせずに最初に画面上に表示される部分のことです。

そのファーストビューのコンテンツの背景色や幅、高さなどをインラインで書いておくことによって、外部CSSが読み込まれる前に、その部分がある程度表示されるようになります。

つまり、すべて外部化するとそのファイルが読み込まれるまでデザインが表示されませんが、インラインであらかじめ記述している部分は、その前から表示させておくことができ、体感的な表示速度の向上につながります。

なるべく完成後のデザインに近くなるようにして、容量が大きくならない程度にインライン化するとベストでしょう。

28.処理が遅いプログラムを避け、高速で処理できるコードを書く

PHPやJavascriptのプログラムにおいては、処理が遅い関数や早い関数など様々なものが存在します。

ページの表示や動作を高速化させるためにも、プログラムごとに一番高速な関数や式を記述するべきです。

「PHP 高速化」などで検索するとそれに関連した記事などが見つかるので、それらを参考にして処理が高速になるプログラムを書くようにしましょう。

29.CDNを活用する

CDNとはコンテンツの配信を最適化するために、複数のプロキシサーバーにファイルをキャッシュさせておいて、リクエストの際はそこからファイルを送り出す仕組みを提供しているサービスです。

簡単に言うと、大規模なプロキシサーバーを提供するサービスです。

メリットは多数のサーバーを使用しているので負荷分散ができ、しかも地理的要因でより近いサーバーからファイルを取得することができ、通信時間の短縮ができます。

このサービスは大規模なサーバー環境が必要なため、普通は有料で提供されているサービスですが、「Cloud Flare」というサービスは無料で使用できます。

有料に比べて性能は劣りますが、負荷分散などのメリットがありますので、高速化のために使用するべきです。簡単に登録でき、ネームサーバーを変更するだけで利用できます。

上級編

30.DNS Lookupを減らす

DNS Lookupはhost名とIPアドレスを関連付けるための処理です。

host名が多ければ多いほどこの処理が増え、ファイルのリクエストに時間がかかってしまいます。

なので、host名を多くするのは避け、DNS Lookupを減らすようにしましょう。

推奨されているhost名の数は2~4の範囲なので、その範囲に収めるようにしましょう。

31.ETagを適切に利用する

ETagはキャッシュされたファイルが最新のものかどうかチェックするためのデータです。ETagにはリクエストされたファイルの更新日時が明記されており、それがキャッシュファイルのものと同じであればキャッシュを活用します。違うのであれば、その新しいファイルを送り付けます。

複数のサーバーを使用している場合は、サーバーごとでETagが異なることがあります。もし、別のサーバーにリクエストを送ったら、キャッシュがあるにもかかわらず、ファイルをいちいちダウンロードすることになります。

これは、キャッシュが意味をなさず、ダウンロード時間がかかってしまうので対策をするべきです。

ETagの値の基準となるものを指定したり、ETagそのものを削除することも有効な手段になります。詳しくは、以下の記事をご覧ください。

32.マニフェストキャッシュを活用する

マニフェストキャッシュとはHTML5で新しく導入されたキャッシュ方法です。これは、ダウンロードしたファイルを端末のローカルにキャッシュしておき、次にそのサイトを訪問するときはそのキャッシュを活用するというものです。

HTML、CSS、JS、画像などのファイルをキャッシュすることができ、これを活用するとかなり高速化されます。

一切変更を加えないコンテンツなどにやるといいでしょう。また、動的コンテンツでも、静的な部分だけマニフェストキャッシュを活用し、動的な部分は後からAjaxで取得するというのも効果的だと思います。

マニフェストキャッシュについては以下のサイトを参考にしてください。

注意として、このキャッシュはかなり強力なので、頻繁に更新されるコンテンツには使用しない方が良いでしょう。

33.BigPipeを取り入れる

BigPipeとはFacebookに導入されているページ高速化の手法です。

普通のwebページではすべてのプログラムが処理されるまでファイルは送信されません。しかし、バッファを都度フラッシュすることで、そのフラッシュされた前の内容は処理が完了したらすぐに送信されて、画面上に表示することができ、それを利用した手法です。

わかりやすく説明すると以下のようになります。表示するのにA・B・Cの3つの処理が必要なページだとします。

普通の場合
  • Aの処理 → 3秒かかる → 3秒経過 → Bの処理へ (B・Cの処理があるのでまだ表示されない)
  • Bの処理 → 5秒かかる → 5秒経過 → Cの処理へ (Cの処理があるのでまだ表示されない)
  • Cの処理 → 2秒かかる → 2秒経過 → 全ての処理完了 (計10秒かかってやっと表示される)
バッファをフラッシュする場合
  • Aの処理 → 3秒かかる → 3秒経過 → バッファをフラッシュ → Aで処理された部分だけ表示される → Bの処理へ
  • Bの処理 → 5秒かかる → 5秒経過 → バッファをフラッシュ → Bで処理された部分が追加で表示される → Cの処理へ
  • Cの処理 → 2秒かかる → 2秒経過 → バッファをフラッシュ → Cで処理された部分が追加で表示される → 全ての処理完了

このような感じで、普通の場合はすべてのプログラムの処理にかかる10秒後に表示されますが、バッファをフラッシュする場合は、その都度表示されるので、最初の3秒でAがまず表示され、BもCも処理が完了次第表示されます。

Facebookのページを見てもらえばわかるように、コンテンツは徐々に上から順番に表示されていくのが確認できると思います。

これは確実に体感速度が向上し、特に処理が遅いページなどの体感速度の向上にかなり便利です。

このバッファをフラッシュするのは、PHPの「flush()」と「ob_flush()」の関数を使えば簡単にその都度、処理結果を送信して表示させることができます。

そして、BigPiPeはこれを改良したもので、バッファをフラッシュした後に、Javascriptによって、その都度表示されるコンテンツに必要なCSS・JS・画像を非同期で読み込ませるということをします。

そのことによって、CSSなどにおいても非同期化を図ることができ、さらに高速化ができるのです。

このBigPipeの詳細な仕組みは以下を参考にしてください。

そして、このBigPipeを再現できるJSプラグインがGitHubにありますので、それを導入すればBigPipeと同じことをでき、高速化を見込めるでしょう。

seporaitis/bigpipe · GitHub

34.nginxを利用する

nginxとはCSSや画像などの静的なファイルの取り扱いに関して高速に動作するサーバーです。

リバースプロキシにおけるキャッシュサーバーとして活用することができます。

静的ファイルを高速に取り扱うことができるので、キャッシュサーバーとして設置しておけばApacheなどより、静的なファイルを高速に通信することができます。

プロキシなので、セキュリティや、動的ファイルと静的ファイルの負荷分散に対しても使えるので導入できる人は、キャッシュサーバーとして導入することをおすすめします。

35.Varnishを利用する

Varnishは動的なコンテンツのキャッシュとして働くリバースプロキシです。

Facebookなどの大手も取り入れており、動的コンテンツをキャッシュすることで、動的プログラムの負荷を軽減することができます。

アクセスがかなり集中するサイトだと、ほんの数秒キャッシュするだけでもかなりの負荷が軽減でき、高速化することができるので、必要なサイトは導入することをおすすめします。

36.HHVMを利用する

HHVMとは、Facebookが開発した、PHPをより高速にすることの特化したサーバーです。

このHHVMを使用すると、CPUの使用率を大幅に削減できます。

これはかなりの負荷低減効果が期待でき、結果的に高速化を実現できるでしょう。

サーバーを自分で設定でき、PHPを使っている人ならば導入することをおすすめします。

37.HandlerSocketを利用する

HandlerSocketとはDeNA社が開発した、MySQLに高速にアクセスするためのプラグインです。

単純な参照クエリで数倍~10倍まで高速化できます。

様々な言語で使用できるので、MySQLを使用している人は導入することをおすすめします。

確認・計測編

38.高速化の効果を計測する

高速化の手法を取り入れたあとはしっかりと効果を計測しましょう。おすすめはそれぞれ以下の3サイトです。

GTmetrix
YahooとGoogleがそれぞれ定めている高速化手法が実施されているかランク付きで評価されます。
PageSpeed Insights
Googleが提供している確認ツールで、サイトごとに実施するべき高速化手法を確認することができます。
Pingdom
入力したURLのページでダウンロードされるファイルの順番と、それぞれのファイルの通信処理にかかった時間を詳しく計測できます。

39.ボトルネックの分析・改善

上記のサイトで速度を計測しただけでは意味がありません。しっかりとボトルネックを見つけ、それを改善するべきです。

ボトルネックを発見する際には以下のことに注意して分析と改善をしましょう。

  • どの項目が高速化できていないのか?
  • その項目は提示された対策ができるのか?
  • どのページに時間がかかっているのか?
  • その原因は何なのか?
  • 遅いプログラムはないか?
  • 無駄なファイルや記述はないか?
  • 問題を解決するためにできる高速化手法は何か?

以上のようなことを確認しながら問題を確認し、それを修正したり高速化手法を加えたりすることで、表示速度を改善するといいでしょう。

40.最終確認

最終確認として、以下の質問にすべて「YES」と答えられたら高速化対策は完璧です。

  • 最大限の高速化手法を用いたか?
  • 高速化にあたり試行錯誤を繰り返したか?
  • 改善できないところは自分の範囲外のところだけか?
  • 以前と比べ、速くなったと実感できるか?
  • ページの表示は遅いと感じないか?
  • 他のサイトと比べて高速か?
  • これ以上、高速化はできないと言い切れるか?

まとめ

以上が、サイトの表示速度を改善するための高速化手法です。

できるものはすべてやることで最大限の高速化を実現することができます。

しかし、今回示したこととは違うことをやってもサイトによっては高速化できることがあるので、高速化の対策をする際は、しっかりと試行錯誤を繰り返して、自分のサイトに一番最適な高速化手法を取り入れるようにしましょう。

そして、最終確認ですべてベストアンサーで答えられたら完璧なサイトです。その完璧をぜひ目指すようにしましょう。