# Make your site faster

Upload your site as it is; Fylo builds an optimized copy and serves that. Your original files are never modified and can always be downloaded. Every setting on the **Performance** tab is a switch you can turn off again, on every plan.

HTML version: https://fylo.host/docs/performance · All docs: https://fylo.host/docs/

## How it works

Choose a site at the top of the **Performance** tab. On paid plans Fylo switches on its recommended settings the first time a site is uploaded; after that everything is yours to change. Each change rebuilds the optimized copy — a few seconds on a small site, longer on one with many pages or images. A spinner shows while it runs.

Because the originals are untouched, the fix for any problem is always the same: switch the setting off.

## Font

| Setting | What it does |
|---|---|
| **Self-hosted Google Fonts** | Serves Google Fonts from your own domain instead of `fonts.googleapis.com`, removing two third-party connections from the critical path. |
| **Font delivery** | *Full font* keeps everything. *Subset* ships only the characters your pages use — typically 40–60% fewer font bytes. *System fonts* ships no font at all; the site renders in each visitor's default typeface. |
| **Preload fonts** | Starts the font download immediately instead of waiting for the stylesheet. Needs self-hosted fonts. |
| **Font display swap** | Always on: text shows at once in a fallback font while web fonts load. |

Use *Full font* if scripts insert text after the page loads or visitors type into forms in a web font — a subset only contains characters found in your HTML.

## CSS

| Setting | What it does |
|---|---|
| **Minify HTML & CSS** | Strips whitespace and comments. |
| **Inline small stylesheets** | Puts stylesheets under 15 KB straight into the page, removing a render-blocking request. Larger ones stay external. |

## JS

| Setting | What it does |
|---|---|
| **Delay JavaScript** | Holds your scripts until the browser is idle or the visitor first interacts (scroll, tap, key press), or simply defers them. Cuts blocking time and speeds up first paint. |
| **Never delay** | Scripts to leave alone, one per line — part of a file name is enough (`pdf.min.js`). |
| **Self-host external CSS/JS** | Downloads third-party CSS and JS to your own domain so the browser makes fewer connections. Exclude libraries that load their own extra files. |

Delay JavaScript is the setting most likely to change behaviour. If a menu, slider or animation that should work on load stops working, add its script to **Never delay** or choose *Defer*.

## Image

| Setting | What it does |
|---|---|
| **Image Optimization** | Converts PNG, JPG and GIF to WebP and serves them from your domain. SVG and AVIF are left alone, and an image that would get bigger keeps its original. |
| **Quality** | 40–90, default 80. Lower is smaller. |
| **Responsive Images (srcset)** | Creates smaller copies of large images so phones download a phone-sized file. |
| **Properly Size Images** | Adds `width` and `height` to image tags so the page doesn't jump while loading (layout shift). |
| **Preload LCP image** | Fetches your main above-the-fold image first. Detected automatically, or name the file. |
| **Exclude** | Any image setting can skip files: one name or keyword per line. |

Each image Fylo converts counts towards a monthly quota; the meter is on the Image tab and resets each month.

| Plan | Images optimized per month |
|---|---|
| Free | 10 |
| Starter | 100 |
| Pro | 1,000 |
| Business | 5,000 |

Only real conversions count, and every size that **Responsive Images** generates is one image. An image that hasn't changed is not converted again when the site rebuilds, so re-uploading the same site or flipping another setting doesn't use quota. When the quota runs out, the remaining images are served as their originals until next month. **Optimize images now** re-runs conversion after you change quality or exclusions.

## Lazy Load

| Setting | What it does |
|---|---|
| **Lazy Load Images** | Loads images only as they scroll into view. Exclude your hero image so it is never delayed. |
| **Lazy Load Iframes & Videos** | Does the same for maps, embeds and videos. |
| **Lightweight YouTube Previews** | Replaces each YouTube embed with a thumbnail that loads the real player on click. One embed can outweigh the rest of the page. |

## A sensible order

1. Minify, self-hosted fonts, Image Optimization, Properly Size Images, Lazy Load Iframes, YouTube previews — safe on almost every site.
2. Responsive Images and Preload LCP — check the hero image still looks sharp.
3. Delay JavaScript, font subsetting, Lazy Load Images — test the site after each.

Measure before and after with the [Website Speed Checker](https://fylo.host/tool/website-speed-checker).

## From an AI app

With the [MCP server](https://fylo.host/docs/api#mcp-performance) connected, "turn on WebP images and lazy-load iframes for my portfolio" changes the same settings and reports what was saved.