Save-Data for Low Bandwidth Users

Everyone likes a fast website, but some users have connections and data plans that make it especially critical. Some browsers support a ‘saves-data’ setting which sends an HTTP header along with requests that the server can use to respond with a lighter weight page.

In mobile Chrome this is called ‘Lite Mode’. Desktop browsers can also enable the setting via an extension. Turning the setting on doesn’t necessarily do much on its own, but it does however give the server a chance to make its own aggressive optimisations knowing the user is on board.

To help low-bandwidth users have a good time websites can detect the header and avoid serving unnecessary assets such as custom fonts or background images and videos.

I’ve created a few save-data customisations here on my site. When the WordPress functions.php file detects this setting it doesn’t enqueue the custom fonts stylesheet from Google Fonts. I’m also using slightly different styles to drop the decorative background image from the masthead.

You can see the difference here:

The setting can be detected server-side by looking for a HTTP header (save-data=on) or client side in JS to set a flag for your CSS selectors.

<?php

function saveData(): bool {
   return ( isset($_SERVER["HTTP_SAVE_DATA"]) &&
      strtolower($_SERVER["HTTP_SAVE_DATA"]) === 'on' 
    );
}
//JS example (courtesy of Nooshu)
//add save-data class name to document element for CSS selectors
if ("connection" in navigator) {
    if (navigator.connection.saveData === true) {
        document.documentElement.classList.add('save-data');
    }
}

Exactly what you do with save-data is up to you. Nothing is automatic, so it’s up to the website to determine what can be changed to better serve those users. It just gives you a clear hint at the user’s preference about bandwidth usage.

Using AWS Cloudfront with a Custom Domain and Free SSL

AWS Cloudfront is a CDN for delivering content to your users faster, by serving it from locations closer to them. It caches requests nearer to users and call pull the original content from its S3 service, or your own web server.

By default a Cloudfront distribution comes with an SSL enabled subdomain on the cloudfront.net domain name that looks something like this:


dlksg932809.cloudfront.net //default example
cdn.mikehealy.com.au //custom domain

You can also create a free SSL certificate through AWS for your own custom domain (or subdomain) and point that to your Cloudfront distribution. This is especially useful if you’re using Cloudfront to serve a static site in lieu of a conventional server.

Creating a Free, Custom SSL through AWS Certificate Manager

Go to AWS’ Certificate Manager product and choose ‘Request a certificate’.

You’ll be asked to specify your domain (or subdomain) and which validation method to use.

DNS Validation

This method has you setting a CNAME record for the domain to prove that you have control of the domain. It’s the preferred method, however some DNS providers don’t support the characters required due to faulty validation rules, and so it might not be available to you.

Email Validation

This is the alternative method and requires you to have access to receive mail at a common admin email address such as administrator@example.com for your root domain.

The process after either creating your DNS CNAME or selecting email validation is essentially to follow the prompts and let AWS provision a new certificate for you.

Setting up your Cloudfront Distribution

Once your certificate has been created you can create your new distribution and select it as the SSL certificate to use. The other options for your distribution aren’t covered in this post, but you can now use your own (sub)domain to point to this distribution and your choice of S3 or your own web server to act as the origin server.

Provisioning the distribution takes a little while, usually more than 15 minutes in my experience.
Once that’s happened you’ll have a great, low cost static file serving distribution on your own domain with free SSL!

This is great for low-cost side projects or serving static files for your main website that would not otherwise justify setting up a web server and configuring Lets Encrypt, or having to purchase a traditional SSL certificate.

CDNs for WordPress

You can use a plugin (of course) to rewrite your content URLs so they are served off your CDN. This leaves the editing and publishing process unchanged. The plugin will handle converting local URLs to CDN versions.

As mentioned you have the choice of using your local web server, or S3 as the origin for your Cloudfront distribution. One advantage of moving your media off your WordPress site and onto S3 as the main store is that your local site install stays smaller and is therefore easier to move and backup.

Useful WordPress / S3 / CDN plugins

Beauty vs Bandwidth

Some visual flair, a bit of bold imagery and a beautiful custom font or two can be great ways of making your website enticing. Those elements bring trade offs though in the form of increased page weight and load time.

The great thing about a website is that it can be accessed anywhere, from a bucketload of different devices. It’s also a challenge because you don’t know what context your users are coming from.

Those design enhancements that delight someone in their office could be a source of frustration when your page loads slowly when they’re out and in a hurry. It is possible to detect devices and remove some of the unnecessary, heavier items from the page, but this approach isn’t perfect. An iPhone struggling to hold onto a 3G connection is a different beast from one connected to a good WiFi connection; so knowing what sort of device your user is on is only part of the story.

It’s important to consider everything added to the page as having pros and cons. Being too stingy with the page weight could lead to a boring design. Being too fast and free with image sliders, video and graphics could come back to bite you when a busy user on a bad connection gets frustrated and leaves.

The design needs to balance these needs.