Making a FiveM loading screen fast and light
Keep the loading screen’s own download small (ideally a few megabytes before the video), use compressed WebP images at 1920×1080, WebM video at 1080p/30 fps hosted on a CDN, one or two WOFF2 fonts, and minimal JavaScript. Avoid heavy blur and particle effects. Anything bundled in the resource is downloaded before the screen appears, so large files belong on a CDN.
A loading screen runs at the worst possible moment: while the game is loading hundreds of megabytes of the world on the same CPU, GPU and disk. A heavy page — a 4K video, dozens of fonts, animated particles — competes with that and can make joining slower and choppier. The good news is that a beautiful loading screen and a light one are not in conflict.
Why weight matters twice
- 1Download: files inside the loading screen resource are fetched before the screen can display. A 200 MB resource is a long black screen for every new player.
- 2Runtime: once shown, the page shares the machine with the game’s own loading. Heavy effects take CPU and GPU time the game wanted.
A practical budget
| Part | Target | How |
|---|---|---|
| HTML + CSS + JS | < 300 KB | No big frameworks for a static page; minify |
| Background image | 200–600 KB | 1920×1080 WebP at quality ~80 |
| Logo | < 150 KB | SVG or compressed PNG/WebP |
| Fonts | < 200 KB | 1–2 families, WOFF2, only used weights |
| Music | 3–6 MB | MP3 128–192 kbps, trimmed |
| Video | 10–30 MB | WebM VP9 1080p/30, on a CDN |
Sizes are covered in detail in the image sizes guide and video backgrounds.
Effects to avoid
| Effect | Problem | Alternative |
|---|---|---|
backdrop-filter: blur() | Unreliable in FiveM’s Chromium and expensive | A semi-transparent solid colour |
Large filter: blur() layers | Heavy GPU cost every frame | A pre-blurred image |
| Canvas particle / snow effects | Constant CPU work | A subtle CSS animation or a baked video |
| Animating width/height/top/left | Forces layout every frame | Animate transform and opacity |
| Several autoplaying videos | Multiple decoders at once | One video, or images |
The full list of what FiveM’s embedded Chromium does and does not handle well is in CEF limitations.
Where heavy media should live
Keep small, essential files (HTML, CSS, logo, font) in the resource so the screen appears instantly and never depends on an outside host. Put video and long music on a CDN with HTTPS and let them stream in after the page has appeared, behind a poster image. This combination shows something immediately and never blocks the join on a 50 MB file.
Measuring
- 1Open the loading screen in Chrome or Edge and open DevTools.
- 2In the Network tab, reload with the cache disabled: the total transferred size is what a new player downloads.
- 3Throttle to “Fast 4G” and watch how long until something meaningful appears.
- 4In the Performance tab, record ten seconds and look for long tasks and constant repaints.
- 5Fix the biggest item first — it is almost always the video or an uncompressed image.
Common questions
Can a loading screen make FiveM load slower?
Yes. Its files must download before it appears, and heavy effects use CPU and GPU time while the game is loading. A light page avoids both.
How big should a FiveM loading screen be?
Aim for the page, images and fonts under about 5 MB, with any video streamed from a CDN rather than bundled in the resource.
Why is my loading screen laggy?
Usually a 4K or 60 fps video, large blur effects, or a canvas animation. Drop the video to 1080p/30 fps and replace blurs with solid colours.
Should I put my loading screen video in the resource?
Not a large one. Every new player downloads resource files before the screen appears. Host big videos on a CDN.
Want a loading screen you never have to debug?
Build it in the browser, export once, and edit it whenever — no HTML, no re-uploads.
Start free