Landingpage Pagespeed: So machen Sie Ihre Landeseite rasend schnell

Heute kombiniere ich mal zwei Themen, die mirberuflich am Herzen liegen: Landingpages und Pagespeed. Erfahren Sie, wie Sie mit Ihrer Landeseite beim Kunden als erstes ins Ziel fahren. 🏎

Warum Landingpages?

Landingpages oder Landeseiten sind fokussierte Seiten, die den Nutzer oft zu einer Aktion bewegen. Das kann ein Kauf oder Lead, zum Beispiel ein Newsletter oder Download gegen E-Mail-Adresse sein.

Landingpages können von der restlichen Webseite isoliert sein und zielgerichtet in Online-Marketing Kampagnen eingesetzt werden. Damit erreichen Sie oft eine höhere Conversionrate als sogenannte Standard-Seiten.

Landingpages eignen sich also zum Verkauf oder zur Leadgenerierung.

Warum Pagespeed?

Pagespeed ist ein entscheidender Faktor, ob der Nutzer auf der Landingpage bleibt und diese überhaupt „zu Gesicht bekommt“. Oder ob er schon verschwindet, bevor die nach allen Regeln der Conversionrate-Optimierung ausgeklügelte Landingpage Ihre volle Wirkung beim potenziellen Kunden entfalten kann.

Eine schlechte Pagespeed drückt sich erwiesenermaßen negativ auf den Umsatz aus. Insbesondere bei Mobile.

Die Pagespeed beeinflusst also, wie gut wir Produkte verkaufen oder Leads generieren können.

So wird Ihre Landingpage rasend schnell

Folgende Punkte sind entscheidend, wenn es um eine schnelle Landingpage geht:

1. Weniger ist mehr

Was auch oft konzeptionell gut funktioniert, wird hier auf die technische Basis angewendet: Weniger ist mehr.

Für viele Landingpages ist eine Umsetzung als statisches HTML (mit CSS/JS) nicht nur völlig ausreichend, sondern auch besser. Content-Management-Systeme wie WordPress inkl. zahlreicher Plugins 😩 schleppen oftmals zu viel Ballast mit sich.

Entwickler können sich trotzdem die Arbeit leichter machen, mit Build Workflow und Static Site Generator.

2. Faule Bilder

Setzen Sie Bilder auf jeden Fall ein, wenn es der Überzeugungskraft Ihrer Landingpage dient. Ihre Landingpage kann auch mit vielen Bildern rasend schnell sein.

Der Trick: Lazy Loading von Bildern. Die Bilder werden erst nachgeladen, wenn Sie demnächst im Sichtfeld des Browsers erscheinen. Das macht Ihre Landingpage beim ersten Request so schnell, als hätte sie gar keine Bilder.

Was viele oft vergessen: Auch Hintergrundbilder kann man nachladen.

3. Icon als inline SVG

Monochrome, einfache Icons können als inline SVG eingebettet werden. Das ermöglicht nicht nur eine höhere Flexibilität beim Styling und eine kontrastreichere Darstellung, sondern auch eine schnellere Ladezeit, da man sich den zusätzliche Request spart.

Achtung: Bei größeren, komplexen SVGs ist abzuwägen, ob inline oder Lazy Loading der richtige Weg ist.

4. Faule Fonts

Auch Nicht-Standard Schriften kann man nachladen, entweder über Javascript oder die CSS-Anweisung font-display: swap;. Letztere wird zwar nicht von allen Browsern unterstützt, aber den modernen, was auf einen Großteil der mobilen Browser zutrifft.

Selbst Google Fonts unterstützt nach langer Zeit Font Display Swap:

<link href=“https://fonts.googleapis.com/css?family=Roboto&display=swap“ rel=“stylesheet“>

Zusätzlich kann man die Fonts selbst hosten, auch Google Web Fonts.

Hinweis: Nicht immer muss eine Nicht-Standard Schrift zum Einsatz kommen. Auch Georgia und Helvetica tun oft Ihren Dienst - und das ohne jegliche zusätzliche Ladezeit.

5. Kompaktes CSS

Wenn Sie ein CSS-Framework verwenden, lassen Sie (oder von Ihren Entwicklern) im Build Workflow ein Tool drüber laufen, das nicht benötige Klassen entfernt. So bleibt das CSS schlank, bevor es minimiert und zusammengefasst wird.

Da für eine Landingpage oft nicht viele CSS-Klassen verwendet werden und diese häufig nur aus einer Seite besteht, sollte man abwägen, ob man nicht gleich das komplette CSS inline in die HTML-Datei gehört (natürlich erst nach Entfernung überflüssiger Klassen und prüfen, ob HTTP/2 eine Alternative ist).

6. Javascript geht, aber richtig

Man muss nicht auf Javascript auf der Landingpage verzichten, nur damit es schneller geht. Form Validierung und conversionsteigernde Microinteractions sind valide Punkte für Javascipt. Und für Lazy Loading braucht man es sowie so.

Javascript sollte allen voran funktionieren (mögliche Fehler in der Console checken) und verkleinert in einer Datei im Footer der Landingpage inkludiert werden.

Und: jQuery und Co. sind oftmals nicht eigentlich nie notwendig.

7. Externes Tracking, nur wenn notwendig

Ist die Landingpage rasend schnell, wird sie nicht selten durch zu viele Tracking und Testing Snippets ausgebremst.

Verwenden Sie nur das auf Ihrer Landingpage, was sie gerade benötigen. Wird ein Tool fürs Testing oder Tracking zeitlich begrenzt eingesetzt, entfernen Sie den unnötigen Code nach der Verwendung.

8. CDN verwenden

Da wir uns in Punkt 1. schon in den meisten Fällen auf eine statische Seite geeinigt haben, kann die Landingpage komplett über ein CDN ausgeliefert werden.

Das sorgt dann noch mal für einen Extra-Pagespeed-Kick, da die Landingpage nicht durch ein schlecht konfiguriertes Hosting ausgebremst wird. Zudem ist die Ladezeit relativ zeit- und ortsunabhängig.

Fazit… schnell lohnt sich!

Die Landingpage rasend schnell zu machen, ist meiner Meinung nach keine Kür, sondern Pflicht. Genau so wie es Pflicht ist, dass die Landingpages responsive ist. Oder HTTPS funktioniert.

Leute, wir haben das Jahr 2019! Lasst uns Landingpages great (zum ersten Mal) machen!

Und wichtig: Eine gute Landingpage ist rasend schnell noch besser. Eine schlechte Landingpage bleibt aber eine schlechte Landingpage. Also auch der Rest muss stimmen.