Made in Builder.io

Announcing Visual Copilot - Figma to live in half the time

Builder.io logo
Talk to Us
Platform
Developers
Talk to Us

Blog

Home

Resources

Blog

Forum

Github

Login

Signup

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

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:

  1. Right-click in the work area of your content entry.
  2. 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.

Screenshot of the context menu within the Visual Editor. The option to Download Content as JSON is highlighted.

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.

IssueSuggestion

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 jpg or png in an Image block instead of an svg in custom code blocks. Builder's Image and Video blocks automatically optimize pictures and videos. If you still need to use an svg, be sure to minify it using an external tool.

Using a jpg or png rather than an svg saves space because the actual image is not stored in the content entry, unlike an svg.

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.

Was this article helpful?

Product

Visual CMS

Theme Studio for Shopify

Sign up

Login

Featured Integrations

React

Angular

Next.js

Gatsby

Get In Touch

Chat With Us

Twitter

Linkedin

Careers

© 2020 Builder.io, Inc.

Security

Privacy Policy

Terms of Service

Newsletter

Get the latest from Builder.io

By submitting, you agree to our Privacy Policy