表示速度を改善して快適なWebサイトを作る

こんにちは！CODE CLUB965のKです！

今回は、快適なWebサイトをテーマに書きたいと思います。
Webサイトを開発する人であれば、全員が抑えておくべき内容です！

どういうWebサイトが使っていて快適でしょうか？
速度が早い、機能が便利、画面がわかりやすい、など色々要素はあると思いますが、今回は表示速度の速さについて書きたいと思います。

阿部寛さんの公式ホームページの表示速度が非常に早いということで、一時期話題になりました。
http://abehiroshi.la.coocan.jp/

これくらい早いと、快適ですよね。

ECサイトであれば表示速度が遅いのは命取り

表示速度の遅いサイトって、それだけで見る気がなくなりますよね。

特にECサイトでは、サイトが利用されなくなるとそれだけ売上げが落ちることになるので、表示速度の遅さが命取りになります。

Amazonが計測したデータによると、0.1%表示速度が遅くなると1%売上が下がるそうです。

怖いですね。笑

まずは速度の計測を行う

まずは開発したWebサイトの速度評価しましょう。

以下のWebサイトを使うと速度評価ができます。
PageSpeedInsights

Googleが公開しているサイトで、WebサイトのURLを入れるだけで簡単に速度評価ができます。

速度改善のためのアドバイスも表示されるので、サイトの構築ができたら評価を実施して、可能であれば公開前にアドバイスの対応をしましょう。

Webサイトを速くする方法

手段は色々とあるのですが、今回は実践しやすいものを2つ紹介します。

1. 画像ファイルを圧縮をする

画像ファイルのサイズが大きいと、画像が表示されるまでに時間がかかるようになり、結果としてサイト全体が遅い印象になります。

画像ファイルは、画質を落とさずにファイルサイズを圧縮することができるので、Webサイトで画像ファイルを扱う時にはファイルサイズを圧縮した方が良いです。

圧縮する手段は色々とありますが、例えば以下のサイトで画像ファイルのサイズ圧縮ができます。
https://www.iloveimg.com/ja/compress-image

2. CSSとJavascriptのファイルを圧縮する

画像ファイルと同様、読み込んでいるCSSとJavascriptについてもサイズを圧縮することができます。

CSSとJavascriptは人間が読めるように改行が入っていたり、わかりやすい変数名が付いていたりしますが、Webサイト公開時点ではそのようになっている必要はありません。

改行を全て取り除いたり、変数名をアルファベット1文字などにすることで、ファイルを圧縮するのです。

この圧縮作業は手作業ではできないので、こちらもツールを使って自動で行うようにするのが基本です。

ツールについては、例えば以下のサイトで紹介がされているので見てみて下さい。
https://ferret-plus.com/5227

最後に

Webサイトを開発する時には、ぜひ表示速度についても意識してみて下さい！
また今回紹介した方法についてもぜひ試してみてください！
あなたのWebサイトがより使いやすくなるはずです！

それでは、また！

Follow me!