より速くするために:パフォーマンスと美しさを優先し、この数ヶ月で私のブログにいくつかの大きな変更を加えました。
サーバーと CDN#
私のブログが Cloudflare CDN を使用していると言わなければ、あなたは信じるのが難しいかもしれません。
数ヶ月前、私はブログを Vercel にホストしましたが、後で HSTS Preload List に参加しようと思ったときに Vercel のレスポンスヘッダーを変更するのが難しいことに気付きました(vercel.json
を変更する必要があるため)、そのためドメイン全体のネームサーバーを Cloudflare に変更しました。速度もそこまで悪くありませんでした。
その後、Cloudflare Pages でブログの読み込みパフォーマンステストを行ったところ、DevTools に表示される読み込み完了時間が明らかに Vercel よりも短くなりましたので、先週ブログを Cloudflare Pages に移行しました。これにより、オリジンへの遅延がなくなったため、読み込み速度が大幅に向上しました。
10 年契約と行き先の QQ グループで、私はブログのリンクを共有して皆にアクセスしてもらい、十分なフィードバックを得るためにお願いしました。ほとんどのフィードバックは次のような情報でした:初回の読み込みは 3〜5 秒で完了し、最長で 6 秒かかります。キャッシュがあるため、2 回目の読み込みは基本的に 1〜3 秒で完了します。これは、現在のアクセス体験が初期のブログよりもはるかに良くなったことを示しています。
フレームワーク#
以前は、Hexo をブログのフレームワークとして使用し、Yun をテーマとして使用していました。
Yun テーマの特徴の 1 つは、jQuery に依存せず、すべてのリソースファイルを共有 CDN を使用していることです。これにより、ブログの読み込み速度が根本的に向上しましたが、私は画像のホスティングの問題を解決する必要がありました。
しかし、あなたは言うかもしれません:"以前?それなら、Hexo 以外にも使いやすい静的ブログジェネレーターはありますか?"
実はそうです。ページを一番下までスクロールすると、フッターに次のような行が表示されます:
私のブログは現在、Valaxy をジェネレーターとして使用しています。フレームワークの開発には Vue 3、Vite 4、ESBuild が使用されているため、私のブログは優れたページ遷移体験、ホットリロード、コンポーネントのオンデマンドパッケージングを持つことができます。また、Vite と Vue のプラグインを自由に使用することもできます。
Valaxy の Yun テーマも、Hexo バージョンの優れた機能と機能を継承しているため、私はあまり多くの労力をかけずにブログを Valaxy に移行しました。
画像ホスティング#
前のいくつかの記事では、CSDN と原神社の画像ホスティングを使用していましたが、最終的にはキャッシュの問題のために自前のホスティングに移行しました。
現在の解決策は、Vercel + Cloudflare を使用して読み込むことです。以前の Cloudflare R2 と Backblaze B2 の画像ホスティングもあります。
ただし、自前の画像ホスティングは将来的にも長期間使用する予定です。大体こんな感じです。