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
710
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
7.1k
Other Decks in Technology
See All in Technology
結局QUICで通信は速くなるの?
kota_yata
8
7.4k
Serverless Meetup #21
yoshidashingo
1
130
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く!現場で活用するためのAIエージェント実践入門(Findyランチセッション)
smiyawaki0820
7
1.2k
LTに影響を受けてテンプレリポジトリを作った話
hol1kgmg
0
380
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
230
「Roblox」の開発環境とその効率化 ~DAU9700万人超の巨大プラットフォームの開発 事始め~
keitatanji
0
140
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
3
1.3k
Engineering Failure-Resilient Systems
infraplumber0
0
120
LLMで構造化出力の成功率をグンと上げる方法
keisuketakiguchi
0
980
リリース2ヶ月で収益化した話
kent_code3
1
310
✨敗北解法コレクション✨〜Expertだった頃に足りなかった知識と技術〜
nanachi
1
760
Segment Anything Modelの最新動向:SAM2とその発展系
tenten0727
0
900
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.3k
For a Future-Friendly Web
brad_frost
179
9.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Docker and Python
trallard
45
3.5k
Automating Front-end Workflow
addyosmani
1370
200k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.8k
Bash Introduction
62gerente
614
210k
Music & Morning Musume
bryan
46
6.7k
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円
まとめ
まとめ ・サーバーに負荷がかからない構成にする ・画像のフォーマット、 品質に気をかける ・デザインを工夫する ・無料枠を最大限に活用する
ご清聴ありがとうございました