Um die eigene Website in den Suchergebnissen auf gute Plätze zu bringen müssen viele Aspekte der Seite gut abgestimmt sein. Besonders wichtig sind informative Texte die mit passenden Keywords bestückt wurden oder qualitativ hochwertige Links die auf die eigene Seite zeigen. Mit dem immer weiter steigenden Anteil an Smartphones und Tablets (zum Zeitpunkt des Beitrags gut 45% aller Nutzer im Internet) die zum surfen genutzt werden, wird für Suchmaschinen wie Google auch die Geschwindigkeit der jeweiligen Seiten wichtiger. Wie stark sich die Geschwindigkeit einer Website auf die Reihung in den Suchergebnissen auswirkt, gibt Google nicht direkt an, ein Ranking-Faktor ist sie aber definitiv. Ein Indiz dafür ist z.B. das zuletzt stark überarbeitete PageSpeed Insights Tool von Google. Mit diesem Helferlein kann man die eigenen Website testen und erhält auch direkt Verbesserungsvorschläge. Ziel ist es Websites schneller und gleichzeitig schlanker zu machen. Dies ermöglicht es Nutzern mit einer langsamen Internetverbindung oder einem Gerät mit wenig Leistung trotzdem schnell von Seite zu Seite springen zu können.
In diesem Beitrag nehmen wir uns einen mittlerweile archivierten Blog vor und steigern dessen PageSpeed-Wertung. Der Blog basiert auf WordPress sowie einem eigens entwickelten Theme. Für die Optimierung machen wir uns kostenlos verfügbare Plugins und Tools zunutze und sprechen auch über die jeweiligen Empfehlungen von Google selbst.
Ausgangssituation
Unser Blog hat mit 62 Punkten eine Wertung die im unteren Mittelfeld einzuordnen ist. Es gibt also genügend Verbesserungsmöglichkeiten die mit großer Wahrscheinlichkeit auch auf eurem Blog oder eurer Website umgesetzt werden können.
Der erste Punkt den wir unter den von Google vorgeschlagenen Empfehlungen finden, ist die Beseitigung von Ressourcen die das Rendering blockieren bzw. verlangsamen. Gemeint sind damit Stylesheets sowie JavaScript Files die vom Browser beim Besuch heruntergeladen und interpretiert werden müssen. Je mehr Dateien vom Browser dabei abgerufen und interpretiert werden, desto länger die Zeit bis die eigentliche Website am Schirm des Nutzers angezeigt wird. Eine optimale Lösung wäre an dieser Stelle das Zusammenfügen aller benötigten .CSS sowie .JS Dateien. WordPress Plugins die im Frontend der Seite zum Einsatz kommen, haben die unangenehme Eigenschaft, jeweils eigene CSS und auch JavaScript Dateien einzubinden. Jedes installierte Plugin kann uns also theoretisch ausbremsen.
Ein praktisches Plugin zur Kombinierung von JS und CSS Dateien ist das kostenlose WordPress Plugin W3 Total Cache. Das Caching-Plugin übernimmt dabei gleich mehrere Aufgaben die uns das Leben spürbar erleichtern werden.
W3 Total Cache Einstellungen
General Settings
Nach der Installation von W3 Total Cache findet sich im Admin Panel ein neuer Reiter unter dem man die grundlegenden Einstellungen zu W3 Total Cache vornehmen kann. Das Caching Plugin geht nach der Installation nicht automatisch ans Werk. Die jeweiligen Funktionen müssen erst von Hand aktiviert und getestet werden. Viele der Optionen die wir in diesem Beitrag durchgehen können auf eurer Website oder eurem Blog zu Problemen führen. Nach der Aktivierung der jeweiligen Optionen empfiehlt es sich die eigene Website zu testen um herauszufinden ob auch wirklich noch alles so wie gewünscht funktioniert.
Page Cache
WordPress erstellt Inhalte bei jedem Seitenbesuch neu. Für jeden Besucher werden z.B. Datenbankabfragen abgeschickt um die Informationen der angefragten Seite anzeigen zu können. Diese Anfragen verzögern den Seitenaufbau und können bei stark frequentierten Seiten schnell zu größeren Problemen wie einer überlasteten Datenbank führen. Mithilfe des Page Cache Features werden statische Versionen der jeweiligen Seiten gespeichert die anschließend direkt aufgerufen werden können. Die verfügbaren Cache Methoden sind abhängig von den am Server installierten Funktionen. Installationen die auf normalen Webspace installiert sind können in den meisten Fällen ohne bedenken auf Disk: Enhanced gestellt werden.
Minify
Die Minify Funktion ist eine sehr effektive Methode um CSS, HTML und JavaScript Code zu verkleinern. CSS Code der z.B. in 4 verschiedenen Dateien aufgeteilt eingebunden wird, kann nach der Aktivierung automatisch in eine einzelne Datei zusammengefasst werden. Aus vier Anfragen an den Server wird also eine einzige. Leider kann diese Einstellung oftmals nicht problemlos aktiviert werden. Speziell bei mehreren eingebundenen JavaScript Files kann es bei der Komprimierung und Zusammenfassung zu Problemen kommen. Nach der Aktivierung von Minify sollten alle Funktionen auf eurer Seite getestet werden. Die Entwicklerkonsole eures Browser kann auch schnell Auskunft darüber geben, ob etwaige JavaScript Fehler nach der Umstellung auftreten. Tipp: Solltet Ihr den Page Cache bereits aktiviert haben, müsst Ihr nach jeder Änderung den aktuell erstellten Cache über die Option „Performance“-> „Purge all Caches“ in der Adminleiste löschen.
Sollte es zu Problemen nach der Umstellung auf Minify kommen, kann versucht werden unter dem Menüpunkt „Minify“ weitere Einstellungen zu treffen. Unter „JS“ kann anschließend definiert werden wie Minify mit JavaScript Dateien umgeht. Unter den Optionen findet sich z.B. der Punkt „Operations in areas“. Hier kann angegeben werden wie JavaScript Dateien eingebunden werden sollen. Hier muss darauf geachtet werden, dass JS Code der z.B. mit „async“ gekennzeichnet wird, nicht sofort beim Seitenbesuch ausgeführt wird. Dies führt z.B. bei Cookie Bannern dazu, dass diese nicht mehr angezeigt werden. Bei Problemen kann man versuchen auf „Combine only“ umzustellen. Solltet Ihr Plugins nutzen die nach der Umstellung Probleme bereiten, könnt Ihr euch z.B. nach alternativen umsehen die eventuell besser mit der Komprimierung zurecht kommen. Probleme gibt es der Erfahrugn nach speziell mit älteren Plugins die bereits seit einiger Zeit nicht mehr aktualisiert wurden. Führen diese Einstellungen nicht zum gewünschten Erfolg kann man in letzter Instanz leider nur die Komprimierung von JavaScript deaktivieren. In meinem Fall ist die Komprimierung kompatibel, Glück gehabt.
Hat Minify geklappt, kann man direkt einen Blick auf den Quellcode der Seite werfen. Aus dem schön verschachtelten Code sollte ein unlesbarer Schwall an HTML geworden sein. Dieser Code ist für das menschliche Auge zwar nicht schön anzusehen und schon gar nicht übersichtlich, stellt für Browser aber kein Problem dar. Die gesparten Zeilen führen zu kleineren Dateigrößen und schnelleren Ladezeiten. JavaScript und CSS Code ist jetzt auch in passende Dateien zusammengefasst worden.
Object Cache und Database Cache
Für einfache Blogs sollte die Geschwindigkeit durch Page Caching und die Änderungen durch Minify bereits merklich gesteigert worden sein. Sollten sich auf eurem WordPress Blog auch Datenbankintensive Anwendungen finden, empfiehlt sich die Nutzung des Database Cache-Features. Dieses speichert Resultate von Datenbankabfragen und kann diese anschließend schneller ausliefern. Neben dem Database Cache gibt es auch die Möglichkeit den in WordPress implementierten Object Cache für längere Zeit zu speichern. Der von WordPress verwendete Cache wird im Auslieferungszustand bei jedem Seitenaufbau neu erstellt. Die Lebenszeit dieses Caches endet mit der Auslieferung der Website. Die Daten im Cache werden anschließend gelöscht. W3 Total Cache gibt hier die Möglichkeit diesen Cache länger zu speichern was wiederkehrende Scriptausführungen merklich schneller machen kann und die Datenbank weiter entlastet.
Browser Cache
Browser Caching ist ein weiteres wichtiges Tool in der Optimierung der Ladezeit eines WordPress Blogs. Mit dieser Funktion werden Inhalte wie JavaScript, CSS oder Bilder mit einem Ablaufdatum gekennzeichnet. Dieses Ablaufdatum gibt dem Browser des Besuchers zu verstehen, dass sich die markierten Dateien nicht regelmäßig ändern, sondern zwischengespeichert werden können. Als Beispiel, ein Besucher kommt auf eine Website, ladet den Stylesheet, JavaScript, das Logo sowie HTML Code der für die Anzeige der Inhalte verwendet wird. Unsere Seite gibt an, dass der Stylesheet, JavaScript und das Logo für 30 Tage aktuell sind. Springt ein Besucher anschließend auf eine weitere Unterseite fragt sein Browser den Stylesheet, bereits geladenen JavaScript Code sowie das Logo nicht erneut vom Server ab, sondern greift darauf direkt aus seinem eigenen Zwischenspeicher zu. Die benötigten Daten müssen also nicht nochmals heruntergeladen werden, das spart Zeit und Ressourcen.
Zum Browser Caching finden sich unter „Browser Caching“ im linken Menü weitere Optionen. Unter den erweiterten Optionen empfiehlt es sich für die jeweiligen Dateitypen einen „Expire Header“ mitzuschicken. Dies kann dabei helfen, den Browser des Besuchers davon zu überzeugen die gekennzeichneten Dateien auch wirklich in den lokalen Cache aufzunehmen. Aktiviert hierzu die Option „Set expires header“.
Sollte es in eurem Fall Probleme mit W3 Total Cache geben können die Einstellungen für Browser Caching auch direkt in eurer .htaccess Datei getroffen werden. Am Anfang der Datei kann dazu der folgende Code eingefügt werden.
# BROWSER CACHING #
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/svg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/xhtml-xml "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"
# BROWSER CACHING #
Gzip / Deflate Komprimierung
In den Browser Cache Einstellungen findet sich zusätzlich eine weitere wichtige Funktion zur Komprimierung von textbasierten Inhalten. Wird die Option „Enable HTTP(gzip) compression“ aktiviert übertragt der Server eine komprimierte Version der Inhalte die anschließend vom Browser entpackt und angezeigt werden. Diesen Vorgang kann man sich wie bei einer klassischen .zip Datei vorstellen. Dies verkleinert die übertragenen Datenmengen und ermöglicht dadurch einen schnelleren Ladevorgang speziell auf mobilen Geräten mit langsamen Internetverbindungen. Bilder werden absichtlich nicht komprimiert übertragen, da gängige Formate wie JPG oder PNG bereits komprimiert sind. Eine zusätzliche Komprimierung belastet nur unnötig die Serverkapazitäten und bietet keinerlei Vorteile.
Sollte die gzip Kompression über W3 Total Cache nicht funktionieren können die passenden Einstellungen auch direkt in die .htaccess Datei geschrieben werden. Der folgende Code ist für den Einsatz auf Apache Servern gedacht. Solltet Ihr ein Webspace Paket nutzen trifft dies in den meisten Fällen auch auf euch zu.
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/atom+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-web-app-manifest+json
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/x-component
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/javascript
</IfModule>
Zwischenanalyse – Spürbar verbessert
Mit W3 Total Cache haben wir eine breite Palette an Performance Verbesserungen vornehmen können. Werfen wir einen kurzen Blick auf unsere PageSpeed Insights Bewertung.
Unsere Optimierungen haben uns direkt 24 Punkte eingebracht und die Ladezeiten der Seite sollten bereits merklich schneller sein. Ganz am Ziel sind wir aber noch nicht. Es gibt noch ein paar Optimierungen die teilweise recht schnell umgesetzt werden können.
Lazy Loading
Findet ein Besucher den Weg auf unsere Website werden standardmäßig alle Inhalte beim Seitenaufruf geladen. Darunter fallen auch z.B. Bilder die auf der Seite weiter unten und somit nicht im Sichtfeld des Betrachters zu sehen sind. Mithilfe von Lazy Loading werden nicht unmittelbar wichtige Bilder erst kurz bevor sie zu sehen sind geladen. Der Seitenaufbau läuft dadurch, speziell auf mobilen Geräten mit langsamer Internetverbindung, spürbar schneller ab. Wer auf eine Lupenreine Bewertung von W3C Wert legt, sollte auf diese Lösung verzichten. Bilder werden bei Lazy Loading standardmäßig mit einer eigenen CSS-Klasse ausgestattet und verlieren Ihren „src“ Tag was bei der Validierung der Seite zu Problemen führen kann. Vom Standpunkt der Suchmaschinenoptimierung aus gesehen fallen die verbesserten Ladezeiten aber deutlich stärker ins Gewicht als der zugrundeliegende Code.
Für WordPress gibt es diverse fertige Plugins die euren Blog um Lazy Loading erweitern. Ich habe mich für BJ Lazy Load entschieden. Über die Einstellungen kann man definieren welche Medien per Lazy Load gesteuert werden sollen. Weiters kann man sich dafür entscheiden ein Platzhalter-Bild anzuzeigen bis die jeweilige Ressource fertig nachgeladen wurde. Diese kleine Änderung bringt uns eine nochmals verbesserte Ladezeit, Google’s PageSpeed Insights bewertet uns jetzt mit der folgenden Punktezahl.
Zwischenanalyse – Fast geschafft
Ein recht guter Wert, nicht perfekt aber doch beachtlich. Um an noch mehr Punkte zu kommen, müssen wir einen Blick auf die restlichen Empfehlungen von Google werfen.
Bilder richtig dimensionieren
Dieser Punkt zeigt Bilder die auf der Website skaliert angezeigt werden. Ein Bild mit einer Abmessung von 500×500 das auf der Website in 250×250 angezeigt wird, könnte uns an dieser Stelle z.B. aufgezeigt werden. Sollten Meldungen dieser Art bei euch angezeigt werden, hilft es die Größe der verwendeten Thumnails anzupassen. Hierfür muss man z.B. die vom eigenen Theme genutzten Thumbnail-Größen anpassen. Die dafür benötigten Optionen sind von Theme zu Theme an unterschiedlichen Stellen zu finden. In den meisten Fällen finden sich die Angaben zu den Thumbnails direkt in der functions.php Datei. Sucht am besten nach der Funktion „add_image_size“. Weitere Informationen zur Nutzung dieser Funktion finden sich in der offiziellen WordPress Code Reference.
Ressourcen beseitigen, die das Rendering blockieren
Bei diesem Vorschlag scheiden sich die Geister. Google empfiehlt unter anderem nicht verwendeten CSS Code aufzuschieben bzw. nur dann zu laden wenn er auf der Seite auch wirklich benötigt wird. Der für die Seite am wichtigsten CSS Code, wie Font-Informationen, Hintergrundfarben sowie andere Grundlegenden Style Informationen sollen direkt in den Quellcode eingebaut werden. Wichtiger JavaScript Code soll auch direkt in den Quellcode verlegt werden. JavaScript-Code der für die eigentliche Anzeige der Inhalte nicht notwendig ist, kann man z.B. mithilfe des Attributs „defer“ aufgeschoben werden. Eingebundenes JavaScript das per defer eingebunden wurde, wird erst ausgeführt wenn die Website komplett geladen und vom Browser interpretiert wurde. Alternativ kann der JavaScript Code aus dem Header in den Footer Bereich der Website verfrachtet werden und blockiert dadurch den Seitenaufruf nicht mehr.
Nutzt man mehrere Plugins die Frontend Funktionalitäten anbietet kann es schwer werden, diese Art der Optimierung durchzuführen. Viele JavaScript Funktionen die bei diversen fertigen Themes eingebaut sind, müssen direkt beim Aufruf der Website ausgeführt werden. Ändert man den Zeitpunkt an dem JavaScript geladen wird, kann es zu Anzeigefehlern oder komplett fehlenden Funktionen kommen. Problematisch kann sich auch die Umsetzung der Vorgaben für Stylesheets gestalten. Wird der für die Anzeige der Website benötigte CSS Code zu spät geladen, kann es zu Anzeigeproblemen kommen. Google empfiehlt wichtigen CSS Code direkt in den Quellcode der Seite abzulegen. Damit ist z.B. CSS Code gemeint der den allgemeinen Aufbau eurer Seite wie die Abmessungen der wichtigsten div Container, die gewählte Schriftart oder die zu verwendenden Farben beschreibt.
Mithilfe von Minify haben wir diese Dateien zuvor zusammengefügt und uns damit bereits Ladezeiten eingespart. Ein Großteil der Plugins bietet nicht die Option CSS Code Inline auf der Website darzustellen, bis vor kurzem war diese Praktik auch bei Plugins die z.B. bei ThemeForest angeboten werden verboten. Dies macht die Umsetzung dieser Vorgabe nochmals deutlich schwieriger. Hier sind wir auch schon bei der Frage angelangt ob die Optimierung der Stylesheet Informatioenn wirklich Sinn macht. Unsere Seite lädt zwar nach der Umstellung um ein paar Millisekunden schneller, dafür müssen wir aber ggf. anzeigefehler in Kauf nehmen. Fraglich ist auch der Vorschlag von Google nicht verwendeten CSS Code aufzuschieben. Damit ist gemeint, dass wir den verwendeten Stylesheet auf jeder Seite so anpassen, dass dieser auch wirklich nur die Elemente beschreibt die auch wirklich zu sehen sind. Damit sparen wir zwar Datenverkehr, der Browser des Besuchers kann aber beim Besuch weiterer Unterseiten nicht auf die bereits zwischengespeicherte Version des Stylesheets zurückgreifen, da sich dieser von der vorherigen Seite unterscheidet. Der erste Besuch wäre somit um ein paar Millisekunden schneller, dafür aber auf weiteren Unterseiten jeweils ein paar Millisekunden langsamer.
In vielen Fällen ist es nicht ohne größerem Aufwand möglich, dies Probleme aus der Welt zu schaffen. Es ist auch mehr als fraglich ob diese Optimierung den Aufwand wert ist. Die Zeit die hier verschlungen wird, wäre wohl mit ziemlicher Sicherheit besser in die Suche nach neuen Backlinks investiert.
Für diejenigen unter euch die sich mit dieser Option trotzdem auseinandersetzen möchten hier ein paar Lösungsansätze.
Scripts per W3 Total Cache in den Footer verschieben
Um bei der Nutzung von W3 Total Cache die Scripts schnell in den Footer zu verschieben müsst Ihr die footer.php eures Themes bearbeiten. Eine Zeile vor </body> fügt Ihr die folgenden HTML Kommenater ein. Anstelle der eingefügten HTML Kommentare werden von W3 Total Cache Styles und Scripts die für die Ausführung im Header eingeplant waren erst im Footer Bereich eingefügt.
<!-- W3TC-include-js-head -->
<!-- W3TC-include-js-body-start -->
<!-- W3TC-include-js-body-end -->
<!-- W3TC-include-css -->
Der Name des Tags gibt jeweils an ob CSS oder JS Dateien an dieser Stelle eingefügt werden sollen. Nach der Umstellung sollten alle Funktionen eurer Seite getestet werden. Öffnet dazu auch die Entwicklerkonsole und werft einen Blick auf die „Console“, dort werden euch mögliche JavaScript Fehlermeldungen angezeigt. Um die Fehlersuche zu vereinfachen könnt Ihr auch die zuvor aktivierte Minify Funktion deaktivieren. Dadurch werden Fehlermeldungen einer JavaScript Datei zugeordnet die anschließend direkt mit einem problematischen Plugin in Verbindung gebracht werden kann.
Bilder in modernen Formaten bereitstellen
Nicht alle Dateiformate sind optimal für die Darstellung von Bildern im Web. PageSpeed Insights hat Probleme mit Formaten wie PNG, speziell wenn diese größer als unbedingt notwendig sind. Dienste wie TinyPNG können hier schnell Abhilfe schaffen indem die Dateien verlustfrei komprimiert werden. An dieser Stelle zeigt PageSpeed in eurem Fall höchstwahrscheinlich auch an, dass weitere Bilder optimiert werden können. WordPress Plugins wie reSmush.it ermöglichen es hochgeladene Bilder direkt zu verkleinern bzw. zu optimieren. Im Fall von reSmush.it gibt es auch die Möglichkeit alle bislang hochgeladene Bilder zu optimieren. Nachteil an reSmush.it, Bilder dürfen maximal 5MB groß sein. Für Blogs oder Websites die viele Bilder verwenden empfiehlt es sich die Optimierung der Bilder am eigenen PC durchzuführen. Für Windows gibt es den Caesium Image Compressor der ganze Ordner inklusive Unterordner an Bildern optimieren kann. Das Tool ist kostenlos und bietet eine Fülle an möglichen Einstellungen. Apple User haben mit ImageOptim eine recht gute Alternative.
Für die Optimierung der Bilder am eigenen PC empfiehlt es sich alle Bilder aus dem wp-uploads Ordner herunterzuladen und diese anschließend am PC zu optimieren. Die verbesserten Bilder können anschließend direkt wieder hochgeladen werden. Mit einem installierten Image Optimizer Plugin wie reSmush.it werden anschließend alle hochgeladenen Bilder automatisch verbessert. Weitere arbeiten sind in den meisten Fällen nicht mehr notwendig.
Serverantwortzeiten reduzieren (TTFB)
TTFB steht für Time To First Byte und gibt an wie lange ein Besucher auf die Übertragung der ersten Informationen vom Server warten muss. Eine Website die mit PHP programmiert wurde gibt erst Informationen an den Besucher ab nachdem die Ausführung der Scripts vom Server abgeschlossen wurde.. Bei komplexen Websites mit vielen Datenbankabfragen kann dieser Vorgang viel Zeit in Anspruch nehmen, einfache Blogs haben hier also bereits einen merklichen Vorteil. Durch den Einsatz von Caching sollte dieser Wert bereits merklich reduziert worden sein, sollte es auch nach allen Optimierungen noch Probleme mit der Serverantwortzeit geben, liegt dies möglicherweise am Server auf dem eure WordPress Seite gehostet wird. Google selbst empfiehlt Auslieferungen unter 0.2 Sekunden oder 200ms. Speziell bei normalen Webspace Hosting ist man am Hosting Server einer von vielen Kunden die Inhalte ausliefern möchten. Shared Hosting Server können schnell ausgelastet sein, was wiederrum natürlich auch die performance eurer Seite beeinträchtigt. Schlagen alle anderen Optimierungen fehl, hilft oft nur noch der Umzug zu einem anderen Anbieter oder einem eigenen kleinen vServer.
vServer Empfehlung
In Sachen vServer habe ich sehr gute Erfahrungen mit DigitalOcean gemacht. Der Vorteil von Digital Ocean ist, dass man sogenannte Droplets, also praktisch kleine vServer nach Laufzeit bezahlt. Das kleinste Droplet kommt monatlich auf 5 Euro und kann jederzeit gekündigt oder per upgrade verbessert werden. Hat man auf seinem Blog oder seiner Website also plötzlich mehr Zugriffe als der aktuelle vServer verträgt, kann per Knopfdruck ein Upgrade durchgeführt werden. Die Preisänderung tritt direkt nach dem Upgrade ein. Über Themen wie eine monatliche Bindung muss man sich also keine Gedanken machen.
Ein vServer stellt euch nicht ein fix fertiges Admin Panel zur Verfügung, stattdessen muss man selbst Hand anlegen. Digital Ocean pflegt hierfür eine sehr detaillierte Knowledgebase die alle wichtigen Schritte zur Konfiguration eines Linux Servers beinhaltet und auch in Sachen Security informiert. Wer bereits mit der Administration seines eigenen PCs Probleme hat muss sich auf eine Steile Lernkurve einstellen. Der Umgang mit Linux und eigenständigen Servern ist aber der nächste logische Schritt für Web Entwickler. Das durch die Administration gelernte Know How macht sich auf lange Sicht bezahlt und hilft dabei das große Ganze etwas besser zu verstehen.
Mehr Informationen zu Digital Ocean findet Ihr hier (Affiliate Link). Solltet Ihr euch über diesen Link einen Account bei Digital Ocean zulegen, bekommt Ihr ein Guthaben von 100 US-Dollar für einen Zeitraum von 60 Tagen geschenkt. Wenn Ihr euch nach diesem Testzeitraum für Digital Ocean entscheidet und euer Konto aufladet bekomme ich einen kleinen „Kickback“ auf mein Digital Ocean Konto gutgeschrieben. Für euch Fallen dadurch keine höheren kosten an.
Webspace Empfehlungen
Wer den Sprung zu einem eigenen vServer nicht wagen möchte, kann natürlich auch den Webspace Anbieter wechseln. Für Seiten die in Österreich gehostet werden sollen, kann ich Easyname empfehlen. Das Admin Panel ist gut aufgebaut und bietet alle Einstellungsmöglichkeiten die für den Betrieb von WordPress benötigt werden. Aktuelle PHP Versionen sind immer recht zeitnah verfügbar, es gibt kostenlose Zertifikate von LetsEncrypt und einen eigenen Backup Space. Ein SSH Zugang ist bei ein paar Paketen auch dabei, leider aber ohne Root-Rechte.
Weitere Highlights:
- Varnish / Memcached Server Zugang
- Cloudflage Integration
- PHP Einstellungen pro Domain einstellbar
- CronjobsGuter
- Preis für gebotene Leistung
- Bislang immer schnelle Serverantwortzeiten
Alternative: CDN
Ein CDN (Content Delivery Network) entlastet den eigenen Server indem statische Inhalte wie z.B. Bilder über andere gut angebunde Server ausgeliefert werden. Einer der bekanntesten Vertreter dieser Kategorie ist Cloudflare. Ein Content Deliery Network macht speziell bei international ausgerichteten Websites Sinn. Wer bereits einen eigenständigen Server in Verwendung hat der langsam an seine Grenzen stößt kann diesen mithilfe von CDNs wie Cloudflare entlasten.
Schlusswerte und Fazit
Nach allen Optimierungen sind wir mit unserem Blog bei einer Wertung von 93 (zu Beginn 62) angekommen. Damit sind wir im oberen Bereich angekommen. Ein paar Optimierungen habe ich absichtlich nicht durchgeführt. Zum Beispiel wurde der Stylesheet nicht aufgeteilt oder in den Footer Bereich der Seite verlegt. Mit dieser Optimierung wäre der Wert wohl irgendwo bei 95 bis 97 Punkten angekommen. Der Arbeitsaufwand war einfach zu hoch als das er für einen Blog im Archiv-Modus gerechtfertigt hätte werden können. In meinem Fall war der verwendete Webspace auch schnell genug und rechtfertigte somit nicht die Umstellung auf einen eigenständigen vServer.
Schnelle Websites machen Spaß und schaffen vertrauen. Besonders wichtig sind schnelle Ladezeiten wenn man Produkte oder Dienstleistungen anbietet. Speziell bei Online Shops wirkt sich die Optimierung der Ladezeiten direkt positiv auf die Conversion Rate aus. Ein weiterer netter Nebeneffekt sind die leicht verbesserten Reihungen in den Suchergebnissen, speziell für mobile Geräte. Kurze Ladezeiten sind im Jahr 2019 ein wichtiger Aspekt der keinesfalls außer acht gelassen werden sollte, oder surft Ihr gerne auf langsamen Seiten im Internet?
Sollten Sie Hilfe bei der PageSpeed Optimierung Ihrer Website oder Ihres Online Shops benötigen, helfe ich gerne weiter. Mehr dazu finden Sie z.B. auf der Unterseite – Suchmaschinenoptimierung in Wien und Niederösterreich.
