表示速度改善！SEOに効果的な必ずやるべきサイト高速化手法40選（2/3ページ）
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ボタンは読み込むのにかなり時間がかかります。超重いです。
なので、ページの最後に読み込んだり、ファイルの内容が読み込まれた後に表示させるようにすれば、コンテンツの表示を妨げません。
ソーシャルボタンの高速化としては、「socialite.js」を使うのがおすすめですね。
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 高速化」などで検索するとそれに関連した記事などが見つかるので、それらを参考にして処理が高速になるプログラムを書くようにしましょう。