Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
速くて安いWebサイトを作る
Search
にしはら
February 19, 2025
Technology
17
16k
速くて安いWebサイトを作る
速くて安いWebサイトを目指して作ったときのポイントです。
追記
2/20:Cloudflare Pagesの毎月の無料枠のビルド回数が誤っていたので修正しました(50→500)
にしはら
February 19, 2025
Tweet
Share
More Decks by にしはら
See All by にしはら
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
700
defineModelを使って気軽にコンポーネントのv-modelをやろう
nishiharatsubasa
3
1.4k
2023 CSS
nishiharatsubasa
7
4.7k
vue_component_from_composable
nishiharatsubasa
2
630
エルデンリングに学ぶ道に迷わないUIと世界観
nishiharatsubasa
0
1.3k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
nishiharatsubasa
2
7k
Other Decks in Technology
See All in Technology
低レイヤソフトウェア技術者が YouTuberとして食っていこうとした話
sat
PRO
7
5.9k
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
msksgm
0
290
Semantic Machine Intelligence for Vision, Language, and Actions
keio_smilab
PRO
2
410
新規事業におけるAIリサーチの活用例
ranxxx
0
170
AI駆動開発 with MixLeap Study【大阪支部 #3】
lycorptech_jp
PRO
0
270
ecspressoの設計思想に至る道 / sekkeinight2025
fujiwara3
12
2k
ML Pipelineの開発と運用を OpenTelemetryで繋ぐ @ OpenTelemetry Meetup 2025-07
getty708
0
310
M365アカウント侵害時の初動対応
lhazy
7
5k
Shadow DOMとセキュリティ - 光と影の境界を探る / Shibuya.XSS techtalk #13
masatokinugawa
0
310
会社もクラウドも違うけど 通じたコスト削減テクニック/Cost optimization strategies effective regardless of company or cloud provider
aeonpeople
2
350
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
170
「育てる」サーバーレス 〜チーム開発研修で学んだ、小さく始めて大きく拡張するAWS設計〜
yu_kod
1
110
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Building Applications with DynamoDB
mza
95
6.5k
Navigating Team Friction
lara
187
15k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
We Have a Design System, Now What?
morganepeng
53
7.7k
A Tale of Four Properties
chriscoyier
160
23k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Rails Girls Zürich Keynote
gr2m
95
14k
Transcript
速くて安い 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円
まとめ
まとめ ・サーバーに負荷がかからない構成にする ・画像のフォーマット、 品質に気をかける ・デザインを工夫する ・無料枠を最大限に活用する
ご清聴ありがとうございました