DEV Community

A0mineTV
A0mineTV

Posted on

Carbon Meter for WordPress

🌍 Introduction

Carbon Meter is an innovative WordPress plugin designed to measure and optimize your website's carbon footprint. Developed with a focus on performance and sustainability, this plugin provides accurate metrics and personalized recommendations to reduce your site's environmental impact.

✨ Key Features

  • Real-time measurement of CO2 emissions per page
  • Comprehensive analysis of resource sizes (HTML, CSS, JS, images)
  • SQL query monitoring to identify performance bottlenecks
  • Intuitive dashboard showing the most resource-intensive pages
  • Personalized optimization tips
  • Seamless integration into the WordPress admin interface
  • Customizable settings to match your infrastructure

πŸ“¦ Installation

  1. Download the carbon-meter folder to the /wp-content/plugins/ directory
  2. Activate the plugin through the 'Plugins' menu in WordPress
  3. Configure settings in Settings > Carbon Meter according to your needs

πŸ› οΈ Configuration

Default Settings

  • Power consumption: 0.81 kWh/GB
  • CO2 emissions: 475 g/kWh

These values can be adjusted in the plugin settings to better reflect your hosting infrastructure.

πŸ“Š Usage

Admin Toolbar

Once activated, the plugin displays in the WordPress toolbar:

  • The current page's CO2 footprint
  • Number of SQL queries
  • Performance indicators

Dashboard Widget

The "Heaviest Pages" widget helps you quickly identify pages that need optimization.

Optimization Metabox

Each post and page features a metabox with specific recommendations to reduce its carbon footprint.

πŸ” How It Works

Emissions Calculation

The plugin uses the following formula to calculate CO2 emissions:

CO2 (g) = (Total data size (GB) Γ— kWh/GB) Γ— gCO2/kWh
Enter fullscreen mode Exit fullscreen mode

Data Collection

  1. Captures generated HTML size
  2. Analyzes loaded resources (CSS, JS, images)
  3. Counts SQL queries
  4. Applies conversion factors
  5. Stores results for analysis

πŸš€ Optimization

Automatic Recommendations

The plugin automatically detects common issues:

  • Oversized images (>3 MB)
  • High number of SQL queries (>60)
  • Excessive CO2 emissions (>300g)

Best Practices

  1. Image Optimization

    • Use modern formats (WebP/AVIF)
    • Compress images before uploading
    • Use appropriate image sizes
  2. Query Reduction

    • Cache frequent queries
    • Use transients for static data
    • Avoid queries in loops
  3. Code Optimization

    • Minify CSS/JS files
    • Load scripts asynchronously
    • Use a CDN for static content

🧩 Extensibility

Available Filters

// Modify calculation factors
add_filter('cm_calculation_factors', function($factors) {
    return [
        'kwh_per_gb' => 0.75,    // Custom value
        'co2_per_kwh' => 450,    // Based on your energy mix
    ];
});

// Add custom checks
add_filter('cm_hints', function($hints, $data) {
    if ($data['total_mb'] > 5) {
        $hints[] = 'Your page is very heavy (>5MB). Consider reducing media size.';
    }
    return $hints;
}, 10, 2);
Enter fullscreen mode Exit fullscreen mode

πŸ“Š Data Storage

The plugin stores the following information:

  • _cm_co2: CO2 emissions per post
  • _cm_hints: Optimization recommendations

πŸ”’ Security

  • Nonce verification for all forms
  • Output escaping
  • User capability checks
  • No personal data is collected

🌐 GitHub

This project is available on GitHub:

GitHub

Feel free to star the repository, report issues, or contribute to the project!

Thank you for taking the time to learn about Carbon Meter. Together, let's make the web more sustainable, one byte at a time! 🌱

Top comments (0)