ウェブサイト高速化 Part 2

2026-03-10T23:57:32.544Z

5segです。
ウェブサイトを作り直し、国内のVPSで動かすようにしました。

構成

ほとんど、前回の記事で話した通りですが
この記事を書いた後にOVHがVPSを値上げした関係で国内VPSへ乗り換えたので、全部VPSで動かすことにしました。
なのでSSGによる恩恵があまり感じられなくなってしまったのですが、やると言ったからにはやりたいし可能な限り爆速にしたいのでここは変わらず。
ただし、メディアについてはCloudflareを経由しています。可能な限り圧縮しているものの、画像や動画は帯域を食いまくるので、節約のためです。リクエストの立ち上がりの遅さも、さほど気にならない箇所なので...

変化 (見た目)

無駄に派手なデザインをやめました。「誰かにプロフィールを見てもらう」、「誰かに記事を読んでもらう」のが目的なので、ある程度デザインを整えておいて、あとは何も追加しない方が良いという考えです。

変化 (TTFB)

curlコマンドでTTFB (Time To First Byte)を計測してみます。

旧 (Deno Deploy)

余計なリクエストを送りつけられたくないので、ホスト名の部分は伏せてます。

curl -o /dev/null -s -w "Time: %{time_starttransfer}s\n" https://xxx.xxx.deno.net/
Time: 1.203072s

1.2秒。遅いです。イライラします。

新 (VPS)

curl -o /dev/null -s -w "Time: %{time_starttransfer}s\n" https://5seg.top/
Time: 0.135612s

0.13秒！効果は絶大です。1秒以上削れています。

Cloudflare

Cloudflareは本当に遅いのか、試してみましょう。
cf.5seg.topにVPSのアドレスをセットして、プロキシするようにしています。

curl -o /dev/null -s -w "Time: %{time_starttransfer}s\n" https://cf.5seg.top/
Time: 0.520374s

0.52秒。やっぱり立ち上がりが遅いです。

変化 (Lighthouse)

Lighthouseでの計測も行ってみます。
拡張機能での計測もできますが、制限に引っかかってしまったのでCLIから。

旧 (Deno Deploy)

CHROME_PATH=/usr/bin/chrome lighthouse https://xxx.xxx.deno.net/

Lighthouse result for Deno Deploy
FCPが2.9秒、つまり約3秒もの間真っ暗(または真っ白)な画面のまま待たされるということです。Speed Indexもなかなか酷い。赤色になってないだけまだマシですが...

新 (VPS)

CHROME_PATH=/usr/bin/chrome lighthouse https://5seg.top/

Lighthouse result for VPS
全部緑色。そして100点！素晴らしいです。FCPが1.2秒、Speed Indexが2.4秒。十分でしょう。

クライアントサイドのJavaScriptなし！

旧サイトでは、閲覧時に何十個ものJavaScriptが読み込まれていました。ただ数個のアイコンを読み込んだり、ページを移動するためにJSを必要としていました。
しかし新しいサイトでは、(執筆時点で)閲覧時に読み込まれるJavaScriptは0バイト、つまりJSがありません。なので、本来あるべきウェブサイトの姿のまま、世界中に公開しています。
もしかしたらJavaScriptを加えるかもしれませんが、加えるにしてもサイズは最小限に抑え、JSを無効化した状態でも問題なく閲覧できるようにします。

やることはいっぱい

実は、アクセシビリティについては72点と、低い点数を出しています。alt属性がないなどの些細な問題ではありますが、改善するべき点であることは間違いないので、直していきます。
あとは、パフォーマンス面です。まだやれます。VPSの性能的に限界はありますが、どうにかしてFCP1.0秒、Speed Indexも2秒を切るぐらいには速くしたいです。

それでは。

記事一覧 ↩️