LiteSpeed Cache Header

LiteSpeed Cache Plugin

Wir haben in den letzten Monaten und Jahren einige Cache-Plugins ausprobiert, mit denen man die Geschwindigkeit der eigenen (WordPress) Website massiv beschleunigen kann. Durch einen Blogpost von cyon sind wir auf das LiteSpeed Cache Plugin aufmerksam geworden. Es funktioniert einfach viel besser (99% der Massnahmen funktionieren einfach) als die anderen (teils kostenpflichtigen), die wir ausprobiert haben, und ist gratis.

Warum muss eine Website überhaupt schnell sein?

Eine Site muss aus zwei Gründen schnell sein: Der offensichtliche ist, dass ein Besucher nur eine begrenzte Geduld mitbringt. Wenn er unsere Seite aufruft und erst mal 30 Sekunden warten muss, ist diese Geduld schnell verspielt (obwohl es bei Besuchern meines Alters natürlich eine schöne Erinnerung an das Internet mit Modem ist). Der zweite Grund ist, dass Suchmaschinen wie Google langsame Seiten „bestrafen“. Eben weil die Benutzerfreundlichkeit gering ist, werden diese Seiten weiter unten in den Suchergebnissen angezeigt.

Voraussetzungen für LiteSpeed Cache

Das LiteSpeed Cache Plugin ist eine Erweiterung zum Beschleunigen von WordPress, wenn die Site bei einem Hoster ist, der den LiteSpeed Web Server einsetzt. Unsere Site ist bei cyon in Basel gehosted (ebenso, wie viele Sites unserer Kunden). Und cyon setzt zum Glück auf LiteSpeed.

Die Installation und Aktivierung

Nach der Installation aus dem Pluginverzeichnis von WordPress muss man den Cache nur aktivieren, andere Cache-Plugins deaktivieren und schon kann’s losgehen:

LiteSpeed Cache aktivieren

LiteSpeed Cache aktivieren

Mit den Basiseinstellungen ist man auf der sicheren Seite, aber noch lange nicht optimal unterwegs.

Finetuning

Um wirklich gute Ergebnisse zu erzielen, muss man noch einiges mehr machen (was dann aber auch gewisse Risiken birgt). Dass Bilder generell in der „richtigen“ Grösse eingefügt werden sollten, ist vermutlich klar (ein 13 MB grosses Bild, dass auf 1.5×1 m gedruckt werden kann, auf ein Smartphone auszuliefern, auf dessen Display es dann 6×4 cm gross angezeigt wird, macht keinen Sinn und kostet Zeit). Hier geht es um die technischen Optimierungen:

  • JavaScript (dynamische Elemente) und CSS (Design) sind häufig in vielen kleinen Dateien abgelegt und werden mit vielen kleinen Anfragen einzeln vom Browser abgeholt. Das kostet Zeit. Um die kleinen Dateien noch kleiner zu machen, sollten sie „Minified“ werden (die Seite selber, das HTML, auch). Das bedeutet, unnötige Leerzeichen und Kommentare werden entfernt. Um statt vieler kleiner Anfragen eine grössere zu bekommen (das ist viel schneller), kann man die Dateien noch „kombinieren“, also zu einer grossen zusammenfassen. Wenn man will, übernimmt LiteSpeed Cache diese arbeiten.
LiteSpeed Cache – optimize

LiteSpeed Cache – optimize (Die Warnung, dass man nach der Aktivierung sauber Testen soll, ist ernst gemeint – siehe Fehlerquellen)

  • Bilder werden im Normalfall alle geladen (auch die, die man nicht sieht bevor man scrollt, die also weiter unten auf der Seite sind). Man kann die Bilder erst dann laden lassen, wenn sie angezeigt werden sollen. Das beschleunigt das Darstellen des sichtbaren Bereichs und hilft zumindest bei der gefühlten Geschwindigkeit (und den Suchmaschinen). Auch das übernimmt LiteSpeed.
LiteSpeed Cache – media

LiteSpeed Cache – media

Fehlerquellen

Unser häufigstes Problem ist, dass wir vergessen, nach Änderungen den Cache zu leeren und deswegen ewig suchen, bis wir herausfinden, warum unsere Änderung nicht funktioniert.

LiteSpeed Cache – leeren

LiteSpeed Cache – leeren (Dieser Button kann die geistige Gesundheit retten)

Ein echtes Problem, mit dem wir häufig kämpfen, ist, dass nach der Aktivierung des „JS Combine“ irgendwas nicht funktioniert. Das passiert meist, weil in einer der vielen Dateien eine kleine Unsauberkeit drin ist, die nach dem Zusammenfassen alle JavaScript Codes unbrauchbar macht. Wenn also nach der Aktivierung der „optimize“ Optionen plötzlich nichts mehr geht:

  1. Die Optionen einzeln Deaktivieren, um zu sehen, an welcher es liegt.
  2. Wenn man auf die entsprechende Option (im Regelfall eben JS Combine) nicht verzichten will, wird es etwas aufwendiger.
    • Rausfinden, welche JavaScripts von der Seite geladen werden (dazu minify und combine deaktivieren).
    • Die entsprechenden Files einzeln von Minify und Combine ausschliessen, bis man das richtige gefunden hat.
LiteSpeed Cache – tuning

LiteSpeed Cache – tuning

Leider haben wir derzeit keine solchen Probleme. Aber hier (bei JS Excludes) könnt Ihr die JavaScript files einzeln eintragen, die nicht optimiert werden sollen, zum Beispiel in der Form: /wp-content/plugins/akismet/_inc/akismet.js (je ein Eintrag pro Zeile). Habt Ihr ein bestimmtes Plugin oder Euer Theme im Verdacht (zum Beispiel nach einem Update), könnt Ihr auch einfach alle Dateien im entsprechenden Verzeichnis in der folgenden Form ausschliessen: /wp-content/plugins/akismet/

Und das ist alles?

Nein, man kann noch viel mehr machen (unter anderem kann der Server auch selbst Bilder optimieren!). Aber wenn Ihr Euch an das Plugin gewöhnt habt, könnt Ihr auch die Dokumentation des Herstellers lesen (dieser Artikel wäre bei mehr Details auch innert weniger Tage veraltet – die bringen ständig Verbesserungen).

Screenshot Dorfladen Spiez

Onlineauftritt für den Dorfladen Spiez

Die Gemeinde Spiez verfügte lange über keinen klassischen Dorfladen mit Lebensmitteln und Artikeln für den täglichen Bedarf. Das hat sich Anfang Dezember 2017 geändert: Seit dem 2. Dezember 2017 lässt sich am Kronenplatz im Spiezer Dorfladen regional und saisonal einkaufen. Der wunderschön eingerichtete Dorfladen mit grosser Fleischtheke, ansprechendem Sortiment und tipptopper Kaffeemaschine erwartet die Besucherinnen und Besucher jeweils von Montag bis Samstag. Und auch online ist das Dorfladen-Team für seine Kundschaft da: Die FremdeFeder durfte gemeinsam mit der Projektleitung des Spiezer Dorfladens die neue Webseite konzipieren und umsetzen.

Sportlicher Terminplan

Die Verantwortlichen des Projektes «Spiezer Dorfladen» kamen im Oktober 2017 auf uns zu, da sie sich bis zur Eröffnung am Samstag, 2. Dezember, einen funktionierenden, ansprechenden Online-Auftritt wünschten. Das Konzept des Spiezer Dorfladens hat uns sofort überzeugt: Ein kleiner Laden mit frischen und lokalen Lebensmitteln, der es den Spiezern (und der Bevölkerung aus dem Umland) ermöglicht, im Ortszentrum alles Wichtige einzukaufen. Auch das Credo «regional, frisch, fit und frech» und die Philosophie, die dahinter steckt, hat uns sehr angesprochen.

Der Terminplan war zwar sehr sportlich, aber gemeinsam haben wir es geschafft. Am zweiten Dezember stand die Website und der Dorfladen wurde zur Eröffnung von Kunden überrannt. Das Team machte einen erschöpften aber überglücklichen Eindruck. Wir drücken Anne-Kathrin Spielmann und ihrem Team die Daumen und sind uns sicher, dass ihr Erfolg anhält.

Die Zusammenarbeit mit dem Team des Dorfladens war sehr angenehm. Insbesondere die professionelle Vorbereitung (professionelles Logodesign, anständige Bilder, klare Struktur) haben uns das Leben leichter und somit die Umsetzung schneller gemacht. Durch die Integration der Facebookseite hat der Dorfladen sehr schnell eine grosse Reichweite in Spiez und Umgebung erreicht.

Webdesign und Technik

Auch beim Spiezer Dorfladen haben wir für das Webdesign auf das kommerzielle Theme „Ark“ (via themeforest) gesetzt und natürlich kamen die Plugins LiteSpeed Cache und SEO Press zum Einsatz. Die grosse Herausforderung war, dass die URL «spiezerdorfladen.ch» nicht optimal für den Suchbegriff «Dorfladen Spiez» geeignet war. Dennoch erscheint der Dorfladen dank Optimierungen mit SEO Press und der Geschwindigkeit durch LiteSpeed weit oben in der Suche.

Auch der Dorfladen ist bei cyon gehostet, was uns Performance, eine anständige Oberfläche für die Konfiguration und Sicherheit bei den Backups bringt. Ein kompetenter Hoster macht das Leben sowohl für die Webagentur als auch für den Kunden um Einiges entspannter.

Screenshot Plugins

Auf welche WordPress Plugins setzt die FremdeFeder?

Nein, wir haben keine eigenen WordPress Plugins, aber wir setzen beim Webdesign für unseren Kunden je nach Anforderungen bestimmte Plugins ein. In diesem Blogpost wollen wir den Herstellern der freien und kostenpflichtigen Erweiterungen danken und Ihnen kurz vorstellen, was wir für welchen Zweck benutzen.

LiteSpeed Cache

LiteSpeed Cache ist unser Lieblingsplugin. Es hilft dabei, Ihre Site zu beschleunigen, indem die verschiedenen Möglichkeiten des Internets für Caching (Zwischenspeichern von Informationen) verwendet werden. Damit muss nicht bei jedem Aufruf einer Seite alles zusammengebaut und «über die Leitung» geschickt werden. Stattdessen werden fertige Seiten auf dem Webserver und teils sogar im Browser des Benutzers zwischengespeichert. Ihre Seite wird schneller und der Besucher muss weniger lang warten (was wiederum Ihr «Ranking» bei Google verbessert).

Im Gegensatz zu vielen anderen Plugins, bietet LiteSpeed Cache eine voll integrierte Lösung: Minify von CSS und JavaScript kann automatisiert werden (und funktioniert), Komprimierung wird aktiviert, Browser Caching wird ermöglicht … LiteSpeed Cache hat sogar eine integrierte Lösung für die online-Optimierung von Bildern. Alles funktioniert reibungslos und wenn es Probleme gibt, kann man es sehr detailliert konfigurieren.

Einziger Nachteil: Man benötigt ein Hosting, das auf einem LiteSpeed Server basiert. Da wir und die meisten unserer Kunden beim Schweizer Hoster Cyon sind, ist das bei uns aber gegeben. Selbst grössere, grafikintensive Seiten (viele grosse Bilder) unserer Kunden haben hervorragende Antwortzeiten … dank LiteSpeed cache und Cyon.

SeedProd Coming Soon Page Pro

SeedProds Coming Soon Page Pro ist ein Plugin, dass wir jeweils beim Aufbau der Seite benutzen. Ein Besucher sieht eine „Coming Soon“ Seite und kann sich zum Beispiel in eine Mailingliste für die finale Aktivierung der Seite eintragen. Über einen speziellen Link kann man aber Kunden den Zugang zur vollen Seite ermöglichen.

Damit ist der Aufbau einer Seite und die Abstimmung mit dem Kunden ganz einfach, während man allfälligen Besuchern keine «Baustelle» zumuten muss.

Später kann dasselbe Plugin auch für Wartungs- und Umstellungsarbeiten genutzt werden.

SEO Press

SEO Press unterstützt uns und Kunden dabei, die Wirkung einer Site auf Suchmaschinen zu beurteilen. Wird ein Beitrag mit den Stichwörtern gefunden, die wir wollen? Wie wird die Seite in den Suchergebnissen von Google angezeigt.

Zusätzlich erstellt SEO Press auch eine Sitemap, die es Suchmaschinen leichter macht, eine Seite zu indizieren (und damit einem Besucher leichter, sie zu finden). Auch das Teilen in Social Media wird mit SEO Press transparenter.

Loco Translate

Loco Translate ist ein sehr nützliches Plugin um Teile einer Seite zu übersetzen. Damit kann man Übersetzungen anpassen, wenn die «normale» Übersetzung nicht passend oder gar keine vorhanden ist.

Weitere Plugins

Natürlich setzen wir für spezifische Anforderungen auch weitere Plugins, wie Post SMTP oder Easy Testimonials Pro ein. Die oben aufgeführten Plugins sind aber die, die wir bei (fast) jedem Kunden verwenden. In der Zukunft werden wir hier sicher weitere Plugins vorstellen.

Screenshot Gadmer Lodge

Das Webdesign für das Projekt «Gadmer Lodge» ist fertig und die Site ist online

Die Website für das Projekt «Gadmer Lodge» ist online. Die Genossenschaft ist eine Initiative der Gemeinde Innertkirchen. Sie baut das alte Schulhaus in Gadmen zu einem Hotel um, das die Angebote und Aktivitäten im Gadmental im südlichen Berner Oberland ideal ergänzt. Auch der Unterhalt des Hotels wird von der Genossenschaft übernommen. Es ist wichtig, mit der Website (und ergänzend Facebook und Newsletter) bereits in der Planung- und Bauphase ein Kommunikationsmedium für die Partner, Unterstützer und Interessenten zu haben.

Anfang Dezember kam Thomas Huber, der Projektleiter für die Gadmer Lodge, auf uns zu, um möglichst schnell genau diese Site aufzubauen. Das Ziel war, zunächst eine Übersicht über das Vorhaben zu geben und Interessenten zu gewinnen. Es war klar, dass die technische Umsetzung mittels WordPress gemacht wird. So haben wir eine einfache Möglichkeit zum Bloggen und später dann auch die Option, einen Shop zu integrieren.

Dieses erste Ziel haben wir nun gemeinsam erreicht und konnten das Ergebnis am 11.01. übergeben. Jetzt liegt es an Thomas, die Seite mit weiteren Blogbeiträgen zum Fortschritt zu ergänzen.

Besonderen Dank an unseren Auftraggeber Thomas, der die Anforderungen klar kommunizieren konnte und die nötigen Informationen und Bilder jeweils schnell geliefert hat. Diese Bilder stammen überwiegend von David Birri von David Birri Photography. Sie geben der Seite ihren besonderen Charme. Danke für die Genehmigung, diese Bilder zu nutzen.

Sobald die Genossenschaft gegründet ist (ca. Mitte Februar) wird die Seite um weitere Informationen (insbesondere zur Unterstützung) erweitert. Wir freuen uns schon auf die weitere Zusammenarbeit und auf das neue Hotel im Gadmental.

Webdesign und Technik

Um die Seite zu realisieren, haben wir neben WordPress das Theme ark und die Plugins Easy Testominials Pro von Gold Plugins, LiteSpeed Cache und SEO Press verwendet. Und für die Zeit des Aufbaus, haben wir – wie immer – SeedProd Coming Soon Page Pro eingesetzt.

Die Seite ist by cyon gehostet, was für uns und die Gadmer Lodge auch die administrativen Aufgaben enorm erleichtert.

ark theme

Webdesign mit WordPress und kommerziellen Themes

Warum verwenden wir als Basis für das Webdesign unserer Kunden kommerzielle Themes? Ist es nicht einfacher, flexibler und billiger, es vollständig selbst zu machen oder kostenlose Themes zu verwenden? Kommerzielle Themes sparen im Normalfall ein Vielfaches Ihrer Kosten in Arbeitszeit ein.

Wir setzen beim Design für unsere Kunden auf WordPress. Während wir auch viele andere Content Management Systeme (CMS) nutzen und bedienen könnten, liegt unsere grösste Erfahrung und Kompetenz doch bei WordPress. Ausserdem haben wir damit ein System, das unsere Kunden auch selbständig bedienen können. Damit sind Aktualisierungen und Änderungen für die Kunden möglich, ohne jeweils eine Agentur zu beauftragen (und zu bezahlen).

Webdesign auf Basis kommerzieller Themes

Das Design in WordPress basiert auf einem sogenannten Theme. Dort wird für den Internetauftritt festgelegt, wie die verschiedenen Elemente dargestellt werden. Wenn eine neue Seite erstellt oder ein Blogbeitrag hinzugefügt wird, wird dieses neue Element genauso dargestellt wie die bereits existierenden. Ein Theme ist «das Design» für WordPress.

Natürlich kann man ein Design vollständig und ohne Grundlage neu aufbauen. Dafür brauchen wir in der Regel einige Tage. Wenn es Änderungen an WordPress gibt, müssen wir das individuelle Design anpassen und testen. Das bedeutet für uns zusätzlichen Aufwand und für unsere Kunden zusätzliche Kosten. Für beide Seiten ist das nicht erstrebenswert. Durch die Verwendung eines Themes als Grundlage für das individualisierte Design sinkt der initiale Aufwand auf wenige Stunden. Damit bleibt mehr Zeit (und Geld) für die eigentlichen Inhalte. Allfällige Updates wegen WordPress Aktualisierungen werden vom Hersteller gratis und meist schnell zur Verfügung gestellt (wenige Stunden Arbeit, zehntausende Kunden, da geht das).

Eine Option ist, existierende kostenlose Themes zu verwenden. Je nach Anforderung reicht so ein kostenloses Theme mit seinen Anpassungsmöglichkeiten auch völlig aus, zum Beispiel das bei WordPress mitgelieferte Theme «Twenty Seventeen». Der Funktionsumfang dieser Themes ist aber eingeschränkt und sobald die Anforderungen etwas komplexer werden, steigt auch der Aufwand für Erweiterungen stark an.

Verwenden wir ein kommerzielles Theme – zum Beispiel unser aktuelles Lieblingstheme «ark», das bei themeforest derzeit auf 19$ reduziert ist – haben wir einerseits einen geringeren Intitialaufwand für die Erstellung und andererseits einen grossen Funktionsumfang für allfällige Erweiterungen. Bei «ark» schätzen wir Folgendes:

  • Ein grandioser Editor für die Erstellung von Seiten (und Blogbeiträgen).
  • Für uns die perfekte Konfigurierbarkeit und Erweiterbarkeit des Designs.
  • Sehr guter Support und grosses Engagement des Herstellers.
  • Schnelle und häufige Aktualisierungen.

Natürlich gibt es auch bei kommerziellen Themes Schwächen und Lücken, diese lassen sich aber in der Regel gut umgehen (die Cache-Lösung von ark funktioniert für uns zum Beispiel gar nicht).

Noch eine kleine Warnung

Insbesondere bei den Blogbeiträgen sollte man möglichst wenig themespezifische Editoren verwenden. Alle fünf bis zehn Jahre wird der Wechsel eines Themes oder auch ein Neubau des Designs annähernd unumgänglich: Neue Technologien, andere Designideen oder Benutzererwartungen zwingen immer mal wieder zu einem Neustart. Wenn dann potentiell 100e Blogbeiträge manuell kopiert werden müssen, weil der alte Editor mit dem neuen Design nicht funktioniert, wird es hässlich (und aufwendig).

Sie brauchen eine fremde Feder?

Kontaktieren Sie uns:

Unsere Koordinaten

Wie Sie uns erreichen

Lassen Sie uns wissen, wie wir Sie unterstützen können. Kontaktieren Sie uns – entweder über unser Kontaktformular oder auf einem der folgenden Wege:

Logo FremdeFeder GmbH Light

Copyright 2018 | fremdefeder.ch | Impressum | Datenschutz