5 tips for creating speedier, more sustainable websites with Fastly

As a member of the Solutions Engineering team at Fastly, I create solutions for customers using Fastly’s flexible edge compute cloud, often with a specific focus on improving web performance. Recently I spent some time investigating sustainable development goals and was pleasantly surprised to see the strong relationship between digital sustainability and web performance.

Digital sustainability references have been a little hard to gather, so I’m particularly grateful that the W3C Sustainable Web Design Community Group has collected and recently published the Web Sustainability Guidelines draft report.

The report consists of several recommendations, each identified with a number (as seen in the bulleted list below). Each recommendation has details, success criteria, benefits, examples, and resources. However, there are 5 key recommendations that really stand out for significantly improving web performance. 

In the guide there are several additional suggestions that contribute to their effectiveness: 

• 2.6 Create a Frictionless Lightweight Experience By Default

• 2.7 Avoid Unnecessary Or An Overabundance Of Assets

• 2.16 Take a More Sustainable Approach To Media Assets

• 2.18 Take a More Sustainable Approach To Typefaces

• 2.26 Incorporate Performance Testing Into Each Major Release Cycle

• 3.1 Identify Relevant Technical Indicators

• 3.2 Minify Your HTML, CSS, And JavaScript

• 3.7 Rigorously Assess Third-party Services

• 3.9 Resolve Render Blocking Content

• 5.27 Define Performance And Environmental Budgets

But let’s take a deeper look at the five key recommendations:

2.15 Take a More Sustainable Approach To Image Assets

Of all the data which comprises the largest over-the-wire transfer rates within the average website or application, images are usually those which are responsible due to their quantity and usefulness. As such, doing all you can to reduce their size and unnecessary loading will be beneficial for sustainability.

Success criterion - Optimize images: Resize, optimize and compress each image (outside the browser), offering different sizes (for each image) for different screen resolutions.

Performance benefit: By optimizing your images, you can significantly speed up your website in terms of HTTP requests, data transfer, and even in some cases the physical rendering effort - all of which have an impact on a visitor's user-experience and speed of access.

The Fastly focus: Fastly Image Optimizer improves performance without sacrificing user experience by enhancing image-heavy page load speeds with optimized images, transformed at the edge. You can delight your site’s visitors with fast-loading pages — and let your dev team focus on more fulfilling work than optimizing images. 

4.2 Optimize Browser Caching

Browser caching reduces the requirement for files to need to be constantly reloaded from the server, and in certain situations, it can even allow for files to be viewed offline (or in the case of a reverse-proxy, send immediate recurring requests without additional calculation or computation from the server). As such, this will have sustainability and performance benefits (for instance by greatly reducing Time-To-First-Byte).

Success criterion - Server-side caching: If using a CMS, install an applicable plugin to enable on-the-fly server-side caching. Otherwise, use the provided server configuration files to include and tweak the file-type cache expiration using expires, bfcache, or cache-control HTTP header. If using a language or framework that generates pages on request, cache responses for static pages so that they can be reused for future visitors.

Performance benefit: Unmodified files don't need to constantly be redownloaded (saving bandwidth, and server-side caching reduces the amount of computing resources required (as fewer HTTP requests will likely be submitted). Also, being selective over cached content balances faster reloads over the need to request new pages, which means that visitors may experience less latency due to data being held for repeat requests.

The Fastly focus: We love caching! Caching in both the browser and Fastly is pretty powerful. Check Cache freshness and TTLs for details and best practices. 

4.3 Compress Your Files

Every file will take up a certain amount of room on a server's hard drive, and this data will need to be sent across-the-wire to each visitor. Doing so will consume resources, but by using compression algorithms you can shrink each file to make its journey less impactful.

Success criterion - Server-side compression: If using a CMS, install an applicable plugin to enable on-the-fly server-side compression, such as Brotli or GZIP. Otherwise, use the provided server configuration files to include and tweak the performance-related features to the requirements.

The Fastly focus: Lossless compression of assets is a clear performance win. Fastly can compress both cacheable and non-cacheable content. Delivering compressed content through Fastly has the details. 

4.7 Frequency For Refresh Is Relevant To Visitor Needs

Only send data from the server when the visitor needs it. As much as possible, you can rely on client-side or server-side cache and client-side / local storage. Rather than refreshing data on a given frequency, it might be up to the visitor to manually ask for a refresh.

Success criterion - Refresh frequency: The frequency for refresh (of both the cache, locally stored data, and the page) is defined depending on visitor needs.

Economic benefit: Caching can potentially reduce costs by reducing the amount of data transmitted over the network.

The Fastly focus: Core to caching content in Fastly, you can modify how long we cache content for, see Cache freshness and TTLs, and invalidate content when it changes, see Purging.  

4.10 Consider CDNs and Edge Caching

Edge caching and CDN delivery can help optimize sustainable delivery of digital services by optimizing the way in which your website's traffic is transferred over the internet.

Success criterion - Content Delivery Networks (CDNs): When building for a globally distributed audience, use a CDN to store and serve simple read-only, pre-generated resources in a fast and efficient manner. Although they definitely can increase performance, it is also another layer of infrastructure which needs to be considered for sustainability.

Performance benefit: Visitors experience less latency due to the distance between them and the server is reduced.

The Fastly focus: It’s hard not to recommend this one, we believe that edge caching can deliver fast, personalized experiences globally.

Let’s Build Together

With Fastly as a partner, we can work together to build speedier, more sustainable websites.