I attended the session and the scales fell from my eyes. In what now seems obvious — but at the time was a revelation — I learned of the colossal energy demand of the Internet. This demand makes it the largest coal-fired machine on Earth, meaning that its CO\u2082 emissions are probably at least equivalent to global air travel<\/a>. More and more people are coming online, but this, coupled with the rise of ever more obese websites<\/a>, means that the Internet’s energy demands are growing exponentially. Every additional byte transferred means more energy, which in most countries means more CO\u2082.<\/p>\n It is widely accepted that we should avoid printing emails to save trees, but this leads to a false assumption that the web is a green medium. I’m afraid to say, it is not.<\/p>\n The good news is, it needn’t be this way. Since 2009, Greenpeace has been auditing Internet companies on their energy usage, and lobbying them to improve by way of their Clicking Clean<\/a> campaign. The Green Web Foundation<\/a> has an ever-growing database of hosting companies who use renewable energy, or who are at least committed to being carbon neutral. And new tools<\/a> are emerging<\/a> to help those working on the web measure the environmental impact of our products.<\/p>\n There are also some great resources out there such as Tim Frick’s Designing for Sustainability<\/em><\/a>, three year’s worth of talks from the SustainableUX<\/a> conference, and peripheral material<\/a> that, while not explicitly focused on sustainability, can help us build lower carbon websites.<\/p>\n I decided to challenge myself to see how efficiently I could package a WordPress website. While I was at it, I thought, \u201cWhy not make the website about sustainability and WordPress?” I know, WordPress\/sustainability inception. Cool, huh?<\/p>\n And so, sustywp.com<\/a> is born. With its accompanying theme, Susty<\/a>. I’m rather chuffed to say I managed to get the load of the homepage down to 7KB of data transfer. I did actually get it down to 6KB, but the meta stuff added by Yoast bumped it up almost a whole KB! 😛 However, given I’m trying to spread a message, I deemed this to be an acceptable trade-off.<\/p>\n Before I get into the nuts and bolts, I just want to share a few headline facts:<\/p>\n The remarkable thing about this is actually how mundane it is. Heavily inspired by Heydon Pickering’s evangelizing about writing less damn code<\/a>, and projects like Brad Frost’s Death to Bullshit<\/a>, I embarked on a root and branch pruning of Underscores<\/a>, removing everything I possibly could. And to be clear, it’s not as though Underscores is full of cruft. It’s a very lean starting point for building a theme. I’m a great admirer of it and thoroughly endorse using it. However, it includes certain assumptions that didn’t chime with my spartan goal of making the smallest possible WordPress site.<\/p>\n Such as, you ask?<\/p>\n Given the constraints I had set, anything making it to the DOM had to have a very good reason to be there. With this being an experiment, I took the somewhat radical approach of relegating the navigation to its own page. This is wonderfully liberating and means I didn’t have to go through the almost always disappointing dance of wondering how I would make it look presentable, hide it for the many users who won’t care, make sure it’s robust enough to be infinitely long with never-ending dropdowns, etc.<\/p>\n This means less HTML, less CSS, and definitely no JavaScript! Win, win, win.<\/p>\n As for the sidebar? Well I’ve always had an aversion to sidebars, so that was an easy thing to remove. Susty has no widget area. I’m sure it’ll get over it.<\/p>\n Is there more fat we can trim? Well, if we’re going to have hardly any HTML, and we want minimal CSS, do we really need all those classes? I wanted to try my hand at writing CSS in the way it was intended to be used<\/a>, instead of bowing to the class-ititis and div-ititis that pervade the industry.<\/p>\n Alongside images, video and JavaScript, the other item that has become a significant factor in bloated websites is web fonts. Given that it’s now a Silicon Valley fashion for every startup to commission its own typeface as a first order of business, it seems as though every website you visit incurs downloading a bunch of font files. It may not seem so bad to tack on a hundred kilobytes for some nice type, but when you multiply this by the many different people visiting your website across different devices and browsers, fonts can easily account for hundreds of megabytes of data transfer — if not gigabytes\/terabytes\/petabytes for higher traffic websites. If you do have to use custom fonts or are in combat with the flash of un-styled text, Almost every device these days has a half-decent set of fonts installed, so why not compose a stack of potential fonts you’d like to see<\/a>, ending with either \u201cserif \u201c or \u201csans-serif.” Or embrace those default fonts altogether with a system font stack<\/a>.<\/p>\n I wanted Susty to have a bit of a Swiss Style aesthetic, so my font stack ranges from the perfectly proportioned Helvetica (which all Apple devices have by default) to sans-serif, by way of Arial, Frutiger and Nimbus Sans L.<\/p>\n As an Ubuntu user, I see Arial, which is perfectly pleasant. On my Android devices I see the default Beyond this, it’s really just the standard. The homepage of sustywp.com has no images and just one SVG which is loaded inline rather than by an HTTP request. The CSS is minified. Everything gets Gzipped. The server is tuned with NGINX and Fast-CGI cache to serve content from memory.<\/p>\n When I was boring my girlfriend, Daisy, with my plans, I asked her how she felt conceptually about a website not having a navigation, and it instead being on its own page, found via a “menu” button. She thought it sounded ok. So, when I came to show it to her, I watched eagerly as she clicked the menu link. Her response was that she didn’t really think about clicking to see the menu, and the menu appearing, as changing pages. This confirmed one of my fears that my previous obsession with eliminating page loads when building Single Page Apps (SPAs) is something that only really bothers web developer-y types. Most people don’t really notice it or think about it. So, if you make your website lightning fast, the page loads themselves are almost imperceptible anyway.<\/p>\n With that being the case, I figured why not just pretend it was a menu overlay? So, I added a cross dismiss button and a tiny bit of JavaScript to take you from the menu back to the previous page if you click it. (I did initially implement this in PHP using the We all know that things can always be better. Here are a few of the things I\u2019m working on to improve Susty:<\/p>\n Susty is an example of taking sustainable design techniques to an extreme. I’m not suggesting that we should all start building websites with this exact method. But I do think sustainability should be a much higher priority in the web design industry. It’s good to think about saving any kilobytes we can, and to think in terms of kilobytes rather than megabytes. If you do want to use a JavaScript interface library, why not try out Choo.js<\/a>, which has React-like features and comes in at just 4KB. Remember, NASA managed to put a man on the moon with about 50KB of data storage at their disposal.<\/p>\n The best thing about all this is that efficient websites means faster websites, which means:<\/p>\n Over the past six months, I’ve become increasingly interested in the topic of web sustainability. The carbon footprint of the Internet was not something I used to give much thought to, which is surprising considering my interest in environmental issues and the fact that my profession is web-based.<\/p>\n","protected":false},"author":253453,"featured_media":273336,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Delivering WordPress in a mere 7KB. Google Lighthouse score: 100\/100. Webpage Test Grade: Straight A's.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[592,1104,264],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/susty-leaf-wordpress.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/susty-leaf-wordpress.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/273332"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/253453"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=273332"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/273332\/revisions"}],"predecessor-version":[{"id":273344,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/273332\/revisions\/273344"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/273336"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=273332"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=273332"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=273332"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Is there another way?<\/h3>\n
Enter Susty WP<\/h3>\n
![\"\"](\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/susty-1.png?ssl=1\")
<\/figure>\n\n
So, how does it work?<\/h3>\n
Nav? No. Sidebar? Get rid of it. Classes? Not in my socialist utopia.<\/h3>\n
You might not need web fonts<\/h3>\n
\nCustom web fonts are also a potential antipattern for our users, for whom:<\/p>\n\n
font-display<\/code><\/a> is an new property designed to instruct the browser how to handle font downloads. This post<\/a> goes into it even more.<\/p>\nsans-serif<\/code> font (Droid Sans I believe), which actually works rather well on mobile — you’d almost think that’s what it was designed for!<\/p>\nWhat else? Standard stuff. Few or no images and SVG where possible<\/h3>\n
Bonus SPA-like features without the work or code<\/h3>\n
$_SERVER<\/code> superglobal and HTTP_REFERER<\/code>, but this breaks when using something like FastCGI cache to serve pages (i.e. those pages there is no $_SERVER<\/code> superglobal.)<\/p>\nThere\u2019s still more to come<\/h3>\n
\n
In conclusion<\/h3>\n
\n