表示速度改善！SEOに効果的な必ずやるべきサイト高速化手法40選
現在のSEOにおいて、検索順位の評価にはあらゆる要素が考慮されていますが、サイトの表示速度もその1つであるとGoogleは発表しています。
しかし、その高速化の評価比重は全体の数パーセントにすぎないのでやる必要がないという人もいます。
ですが、サイトの高速化はユーザビリティーの向上にもつながりますし、SEOに少しでも効果があるのなら、やっておいて損はありません。
サイトの表示は遅ければいらいらしますが、速すぎても誰も文句は言わないとよく言われます。速ければ速いほど良いことなのです。
そこで今回は、サイトの高速化手法について紹介します。
サイトの高速化手法40選
基本編
1．HTML・CSS・JSの無駄な部分の削除
HTMLやCSS、Javascriptのファイルで余計な空白・改行、無駄なコードはなくして、容量を削減しましょう。ダウンロード時間が短くなります。
HTMLは以下のツールを使うことで簡単に空白や改行を削除できます。
CSSは以下のツールを使用すると、空白・改行と共に、それぞれのプロパティを文字数が一番少なくなる記述方式に変えて容量を削減できます。
Javascriptは以下のツールを使用すると、空白・改行と共に、コードを文字数が少なくなるように変更し、変数も短いものに変えて、容量を削減することができます。
2．複数のCSSファイルはすべて1つのファイルにまとめる
CSSの外部ファイルを複数読み込んでいるときは、その数だけHTTPリクエストが発生して時間がかかってしまうので、すべて1つのファイルにまとめてHTTPリクエストを削減しましょう。
多すぎて、手間がかかる場合は以下の記事などを参考にするとよいでしょう。
- JavaScriptとCSSファイルのHTTPリクエストを最小限にし圧縮・キャッシュする-BoxJSとBoxCSS|コリス
- Autoptimizeの使い方・設定方法を解説【CSSやJSを最適化するWPプラグイン】
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の場合は以下の記事を参考にしてください。
Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法 | OXY NOTES
gzip圧縮のモジュールを使えない場合は、最初からgzipしたものをサーバーにアップする必要があります。 CSSとJSは以下の上記でも紹介した「YUI Compressor」を使うことでgzipしたものもダウンロードできます。
HTMLのファイルは、PHPなどのサーバープログラムでgzip圧縮できます。
8．静的ファイルのブラウザ側のキャッシュ時間を長くする
CSSやJS、画像などの内容が頻繁に変更されないファイルに関してはキャッシュを効かせることで、ダウンロードを省略でき、高速化することができます。
そして、ただキャッシュさせるだけでなく、長い期間キャッシュさせることで継続的に高速化することができます。
やり方としてはApacheのモジュールを使うことで設定できます。詳しくは以下の記事を参考にしてください。
.htaccessのmod_expiresでブラウザキャッシュで高速化でSEO対策！ | エス技研
9．CSSのセレクタはなるべくタグ名、id、classの単体のみにする
CSSでスタイルを決める際のセレクタはなるべくタグ名、id、classの単体のみにしましょう。
ユニバーサルセレクタ子孫セレクタなどは処理に時間がかかる傾向があります。
- 使用を避ける
*{...} div nav ul li{...} div>dl>.aaa{...} h1+p{...}- 推奨
div{...} .aaa{...} #bbb{...}
10．CSSの使わないセレクタは削除する
無駄なセレクタは、余計な解析の手間がかかり、全体的にページの表示速度が遅くなってしまいます。
CSSで使わないけど記述してあるセレクタは、そのままにしておかないで、しっかりと削除しましょう。
11．CSSの「＠import」は避ける
CSSの記述で「＠import」を使うと他のCSSファイルの内容を読み込むことができます。
しかし、これはそのたびにリクエストが発生するのでかなり時間がかかります。
「＠inport」の使用は避けて、そのファイルに呼び出したいCSSを直接記入してまとめるようにしましょう。
12．画像の容量を削減する
画像が重いとダウンロード時間が長くなってしまったり、他のファイルのダウンロードにも影響します。
3000pxなどの大きな画像を使用するときはそのまま使用せず、サイトの画面サイズに合わせて、画像編集ツールであらかじめサイズを適切な大きさに編集して使用することで、容量の削減をしましょう。
また、無駄な情報や色を削除することも容量削減に効果があります。以下のツールを使うと、目に見えない無駄な情報や、色の削減をして、見た目は変わらないのに大幅に容量を削減してくれるので、ぜひ使用しましょう。
13．画像のwidth・heightはなるべく指定する
画像の幅と高さが決まっているものは、widthとheightのサイズを指定しましょう。
そうすることで、ブラウザの画像の幅などの解析の手間が省くことができ、画像の表示の高速化が見込めます。
<img src="..." alt="..." width="300" height="300">
14．無駄な画像は減らす
画像が増えると、HTTPリクエストも増えるので、コンテンツの表示が遅くなります。
無駄な飾りの画像や、文字の代わりに使う画像などは使用しないようにするべきです。
文字の代わりに使う画像は、普通のテキストを用いることで画像も減らせるし、SEOにも多少効果があります。
グラデーションや影などの装飾目的で使用しているもので、CSSで再現できるものは画像を使わず、CSSで表示させるようにすることで、HTTPリクエストを減らすようにしましょう。