Page size can affect your site's mobile compatibility and overall loading speed. Use this guide to check the size of a page and which parts of it take up the most space. We recommend using images under 500 KB and keeping overall page size under 5 MB.
Step 1 - Open Chrome Developer Tools
Check how much content is on a page using Chrome Developer Tools:
- Open Google Chrome. (If you're logged into Squarespace, log out.)
- Open a new tab.
- Open Chrome Developer Tools. Shortcuts:
- Mac - ⌘ + Option + J
- Windows - Ctrl + Shift + J
- In that same tab, open the page you want to check. Developer Tools should stay open.
- In Developer Tools, click the Network tab. You'll use this tab to look for potential problems in the next steps.
Step 2 - Check page content file sizes
In the Network tab, click the Size column to sort all of the page content by size. This will help you identify the parts of the page that take up the most memory and are potentially slowing it down, especially on mobile.
The larger content will most likely be images. Click on the file's name to see the image. We recommend keeping images under 500 KB. If any images are significantly larger than that, they could cause your site to load slowly.
Tip: If you decide to upload a smaller image file, resize it using any image editing software before uploading it.
Step 3 - Check overall page size
Next, review the total page size at the bottom of the screen. In the example below, it's shown as "1.0MB transferred." You should aim for 5 MB or less. 1 MB is the safest size for cellular connections.
To reduce the page size, remove some of the elements on the page or upload smaller images the next time you edit it. For example, we recommend adding no more than 60 blocks to a page.