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
680
defineModelを使って気軽にコンポーネントのv-modelをやろう
nishiharatsubasa
3
1.3k
2023 CSS
nishiharatsubasa
7
4.6k
vue_component_from_composable
nishiharatsubasa
2
620
エルデンリングに学ぶ道に迷わない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
5min GuardDuty Extended Threat Detection EKS
takakuni
0
140
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
440
Agentic Workflowという選択肢を考える
tkikuchi1002
1
500
セキュリティの民主化は何故必要なのか_AWS WAF 運用の 10 の苦悩から学ぶ
yoh
1
140
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
170
より良いプロダクトの開発を目指して - 情報を中心としたプロダクト開発 #phpcon #phpcon2025
bengo4com
1
3.1k
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
210
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
AIエージェント最前線! Amazon Bedrock、Amazon Q、そしてMCPを使いこなそう
minorun365
PRO
14
5.1k
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
4
480
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
400
Featured
See All Featured
KATA
mclloyd
29
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
BBQ
matthewcrist
89
9.7k
How to train your dragon (web standard)
notwaldorf
93
6.1k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
The Cult of Friendly URLs
andyhume
79
6.5k
Producing Creativity
orderedlist
PRO
346
40k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
GraphQLとの向き合い方2022年版
quramy
48
14k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
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円
まとめ
まとめ ・サーバーに負荷がかからない構成にする ・画像のフォーマット、 品質に気をかける ・デザインを工夫する ・無料枠を最大限に活用する
ご清聴ありがとうございました