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
17k
速くて安いWebサイトを作る
速くて安いWebサイトを目指して作ったときのポイントです。
追記
2/20:Cloudflare Pagesの毎月の無料枠のビルド回数が誤っていたので修正しました(50→500)
にしはら
February 19, 2025
Tweet
Share
More Decks by にしはら
See All by にしはら
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.1k
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
750
defineModelを使って気軽にコンポーネントのv-modelをやろう
nishiharatsubasa
3
1.4k
2023 CSS
nishiharatsubasa
7
4.7k
vue_component_from_composable
nishiharatsubasa
2
660
エルデンリングに学ぶ道に迷わないUIと世界観
nishiharatsubasa
0
1.4k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
nishiharatsubasa
2
7.1k
Other Decks in Technology
See All in Technology
[読書]AWSゲームブック〜GuardDuty魔神とインシデント対応の旅〜DevIO2025
cmusudakeisuke
0
150
AIでデータ活用を加速させる取り組み / Leveraging AI to accelerate data utilization
okiyuki99
1
660
IBC 2025 動画技術関連レポート / IBC 2025 Report
cyberagentdevelopers
PRO
2
190
ラスベガスの歩き方 2025年版(re:Invent 事前勉強会)
junjikoide
0
260
MCP ✖️ Apps SDKを触ってみた
hisuzuya
0
380
スタートアップの現場で実践しているテストマネジメント #jasst_kyushu
makky_tyuyan
0
140
激動の時代を爆速リチーミングで乗り越えろ
sansantech
PRO
1
120
dbtとAIエージェントを組み合わせて見えたデータ調査の新しい形
10xinc
2
730
SCONE - 動画配信の帯域を最適化する新プロトコル
kazuho
1
390
Zero Trust DNS でより安全なインターネット アクセス
murachiakira
0
100
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
3
510
What's new in OpenShift 4.20
redhatlivestreaming
0
290
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
190
55k
How GitHub (no longer) Works
holman
315
140k
Visualization
eitanlees
149
16k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
130k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Into the Great Unknown - MozCon
thekraken
40
2.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
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円
まとめ
まとめ ・サーバーに負荷がかからない構成にする ・画像のフォーマット、 品質に気をかける ・デザインを工夫する ・無料枠を最大限に活用する
ご清聴ありがとうございました