Practical Techniques for Sustainable Web Development with WordPress

Practical Techniques for Sustainable Web Development with WordPress 🔗 **Source:** [Practical Techniques for Sustainable Web Development with WordPress](https://www.youtube.com/watch?v=wtL5I8OhxbU) > [!note]+ Document Notes > tags: [sustainability, web-development, wordpress] > author: B (Sustainable Web DK) > source: WordCamp Europe > reference: https://www.youtube.com/watch?v=wtL5I8OhxbU > date created: 2024-12-20 10:30 > > # 🏷️ Title: Practical Techniques for Sustainable Web Development with WordPress >  ## 🧰 Action Inbox - [H1] Test current website carbon footprint using websitecarbon.com — baseline measurement #sustainability - [H2] Audit worst image offenders using browser inspect tool network tab — optimization priority #performance - [H3] Set CO2 emission budget of 0.25g per page view for projects — client agreement #metrics ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - [Website Carbon Calculator](https://www.websitecarbon.com) - [Sustainable Web Manifesto](https://sustainablewebmanifesto.com) ## 📝 Summary - Web developer from Denmark presents practical methods for reducing website carbon emissions by an average of 89% - Covers the Sustainable Web Manifesto's six principles: clean, efficient, open, honest, regenerative, and resilient - Demonstrates specific optimization techniques for images, videos, fonts, and PDFs with real-world examples - Shows how moving from 1.8MB PNG to 45KB optimized JPEG reduced one site's emissions by 98% - Emphasizes setting CO2 budgets (0.25g per page view) and using green hosting powered by renewable energy ## 📖 Main Content B from Sustainable Web DK shares three years of experience rebuilding websites to drastically reduce their environmental impact. The presentation centers on the Sustainable Web Manifesto's principles and demonstrates how WordPress developers can achieve massive carbon footprint reductions without sacrificing functionality. Key focus areas include image optimization using tools like Squoosh and EWWW Image Optimizer, video compression with specific bitrate recommendations, and practical measurement using browser developer tools. The speaker emphasizes that sustainable development isn't just about environmental benefits—it also improves accessibility, performance, and SEO scores that clients readily understand. ## 🗒️ Notes #### ⏱️ [00:00](https://www.youtube.com/watch?v=wtL5I8OhxbU?t=0) — [H1] Personal motivation for sustainable web development - Key idea: Started from canoe trip discussion about climate change and inaccessible government websites - Evidence: "Danish friend who is blind couldn't access governmental COVID testing website" #### ⏱️ [03:45](https://www.youtube.com/watch?v=wtL5I8OhxbU?t=225) — [H2] Internet's environmental impact statistics - Key idea: Internet has significant carbon footprint requiring developer attention - Evidence: "Web Almanac chapter 20 on sustainability with studies backing up claims" #### ⏱️ [05:30](https://www.youtube.com/watch?v=wtL5I8OhxbU?t=330) — [H3] Sustainable Web DK business founding - Key idea: Turned sustainability passion into three-year-old consultancy business - Evidence: "Started business month after canoe trip conversation" #### ⏱️ [07:15](https://www.youtube.com/watch?v=wtL5I8OhxbU?t=435) — [H1] Sustainable Web Manifesto principles - Key idea: Six principles guide development decisions - clean, efficient, open, honest, regenerative, resilient - Evidence: "More than 3,000 developers have signed up and committed" #### ⏱️ [09:00](https://www.youtube.com/watch?v=wtL5I8OhxbU?t=540) — [H2] Company's implementation of green principles - Key idea: Practical interpretation includes green hosting, public transport, accessible websites, privacy protection - Evidence: "We try to make websites that emit less than 0.25 gram of CO2 equivalents per page view" #### ⏱️ [11:30](https://www.youtube.com/watch?v=wtL5I8OhxbU?t=690) — [H2] Website carbon measurement tools - Key idea: Website Carbon Calculator provides emissions estimates based on measurable and assumed factors - Evidence: "Estimations built on page weight, carbon intensity of country, user device assumptions" #### ⏱️ [14:45](https://www.youtube.com/watch?v=wtL5I8OhxbU?t=885) — [H1] Real website rebuild results - Key idea: DGHS website rebuilt with 88% reduction from 0.55g to 0.06g CO2 per page view - Evidence: "More modern website with more images but 88% lighter than original" #### ⏱️ [16:20](https://www.youtube.com/watch?v=wtL5I8OhxbU?t=980) — [H1] Average carbon footprint reduction across projects - Key idea: Three years of rebuilds achieved average 89% carbon emissions reduction - Evidence: "Which industry wouldn't pursue these numbers and try to reduce emissions by 89%" #### ⏱️ [18:00](https://www.youtube.com/watch?v=wtL5I8OhxbU?t=1080) — [H2] Green hosting and energy mix importance - Key idea: Data center location and energy source significantly impact emissions - Evidence: "Denmark 404g CO2 per kWh vs Sweden 25g CO2 per kWh in February" #### ⏱️ [21:30](https://www.youtube.com/watch?v=wtL5I8OhxbU?t=1290) — [H1] Digital Beacon tool for asset analysis - Key idea: Breakdown tool shows which assets consume most bandwidth for targeted optimization - Evidence: "Images, videos, fonts, and PDF files are worst offenders on rebuilt websites" #### ⏱️ [24:00](https://www.youtube.com/watch?v=wtL5I8OhxbU?t=1440) — [H1] Browser inspect tool for image optimization - Key idea: Network tab shows largest assets to target for compression and resizing - Evidence: "University site had 1.8MB PNG hero image, 30-second mobile load time" #### ⏱️ [26:45](https://www.youtube.com/watch?v=wtL5I8OhxbU?t=1605) — [H1] Dramatic image optimization results - Key idea: Single hero image reduced from 1.8MB to 45KB through format change and resizing - Evidence: "PNG to JPEG at 70% quality plus mobile-appropriate sizing = 98% reduction" #### ⏱️ [29:30](https://www.youtube.com/watch?v=wtL5I8OhxbU?t=1770) — [H2] Image optimization plugin recommendations - Key idea: Automate compression with plugins, enable WebP, experiment with quality settings - Evidence: "WordPress generates thumbnails that aren't well compressed by default" #### ⏱️ [32:15](https://www.youtube.com/watch?v=wtL5I8OhxbU?t=1935) — [H1] Video optimization techniques - Key idea: Background videos often unnecessary; compress with appropriate bitrate for content - Evidence: "Handbrake settings: 768px width, 700 kbps bitrate, 96 kbps audio for talking head" #### ⏱️ [35:00](https://www.youtube.com/watch?v=wtL5I8OhxbU?t=2100) — [H2] Custom post type for video management - Key idea: Help clients remember compression settings with documented workflow - Evidence: "Note fields record optimal compression ratios for different video types" #### ⏱️ [37:45](https://www.youtube.com/watch?v=wtL5I8OhxbU?t=2265) — [H1] Resource portal case study results - Key idea: 800,000 annual page views reduced from 1,600kg to 80kg CO2 emissions yearly - Evidence: "Imagine WordPress-scale impact if these techniques were widely adopted" ## 📚 References - [Sustainable Web Manifesto](https://sustainablewebmanifesto.com) - [Website Carbon Calculator](https://www.websitecarbon.com) - [Digital Beacon](https://digitalbeacon.co) - [Green Web Foundation](https://greenweb.foundation.org) - [Squoosh Image Optimizer](https://squoosh.app) - [Sustainable Web Design](https://sustainablewebdesign.org) ## 🗣️ Paraphrase - Sustainable web development emerged from personal concern about climate change and digital accessibility, leading to a successful consultancy achieving 89% average carbon emission reductions across website rebuilds - The Sustainable Web Manifesto's six principles (clean, efficient, open, honest, regenerative, resilient) provide practical framework for making development decisions that benefit both environment and user experience - Systematic optimization of images, videos, fonts and PDFs using browser tools and compression plugins can achieve dramatic results, with some sites reducing individual assets by 98% while maintaining visual quality and adding functionality ## 📰 Newsletter **Sustainable WordPress Development: 89% Carbon Reduction is Possible** Danish developer B shares remarkable results from three years of sustainable website rebuilds, achieving an average 89% reduction in carbon emissions while improving functionality. Using the Sustainable Web Manifesto as a guide, their approach combines green hosting, systematic asset optimization, and CO2 budgets. Key takeaway: A single image optimization reduced one university site's hero image from 1.8MB to 45KB—that's 98% smaller! The secret? Converting PNG to JPEG, adjusting quality to 70%, and resizing for mobile-first delivery. **Quick wins for your WordPress sites:** - Test current emissions at websitecarbon.com - Use browser inspect tool to find largest assets - Set 0.25g CO2 per page view budget - Optimize images with EWWW Image Optimizer - Enable WebP format support The WordPress Sustainability Team meets bi-weekly on Slack—join the movement toward cleaner web development! Resources: [Sustainable Web Manifesto](https://sustainablewebmanifesto.com), [Digital Beacon](https://digitalbeacon.co), [Green Web Foundation](https://greenweb.foundation.org) ## ✅ Action Items #### WordPress - Core: Improve default thumbnail compression algorithms for better efficiency - Core Performance: Include carbon footprint metrics in performance recommendations - Community: Promote sustainable development practices in meetups and WordCamps - Training: Develop sustainability-focused lesson plans and learning paths - Documentation: Create DevHub guides for sustainable development techniques - Hosting: Expand green hosting recommendations and verification processes - Plugins: Review directory for sustainable development tools and optimization plugins #### DevRel - Education: Create workshops on sustainable WordPress development techniques - Developer advocacy: Promote CO2 budgets and green hosting at conferences - Developer experience: Integrate sustainability metrics into development workflows - Community management: Facilitate WordPress Sustainability Team growth #### Community - Maintainers: Include sustainability considerations in plugin/theme review guidelines - Contributors: Organize sustainability-focused contribution days and sprints - Sponsors: Support green hosting initiatives and carbon offset programs - Ecosystem: Coordinate with hosting providers on renewable energy adoption ## 🧪 Hypotheses - Setting explicit CO2 budgets (0.25g per page view) will drive more sustainable development decisions than general efficiency goals - Image optimization alone can achieve 50-70% carbon emission reductions on most WordPress websites - Green hosting location (renewable energy mix) has greater impact than website optimization for high-traffic sites - Clients accept sustainability constraints more readily when framed as performance and SEO improvements ### 📊 Methodology - A/B test websites with and without CO2 budgets to measure development decision differences - Analyze correlation between image optimization techniques and carbon footprint reduction across diverse WordPress sites - Compare carbon impact of hosting location vs. optimization techniques at different traffic scales - Survey client acceptance rates for sustainability features vs. traditional performance metrics ### ❓ Questions - How can WordPress core better support sustainable development practices by default? - What carbon footprint measurement tools could be integrated directly into WordPress admin? - How might AI-generated images and videos impact sustainable web development practices? ### 🔮 Future Research - Develop real-time carbon footprint monitoring for WordPress sites - Create automated optimization recommendations based on sustainability metrics - Study correlation between accessibility improvements and carbon emission reductions ### 💡 Implications - Practice: Developers need systematic approaches to measure and optimize website carbon footprints - Policy: WordPress community should establish sustainability guidelines for themes and plugins - Security: Green hosting considerations must balance security requirements with renewable energy availability - Education: Sustainability training should emphasize business benefits (performance, SEO) alongside environmental impact - Funding: Investment in green hosting infrastructure and optimization tools creates competitive advantages ### 🧠 Learning Styles Assessment Reading level estimate: 12th grade #### 👀 Visual learners - Present: Screenshots of before/after optimization results, carbon calculator interfaces - Improve: Infographics showing optimization process flows, comparative charts of hosting energy sources #### 🔊 Aural learners - Present: Live presentation with verbal explanations of technical concepts - Improve: Audio summary of key optimization techniques, podcast-style case study discussions #### 🗣️ Verbal learners - Present: Clear explanations of technical terms, analogies to familiar concepts - Improve: Glossary of sustainability terms, story-driven optimization examples #### 🧩 Kinesthetic learners - Present: Step-by-step optimization workflows, hands-on tool demonstrations - Improve: Interactive checklists, sandbox environments for testing optimization techniques #### 🧠 Logical learners - Present: Systematic approach to identifying optimization opportunities, measurable results - Improve: Decision trees for optimization priorities, ROI calculations for sustainability investments #### 🧑‍🤝‍🧑 Social learners - Present: WordPress Sustainability Team collaboration opportunities, community discussion - Improve: Peer review processes for sustainable development, group optimization challenges #### 🧘‍♀️ Solitary learners - Present: Individual optimization techniques, self-assessment tools - Improve: Personal sustainability goals worksheet, reflection prompts on development practices #### 🌿 Naturalistic learners - Present: Environmental impact connections, ecosystem thinking about web development - Improve: Carbon lifecycle analysis, biodiversity impact of data centers ### 📊 Accessibility Assessment #### Screen reader semantics - Present: Clear heading structure, descriptive presentation content - Improve: Alt text for optimization screenshots, ARIA labels for interactive elements #### Keyboard navigation - Present: Standard presentation navigation - Improve: Keyboard-accessible demonstration tools, skip links in slide content #### Contrast and readability - Present: High contrast slides with readable fonts - Improve: Larger text in code examples, better contrast in screenshot annotations #### Text resizing and reflow - Present: Responsive slide design - Improve: Scalable text in technical diagrams, flexible layout for different screen sizes #### Media and captions - Present: Video demonstration with audio description - Improve: Captions for all video content, transcript availability for demonstrations #### Forms and interactions - Present: Clear instructions for tool usage - Improve: Accessible form labels in optimization tools, error handling for measurement inputs ### 🌍 DEIB Assessment #### Cultural breadth - Present: Danish case study with global applicability - Improve: Examples from diverse geographic regions, multi-language sustainability resources #### Inclusive language - Present: Technical terms explained clearly, avoiding jargon - Improve: Plain-language summaries of complex concepts, culturally neutral examples #### Neurodiversity support - Present: Clear structure with consistent formatting - Improve: Visual breaks between sections, predictable information hierarchy #### Representation - Present: Focus on technical content with universal applicability - Improve: Diverse case studies, acknowledg