When Smaller Is Better
Can web developers help save the planet? Not by ourselves. However, developers can help lower the environmental impact of website building. We’ve mentioned before how the main cause of electricity use of a finished website is the number of calls being made to the server the website is hosted on. A major driver of those server requests comes from the JavaScript and CSS files placed on your website. Luckily, the ecosystem has changed over the years to include build systems like Grunt and Webpack, which are able to reduce asset sizes and server calls.
Programs like these allow for the minification and bundling of JavaScript and CSS files. Webpack, for example, can take your website’s JavaScript and CSS files and bundle them together, to reduce the amount of HTTP calls being made. By using Webpack—which is built in to our favourite website design tool, Gatsby—a much tinier environmental footprint is being made. Webpack can also perform asset minification for you. Think of it like a ZIP file for your website’s server calls. All the info gets transferred, but in a smaller package, further increasing energy efficiency. There are other tools as well to reduce CSS file footprints.
To further reduce CSS calls, tools like PurgeCSS can also be part of your development workflow. PurgeCSS reduces the overall size of your CSS files by ‘purging’ unused selectors from the CSS frameworks you are using to build your website. The result is your website only requests the files it is using when a call to the server is made, reducing compute work needed. I would also be remiss not to discuss the impact of image sizes on greening a website.
The image format you choose is another important factor in website development. Images are quite often the most popular and largest assets of any website, and the format they are delivered in matters. Two modern formats, AVIF and WebP, greatly benefit both the end user and designer as they improve both the compression, speed, and the quality of the images, especially when compared to old formats like JPEG. By using these more modern formats, the images on your website will load faster, look better, and cost less to host than before. If a client sees a great looking image, that image loads fast for them, and the images size is reduced on your server by 50% compared to JPEG, isn’t that a win-win?
Related pages: Low-Carbon Website Design
Leave a Comment