Lower carbon websites for freelancers and small businesses - Part four

Taking action (part two)

Or

Fonts of knowledge and editing your scripts

This is the final article on taking action to make your website lighter weight and less carbon intensive. The previous articles covered The carbon footprint of the internet, Measuring your sites carbon footprint and Optimising the media on your website.

This article covers efficient and effective use of fonts and what scripts might be running on your site and what actions you might be able to take.

Fonts: Tripping the light font-astic

I find it pretty common to find self-built sites with a range of fonts across the pages. The headings might be a different font to the body copy, which is different to the testimonial quote, which is different to the hand writing style value statements.?

Often site builders like WIX, Squarespace and Elementor make it very easy to sprinkle different fonts all across your site but trickier to be consistent. Sometimes the effect is great and worth the additional page weight. Often though it makes a site look less coherent and fussy.

Keep things simple.

A single font family with a couple of different weights to add hierarchy to your site content is a really effective way of making your site legible and coherent. Using a single font family with a bolder weight for headings and a regular weight for body copy is often a clean, professional look.

Pair custom fonts with system fonts.?

For websites there are two categories of fonts you can use, system fonts (sometimes called web safe fonts) and custom fonts.

System fonts are included on a device and don’t need to be loaded from an external source when used. They include old school fonts you’ll probably recognise like Arial, Times New Roman, Georgia and Helvetica. Different devices and operating systems have different fonts included. The advantage of system fonts from a low weight/carbon point of view is that no data needs to be transferred to view them. If a web page tells the browser that all the text on the page should be in Arial font, the browser simply loads that font file from its local files.

Custom fonts are fonts from providers like Google, Adobe or premium fonts that have been paid for. They can help set the tone of your site and help it stand out from the crowd.

When you add a custom font to your site any device visiting a page will need to load that font file as the page is rendering. That might be a font file/files that are stored locally on your hosting platform (fonts that you have purchased and downloaded) or they might be loaded from a third party server (Google and Adobe Fonts often work like this).?

Using a custom font for headings is a great way of adding emphasis to the most important and attention grabbing messages on your site. It helps “scanners” (users who scan sites for key info rather than reading every bit of copy) to hone in on relevant information on a page. It helps make your site look sexy/modern/professional/fun (delete as appropriate). As always there is a balance to be struck if you want to consider the footprint of your site.

The always useful Sustainable.Dev site has a great article on the topic of system font stacks if you want to do a bit more background reading.

A practical example

Pairing a great custom font with a system font is a great way of keeping page weights down.?

The screenshot below uses a great Serif font, “Playfair Display” from Google fonts. As you’ve probably guessed the headings below are 500 weight (everyone plays the “guess the weight of the font” game right?).

The custom font (Playfair Display) is paired with the sans serif system font from my Mac (.SF NS). System fonts can vary from device to device but generally include fonts like Avenir, Helvetica, Arial etc.???

I don’t think this combination sacrifices anything in the way of aesthetics. The headings are bold and emphatic, the body copy clear and legible.

Font action checklist

1. Check how many you are using on a page.?
2. Ask if they are all necessary
3. Ask if any custom fonts can be replaced with a system font

Scripts: Tearing up the script

Websites can be a lot like harried Hollywood agents. They want to be effective at their job but are simply overwhelmed by too many scripts.

What do I mean by scripts? Javascript (and similar coding languages) is a type of code that allows a site to do something based on user interaction with your site.

A tracking script such as a Google Analytics snippet or Facebook Pixel allows you to monitor and record how a user came to your site and what they did when they were browsing. They can also monitor the performance of your online advertising and help you be more targeted in your advertising campaigns.??

Scripts can also add a layer of interactivity to your site. Simple interactions can be achieved using CSS and HTML but for more complex interactions Javascript comes into its own.

Typical examples?

Navigation - Menus that appear or slide in when you click a menu button or hamburger icon are often controlled using scripts.

Fading or sliding animation as you scroll - If elements of the page fade in or animate onto the page as you scroll, this typically requires script.

Carousels - The animation and scroll effects are typically controlled using scripts.?

For a lot of sites built using page builders (WIX, SquareSpace, Elementor) the page builder element will be controlled by Javascript. A site built by an agency or web developer might be built using CSS and HTML for the majority of the site construction with a little Javascript thrown in for interactions.

Tracking scripts action checklist

1. Check what tracking scripts are running on your site. How?

• Squarespace - To check for Google Analytics from the Home menu, click Settings, and then click Advanced then click External API keys.
• Squarespace - To check for Facebook Pixel from the Home menu, click Settings, then click Advanced then click Code Injection.
• WIX?- For Google Analytics from the Dashboard navigate to Marketing & SEO > Marketing Integrations?
• Wix - For Facebook Pixel from the Dashboard navigate to Marketing & SEO > Marketing Integrations?
• Wordpress - there are a number of ways to add the required scripts.?A plugin is often used so check for obvious options in tools or on your dashboard. Alternatively the code can be added directly to your site header file. To check this from the Admin area, click Appearance then Theme File Editor then select Header.php and check for scripts. They will be before the <body <?php body_class(); ?>> tag.

2. Ask yourself if you need to continue collecting the data

3. If you do, consider using some lighter weight tracking software like Plausible, Fathom or Koko (Wordpress only)

“Interaction scripts” action checklist

1. Check for interaction based events by scrolling through a page, hovering over elements and seeing what happens.?
2. Take notes of any animations or changes that happen as you go. Note any elements like carousels etc.
3. Assess whether they are required to maximise the efficiency of the site. Can a simpler element put your message across in an engaging and effective manner?
4. Remove any animations or interactive elements that you don’t need.??

When you’ve taken these steps, retest your site and see how the metrics have improved.

I'm always happy to talk about lowering the carbon footprints of websites, just drop me a line!