Webサイトの表示速度を改善するプロの技 10選

Pocket

Webサイトの表示速度を改善する10の技まとめ。

Webサイトの表示速度(ページスピード)の改善はSEOにも影響を及ぼす重要な要素。読み込み速度が遅いと離脱につながることもあるため、サイト改善の優先順位も高めに設定されることが多いようです。

ここではWebサイトの表示速度を改善するためにプロの現場で使われる10のテクニックをまとめてみました。

Webサイト表示速度改善方法 10選

Google PageSpeedの活用

Webサイトの表示速度を改善するならまずチェックしておきたいのがこちら。
PageSpeed Insights
Webサイトの表示速度を改善するプロの技10選-01

現在のサイトのURLを入力するだけで修正すべきポイントを細かく提示してくれます。ページスピードはスコア表示されるため1つ1つ解決していくことでスコアも改善する仕組み。
Webサイトの表示速度を改善するプロの技10選-02

画像サイズの最適化

画像はCSSでサイズを調整できるため、かなり大きなサイズの画像でもサムネイルとして使用されることがあります。ただし、ブラウザで見ると小さなサムネイルでも元の画像が大きければ読み込み量も多くなるため、読み込みにも時間がかかることに。

このような場合には別途小さな画像を作成することで、読み込み速度を改善が見込めます。画像のリサイズツールは非常に多くの種類がありどれも高機能。中でも有名なのが以下の2つ。

画像の圧縮

画像の容量を減らすには大きさだけでなく、圧縮も重要な要素。画像の大きさはそのままで容量のみを削減したい場合には、画像の圧縮を行います。

圧縮の方法はOptimizillaがおすすめ。複数の画像(png,jpg)をまとめて圧縮でき、処理が終わった後は一括ダウンロードすることができます。
Optimizilla
Webサイトの表示速度を改善するプロの技10選-03

画像の削減

そもそも画像を使用しないようにすることでページ容量を削減することもできます。ボタンをCSSで作成したり、アイコン画像をFontAwesomeのようなアイコンフォントに置き換えることで画像の使用量を大幅に削減可能。

アイコンフォントはBootstrapと一緒に使われるFontAwesomeが有名。使えるアイコンの種類はなんと600以上!Webに限らずアプリなどでもよく使われています。
FontAwesome
Webサイトの表示速度を改善するプロの技10選-04

HTML、CSS、jsファイルの圧縮

CSSやjsファイル、HTMLファイルは圧縮することで読み込み容量を抑えることができます。圧縮は画像と同様、以下のようなWebサービスを使うのが最も簡単。

Compress My Code
Webサイトの表示速度を改善するプロの技10選-05

使い方は簡単。左メニューから圧縮したいコード種類(html,css,javascript)を選び、compressorをクリックし、ソースコードをテキストエリアに貼り付けて、compressボタンを押すだけ。
Webサイトの表示速度を改善するプロの技10選-06

圧縮されたソースコードを元のファイルに貼り付ければ完了。

GZIPの活用

圧縮して数KB程度なら問題ないと思いますが、CSSやJavascriptの圧縮作業を行っても数百KBになるような大きなファイルの場合、gzipがおすすめ。gzipはGoogleも推奨している圧縮方法で、HTMLやCSS、Javascriptファイルを大幅に圧縮できる手法。

GZIPについての解説はGoogleの開発者向けドキュメントに詳しく記載されています。
GZIP によるテキストの圧縮
Webサイトの表示速度を改善するプロの技10選-07

最近はレンタルサーバーでも利用できるようになっているので、ぜひ活用しましょう。
ロリポップのgzip

CDNの活用

CDNはコンテンツ・デリバリー・ネットワーク(Contents Delivery Network)の略で複数のサーバーで負荷分散を行い、表示速度を向上させるもの。jQueryやBootstrapなどのフレームワークはできるだけCDNを活用することでページスピードを改善できる場合があります。

jQuery CDN
Webサイトの表示速度を改善するプロの技10選-08

キャッシュの活用

キャッシュは、アクセスしたページのデータをブラウザで一時的に保存し、同じページに再アクセスした場合の表示速度を向上させるもの。Wordpressを使用しているなら以下のような無料プラグインを導入することで自動的にキャッシュの保存機能を使用できます。

WP Super Cache
Webサイトの表示速度を改善するプロの技10選-09

CSSスプライトの活用

CSSスプライトとは複数の細かい画像(アイコンやボタンなど)を1つの画像にまとめることで読み込み回数を減らし、表示速度を向上させるもの。

最近はフラットデザインやアイコンフォントなどが一般化しているため使われることは少なくなりましたが、
Webサイト上でどうしても画像アイコンやボタンを使用する場合にこの方法を使うことで表示速度を向上させられる場合があります。

やり方はいくつかありますが、「SpritePad」というCSSスプライトを簡単に作成できるWebツールがおすすめ。
SpritePad
Webサイトの表示速度を改善するプロの技10選-10

ドラッグ&ドロップでエリアに画像を配置していくだけで作業は完了です。画像読み込み用のCSSも自動的に作成されるため、画像をダウンロードしてコードをCSSファイルにコピーするだけで使用可能。

不要なプラグイン、ウィジェットの削除

とりあえずあればいいかな?くらいの理由で入れてみただけのプラグインやウィジェットがあるなら削除しておきましょう。ブログでよく使うブックマークボタンも表示を重くする要因の一つ。利用頻度が少ないものがあれば、思い切って削除することで表示速度向上につながります。

まとめ

ここまでの対策を行うことでPageSpeedのスコアもかなり改善されます。SEO内部対策としてはHTMLのタグ構造やschema.orgの導入などが挙げられます。この点に関しては以下の書籍に詳しく載っているので紹介しておきます。

マーケティング担当者の間で「赤本」と言われているSEO対策本がこちら。事典というタイトル通り、コンテンツ作成からページデザインまで幅広くカバーしている良書。



SEOの知識がない方にも分かりやすく解説されている内部対策の本。やや古いものの本質的なことが書かれており、一読の価値ありです。