# Making a FiveM loading screen fast and light

> Why heavy loading screens make FiveM load slower, and how to keep yours light: page weight budgets, images, video, fonts, JavaScript and CSS effects to avoid, hosting large media, and measuring it in a browser.

Source: https://fam-tools.com/guides/fivem-loading-screen-performance · FAM Tools · published 2026-09-11 · updated 2026-09-11 · about 11 min

**Short answer.** 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.

## Key points

- Resource files are downloaded **before** the loading screen can show.
- Budget: page + images + fonts under ~5 MB; stream video separately.
- WebP images, WebM video, WOFF2 fonts.
- Avoid large blurs, `backdrop-filter`, canvas particle systems and constant re-layouts.
- Measure in a desktop browser with throttling before blaming FiveM.

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

1. **Download**: 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.
2. **Runtime**: 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](https://fam-tools.com/guides/fivem-image-sizes-assets-guide) and [video backgrounds](https://fam-tools.com/guides/fivem-loading-screen-video-background).

## 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](https://fam-tools.com/guides/fivem-nui-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

1. Open the loading screen in Chrome or Edge and open DevTools.
2. In the Network tab, reload with the cache disabled: the total transferred size is what a new player downloads.
3. Throttle to “Fast 4G” and watch how long until something meaningful appears.
4. In the Performance tab, record ten seconds and look for long tasks and constant repaints.
5. Fix the biggest item first — it is almost always the video or an uncompressed image.

## 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.

## Related

- https://fam-tools.com/guides/fivem-loading-screen-video-background
- https://fam-tools.com/guides/fivem-image-sizes-assets-guide
- https://fam-tools.com/guides/fivem-nui-cef-limitations
- https://fam-tools.com/guides/fivem-loading-screen-resolution-responsive