<h2 id="h8d027c8ed3">はじめに</h2><p>モダンフロントエンドも阿部寛さんも大好きなマスターカタダです！</p><p>今回はとにかくパフォーマンスが良い「阿部寛のホームページ」を題材にWebサイトのパフォーマンスについて解説しつつ、モダンフロントエンド的な手法でWebサイトのパフォーマンスを改善する方法をご紹介します。</p><h2 id="hd73e763085">もっとも表示速度の速い公式サイト、「阿部寛のホームページ」</h2><p>Web界隈では有名なミームになっている阿部寛のホームページですが、初期表示速度が0.2s ~ 0.4sとべらぼうに速いです。</p><p>（2024年10月現在、阿部寛のホームページがなぜかタイムアウトしてしまいアクセスできなくなっています…泣）</p><p>PCだけでなく、Nintendoの3DSでもサイトを爆速で表示できてしまうほど軽量です。</p><p><a href="https://www.youtube.com/watch?v=7bV14cD8z18">https://www.youtube.com/watch?v=7bV14cD8z18</a></p><h3 id="h6b4ab6badc">阿部寛のホームページはなぜ速いか？</h3><p>表示速度の速さの理由は下記が考えられます。</p><ol><li>画像が少なく、サーバーからレスポンスされるファイル容量が少ない（軽量）</li><li>クライアントで実行されるJSがない or ほぼない</li><li>サーバーサイドで実行される処理がない or ほぼない</li><li>サーバーが日本に置かれている（おそらく）</li></ol><p>とにかく軽量なサイトであることが、阿部寛のホームページの初期表示速度を爆速にしています。</p><p>では全てのWebサイトがシンプルかつ軽量にできるかと言われるとそんなことはなく、実際には多くの画像を使うこともあるし、クライアント側でJSを実行することもあるでしょう。</p><p>阿部寛のホームページは複雑な機能や動的な表示を犠牲にする代わりに、爆速な初期表示を実現しているのです。</p><h2 id="hed285f0c26">パフォーマンスが低いWebサイトとは</h2><p>もちろん全てのWebサイトで実現したい表示速度は阿部寛のホームページ並みの速度だと思います。</p><p>しかし現実は、多くの画像を表示したいし、データベースに登録したデータによって動的に表示項目を切り替えたいし、データの整形や処理のためにクライアントでJSを実行したいですよね。</p><p>Webサイトの機能や表示をリッチにしようとすればするほど、Webサイトのパフォーマンスは低下します。</p><h3 id="he337d4728b">低パフォーマンスなサンプルサイト作ってみました</h3><p>実際に初期表示が遅いサイトを紹介するのが手っ取り早いんですが、名指しするのも良くないので、擬似的に低パフォーマンスなサイトを構築してデプロイしてみました。</p><p><a href="https://d83fa058.gig-demo.pages.dev/" target="_blank" rel="noopener noreferrer nofollow">低パフォーマンスなサンプルサイト</a></p><p>初期表示速度を手元で計測すると、サーバーからの応答<strong>5.04s + </strong>クライアントの処理<strong>3.0s = 8.04s</strong>でした。</p><p>実際にこんな速度のWebサイトがあったらアクセスしたことを後悔するレベルです…。（さすがに言い過ぎかも）</p><figure><img src="https://images.microcms-assets.io/assets/0b9c56e585404b659842183a9dfaf05a/a1a9067558444dc28e28dfac39a0bbcf/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-10-29%2015.09.29.png" alt="" width="1324" height="844"></figure><h3 id="h1f4ebe42a3">なぜパフォーマンスが低いか？</h3><p>作成したサンプルでは下記の内容を擬似的に再現し、パフォーマンスを低下させています。</p><h4 id="hfbcf513a62">1. サーバーサイドとの通信に時間がかかっている</h4><p>大量の画像が存在していたり、取得するデータ量が多かったりすると初期表示速度がその分遅くなります。</p><p>また、サーバー自体のスペックや物理的に距離が離れているとサーバーからのレスポンスが遅れるため、初期表示速度に影響します。</p><p>今回のサンプルでは擬似的にデータフェッチ部分を5sスリープさせることで再現しています。</p><h4 id="h5a9d8b0ba6">2. クライアント上でさまざまなJavaSciptの処理が実行されている</h4><p>サーバーサイドから取得したデータを、クライアントで処理する場合にも初期表示速度が遅れることがあります。</p><p>今回のサンプルでは擬似的に取得してきたデータを加工する処理を仮定して3sスリープさせています。</p><h4 id="h6844326a4d">3. リクエストがキャッシュされていない</h4><p>後述するTipsでも紹介しますが、リクエストをキャッシュしていないと毎回サーバーサイドとの通信が発生するため、初期表示速度は常に遅いままになります。</p><p>今回のサンプルでは特にキャッシュを利用する記述をしていません。</p><h4 id="ha21312819f">4. 日本以外のサーバーにホスティングされている</h4><p>物理的にWebサイトがホスティングされているサーバーが日本から遠いと初期表示が遅れます。</p><p>今回はデプロイが面倒なので再現はしていませんが、日本から物理的に離れた国にあるサーバーにホスティングすることで初期表示速度がかなり遅くなります。</p><h4 id="h0693104fc6">etc...</h4><h2 id="h77a1ab8fbf">モダンフロントエンド技術によるアプローチでWebサイトのパフォーマンスを向上させるためのTips</h2><p>先ほどご紹介した低パフォーマンスなサイトも、モダンフロントエンド技術を使うことで、阿部寛のホームページのようなパフォーマンスに近づけることができます。</p><p>もはやフロントエンドなのか？という声も聞こえてくるかもですが、アプリケーションを実装、デプロイ、運用するところまでをモダンフロントエンドだと捉えているので、そういう思想ということで許してください。</p><p>当ブログは下記のパフォーマンス改善を全て盛り込んでいるため、改善結果は当ブログのパフォーマンスを確認しつつ解説します。</p><p><strong>私（キッサカタダ）の戦闘力（表示速度）は0.3 ~ 0.4sです。</strong></p><figure><img src="https://images.microcms-assets.io/assets/0b9c56e585404b659842183a9dfaf05a/64f93a739da749558c1d0886b0f64245/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202024-10-29%2015.59.10.png" alt="" width="1294" height="1110"></figure><h3 id="h9b5c5376fe">キャッシュを使う</h3><p>キャッシュとは、表示したWebサイトの情報やアプリの処理などを一時的に保存したデータのことです。</p><p>モダンフロントエンド技術では、適切にWebサイトの情報をキャッシュし、高速に表示するための機能が揃ってきています。</p><p>後述するCDNを使えば、簡単にエッジサーバーを使ってアプリケーションをホスティングすることができ、エッジサーバーにページをキャッシュしておくことで、全てのユーザーにキャッシュを使用させて高速にWebページを表示させることが可能です。</p><p>常にデータが更新され続けるサイトやサービスには向かない場合もありますが、多くのWebサイトがキャッシュを使うことでパフォーマンスを大幅に改善することができます。</p><h3 id="h1dfe44bb03">遷移先のページをpreloadする</h3><p>トップページ以外で使える手法として、遷移する可能性のあるページを、ユーザーのアクションを待たずして読み込んでしまうpreloadという手法も有効です。</p><p>当ブログで実装したものだと、ナビゲーションのアイテムがリンクになっていて、それらをホバーした際にページをロードさせています。</p><p>これによりキャッシュがなくてもページ遷移後の表示速度が大幅に向上します。</p><p>使い所によっては不要なAPIリクエストが増えてしまい逆にパフォーマンスを損ねてしまう可能性もあるため、適切に使用する必要があります。</p><h3 id="h9705e1ed3a">CDNを使う</h3><p>CDNとはContents Delivery Networkの略で、数多くのキャッシュサーバーなどで構成されたプラットフォームを用いることにより、Webサイトのコンテンツをエンドユーザーに届けるための仕組みのことです。</p><p>前述したキャッシュも、CDNを使ってWebサイトをホスティングすることでCDN上にキャッシュされ、CDNでキャッシュさえされていれば各エンドユーザーがキャッシュを使って高速にサイトを表示させることができます。</p><p>CDNを使う場合は大元のサーバーの物理的な距離による応答速度の遅延は発生しなくなります。</p><p>CDNのキャッシュサーバーは世界各地に配置されており、リクエストを送信したユーザーから最も物理的に近い位置にあるキャッシュサーバーからレスポンスされるため、世界中のユーザーに対して高速にWebサイトを表示させることが可能です。</p><p>CDNとして有名なものだと、Cloudflare, CloudFront, Vercelなどがあり、当ブログはCloudflareを利用しています。</p><p><a href="https://www.cloudflare.com/ja-jp/">https://www.cloudflare.com/ja-jp/</a></p><p><a href="https://aws.amazon.com/jp/cloudfront/">https://aws.amazon.com/jp/cloudfront/</a></p><p><a href="https://vercel.com/">https://vercel.com/</a></p><h3 id="ha9645ddb2a">SSR(<strong>Server Side Rendering</strong>)とCSR(<strong>Client Side Rendering</strong>)を使い分ける</h3><p>レンダリングとは、ざっくりいうとWebページに必要な情報をもとに実際のページを描画することを指します。従来のフロントエンド技術では、クライアント（ブラウザ）上でレンダリングを行うCSR(Client Side Rendering)しかできなかったのですが、RemixやNext.jsといったモダンフロントエンド技術を使うことでサーバーでレンダリングを行うSSR(Server Side Rendering)も使えるようになります。</p><p>CSRだけだと処理がクライアントに集約してしまうことでパフォーマンスが低下したり、もっとクリティカルなところで言うとセキュリティ的な問題がありました。</p><p>SSRすることでセキュアな実装をしつつ、レンダリングもサーバー側に寄せることでパフォーマンスの最適化をすることができます。</p><p>RemixやNext.jsといったフルスタックフレームワークを使用することでSSRを取り入れたサイトを構築できます。</p><p><a href="https://remix.run/">https://remix.run/</a></p><p><a href="https://nextjs.org/">https://nextjs.org/</a></p><h3 id="hb4a92a9a8c">おまけ: SSG(<strong>Static Site Generation</strong>)する</h3><p>前述したSSRやCSRでは、エンドユーザーからのリクエストのたびにデータを取得し、画面をサーバーないしはブラウザでレンダリングするものでした。つまり動的にサイトを表示するための技術です。</p><p>SSG(Static Site Generation)はその名の通り静的なサイトを生成する技術です。</p><p>主にブログや動的なデータを必要としないサイトを構築する場合に非常な有効な手段なのですが、ソースコードの修正時や記事の追加時に毎回静的なHTMLを生成してホスティングすることで、非常に高速なサイトを作成することができます。</p><p>原理としては阿部寛のホームページに最も近い状態になるため、要件さえ合えば一旦SSGしておけばなんとかなります。</p><p>先ほど紹介したRemixやNext.jsでもSSGできますし、SSG専用のフレームワークとしてAstroというものもあります。</p><p><a href="https://astro.build/">https://astro.build/</a></p><h2 id="h9be0c3393d">おわりに</h2><p>プロダクトの価値を最大限ユーザーに届けるためにはUXの良さは必須で、Webサイトのパフォーマンス（初期表示速度）もUXを担う重要な要素です。</p><p>モダンフロントエンド技術を使えば、従来のフロントエンド技術では実現できなかったパフォーマンスを出すことができ、素晴らしいプロダクトの価値を素晴らしいままにユーザーに届けることが可能になると考えています。</p><p>モダンフロントエンドは変化が激しい界隈ですが、最新の技術をキャッチアップしつつプロダクトに落とし込むことで、より良いプロダクトを作れると信じています。</p><p>当記事の内容も、皆さんのWebサイトのパフォーマンス改善のヒントになれば幸いです。</p>