Monat: August 2018

Veröffentlicht am

HTTPS, SSL-Zerfikat? Was ist das?

Standardmäßig werden Webseiten über das Protokoll HTTP (Hypertext Transfer Protokoll) übertragen. HTTPS ist eine Variante von HTTP, welche mittels SSL (Secure-Sockets-Layer) verschlüsselt wird und heuzutage Standard ist. Die Weiterentwicklung von Secure-Sockets-Layer-Protokolls wäre TLS (Transport-Layer-Security). HTTPS-Verbindungen lassen sich meist an einem Schloss-Symbol in der Adressleiste des Browsers erkennen.

SSL-Zerfikat Arten

Domain-Validation-Zertifikate

Enthält keine Informationen zu dem zugehörigen Unternehmen und es sind keine Dokumente für eine Ausstellung erforderlich, muss allerdings durch eine Person bestätigt werden, dass sie im Besitz der betreffenden Domain ist oder ihre Website unter der jeweiligen Domain verwaltet.

Organization-Validation-Zertifikate

nur bestätigen, dass die Verbindung zu einer Domain sicher ist, , sondern dass diese auch tatsächlich zu dem Unternehmen gehört, das im Zertifikat angegeben ist.

Extended-Validation-Zertifikate

Auf der obersten Ebene sind die Extended-Validation-Zertifikate. Die Ausgabe dieser Zertifikate an deutlich strengere Vergabekriterien gebunden. EV-Zertifikate haben daher die höchsten Authentizitätsstufe und sind somit auch die teuersten Zertifikate.

Website auf HTTPS umstellen?

Zunächst muss ein SSL-Zerfikat gekauft werden. Ein DV-Zertifikat erhältst Du kostenlos auf letsencrypt.org. Dort findest du auch eine Anleitung zur Installation. Nach der Installation musst du prüfen, ob tatsächlich alle URLs über https:// erreichbar sind. Falls alle Inhalte erreichbar sein sollten, kannst du nun HTTPS erzwingen. Dies geschieht über die .htaccess

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301, L]

Allerdings sollten auch alle anderen Links anpasst werden (inkl. Open Graphs, Sitemap, Canonical Tag etc.).
Spätestens jetzt ist an der Zeit auf HTTPS umzusteigen, denn mittlerweile ist dies sogar eine Google Ranking Faktor.
Da es jedoch technisch einiges zu beachten ist, sollte die Umstellung gut vorbereitet und geprüft werden.

Veröffentlicht am

404 Fehlerseiten richtig konfigurieren

Jeder kennt sie, jeder hasst sie – doch trotzdem sind sie unabdingbar – 404 Not Found.

Fehlerseiten Konfiguration

Damit eine Fehlerseite korrekt funktioniert, muss die .htaccess konfiguriert werden. Damit, falls der Client die eingetippte URL nicht erreichen kann, automatisch weitergeleitet wird.
Im falls einer CMS, z.B. WordPress ist die Konfiguration der .htaccess in diesem Fall nich nötig, da ist die 404-Fehlerseite unter der 404.php im Theme-Ordner bearbeitbar.

HTTP-Statuscode unter Verwendung des Apache Webservers und der .htaccess-Datei 404 richtig übergeben
Die .htaccess Datei befindet sich in der Regel im Basisverzeichnis der Website (Zielpfad der Domain). Falls diese nicht vorhanden ist, muss eine erstellt werden.

ErrorDocument 404 /404.html

404 Fehlerseiten kreativ gestalten

Wer nicht ganz langweilig sein möchte, kann seine 404 Fehlerseite individuell gestalten.
Zum Beispiel


Woher kommen die 404 Fehlerseiten?

Webseiten Relaunch
Durch den Relaunch deiner Webseite, kann es vorkommen, dass einige URLs übersehen werden weitergeleitet zu werden, wodurch eine 404 entsteht.
Gelöschte Seiten
Oftmals kommt es auch vor, dass Seiten einfach entfernt oder gelöscht werden. Dadurch kommt ebenfalls ein 404 hervor.
Geänderte URL
Wer seine URLs der Seiten verändert und vergisst diese weiterzuleiten (301), landet auf einer 404.

Regelmäßigen kontrollieren – Google Search Console

Regelmäßige Kontrollen sind unumgänglich. Dazu eigentlich sich die Google Search Console ausgezeichnet. Um sämtlich Fehlermeldungen angezeigt zu bekommen gehst du auf
den Menü-Punkt „Crawling &raque; Crawling-Fehler“. Nachdem man diese behoben hat, kann man seine Sitemap.xml aktualisieren & unter „Crawling &raque; Sitemaps“ neu indexieren.
Anschließend unter „Crawling &raque; Abruf wie durch Google“, alle direkten URLs (Desktop & Mobil: Smartphone) neu abrufen & rendern.

Prüfung

Unter httpstatus.io kann man prüfen ob der HTTP Status Code 404 auch korrekt übergeben.

Veröffentlicht am

Bilder Komprimierung – So wird’s gemacht

Warum genau sollte ich Bilder komprimieren?
Die Ladezeit kann durch Bilder auf deiner Webseite enorm beeinträchtigt werden.
Das wirkt sich wiederum negativ auf dein Google Ranking, aber auch auf die User Experience aus. Gerade auf Mobilgeräten können die Ladezeiten explodieren.

Bildformate
JPG (Joint Photographic Experts Group) kann am stärksten komprimiert werden und ist somit eines des besten Formate fürs Web.
GIF (Graphics Interchange Format) hat den Vorteil das diese animiert und verlustfrei komprimiert werden können.
PNG (Portable Network Graphic) hingegen wird nur auf die Menge der im Bild vorhandenen Farben reduziert. Das wirkt sich bei der Komprimierung negativ auf die Qualität aus.
Allerdings unterstützt PNG Transparenzen, so kann z.B. der Hintergrund eines Logos transparent sein.
SVG (Scalable Vector Grafic) die sogenannten Vektorgrafiken werden in Form von Vektoren dargestellt, dass hat den Vorteil, dass diese skalierbar sind und somit
beliebig groß dargestellt werden könnnen. Idealer Verwendungszweck für Logos oder Icons. Ebenso kann SVG mit JavaScript animiert werden.
Wie beim PNG sind auch bei SVG Alpha-Transparenzen möglich.

Bei detailsreichen Bildern bleibt JPG nach wie vor die erste Wahl. GIF wird meist nur bei Animationen genutzt, ansonsten durch PNG abgelöst.
SVG hingegen ist Zukunft, durch die stätig steigende Anzahl mobiler Endgeräte, benötigt man skalierbare Bilder.

Komprimierung
Photoshop
Gegebenfalls muss die Bildgröße angepasst werden, dies ist unter „Bild – Bildgröße“ (ALT+Strg+I) oder „Bild – Arbeitsfläche“ (ALT+Strg+C) möglich. Anschließend kann man sein Bild unter
„Datei – für Web speichern“ (ALT+Umschalt+Strg+S) exportieren.
Online Tools
Eine kostenlose Alternative wären endlos viele Online Tools. Wie z.B. tinypng.com, imagecompressor.com oder compressimage.toolur.com.

Prüfung
Der einfachste und beste Weg wäre Google PageSpeed Insights.
Die Bewertung der Seitengeschwindigkeit beträgt zwischen 0 Punkte und 100 Punkte. Ab einer Punktzahl von 85 gilt deine Webseite als leistungsstark.
Als zweite Methode empfehle ich GTmetrix.com. Dort wird alles noch etwas ausführlicher erklärt.

Ein extrem häufiger Grund für langsame Ladezeiten deiner Webseite ist und bleibt die nicht richtige oder keine Komprimierung der Bilder.
Gerade auf mobilen Endgräten ist die Komprimierung enorm wichtig.

Veröffentlicht am

Langsame Ladezeiten? – Leverage Browser Caching

Umso schneller deine Webseite geladen ist – umso besser, sowohl für das Ranking in Google, als auch für den Benutzer.
Für eine Maximierung der Webseite Geschwindigkeit ist das Leverage Browser Caching eine ausgezeichnete Wahl.
Also speichern Sie statische oder nur selten geänderte Ressourcen für einen Zeitraum im lokalen Speicher zwischen.
Dies reduziert die Serveranfragen und lässt unsere Webseite deutlich performanter werden.

Hierzu haben Sie die Möglichtkeit das Browser-Caching in unserer .htaccess zu aktivieren.
Vorab sollten Sie die .htaccess sicherheitshalber abspeichern.
Die .htaccess Datei befindet sich in der Regel im Basisverzeichnis der Website (Zielpfad der Domain).
Sie wird bei jedem Aufruf des Apache Webservers und für jede einzelne Komponente der Webseite ausgewertet.

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault „access plus 1 month“

# Data
ExpiresByType text/xml „access plus 0 seconds“
ExpiresByType text/html „access plus 0 seconds“
ExpiresByType text/plain „access plus 0 seconds“
ExpiresByType application/xml „access plus 0 seconds“
ExpiresByType application/json „access plus 0 seconds“
ExpiresByType application/rss+xml „access plus 1 hour“
ExpiresByType application/atom+xml „access plus 1 hour“
ExpiresByType text/x-component „access plus 1 hour“

# Web-App-Manifeste
ExpiresByType application/x-web-app-manifest+json „access plus 0 seconds“
ExpiresByType text/cache-manifest „access plus 0 seconds“

# Scripts
ExpiresByType text/css „access plus 1 month“
ExpiresByType text/javascript „access plus 1 month“
ExpiresByType application/javascript „access plus 1 month“
ExpiresByType application/x-javascript „access plus 1 month“

# Bilder
ExpiresByType image/gif „access plus 1 month“
ExpiresByType image/png „access plus 1 month“
ExpiresByType image/jpe „access plus 1 month“
ExpiresByType image/jpg „access plus 1 month“
ExpiresByType image/jpeg „access plus 1 month“
ExpiresByType image/jp2 „access plus 1 month“
ExpiresByType image/pipeg „access plus 1 month“
ExpiresByType image/bmp „access plus 1 month“
ExpiresByType image/tiff „access plus 1 month“
ExpiresByType image/svg+xml „access plus 1 month“
ExpiresByType image/vnd.microsoft.icon „access plus 1 month“

# Icons
ExpiresByType image/ico „access plus 1 month“
ExpiresByType image/icon „access plus 1 month“
ExpiresByType text/ico „access plus 1 month“
ExpiresByType image/x-ico „access plus 1 month“
ExpiresByType image/x-icon „access plus 1 month“
ExpiresByType application/ico „access plus 1 month“

# Schriftarten
ExpiresByType font/truetype „access plus 1 month“
ExpiresByType font/opentype „access plus 1 month“
ExpiresByType application/x-font-ttf „access plus 1 month“
ExpiresByType application/x-font-woff „access plus 1 month“
ExpiresByType application/font-woff „access plus 1 month“
ExpiresByType application/vnd.ms-fontobject „access plus 1 month“

# Sonstiges
ExpiresByType application/pdf „access plus 1 month“
ExpiresByType image/vnd.wap.wbmp „access plus 1 month“
ExpiresByType application/vnd.wap.wbxml „access plus 1 month“
ExpiresByType application/smil „access plus 1 month“
</IfModule>

„IfModule“ prüft ob das benötigte Modul „mod_expires“ aktiviert ist. Der Befehl „ExpiresByType“ spricht dann einzelne Medientyp an.
„Access plus 1 month“ legt die Dauer fest, wie lang die Ressource zwischengespeichert werden soll.
ExpiresDefault „access plus 1 month“ legt den Standard fest.

Zu diesen Ressourcen zählen .gif, .jpg und .png, .css, .js, .pdf, SWF-Datein und einige weitere.
Für die verschiedenen Dateitypen legen Sie individuelle Ablaufdaten fest.
Laut Google sollten die meisten Caching Ressourcen eine Mindestdauer von einer Woche betragen.
Letztendlich muss jeder für sich selbst wissen, was er wie lange zwischenspeichern möchte.

Bei der Aktivierung werden folgende Header an den Browsergesendet
– Cache-Control-Header & Expires-Header – Gültigkeitsdauer
– Last-Modified-Header & E-Tag-Header – Ressourcen Validierung

Ob die Aktivierung tatsächlich funktioniert hat, kann man ganz einfach mithilfe folgender Tools prüfen
– Google Insights
– GTmetrix
– Pingdom