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
720
defineModelを使って気軽にコンポーネントのv-modelをやろう
nishiharatsubasa
3
1.4k
2023 CSS
nishiharatsubasa
7
4.7k
vue_component_from_composable
nishiharatsubasa
2
640
エルデンリングに学ぶ道に迷わない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
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
460
はじめてのOSS開発からみえたGo言語の強み
shibukazu
4
1k
slog.Handlerのよくある実装ミス
sakiengineer
4
480
Generative AI Japan 第一回生成AI実践研究会「AI駆動開発の現在地──ブレイクスルーの鍵を握るのはデータ領域」
shisyu_gaku
0
330
いま注目のAIエージェントを作ってみよう
supermarimobros
0
360
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
aeonpeople
1
240
20250912_RPALT_データを集める→とっ散らかる問題_Obsidian紹介
ratsbane666
0
100
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
120
未経験者・初心者に贈る!40分でわかるAndroidアプリ開発の今と大事なポイント
operando
6
750
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
270
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Documentation Writing (for coders)
carmenintech
74
5k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
RailsConf 2023
tenderlove
30
1.2k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
GraphQLとの向き合い方2022年版
quramy
49
14k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
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円
まとめ
まとめ ・サーバーに負荷がかからない構成にする ・画像のフォーマット、 品質に気をかける ・デザインを工夫する ・無料枠を最大限に活用する
ご清聴ありがとうございました