Image Optimization Paket

Willkommen bei smoxy: Dein Start mit dem Image Optimization Paket

Herzlichen Glückwunsch zur Wahl des Image Pakets von smoxy! Diese Anleitung führt dich durch die ersten Schritte bei der Verwendung von smoxy zur Bildoptimierung. Bitte beachte, dass zu Beginn einige grundlegende Konfigurationsschritte erforderlich sind, wie die Konfiguration des Loadbalancers und das Setzen von DNS-Einträgen. Diese Schritte müssen nur einmal durchgeführt werden und sind entscheidend, um smoxy optimal nutzen zu können. Sobald diese Einrichtung abgeschlossen ist, wird die Verwendung von smoxy sehr einfach und intuitiv sein. Du kannst dann einfach auswählen, welche Funktionen du nutzen möchtest, und sie mit nur wenigen Klicks aktivieren.

In dieser Anleitung zeigen wir dir, wie du eine Page Rule für deine Startseite anlegst, um die Bildoptimierung gezielt zu aktivieren, und wie du Bilder in das AVIF-Format konvertierst, um die Ladezeiten und die Bildqualität zu verbessern.

Los geht's mit der Optimierung für deine Startseite

Ein guter erster Schritt ist, die Optimierung zunächst nur für die Startseite deiner Website zu aktivieren. Die Startseite ist oft der erste Anlaufpunkt für Besucher und kann einen erheblichen Einfluss auf die Wahrnehmung der Geschwindigkeit und Effizienz deiner Website haben. Indem du mit der Optimierung der Startseite beginnst, kannst du sofortige Verbesserungen erzielen und leichter die Ergebnisse deiner Optimierung vergleichen.

So legst du eine Page Rule für die Startseite an:

In diesem Schritt erstellen wir eine Page Rule für die Startseite um ausschließlich dort die Bildoptimierung zu aktivieren.

1. Logge dich in den smoxy Hub ein.

2. Klicke auf den Namen deiner Zone. Du befindest dich nun im Dashboard deiner Zone.

3. Öffne mit einem Klick in der linken Seitenleiste die 'Rules' und klicke auf 'Page Rules'

4. Klicke auf 'Page Rule hinzufügen'.

5. Gib den Namen deiner Regel an. Zum Beispiel: Optimierung für Startseite

6. Wähle den Matcher 'equals'.

7. Als URI schreibst du lediglich ein /

8. Bei der Auswahl der Regeln, verwendest du 'Image'

9. Setze den Toggle auf aktiv um die Bildoptimierung für die Startseite zu aktivieren.

10. Speichere die Einstellungen, indem du auf 'Regel erstellen & aktivieren' klickst.

Mit dieser einfachen Einstellung wird die Optimierung ausschließlich für deine Startseite aktiviert, während andere Seiten deiner Website zunächst unberührt bleiben. Zusätzlich kannst du deine neue Page Rule mit dem Toggle auf der Übersichtsseite der Page Rules ganz einfach aktivieren oder deaktivieren.

Sende deine Besucher über smoxy um von der Bildoptimierung zu profitieren:

Damit smoxy die Bilder optimieren kann muss als nächstes der Traffic durch smoxy durchgeleitet werden. Die geschieht ganz einfach durch das konfigurieren deines Loadbalancers in smoxy und das anpassen eines DNS Eintrags.

Konfiguration deines Loadbalancers:

1. In deiner Zone, öffne in der linken Seitenleiste die 'General Settings' und klicke auf 'Loadbalancer'.

2. Scroll an das Ende der Seite und klicke auf 'Loadbalancer hinzufügen'

3. Gebe einen beliebigen Namen für deinen Loadbalancer ein.

4. Lasse das Feld Hostname leer

5. Klicke auf die Checkbox 'Agiert als primärer Loadbalancer'.

6. Mit einem Klick auf Speichern wird dein Loadbalancer angelegt.

Hinzufügen eines Members zum Loadbalancer:

1. Klicke auf 'Member hinzufügen'.

2. Als Loadbalancer ist dein zuvor ersteller Loadbalancer bereits ausgewählt.

3. Das Schema bleibt unverändert auf 'https'

4. Als Host wird jetzt die öffentliche IPv4 Adresse deines Servers angegeben auf dem deine Webseite läuft.

   • Verwendet deine Webseite mehrere Server, kannst du hier direkt mehrere IPs, mit Komma-getrennt hinterlegen. So muss du nicht mehrmals einen neuen Member hinzufügen.

5. Der Port und die Gewichtung können unverändert bleiben.

6. Klicke auf 'Speichern'.

Sende deinen Traffic über smoxy zu deiner Webseite:

1. Klicken oben in der linken Seitenleiste auf 'Organisation', so kommst du zurück auf die Übersicht deiner Zonen.

2. Klicke in der linken Seitenleiste auf 'Domains'.

3. Füge eine neue Domain hinzu, indem du auf den Button 'Domain hinzufügen' klickst.

4. Folge dem ersten Schritt indem du deine Domain angibst. Zum Beispiel example.com

5. Im nächsten Schritt musst du den angegebenen TXT Eintrag in deinem DNS setzen.

6. So kann smoxy verifizieren, dass du auch der Inhaber dieser Domain bist und erlaubt dir das Fortsetzen der Konfiguration der Domain.

7. Klicke im nächsten Schritt auf 'Erstelle ein neues SSL-Zertifikat' und klicke auf 'weiter'.

8. Setze nun den Angegebenen CNAME Eintrag damit smoxy automatisch ein SSL Zertifikat erzeugt und klicke auf 'weiter'.

9. Jetzt überprüft smoxy deine DNS Einträge und erzeugt ein SSL-Zertifikat für die Absicherung des Traffics zu deiner Webseite.

10. Sobald das Zertifikat erstellt wurde, kannst du auf 'weiter' klicken und nun deine Domain, deiner Zone zuweisen.

11. Wundere dich nicht über die Warnung. Dies ist ein automatischer Check von smoxy um zu prüfen ob smoxy und deine Webseite kommunizieren können.

12. Um dies zu korrigieren, log dich erneut in deine DNS-Verwaltung ein und ändere den DNS Eintrag deiner Webseite auf ingress.smoxy.eu und klicke auf 'Test wiederholen'.

13. Wenn alles erfolgreich war, kannst du auf 'weiter' klicken und das 'Setup abschließen'.

Bereit smoxy einzuschalten und die Bildoptimierung zu testen?

1. Gehe zurück auf die Übersicht deiner Zonen, indem du in der linken Seitenleiste auf 'Shop-Zones' klickst.

2. Klicke auf den Namen deiner Zone um in dessen Konfiguration zu kommen.

3. Klappen in der linken Seitenleiste die 'General Settings' auf und klicke auf 'Konfigurationen'.

4. Aktiviere oben rechts, mit einem Klick auf 'Aktiv' deine Zone und dessen Einstellungen.

Du hast es geschafft! Der Traffic deiner Webseite läuft nun über smoxy. Durch die Page Rule werden deine Bilder auf der Startseite nun automatisch optimiert.

Konvertierung von Bildern in das AVIF-Format

Das AVIF (AV1 Image File Format) ist ein modernes Bildformat, das für seine effiziente Komprimierung und hohe Bildqualität bekannt ist. Im Vergleich zu herkömmlichen Formaten wie JPEG oder PNG bietet AVIF eine signifikant bessere Kompression, was bedeutet, dass Bilder in höherer Qualität bei kleinerer Dateigröße dargestellt werden können. Dies führt zu schnelleren Ladezeiten und einer verbesserten Nutzererfahrung auf deiner Website.

Wir können unsere zuvor erstellt Page Rule verwenden und diese ganz leicht erweitern.

1. Gehe zum Bereich 'Page Rules'.

2. Editiere deine zuvor erstelle Regel für die Startseite.

3. Klicke am Ende der Einstellungen auf 'Einstellung hinzufügen'.

4. Wähle als Regel 'Zu AVIF umwandeln' aus.

5. Speichere die Einstellungen.

6. Gehe zurück zum OVerview Dashboard und klicke im Bereich 'Schnellzugriff' neben den Live Statistiken auf 'Cache leeren'.

Nachdem du die Bildoptimierung auf der Startseite deiner Website über eine Page Rule aktiviert und die AVIF-Konvertierung hinzugefügt hast, ist es wichtig, den Cache zu leeren. Der Grund dafür liegt in der Arbeitsweise von smoxy: Sobald Bilder auf deiner Website erstmals angefordert werden, optimiert smoxy diese Bilder automatisch und speichert sie im Cache, um die Ladezeiten zu verkürzen. Wenn du später die AVIF-Konvertierung aktivierst, sind die bereits optimierten Bilder noch nicht im AVIF-Format konvertiert, da diese Optimierung und Konvertierung zum Zeitpunkt ihrer ursprünglichen Verarbeitung noch nicht angefordert wurde.

Zusätzlich zur Optimierung und Konvertierung der Bilder bietet smoxy eine intelligente Auslieferungsfunktion, die sicherstellt, dass Besucher deiner Website das Bildformat erhalten, das ihr Browser unterstützt. So erkennt smoxy automatisch den Browser des Besuchers und liefert beispielsweise einem Safari-Browser JPEG-Bilder, während ein Chrome-Browser AVIF-Bilder erhält. Diese Funktion entbindet dich von der Sorge um Browserkompatibilität und gewährleistet, dass alle Nutzer die bestmögliche Performance und Bildqualität erfahren, ohne dass du manuelle Anpassungen vornehmen oder verschiedene Bildversionen bereitstellen musst.

Was kommt jetzt?

Herzlichen Dank, dass du die Zeit investiert hast, um dich mit den Grundlagen des Image Tools von smoxy vertraut zu machen. Wir sind begeistert, dass du den ersten Schritt gemacht hast, um die Leistung deiner Website zu verbessern. Aber das ist nur der Anfang deiner Reise!

Wir möchten dich ermutigen, tiefer in die Welt von smoxy einzutauchen, um das maximale Potenzial deiner Website freizuschalten. In unserem Dokumentationsbereich, insbesondere in den Abschnitten für Anwendungsbeispiele und Best Practices, wartet eine Vielzahl von hilfreichen Informationen, praktischen Tipps und inspirierenden Ideen auf dich. Diese Ressourcen sind darauf ausgerichtet, dir zu zeigen, wie du smoxy noch wirkungsvoller nutzen kannst.

Nimm dir die Zeit, zu entdecken, zu experimentieren und zu optimieren. Mit smoxy an deiner Seite hast du die Möglichkeit, deine Website auf ein neues Level zu heben – schneller, effizienter und beeindruckender als je zuvor. Starte jetzt und erlebe, wie smoxy deine Online-Präsenz transformiert!