How to Set a Page Weight for Sustainable and Faster Website

·

,
Spread the love

In today’s digital landscape, creating websites that are both environmentally friendly and fast-loading is paramount. One effective strategy to achieve this is by setting a page weight budget—a predetermined limit on the total file size of a web page. In this comprehensive guide, we’ll walk you through the process of setting a page weight budget for your website, helping you reduce its environmental impact while improving user experience and performance.

Efficiency by design means is figuring out how to achieve the client’s goals with the least amount of data.

Page Weight for Sustainable and Faster Website

Our introduction to page weight budgets came through insights from Tim Frick of Mightybytes in Chicago, and it has been nothing short of transformative for our work. By integrating page weight budgeting into our projects, we’ve witnessed remarkable enhancements. These include accelerated website speeds, heightened user experiences, improved search engine performance, and heightened sustainability.

This post delves into the process of crafting your own Page Weight Budgets, illuminating how they can be effectively utilized in real-world projects to elevate user experiences. Furthermore, it underscores the pivotal role they play in addressing the Climate Emergency, empowering you to make a meaningful contribution toward a more sustainable future.

What is a page weight budget?

A page weight budget is literally a budget of how much a webpage can weigh. Not in grams of course, but in kilobytes or megabytes of files. Specifically, it is the size of files transferred over the internet when a webpage is loaded.

When the budget has been set, the team’s goal is to deliver each key page of the website in no more than the agreed budget, ideally less. It is a clear benchmark for all members of the team to focus on in planning and design through to development.

It’s just like a project budget, but for your pages.

How to set a page weight budget

The purpose for a page Weight for Sustainable and faster website is to focus the project team on making the website as efficient as possible, but the budget does have to be realistic.

Benchmarking involves comparing the performance of your website with the previous version and analyzing the performance of main competitors to identify industry standards. The goal is to be at least 20% more efficient than the top-performing competitor.

Additionally, it’s crucial to consider the worst likely connection of your target users and their expectations of load times. This information helps calculate the budget for page weight. Tools like http://www.performancebudget.io/ can assist in estimating this.

Based on these two sets of data, a decision should be made to agree on a budget. This budget may be a range, with the first point representing the minimum standard and the second point being the stretch goal. It’s essential to leverage both experience and intuition in setting this budget.

Page-Weight-for-a-Sustainable-and-Faster-Website
We used colour, space and typography to create a lightweight yet engaging experience

Benefits of Page Weight for Sustainable and faster websites

Setting a page weight budget provides several benefits:

  1. Focus and Accountability: Having a tangible goal helps to focus efforts and hold the team accountable for delivering an efficient website.
  2. Efficiency: Even if the target isn’t met, striving for it typically results in a more efficient website compared to not having a budget at all.
  3. Reduced Page Sizes: Introducing page weight budgeting often leads to a significant reduction in average page sizes, enhancing website performance and load times.
  4. Improved User Experience: With smaller page sizes, users experience faster load times and smoother browsing experiences, leading to higher satisfaction and engagement.
  5. Enhanced Accessibility: Smaller page sizes also benefit users with slower internet connections or limited bandwidth, improving accessibility for all users.
  6. Environmental Impact: By reducing data transfer over the internet, page weight budgeting contributes to a reduction in carbon emissions, aligning with sustainability goals.

These benefits showcase the effectiveness of page weight budgeting in optimizing website performance, user experience, and environmental sustainability. While it’s not necessarily easy to implement, the rewards make it a worthwhile endeavor for any web development team.

Look at the references:

Fonts

Also read about – 5 Eco-Friendly Fonts for Sustainable Web Design

FontsSystem FontTTFWOFF2Subset WOFF2
Arial0kb
Times New Roman0kb
Inter UI Regular253kb88kb10kb
Inter UI Bold256kb95kb10kb
Inter UI Italic259kb95kb10kb
Roboto Regular172kb66kb9kb
Roboto Bold171kb67kb9kb
Roboto Italic174kb72kb11kb

Front-end code

ScriptFront end weight
JQuery33.4kb
Google Analytics42.3kb
Google Tag Manager39.4kb
Matomo Analytics39.3kb
HotJar92kb
Gravity Forms13kb
Algolia Elastic Search35.3kb

Images

Banner
The image used for the estimates provided below. Even petrol heads are more efficient in the correct format.
ImagesPNGPNG Retina (2X)JPGJPG Retina (2X)WEBPWEBP Retina (2X)
64 x 643.3kb9.0kb3.3kb9.7kb900b2.3kb
128 x 1288.5kb25.6kb9.7kb29.5kb2.4kb6.1kb
humbnail 382 x 25538.0kb128.0kb44.1kb78.7kb9.1kb24.1kb
Medium Image 640 x 480106.8kb350.6kb60.0kb145.9kb20.8kb56.7kb
Banner 1200 x 500172.8kb564.1kb136.7kb235.7kb28.3kb75.0kb
Full screen 1440 x 900354.5kb1.1mb148.9kb303.5kb54.3kb133.0kb

Videos

Video durationHDV 1080h264 720MPEG-2
1 minute157MB371MB943MB
5 minutes786MB1.8GB4.7GB
20 minutes3.1GB7.4GB18.8GB
60 minutes9.4GB22.3GB47.1GB

Validate your Page Weight for Sustainable and Faster Website

Indeed, while setting a page weight budget is crucial for guiding decisions during design and development, it’s essential to validate whether the budget has been met upon project completion. Tools like Chrome developer tools or apps such as GT Metrix can help measure the final page weight accurately.

These tools not only validate the budget but also identify missed optimization opportunities, allowing for further improvements to the website.

Moreover, regardless of whether the budget is met or not, it’s vital for the entire team to learn about the impact of the decisions made throughout the process. This knowledge equips the team to make more informed choices in future projects, ultimately leading to continuous improvement and refinement of their practices.

You may also read:

Profile image - Gaurav Verma

About the Author – Gaurav Verma

Gaurav Verma is a UX Designer with a passion for sustainability, known for his expertise in creating user-centric experiences. An avid reader and writer, he combines his love for design with a commitment to environmental stewardship, seeking innovative solutions that prioritize both user needs and ecological responsibility.