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
RemixアプリをCloudflare PagesにデプロイしたらTTFBが3,800msになった😥
Search
saneatsu
November 24, 2024
Programming
0
71
RemixアプリをCloudflare PagesにデプロイしたらTTFBが3,800msになった😥
結論(追記)に書いたZennのURLは以下です。
https://zenn.dev/saneatsu/articles/remix-cloudflare-ttfb-improvement
saneatsu
November 24, 2024
Tweet
Share
Other Decks in Programming
See All in Programming
AIコーディングの理想と現実
tomohisa
20
24k
国漢文混用体からHolloまで
minhee
1
180
これだけは知っておきたいクラス設計の基礎知識 version 2
masuda220
PRO
24
6.3k
Agentic Applications with Symfony
el_stoffel
2
300
SQL Server ベクトル検索
odashinsuke
0
170
地域ITコミュニティの活性化とAWSに移行してみた話
yuukis
0
240
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
160
The Evolution of the CRuby Build System
kateinoigakukun
0
700
RuboCop: Modularity and AST Insights
koic
2
440
新しいPHP拡張モジュールインストール方法「PHP Installer for Extensions (PIE)」を使ってみよう!
cocoeyes02
0
380
サービスクラスのありがたみを発見したときの思い出 #phpcon_odawara
77web
4
640
SEAL - Dive into the sea of search engines - Symfony Live Berlin 2025
alexanderschranz
1
130
Featured
See All Featured
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
30k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Site-Speed That Sticks
csswizardry
5
490
A Tale of Four Properties
chriscoyier
158
23k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Code Reviewing Like a Champion
maltzj
522
40k
Building an army of robots
kneath
304
45k
Optimising Largest Contentful Paint
csswizardry
36
3.2k
Typedesign – Prime Four
hannesfritz
41
2.6k
Transcript
RemixアプリをCloudflare Pagesに デプロイしたらTTFBが3,800ms になった
アジェンダ 1. 自己紹介 2. 対象となるアプリケーション 3. 発生している問題 4. 計測用ページの作成 5.
結果 6. 考えられる原因 7. 結論(追記)
自己紹介 若菜実農(さねあつ) @saneatsu Algoageという会社でフロントエンドエンジニアをしています DMM チャットブーストCVというLINEを使ったチャットボットを提供して います 会社ではNext.jsとReact Flowを使って社内向けプロダクトを開発して います
対象となるアプリケーション 概要 趣味で作っているキュレーションサイトみたいなもの ZennのScraps に開発記録を書いています 技術スタック Remix Cloudflare Pages shadcn/ui(Radix
+ Tailwind CSS) Prisma Turso
発生している問題 TTFBが3,800msかかっている 推奨値は3G回線で600ms ページ内遷移の場合も訪れたことないページだと3,000msくらいかかってしまう 1回行ったことあるページの場合は早い
計測用ページの作成 リポジトリ: saneatsu/remix-on-cf-pages URL: https://remix-on-cf-pages.pages.dev/ 計測用のページ 1. JSON Placeholderを使ってTodoを200件取得するページ 2.
JSON Placeholderを使ってTodoを1,000件取得するページ 3. DB(Turso)の2つのテーブルから5件ずつ、計10件のデータを取得するページ ゼロからRemix x Cloudflare Pagesのアプリを作って、以下3つのページで計測する。
結果 URL TTFB /json-placeholder-200 240 - 430 ms /json-placeholder-1000 500
- 600 ms /db-connect 1970 - 2310 ms Lighthouseによる計測結果(各ページ3回測定) 。
考えられる原因 Cloudflareの設定? 初回のアクセスだからCloudflareのキャッシュの設定ではないはず TursoのCold start? Tursoは無料プランだとCold startが発生する ということで月9ドルの有料プランにしてみたが計測結果が変わらなかった
結論(追記) 結論、原因はORMとしてPrismaを使用していることで、Drizzleに移行することで問題を回避できました 詳細は以下の記事にまとめました Cloudflare Pages(Workers)でPrismaを使うとサーバーからデータを取得するのに時間がかかってしまう | Zenn