Reduce Your Digital Footprint by 70%+
Performance & Efficiency: The Environmental Impact of Your Website
In the age of digital convenience, it's easy to overlook the environmental impact of our online activities. Every click, scroll, and page load contributes to our digital carbon footprint. For example, a website with a large page load size can significantly increase energy consumption. Understanding this, we took a closer look at our own Squarespace site. We discovered that our page load size was a hefty 13.81 MB, which, with just 1,000 visits, is equivalent to driving 19.69 miles in a Tesla Model S. This realization prompted us to take action to make our site as efficient and eco-friendly as possible.
With Squarespace being a drag-and-drop builder it is a convenient solution for many, but one that often results in large page file sizes due to inefficient code structure and unnecessary weight. Initially, we considered creating a new site from scratch or switching to a lighter site builder. However, like many of our clients, we operate on a budget, so we decided to maximize impact with the resources available. Here’s how we optimized our site:
Reduced image file sizes
Used SVGs instead of PNGs
Limited & intentional use of motion or animation
How We Did It
Reduce Image File Sizes
Images are often the largest files on a webpage leading to unnecessary energy consumption and slow page loads. It is best to ensured all images are sized correctly and are properly compressed to reduce page file size to improve load performance and efficiency.
Save Images: Gather & save all of the images on our site (noted their maximum pixel height & width).
Reduce Image Size: Resize images to the maximum dimensions they'll be displayed on your site. For example, if an image will only be displayed at 800 pixels wide, don’t use an image larger than that. You can use tools like Figma, Photoshop or Illustrator to do this. While saving the resized images ensure you save them as 72 dpi and compress to highest level possible.
Compress Images: Use online tools like TinyPNG.com to further compress image files without noticeable quality loss. This can drastically reduce the file size, up to 80%.
Implement: Update your site with the optimized images.
P.S. Make sure you properly provide alt text for all images to ensure web accessibly.
Replace PNGs with SVGs
Vector graphics like logos and icons are often stored as PNGs, but using SVGs can save a lot of space and improve loading times. SVGs (Scalable Vector Graphics) are code-based, meaning they are often lighter and more efficient than flat images such as PNGs or JPGs. By replacing as many PNGs with SVGs, including converting GIF animations to SVG or CSS-based animations you can further reduce your file size and maintain visual quality without the heavy data cost per site visit.
Identify SVGs: Identify graphics that are suitable for SVG usage. This includes logos, icons, and other simple vector-based graphics.
Save SVG File: You can not convert PNG files to SVG easily or cleanly. I recommend saving the original source SVG when possible.
Optimized: SVGs can be large files depending on their complexity, to combat this run it through an compression software such as SVGOMG. Once compressed copy the SVG code.
Implement: Squarespace does not support SVG as media files but a work around is uploading the SVG code snippet into the code asset component and it will populate the SVG. Here is an example that shows uploading the SVG directly or doing it through a URL:
<div id="example" style="padding: 1px; display: flex; justify-content: center; align-items: center;">
<img src="…." alt="lorem impsum">
or
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" alt="lorem impsum">
…
</svg></div>
Limited & Intentional Motion
Animations and motion graphics are engaging and can enhance user experience, but they come with a cost. Large, complex animations can add considerable weight to a webpage, increasing load times and energy consumption. You don’t have to create a flat, unengaging site but aimed to use motion intentionally. By replacing heavy GIF animations with lighter SVG or CSS-based animations, you can retain visual interest while minimizing your digital footprint.
Bonus: Green Host
One of the most impactful ways to reduce a website’s environmental impact is by choosing a hosting provider that relies on renewable energy. Although our current website builder limits our ability to switch to a green host, we’re committed to making this change in the future. In the meantime, we purchase renewable energy for our home offices to offset some of our digital footprint. If you have the flexibility to choose your hosting provider, consider options like GreenGeeks, DreamHost, A2 Hosting, SiteGround, or HostPapa, known for their commitment to sustainability.
Our Results
After implementing these changes, we achieved a remarkable 72% reduction in our page load size, bringing it down from 13.81 MB to just 3.23 MB. While our journey toward efficiency and sustainability is ongoing, we are proud of the strides we’ve made. By focusing on performance and efficiency, we not only enhance the user experience but also take meaningful steps toward reducing our environmental impact, one page load at a time.
To read more about our journey and detailed case study, visit our case study.