While Squarespace has a number of measures in place to ensure fast load times, content added to your site impacts how quickly it loads. For example, pages with many images can load slowly, especially on mobile devices and slower connections.
Whenever possible, keep each page on your site to 5 MB or less.
Use this guide to check the size of individual pages and to get your page size within this ideal range. This helps decrease the loading time on your site. To learn about common issues related to site loading time, visit My site is loading slowly.
Check page loading speed
- Open Developer Tools.
- Click the Network tab.
- Refresh the page to display the load time.
Another tool used to measure site loading time is Google’s PageSpeed Insights. This tool is ideal for sites coded from scratch, instead of sites built using a CMS. Since Squarespace sites use a CMS, PageSpeed Insights can return false negatives. If you see an error while using this tool, it doesn’t necessarily mean there’s an issue with your site.
Check your page size
If a page take longer to load than you'd like, check its page size.
One way to do this is with Chrome Developer Tools:
- Open Google Chrome. If you're logged into Squarespace, log out or open a private browser window.
- Open a new tab.
- Open Chrome Developer Tools. Shortcuts:
- Mac - ⌘ + Option + J
- Windows - Ctrl + Shift + J
- In the same tab, open the page you want to check. Developer Tools should stay open.
- In Developer Tools, click the Network tab. If information doesn't appear in this tab, refresh the page.
- Review the total page size at the bottom of the screen. In the example below, it's shown as "1.0MB transferred."
- Click the Size column to sort the page content by size. This shows 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 the file's name to see the image.
You should aim for a page size of 5 MB or less. 1 MB is the safest size for cellular connections. If your page size is larger, see our tips below for reducing page size.
Reduce your page size
Since content on most pages loads simultaneously, pages with a lot of content take longer to load. If a page is larger than 5 MB, removing content or reducing the size of your images can help it load faster.
To reduce the content on a page:
- Ensure there are no more than 60 blocks per page. To remove a block from a page, visit Deleting blocks.
- If the page has more than one topic, split it into multiple pages. This can also make it easier for visitors to find the information they need and help improve your site's SEO.
- Reduce the number of videos. Embedded content like YouTube or Vimeo videos can increase load times, especially on mobile devices. Instead, spread the videos across multiple pages using links to help visitors navigate from one page to another.
- If your blog landing page is loading slowly, use blog excerpts to add teasers for each post, rather than showing the full text of the post. You can also enable AMP to help post posts load faster on mobile devices.
- If your site uses stacked Index Pages (version 7.0), reduce the number of sections, especially sections with galleries.
Help images load quickly
Large images and pages with lots of images can take a long time to load. By following some best practices, you can speed up image-heavy pages.
Reduce image size
Keep images below 500 KB with a width of 1500px to 2500px. An image compressor like JPEGmini can help reduce file size without sacrificing quality. For more image tips, visit Formatting your images for display on the web.
Tip: To upload a smaller image file, resize it using any third-party image editing software before uploading it.
Don’t overload galleries
Limit galleries to 50 images each. Think of gallery sections, Gallery Blocks, and Gallery Pages as display cases, rather than total inventory.
Use .jpg images
Whenever possible, use the .jpg image file type. Limit .gifs or animations.
Enable Ajax loading (version 7.0)
If your site is on version 7.0 and your template supports it, enable Ajax loading. Ajax makes page loading appear quicker and seamless. It's ideal for content-heavy pages, such as Blog Pages and Gallery Pages.