速くて安いWebサイトを作る

速くて安い 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円

まとめ

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

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

速くて安いWebサイトを作る

速くて安いWebサイトを作る

にしはら

More Decks by にしはら

Other Decks in Technology

Featured

Transcript