Keeping your content as small as possible is a best practice throughout web development. With less to deliver, your content can load faster and improve your app's UX.
While minimizing how much data your users have to download, you can still deliver graphics, video, and beautiful content with a few pointers and techniques in mind.
Images and videos are often large files, which means if they aren't optimized, you could be making visitors to your site download more data than they need. This in turn can slow down your site precisely when you need to capture visitor attention.
Builder comes with a number of features that automatically optimize assets that tend to use a lot of data.
- For still pictures, use the Image block, as recommended. For more detail, read Working with Images.
- For videos and gifs, get acquainted with your options for featuring videos in Working with Videos.
If you have content that is potentially reusable, consider using a Symbol to help mitigate size issue on a Page. The benefits of using Symbols include:
- Symbols don't contribute to the file size.
- A symbol turns any component into reusable content that you can drag and drop onto any Page.
For more information on Symbols, read Intro to Symbols and Making a Symbol.
In the Visual Editor:
- Right-click in the work area of your content entry.
- Filter and select Download Content as JSON.
After you download the content, right click on the downloaded file and check file size. On a Mac, choose Get Info and on Windows choose Properties.
When a content entry is too big, saving returns an error. This section covers the error and suggests additional measures you can take to reduce the size of your content entry:
If you have optimized images, used the Image and Video blocks, and—if applicable—used Symbols, but are still getting the above error, check the following table for common pitfalls and suggestions for improvement.
| Issue | Suggestion |
|---|---|
Too many A/B test variations on a Page | Remove unnecessary or unused tests or variations, so they don’t count toward the file size limit. |
Too many elements on the page or big chunks of code in custom code blocks; for example, large SVG in custom code blocks. | Use a Using a |
For more accuracy, a developer can check file size in the browser's developer tools Network tab.
In addition to managing content size, always use Best Practices to help you build great experiences.
