How to find files that slow down your page

In TeleportHQ, open the Assets Manager and click Uploads. When the page you're editing uses files that are heavy for a web page, a line such as 1 heavy file on this page · 1.2 MB published as-is shows at the top. Click it to list each heavy file with its size and the reason it slows the page, then click a file's name to show it in its folder.

Before you start#

• The TeleportHQ heavy-files list checks the page that's open in the editor. Open the page you want to check first. On a component, the list doesn't show.
• The line only appears when the page uses at least one heavy file. No line means no heavy files on that page.

See the heavy files on a page#

1. Open the page in the editor, for example your homepage.
2. In the left sidebar, click the folder icon (tooltip Assets Manager).
3. Click the Uploads tab.

4. At the top, below Search, find the line with the warning sign, for example 1 heavy file on this page · 1.2 MB published as-is. The part after the dot adds up the heavy files that visitors download whole. It's missing when every heavy file is resized when you publish.

   

5. Click the line. The list opens, with the heaviest file first. For each file it shows:

   1. The file's name. Click it to show the file in its folder.
   2. Its size, in orange (heavy) or red (very heavy).
   3. Why it slows the page, for example "Published as-is: every visitor downloads the whole file."

   

6. To close the list, click the line again.

The list counts every element on the page, including elements inside the components it uses, such as the navigation and the footer.

Show a heavy file in its folder#

In the open TeleportHQ heavy-files list, click the file's name (tooltip Show in its folder). The file's folder opens in a panel beside the sidebar, with the file selected.

From there, right-click the file to see where it's used (View linked nodes), to turn its optimization back on (Enable Optimisations) or to edit it (Edit Image…).

What counts as heavy#

TeleportHQ judges each file by its type and by what visitors download when you publish:

Documents and text files are never flagged. A heavy file still uploads and publishes: the warning is advice, not a limit. For your plan's real limits, see Which files can I upload, and how big can they be?

Make a heavy file lighter#

First make a lighter copy on your computer:

• A photo over 5 MB: save a smaller copy, for example 2,500 pixels wide as a JPG or WebP file.
• A picture with Disable Optimisations on: right-click it in Uploads and choose Enable Optimisations, unless it looked blurry that way. See How image optimization works (and how to turn it off).
• An SVG over 300 KB: SVGs are never resized. Simplify it in your design tool, or save it as a PNG or WebP picture.
• A video or audio file: compress or shorten it. A background video only needs a few seconds that loop.
• A 3D model: use a version with fewer details or smaller textures.
• A font file: use the font's WOFF2 file, which is much smaller.

Then swap it in:

1. Upload the lighter file. See How to upload images, videos and files.
2. On the canvas, select the element that shows the heavy file.
3. In Uploads, point at the lighter file and click the button on its row (tooltip replace asset).
4. When nothing uses the heavy file any more, delete it. See How to rename or delete files (and remove unused ones).

Spot heavy files anywhere in your project#

• In Uploads, a heavy file's size shows in orange (heavy) or red (very heavy), with a warning sign, in every folder. Point at the size to read why, for example "Very heavy: Published as-is: every visitor downloads the whole file."

  

• At the bottom of Uploads, set Sort files by: to size to list the largest files first.
• When you upload a heavy file, TeleportHQ warns you right away with the file's name, its size and the reason. See How to upload images, videos and files.

Check that it worked#

After you swap in a lighter file, the line at the top of Uploads shows fewer files, or disappears when the page has no heavy files left. Publish your site so visitors get the lighter file. See How to publish your site.

The line updates as soon as a file changes, without reloading the editor. For example, choosing Disable Optimisations on a picture over 300 KB that the page uses adds it to the line at once, and Enable Optimisations takes it off again (unless the original is 5 MB or more).

Troubleshooting#

I don't see a heavy-files line The open page uses no heavy files, or you're editing a component instead of a page. Open a page and look again.

A file I know is big isn't in the list The list only covers the open page. The file may be used on another page, or not at all. Custom fonts and pictures set as a background in a CSS class aren't in the list either: find them in Uploads, where their size shows in orange or red.

Good to know#

• Pictures that TeleportHQ resizes reach visitors smaller than the stored file. They're only flagged when the original is so large (5 MB or more) that it slows uploads and resizing.
• The sizes use 1 KB = 1,024 bytes and 1 MB = 1,024 KB.