Το Ιστολόγιό Μου

Green Coding στην Πράξη: Πώς Γράφουμε Πιο Ελαφρύ Κώδικα

1 Μαΐου, 2026 Web Dev
Green coding cover
Εικόνα: AI-generated

Green coding σημαίνει να σχεδιάζουμε εφαρμογές που καταναλώνουν λιγότερους πόρους — CPU, μνήμη, δίκτυο και ενέργεια — σε κάθε στάδιο του κύκλου ζωής τους. Το όφελος δεν είναι μόνο περιβαλλοντικό: μικρότερη κατανάλωση σημαίνει χαμηλότερο κόστος υποδομών, γρηγορότερες σελίδες και καλύτερη εμπειρία για τους χρήστες.

Σύντομη διαδρομή: Τι αξίζει να εφαρμόσεις σήμερα

  1. Μικρότερα assets: συμπίεση εικόνων, χρήση WebP/AVIF όπου υποστηρίζεται και responsive διαστάσεις.
  2. Λιγότερα requests: bundling, inline critical CSS και caching.
  3. Αποδοτικός κώδικας: αποφυγή περιττών rerenders, lazy-loading, και μεταφορά βαριών εργασιών σε background threads ή server.

Πώς μετράμε το αντίκτυπο

Πριν αλλάξεις κάτι, μέτρησε baseline metrics. Μετά από κάθε αλλαγή, μέτρησε ξανά και σύγκρινε. Σημαντικά metrics:

  • Μέγεθος σελίδας: συνολικό payload (KB/MB) που κατεβαίνει στον browser.
  • Time to First Byte (TTFB) και Time to Interactive (TTI).
  • Energy proxy metrics: αριθμός requests, CPU time στο client/server, θερμική χρήση/CPU load αν μπορείς να μετρήσεις.
  • Κόστος: hosting cost ανά 1.000 επισκέψεις.

Εργαλεία: Lighthouse (Chrome), WebPageTest, Calibre, EcoIndex, και provider‑specific telemetry (CloudWatch, Datadog). Για μετρήσεις ενέργειας σε επίπεδο data center, μπορείς να κοιτάξεις APIs που παρέχουν carbon intensity ή τον πάροχο σου.

Frontend: τεχνικές & παραδείγματα

Εικόνες

Οι εικόνες συχνά αποτελούν το μεγαλύτερο μέρος του payload. Βασικά βήματα:

  • Μετατροπή σε WebP/AVIF όταν είναι δυνατόν.
  • Παραγωγή πολλαπλών διαστάσεων και χρήση srcset + sizes.
  • Lazy‑loading: loading="lazy" για εικόνες κάτω από το fold.
  • Συμπίεση χωρίς οπτική υποβάθμιση (imagemin, sharp).

Fonts

  • Προτίμησε variable fonts για να μειώσεις το αριθμό αρχείων.
  • Preload μόνο τα κρίσιμα font‑files και φόρτωσε τα υπόλοιπα ασύγχρονα.

JavaScript

Μικρές αλλαγές στο JS μπορούν να μειώσουν σημαντικά CPU time και energy usage:

  • Αφαίρεσε unused polyfills και βαριές βιβλιοθήκες.
  • Κάνε tree‑shaking και code splitting (dynamic imports).
  • Χρησιμοποίησε virtualization για μεγάλα lists.
  • Μετέφερε βαριές εργασίες σε web workers ή στο server.

Παράδειγμα: Node pipeline για εικόνες (sharp)

// optimize-images.js (node + sharp)
const sharp = require('sharp');
const fs = require('fs');

async function optimize(inputPath, outputPath){
  await sharp(inputPath)
    .resize({ width: 1200 })
    .webp({ quality: 78 })
    .toFile(outputPath);
}

// χρήση: node optimize-images.js

Backend & Data

Οι backend βελτιώσεις έχουν μεγάλο αντίκτυπο σε συνολική κατανάλωση πόρων, ειδικά για εφαρμογές με πολλούς χρήστες.

  • Αποφυγή N+1 queries — batch queries και proper indexing.
  • Εφαρμογή caching (Redis, CDN) για αποτελέσματα που αλλάζουν σπάνια.
  • Streaming responses (chunked) αντί για δημιουργία μεγάλων payloads στη μνήμη.
  • Επιλογή σωστής βάσης δεδομένων/engine για workload (OLTP vs OLAP).

Αποδοτικός αλγόριθμος & δεδομένα

Μικρά βελτιώματα σε αλγορίθμους και δεδομένα μπορούν να μειώσουν CPU time:

  • Χρησιμοποίησε streaming της εισόδου/εξόδου όταν επεξεργάζεσαι μεγάλα αρχεία.
  • Προτίμησε εποικοδομητικές δομές (hash maps για lookups αντί για γραμμικές αναζητήσεις).
  • Κάνε memoization για ακριβές, επαναλαμβανόμενες υπολογιστικές λειτουργίες.

Infra, Hosting & Ops

Η επιλογή υποδομής και οι ρυθμίσεις της παίζουν μεγάλο ρόλο:

  • Χρησιμοποίησε CDN για στατικά assets και edge caching.
  • Right‑size instances και χρησιμοποιήστε autoscaling με σωστές πολιτικές.
  • Σκέψου serverless όταν έχεις ακανόνιστα φορτία — αλλά πρόσεξε cold starts.
  • Επίλεξε region με χαμηλότερο carbon intensity αν αυτό είναι διαθέσιμο.

Carbon-aware scheduling

Όταν είναι δυνατό, δρομολόγησε batch jobs σε ώρες με χαμηλότερο carbon intensity ή σε κέντρα δεδομένων με καθαρή ενέργεια. Αυτό μειώνει το συνολικό αποτύπωμα χωρίς να επηρεάζει την εμπειρία χρήστη.

CI/CD, Perf Budgets και Governance

Ενσωμάτωσε performance checks στην pipeline:

  • Run Lighthouse/WebPageTest σε κάθε PR με όρια (budgets) που μπορούν να εμποδίσουν regressions.
  • Αυτόματη ειδοποίηση όταν το μέγεθος σελίδας ή TTI αυξάνεται πάνω από το threshold.
  • Track long‑term trends και συμπεριέλαβε energy/CO2 metrics αν ο provider το επιτρέπει.

Παραδείγματα μετρήσεων

Ένα απλό script για να τρέξεις Lighthouse σε ένα URL και να σώσεις το report:

# χρησιμοποιώντας lighthouse-ci
npx lhci autorun --url=https://example.com --collect.url=https://example.com

Checklist για ένα release με πράσινο προσανατολισμό

  • Ελέγχθηκε το Lighthouse score and TTI.
  • Όλες οι εικόνες βελτιστοποιήθηκαν και έχουν responsive variants.
  • Δεν υπάρχει unused JS/CSS > 50KB.
  • Ο server απαντά compressed (brotli/gzip).
  • Έχουν ρυθμιστεί caching headers και CDN rules.
  • Perf budgets υπάρχουν και οι PRs δεν τα παραβιάζουν.

Παρακολούθηση και συνέχεια

Κράτα ένα μικρό dashboard με baseline metrics και ενημέρωσέ το κάθε εβδομάδα. Μικρές, συνεχιζόμενες βελτιώσεις (kaizen) φέρνουν μεγαλύτερο αποτέλεσμα από μία μεγάλη ανακατασκευή.

Πηγές & εργαλεία

  • Lighthouse / WebPageTest
  • Sharp / imagemin
  • FAISS / Qdrant (για RAG workflows — αν συνδυάσεις green AI με αποδοτικό indexing)
  • EcoIndex, Green Web Foundation για εκτιμήσεις περιβαλλοντικού αποτυπώματος

Θέλεις να προσθέσω ένα πλήρες παράδειγμα pipeline (Node.js scripts + GitHub Action) που βελτιστοποιεί εικόνες, τρέχει Lighthouse σε CI και αποθηκεύει reports; Μπορώ να το ετοιμάσω και να το ενσωματώσω στο repo.

← Επιστροφή στο Blog