Webサイトを最適化して表示速度を改善・高速化する方法

サイト訪問者のためにも、できるだけ表示速度を速くするようにしましょう。

今回はサイトを高速化する方法を書いていきます。

未経験や駆け出しのWebデザイナーには少し難しい内容ではありますが、一読しておくと後々役に立つと思います。

サイトの高速化の前に知っておくべきこと

サイトの表示速度を速める方法はたくさんあります。しかし、手法によっては効果の小さい場合もあります。

最適化というのは手間がかかり、サイトのメンテナンス性が落ちることもあります。

何でもかんでも最適化した結果、メンテナンスのしづらいサイトになってしまう可能性があります。

効果を検証する

最適化した結果、サイトの高速化に貢献しているかを検証するように心がけましょう。

効果が薄いのにメンテナンスに支障が出る場合は、その方法は捨ててしまって良いでしょう。

検証するには、Google ChromeのDeveloper Toolsを使います。

Chromeで右クリック→「検証」でDeveloper Toolsを表示させます。

「Network」ではダウンロードするファイルのサイズとダウンロードにかかっている時間がわかります。

「Performance」ではどんな処理がどれくらい時間がかかっているのかが分かります。

Webサイトの裏では、「サーバーにリクエストを送る」「サーバーでプログラムが動く(PHPなど)」「HTMLが返ってくる」「ブラウザがHTMLを読む」「CSSやJavaScript、画像などのファイルをダウンロードする」「JavaScriptを解釈する」「レンダリングする」「描画する」などたくさんのことが行われています。

「Performance」では、どこが高速化のボトルネックになっているのかを知ることができます。

他にも、GTmetrixというオンラインツールもあります。

これらを活用して、実際にどれくらい最適化の効果があるのかを検証しましょう。

サイトの高速化テクニックや方法

それではサイトを高速化するテクニックや方法をいくつか紹介します。

画像の圧縮

サイトの高速化において、非常に効果が大きいのが画像の圧縮です。

ポイントは二つで「サイズの縮小」と「最低限の画質まで下げる」ということです。

大きい画像は表示に時間がかかってしまいます。画像は必要最低限の大きさにしましょう。

また、Retina対応するために2つの画像を用意して、最適なサイズが表示されるようにしましょう。

<img src="img/image.jpg"
     srcset="img/image.jpg 1x,
             img/image@2x.jpg 2x"
     alt="">

 

もう一つのポイントは画質です。

PCのモニターに表示させる画像にそこまで高い画質を求める必要はありません。

私はPhotoshopでjpegを書き出す際、60~80%くらいに画質を落として書き出しています。

画像圧縮のオンラインツールもあるので、これらを使うと便利です。

オンラインイメージ最適化ツール

JPGイメージをオンラインで圧縮する

画像を適切なサイズにして圧縮すれば、サイトの表示速度はかなり改善されます。

高速サーバーを使う

サーバーのスペックも、サイトの表示速度にかなり影響を与えます。

私もいくつかサーバーを契約して試しているのですが、サーバー会社によって速度がかなり異なります。

私が「速い」と感じたのが、エックスサーバーとmixhostです。

mixhostはかなり速いですが、少々安定性に難があります。安定しているのはエックスサーバーです。

PHPのバージョンを5系から7系に変更する

PHPのバージョンはサーバーによって違いますが、多くのサーバーで7も選択できます。

PHP 5系から7になって、処理速度はかなり速くなっています。

バージョンを変更してエラーが出ないのであれば、7を使っておくのがベストです。

jQueryを使わない

jQueryはとても便利でJavaScript初心者でも簡単に使えるようになります。

ただし、便利な分ファイルのサイズも大きく読み込みに時間がかかります。

それに素のJavaScriptに比べるとプログラムの実行速度自体も遅くなります。

私は特別な理由がない限り、jQueryは使わないようにしています。

CSSでアニメーションができますし、JavaScriptもどんどん便利になっています。ブラウザ間の差異もかなりなくなってきています。

jQueryを使うメリットというのはどんどん薄れているのです。

もしjQueryを使いたいというのであれば、新しいバージョンを使って下さい。新しいバージョンのjQueryは古いIEで動きませんが、そこは切り捨てて問題ありません。

ブラウザキャッシュを有効にする

サイトの情報を毎回毎回サーバーから受け取っていると、表示に時間がかかってしまいます。

ブラウザには、閲覧したサイトのデータを残しておくことで、2回目以降の表示を速くする仕組みがあります。

これをキャッシュと言います。キャッシュには色々種類があり、それらと区別するためにブラウザキャッシュと呼ばれます。

ブラウザキャッシュは、.htaccessファイルに以下のコードを追加することで有効化できます。

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
</IfModule>

ブラウザキャッシュを利用することで、サイトの表示を速くすることができます。

ただし、「サイトのCSSを修正した」などの更新が、すぐに反映されないというデメリットもあります。

そういう場合は、cssファイル名の後ろにクエリー文字を書いて、新しいバージョンのCSSが即読み込まれるようにします。

<link rel="stylesheet" href="./css/style.css?1.0.1">

こうすると新しいCSSが読み込まれるようになります。

CSSを、インライン化する

CSSはインラインにした方が、CSSファイルを軽くでき表示も速くなります(例外もあります)。

以下のようなにstyleタグに記述してhead要素に入れてしまいましょう。@charsetは不要です。

<style>
body {
...
}
</style>

ただし、これを実際にやるのは結構面倒です。できればCSSは別ファイルで書きたいですよね。

もしGulpが使える人なら、「gulp-file-include」というパッケージがおすすめです。これを使えば、CSSのインライン挿入を自動化することが可能です。

コードを圧縮する

CSSやJavaScriptのコードを圧縮するとファイルが軽くなり、読み込みが速くなります。

コードの圧縮というのは、無駄なスペースや改行を削除することです。

自動で圧縮をしてくれるツールもあるので利用しましょう。

http://refresh-sf.com/

ただ、CSSやJavaScriptを書くたびに圧縮するのは結構手間です。

Gulpを使える人なら、clean-cssやpleeease、uglifyなどのパッケージを使って自動で圧縮することができます。

私はpleeeaseとuglifyを使っています。

重いファイルの読み込みを遅らせる

HTMLは上から順番に読まれます。もし、HTMLの上の方に重いファイルを読み込むコードがあると、ページの表示が遅くなってしまいます。

ですので、ページの表示を先にして、表示が終わってから重いファイルを読み込むという方法もあります。

Cloudflareを使う

サイトを高速で配信できるCloudflareというサービスがあります。なんと無料で利用することができます。

https://www.cloudflare.com/

Cloudflareを経由させてサイトを表示させることで、サーバー分散による負荷軽減で速度を速くすることができます。

高速化だけでなくHTTPSでの配信もできるので、試してみると良いでしょう。

GoogleのPageSpeed Insightsを使ってみよう

Googleが提供しているPageSpeed Insightsを使えば、サイトの改善点を知ることができます。

https://developers.google.com/speed/pagespeed/insights/?hl=ja

改善点が多ければ減点され、少なければ高得点になります。もし、点数が低いのなら、提案された改善点を試してみて下さい。

ちなみに、Google Analyticsの「行動」→「サイトの速度」→「速度についての提案」を選択すると複数のページをまとめて計測してくれます。

サイトを高速化したかったら、この本

本当に買って良かったと思える一冊です。この本を読めば最適化だけではなくWebサイトの仕組みまで理解することができます。

まだ読んだことがない人は、必ず本で欲しいと自信を持って言えます。

この記事で紹介した方法はほんの一部で、この本にたくさんの方法が載っています。

まとめ

冒頭にも書きましたが、サイトの高速化は検証することが大切です。効果が薄い最適化に、手間をかけないようにするためです。

結構大変ではありますが、表示速度が上がった時は本当に気持ちいいです。高速化はやり始めると止まらなくなりますね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です