Help us understand the problem. What is going on with this article?

静的な Web サイトをどうやって速くするか

どうも、源武です。

N高等学校 Advent Calender 2019」の 11 日目を担当します。

今回は、静的な Web サイトの高速化についてのお話です。

静的な Web サイトって、なに?

あらゆるアクセスに対し、一意の内容の Web ページを配信する形式のサイトです。

要は、htmlファイルなどが、そのまま表示される形式です。

ランディングページや、ポートフォリオなどによく見られます。

静的であることのメリット・デメリット

ここまでを踏まえて、静的な Web サイトのメリットを考えましょう。

メリット

  • サーバーへの負担が少ない
  • サーバーやクライアントのことを考える必要がない
  • シンプル

デメリット

  • サーバーサイドでコンテンツを動的に変更できない

内容次第では、デメリットを気にする必要はないと思います。

速度の向上をどのように検討するか

私の Web サイト (genbu.studio) を構築する上で蓄積したノウハウをもとに、いくつかのパターンを列挙します。

1. サーバーを変更する

かなり効果が大きいです。

通信経路が長い(速度が遅い)遠い地域のサーバーや、貧弱なサーバーに設置すると、その分速度が大幅に低下します。

もちろん、キャッシュを使用するようにすれば、いくら遅くても2度目のアクセス以降から速度のロスを改善することができます。

日本をターゲットとするならば、国内・または近隣の国のサーバーで Web サイトをホストする方が、より高速に閲覧できるようになります。

私のサイトでは、アジアやアメリカ、ヨーロッパなどの各国にWebサイトを設置しています。

2. CDN を使用する

世界中の各地域に設置されている、CDN(Content Delivery Network) と呼ばれる高速なサーバーにWebサイトをキャッシュし、そちらからコンテンツを配信する方法があります。

これを用いることにより、速度の向上だけでなく、ホストの通信量の削減など、効率の良いコンテンツの配信が可能になります。

私のサイトでは、CSS や画像を CDN から配信しています。

3. コンテンツを minify する

HTML、CSS、JavaScriptのコードにインデントはありませんか?

コードのインデントなどは、ほとんどの場合では実際の閲覧に影響を及ぼしません。

データ量の削減につながるため、積極的に minify して、不要なインデント・改行を除去しましょう。

規模が大きくなればなるほど、その効果は大きくなります。

私のサイトでは、CSS を minify しています。

4. 独自ドメインを使用する

これは非常に効果が大きいようでした。

独自ドメインを使用した私のサイトと、同じ内容を Netlify 備え付けのサブドメインのサーバに展開した場合の速度を、実際に計測して比較してみました。

独自ドメイン サブドメイン
1.07 秒 1.48 秒

(BrowserStack, Windows 10, Chrome 78, JPN)

なんと、0.41 秒もの差がありました。

回線が非常に速い自宅で閲覧してみましたが、やはり独自ドメインを用いた方が高速な印象でした。

Netlify をお使いの方は、Netlify DNS を使用すればより効率的に独自ドメインを設定できます。

5. 阿部寛になる

イケメンになりたかった

まとめ

Web サイトの高速化は、UXをより良いものにする上でも非常に重要です。

特に静的サイトは高速化の余地がたくさんあるので、積極的に行なっていきましょう。

では、良い Web ライフを。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away