速くて安い Webサイトを作る Findy 私の個人開発自慢LT Night

西原 翼 株式会社 ICS フロントエンドエンジニア @crayfisher_zari

ICS MEDIAで記事を書いています 意外？ @propertyが CSSアニメーションを激変させる理由 https://ics.media/entry/241219/ https://ics.media/entry/241025/ mask-compositeでつくるCSSの 新しい表現方法

速くて安い Webサイトを作る - テーマ -

なぜ「速くて安い」なのか ・フロントエンドエンジニアとして速いサイトを作りたい ・ポケットマネーから出るので出費はなるべく抑えたい

Web Motion Catalog https://web-motion-catalog.com/ Webデザインにおける動きのアイデアなどのを紹介したサイト

主な技術構成 ・Nuxt（Vue.jsフレームワーク） ・Cloudflare Pages（静的ホスティング） ・Cloudflare Workers（FaaS） ・resend（メール送信） ・hCaptcha（BOT対策）

表示速度を速くするために やったこと

表示速度を速くするためにやったこと ・完全静的化 ・CDNの活用 ・高パフォーマンスの画像フォーマットの利用と圧縮 ・遅延読み込みの活用 ・速さ前提のデザイン

・完全静的化 →Nuxtがいい感じに静的化と最適化をやってくれます ・CDNの活用 →サーバーの応答を改善 ・高パフォーマンスの画像フォーマットの利用と圧縮 →基本WebPを採用し、ギリギリまで高圧縮にして容量を下げる ・遅延読み込みの活用 →loading="lazy"やWebフォントをページローディング後に読み込む ・速さ前提のデザイン →遅くなりそうな要素をそもそも配置しない、 低画質を許容する

安くするためにやったこと

安くするためにやったこと ・お金がかかるような機能を作らない ・無料枠の大きいサービスを活用

無料枠でできることの一例 ・Cloudflare Pages →リクエスト、帯域幅は無制限。月500ビルドまで。 ・Cloudflare Workers →日10万リクエスト、 リクエストあたりのCPU処理時間が10ミリ秒以内。 ・Resend →月3,000通のメール送信。 ・hCaptcha →月100万リクエストまで。 個人開発の初期段階としては十分

月額費用 0円

まとめ

まとめ ・サーバーに負荷がかからない構成にする ・画像のフォーマット、 品質に気をかける ・デザインを工夫する ・無料枠を最大限に活用する

ご清聴ありがとうございました