Made in Builder.io

Join us for an AI launch event by

Builder.io and Figma
Talk to Us
Product
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.


Looking to hire a third party to help with your project?

Submit a project request and our partnerships team will reach out to connect you with an Expert from our partner ecosystem.

Connect with us

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

Get the latest from Builder.io

Developer Newsletter

Latest tips, tricks, and news for frontend developers from our blog

Product Newsletter

Latest features and updates on the Builder.io platform

By submitting, you agree to our Privacy Policy

Product

Features

Pricing

What's New

Developers

Builder for Developers

Developer Docs

Open Source Projects

Performance Insights

Headless CMS: Visual Guide

Resources

Documentation

Blog

Community Forum

Templates

Partners

Submit an Idea

Use Cases

Landing Pages

Headless CMS

Headless Storefront

Customer Showcase

Customer Success Stories

Builder.io logo

Visually build and optimize digital experiences on any tech stack. No coding required, and developer approved.

Get Started

Log In

Product

Features

Pricing

Integrations

React.js

Next.js

Gatsby

Angular

Vue

Nuxt

Hydrogen

Salesforce

All Integrations

Use Cases

© 2023 Builder.io, Inc.

Security

Privacy Policy

SaaS Terms