I’ve recently made an attempt to migrate a Remix + Netlify Functions website to Remix + Vite + Netlify Functions and noticed that site has a much slower response time.
Is there something I’m missing here to optimize performance? As far as I can tell I shouldn’t have to make any significant changes to my code other than migrating the Remix app to Vite.
Here’s some further context:
Site with build using Vite: https://deploy-preview-19--climate-united-website.netlify.app/
- Using
@netlify/functions@2.6.0
- Using
@netlify/remix-adapter@2.3.0
- Using
@remix-run/node@2.8.0
Site without building with Vite: https://deploy-preview-23--climate-united-website.netlify.app/
- Using
@netlify/functions@2.5.1
- Using
@netlify/remix-adapter@2.2.0
- Using
@remix-run/node@2.8.0
You’ll notice a dramatic difference in the document load time. With the Vite build the load time is near 5 seconds.
I’ve also noticed this same performance hit with the following setup:
Site without building with Vite:
- Using
@netlify/functions@2.6.0
- Using
@netlify/remix-adapter@2.3.0
- Using
@remix-run/node@2.8.0
Both the URLs took about same time (7 seconds) for the initial load (though for me all websites load slowly). However, the subsequent requests were served in less than 500 ms as they were served from cache. Have you checked:
Thanks for providing that link. I’ve ready through it and nothing stood out to me as to what’s causing the document request is increase so dramatically.
My initial instinct is how @netlify/functions and @netlify/remix-adapter in their latest versions downloads assets from the server. I initially thought it was an issue with the Remix build files but rolling back to an earlier version of the packages mentioned is what sped up the overall document request.
Since i’m using the @netlify/functions and @netlify/remix-adapter how would I go about debugging execution time? The remix adapter handles the build of the file that gets run by the function. Any pointers there?
You can add the console.time() statements inside your Remix code and those should be visible in the function logs. Is that not happening?
Following up here after another attempt at migrating this project to Remix + Vite and noticed that the server response time, according to Chrome Performance Dev tools, the network transfer of the Document increases dramatically when using the latest version of @netlify/functions package.
See the data outline below:
Remix + @netlify/functions@2.5.1:
Remix + Vite + @netlify/functions@2.6.0:
You’ll notice that the Network Transfer duration increases from ~300ms to ~5.2s. And you’ll also see that the encoded data and decoded body KB change is negligible here.
Here are the links to environments tested:
Any further insight on what I can do resolve this would be very helpful.
I just visited the deploy preview URL (in incognito, for the very first time) and got the complete response in 800 ms:
Has something changed or are you still seeing slow responses? Mind sharing a HAR file?
So recently, in efforts to do a slow and file-by-file migration to Remix+Vite on Netlify we learned that removing the entry.server.tsx - which is recommended to be removed by Netlify - was causing the significant server response time change.
Without the custom entry.server.tsx (that uses the Netlify response handler) the server response time shot up to ~5s.
Adding it back in the response time was back down to <~400ms.
