Video rendering is one of the most heavy workloads a computer can take on. Remotion aims to at least perform similarly than traditional video editing programs.
Your experience is also dependent on your code and the hardware you run it on. Review the following performance insights to find opportunities for speeding up your render.
--concurrency flag you set can influence the rendering speed both positively and negatively. A concurrency too high and a concurrency too low can both be coutnerproductive. Use the
npx remotion benchmark command to find the optimal concurrency.
The following elements use the GPU:
- WebGL content (Three.JS, Skia, P5.js, Mapbox etc.)
- 2D Canvas graphics
- GPU-accelerated CSS properties such as
Compute instances in the cloud do not have a GPU and may take a long time to render these effects, leading to bottlenecks.
Consider replacing those effects with a precomputed image for the best performance.
Read the considerations about using the GPU.
Embedded videos can be a significant bottleneck in Remotion at the moment regardless of which component is being used. We are aware of this constraint and are encouraging users to combine Remotion with other tools such as FFmpeg to build efficient pipelines.
We are also working on alleviating this problem by making the
<OffthreadVideo> component more efficent in a future update.
Measure the impact of fetching external resources, probe for overfetching and attempt to minimize the fetching of external data.
Use caching in Local storage if possible to reduce time spent on networking.
- If you set the image format
png, it is slower than
pngis required if you are rendering a transparent video.
- The WebM codecs
vp9are very slow at encoding due to stronger compression.
See also the Encoding guide to see all tradeoffs when it comes to encoding speed.
Higher resolutions will make the render slower. If you can live with a lower resolution, scale down the picture using
Considerations for Lambda
See this article for tips specifically for Lambda.
Measuring render speed
--log=verboseto list the slowest frames of a Remotion render. Consider that the first frames rendered in a thread might be slow due to initalization.
console.timeto measure how long an operation takes in your code in order to find the slow parts of your render.
npx remotion benchmarkto try out different values for
--concurrencyto find the optimal value.