Sustainability in Action: Yale Case Studies

Web pages are growing increasingly heavier as modern design trends, high-resolution media, and complex functionalities reshape the digital landscape. While these advancements elevate user experience, they also introduce challenges like slower load times and higher data consumption.

Over the last decade, web pages have expanded significantly in size, with a tangible environmental cost. A single page load on an average website generates about 3 grams of carbon dioxide. Back in 2011, the average response size was around 500 KB. By March 2025, it had surged to approximately 2,706 KB—a 541% increase! For a site with 10K monthly views, that growth translates to nearly 23kg of additional CO₂ emissions per month.

Thankfully, eco-friendly digital solutions do not need to sacrifice on design or capability if the right steps are taken. Case in point: Yale Case Studies. Relaunched earlier this year with a focus on efficiency, sustainability, and carbon-conscious best practices, the website proves that a greener web is within reach. 

This is how we did it.

System fonts and character-restricted brand fonts

Across the web, imagery, video, and custom fonts make up 76.2% of an average page’s total weight. A study of Google Fonts found that fonts supporting extended Latin characters have a median size of 19 KB, though file sizes can range from 100 KB to 225 KB depending on complexity and character support.

One strategy for optimization is limiting the number of font families, although potentially not a viable approach for projects that need to follow a strict brand style guide. On Yale Case Studies, which adheres to a self-enforced 500KB page weight budget, the brand-standard fonts—Yale New and Mallory—would have consumed a disproportionate share of our budget at 408KB. While Yale New was necessary for key branding, system fonts were used for the majority of the site. To reduce the impact of the custom font, the character set was reduced to support only the required characters for those instances, reducing its file size by 92%.

Component-scoped assets and critical CSS

Yale Case Studies takes a component-based approach to its site architecture, moving away from the traditional monolithic theme model. Instead of bundling all styles and scripts into a single file, each element on the page has its own dedicated CSS and JS output. More specifically, our build system outputs dozens of assets that are structured like site-layout/site-header/site-header.css as opposed to a bloated style.css.

The benefits of this method are twofold:

1. Optimized asset loading – Only the necessary component assets load for each page, eliminating unused styles and reducing CSS/JS payloads by an estimated 86%. Since not every page requires every component, this strategy ensures a leaner, faster experience.
2. Improved page speed with critical CSS – Components in the initial page render can be easily isolated and included as critical CSS without duplication. This technique removes a major render-blocking resource, making the page feel significantly faster—even with the same total asset size. Your Lighthouse scores will thank you.

Lazy loading assets

Lazy loading is a technique that defers the loading of non-essential assets until they are needed. Yale Case Studies applies this strategy to any element that could delay page rendering, including images, iFrames, CSS, and JavaScript. While most major browsers support native lazy loading, only 36.7% of web pages take the basic steps to implement this feature.

Lazy loading provides several key benefits for both performance and user experience:

• Reduced Data Usage: By loading images and media only when required, lazy loading helps conserve bandwidth, particularly for users with slower connections or limited data plans.
• Improved SEO Performance: Faster load times and efficient page rendering enhance user experience, which can positively impact search engine rankings.
• Increased Engagement: Reduced load times lead to a smoother browsing experience, boosting user satisfaction and engagement, and decreasing the likelihood of visitors abandoning the site.
• Energy Efficiency: For websites with large media files, lazy loading can lower energy consumption, ease server load, and improve overall site stability.

Green hosting

A website is always running regardless of site traffic, so infrastructure has a massive impact on how much energy a site users. Yale Case Studies is hosted on the Pantheon.io webOps platform, which runs off the Google Cloud Platform. Google’s commitment to renewable energy is impressive, and they have pledged to be carbon-free at all of its data centers by 2030. The Green Web Foundation has a directory of green web hosting services to find a platform that will support your project.

Selective image resolution

Modern web standards usually advocate for responsive images, which delivers the higher resolution images for higher density screens. We refined this principle slightly to eliminate high resolution images in contexts where the additional image information would be imperceptible to the human eye and don't improve the user experience. For example, all the thumbnails use a single size for all screen densities to reduce the system overhead of outputting and storing multiple image files.

Automatic dark mode

Dark mode is quickly becoming the new standard in web design, much like responsive design once was. As of 2021, 81.9% of users enable dark mode on their phones, and 64.6% expect websites to automatically adapt. Beyond aesthetics, dark mode is easier on the eyes and, on AMOLED screens, can reduce battery consumption by up to 63%. While the carbon savings are most impactful for mobile-heavy sites, its influence will grow as OLED monitor shipments reached a projected 1.44 million units in 2024—an annual increase of 181%.

For Yale Case Studies, dark mode introduced an additional challenge: Yale’s primary brand color, blue, consumes more energy on OLED screens at higher intensities. On a scale where 0% represents no light and 100% represents full white light, blue begins diverging significantly from red and green at 30% intensity. Multiple tests compared energy consumption across hues in both light and dark modes, but branding ultimately took priority over efficiency. In the final design, the energy delta was ~0.2 microwatts for dark mode to maintain the blue for brand consistency.

Conclusion

As websites become more visually rich and feature-packed, UI designers and developers must strike a balance between performance optimization and engaging design. A fast, efficient site enhances user experience, drives customer satisfaction, and improves conversion rates. In the case of Yale Case Studies, these optimizations have resulted in an average page load of 1 second and a carbon footprint that is up to 13.5 times lower than its predecessor. By prioritizing smart development choices, organizations can create digital experiences that are not only faster and more user-friendly but also more sustainable in the long run.