Transcription
Sustainable web designfor everyoneState of the Browser 2021Tom Greenwood, Wholegrain Digital@eatwholegrain
Internet emissions are hugeICTGermanyGlobal Aviation
Energy in manufacture and operationData centresTransmissionnetworksEnd user devices
This is where we can save energyReduce serverloadReduce datatransferReduce device energy
The benefitsReduced energyusageImprovedperformanceImproved userexperience
So what can we do?
Streamline user journeys
Efficient Images Use less images Use vectors and CSS instead of photos Design the smallest version of your photos
1.2MB JPEG1280 x 800
640 x 400px640 x 400px with blurred edges360kb JPEG192kb JPEG
640 x 400px with blurred edges640 x 400px B&W with blurred edges192kb JPEG129kb JPEG
JPEGWEBPAVIF-30%-50%96%support67%support
Use video efficiently Avoid auto-playCompress video filesStream at lower definitionReduce time
Replace video with animationInteractive animation Less dataSEO friendlyAccessibleControllable timelineAfter Effects Lottie
System FontsThey are free!
Optimise custom fonts File format (WOFF2) Subset fonts Use fewer weights (or variable fonts)Inter UI (default)Inter UI (optimised)TTF fileWOFF2 file2192 characters98 characters300kb7kb
Low energy coloursOnly relevant on OLED screensWHITEBLACKDARKBLUEHighest energyNo energyLow energyHigh energy 25% more thangreen and red
Track less
Track lessPlatformSizeCookies?Google Analytics17KBYesGA with GTM75KBYesMatomo40KBYesMinimal GA1.5KBYesFathom1.2KBNoPlausible 1KBNo
Efficient coding languages Most efficient: C, Rust, C Least efficient: Perl, Python, Ruby JavaScript is: 7 times more efficient than PHP 16 times more efficient than Ruby
Donʼt drug the user
Design for the lessprivileged
“Things continue to get betterand better for the wealthy,leaving the rest behind. For "modern" pages, half amegabyte is a decent hardbudget.”Alex Russell, Google
Green hosting Direct renewable energy Local contracts REC’s Carbon Offset / Carbon Neutral
Green hosting Server caching CDN’s Static technology Scaleable cloud services (e.g.Cloudflare Workers)
Resources
WebsiteCarbon.com
Buy it at:abookapart.com
sustainablewebmanifesto.com
Sign up in footer of wholegraindigital.com
sustainablewebdesign.org
thegreenwebfoundation.org
Contact graindigital.com
Sustainable web design for everyone State of the Browser 2021 Tom Greenwood, Wholegrain Digital @eatwholegrain. Internet emissions are huge ICT Germany Global Aviation. Energy in manufacture and operation Data centres Transmission networks End user devices. This is where we can save energy Reduce server load Reduce data
