Deine Website nachhaltiger: 3 Tipps zur Datenreduzierung in 2024

Unsere Internetverbindung wird immer schneller, zu immer günstigeren Preisen. Unser Speichervolumen im Internet ist schier unbegrenzt. Aber das ist nur die halbe Wahrheit. Je mehr wir hochladen, umso größer muss der bereitgestellte Server sein. Je größer der Server, umso größer der CO2-Fußabdruck. Und dann kommt dann auch noch die Handynutzung ins Spiel – mobiles Datenvolumen wird zwar immer mehr in größeren Paketen angeboten, ist aber auch nur limitiert. Um nur ein kleines wenig vorzubeugen, haben wir deswegen hier 3 Tipps zur Datenreduzierung in 2024 für euch.

Caching-Regeln erstellen

Caching-Regeln sind unabdingbar für die Benutzererfahrung. Jedes mal, wenn ein User erneut auf deine Seite kommt, muss der Browser nicht alles wieder von vorne laden. Das beschleunigt das öffnen der Website und hinterlässt keinen frustrierten User zurück, dessen Seite nach 5 Minuten immernoch nicht geladen ist. Aber wie richtet man das ein ?

Zugriff auf die .htaccess

Der beste Weg wäre der direkte Zugriff auf die .htaccess. Diese findet ihr im Root Zugang eurer Seite. Unabhängig welches CMS, oder ob ihr eine statische Website habt, ist der Werdegang derselbe. Solltet ihr im Root Ordner (der Hauptordner) keine .htaccess haben, erstellt einfach eine.

die Datei bearbeiten

bei der Bearbeitung der .htaccess ist es sehr wichtig, keine Fehler zu machen. Sollte nur ein Tippfehler vorhanden sein, ist eure Website nicht mehr aufrufbar. Hier ein Beispielcode:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/html "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 1 month"
</IfModule>

Je nach bedarf können die Zeilen angepasst werden. Solltet ihr öfter euer Design anpassen, lohnt sich ein kürzer Cache-Zeitraum für die CSS Datei.

Gzip Komprimierung

Bei GZip handelt es sich um ein freies Kompressionsprogramm. Die damit komprimierte Dateien können von allen modernen Browsern interpretiert werden. Der Begriff „GZip“ ist zusammengesetzt aus dem Wort GNU für das Betriebssystem und „Zip“(zu Deutsch: “Reißverschluss”).Falls ihr mehr darüber lesen wollt: Wiki Ubuntu Dies minimiert damit also eure Datenabfrage beim User. So könnt ihr das wie folgt einrichten:

wieder die .htaccess bearbeiten

Um die GZip Komprimierung zu aktiveren, kopiert nun folgenden Code in die .htaccess

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Auch hier könnt ihr wieder rumspielen. Aber achtet dabei, eure Website zu testen. Solltet ihr zum Beispiel die Programmiersprache Python für die Webentwicklung nutzen, so fügt das einfach bei der “include file” hinzu.

Tipp: keine Zeit für sowas ? Eco Webservice kümmert sich um die Datenreduzierung. Individuell angepasst auf die Bedürfnisse der Website.

Bilder richtig bereitstellen

Der Artikel “3 Tipps zur Datenreduzierung in 2024” hat euch nun 2 sehr mächtige Vorschläge zur Datenminimierung gezeigt. Kommen wir aber nun zur einer weiteren Methode, welche ebenfalls sehr effektiv ist: die Datenmenge bei Bildern zu reduzieren.

Skalieren

Skaliert die Bilder in das richtige Format. Dadurch allein kann schon sehr viel gespart werden. Für ein Thumbnail benötigt ihr keine Pixelgröße von 6000x2500px. Meistens reichen dafür schon 500px völlig aus.

Komprimieren

Nachdem nun die Datei skaliert ist, kann diese komprimiert werden. Nutzt dazu Online-Tools, oder ein Grafikbearbeitungsprogramm, wie zum Beispiel GIMP. (Open Source und kostenfrei).
Wichtig: je kleiner die Speichergröße der Bilddatei ausfällt, umso schneller lässt sich die Seite laden

WebP

Wandelt das Bild nun zusätzlich in das Format WebP um. WebP wurde 2010 von Google übernommen und dient dazu, die Datei ohne Verlust zu komprimieren. Ein Programm wird dafür direkt von Google gestellt. Um die Datei nun einzufügen, müsst ihr folgenden Code anpassen und zu eurer HTML/PHP Seite hinzufügen:

<picture>
  <source srcset="img/googleWebPImage.webp" type="image/webp">
  <source srcset="img/oldJPEG.jpg" type="image/jpeg"> 
  <img src="img/oldJPEG.jpg" alt="Alt Text!">
</picture>

Pfade und Namen müsst ihr natürlich noch anpassen 😉

Fazit zu den 3 Tipps zur Datenreduzierung in 2024

Anpassungen und alles nachhaltig Umsetzen kann ganz schön mühselig sein. Aber mit den 3 Tipps zur Datenreduzierung in 2024 habt ihr schon mal eine gute, solide Basis, auf der sich aufbauen lässt.