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.
Use Symbols
If you have content that is potentially reusable, consider using a Symbol to help mitigate size issue on a Page.
For instance, selecting larger sections of your page and converting it to a symbol is one of the best ways to reduce the size of the 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.
If your content has a lot of A/B Test groups, each group is a unique copy of the content, so each a/b test group creates a copy and increases the total content size significantly.
If its important to maintain a large list of a/b test groups, consider choosing more specific areas of the content you want to test, creating a symbol from that, and making a/b test groups of just that area (image, text, etc).
That way the entire content entry is not copied, but rather just the portion you want to test.
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, or convert the contents of each a/b test to a symbol. |
Too many elements on the page or big chunks of code in custom code blocks; for example, large SVG in custom code blocks. | In most cases, converting large sections of your page to symbols is the best fix, as the contents of symbols don't contribute to page size. |
For more accuracy, a developer can check file size in the browser's developer tools Network tab.
In the Visual Editor:
- Right-click in the work area of your content entry.
- 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.
In addition to managing content size, always use Best Practices to help you build great experiences.