Projectival

Am Mittwoch wieder DMEXCO. Worauf freut ihr euch schon ganz besonders?
Alte Bekannte treffen? Neue Dinge entdecken? Kölsch?

Ich bin am Mittwoch da - hoffentlich ohne blauen Balken über dem linken Auge. 😉
Wer mit mir über die Verbesserung der Online-Welt quatschen möchte, darf sich gerne bei mir melden.
Ich freue mich auf euch! 🚀

DMEXCO 19

Die Landingpage ist nur die Spitze des Eisberges! ❄️🗻

Nehmen wir zum Beispiel eine Kampagne zur Gewinnung von Leads (E-Mail-Adressen). Die Landingpage ist das, was die potenziellen Kunden direkt nach Klick auf einen (un)bezahlten Inhalt sehen. Hier gilt es natürlich zu überzeugen!

Nach Eingabe der E-Mail-Adresse und Klick auf den Button ist aber noch nicht Schluss!

Da häufig ein Double-Opt-In (DOI) Verfahren rechtlich gefordert und auch sinnvoll ist, müssen die Nutzer zuerst ihre E-Mail-Adresse bestätigen. Eine E-Mail-Adresse, die das Double-Opt-In nicht bestätigt ist quasi wertlos!

Demnach sollten Seite und E-Mail vor dem Double-Opt-In immer optisch wie inhaltlich auf „das Versprechen“ der Landingpage abgestimmt sein. Bringe kurz und knapp auf den Punkt:

- Das der Nutzer auf den Link in der DOI-Mail klicken muss!
- Welchen Absender/Betreff die DOI-Mail hat!
- Welchen Nutzen er hat, wenn er auf den Link klickt, z.B. das er den gewünschten Download XY direkt im Anschluss erhält! 🚀

Natürlich muss auch die Zustellbarkeit der DOI-Mail gewährleistet sein.

Noch ein Tipp: In die DOI-Mail gehören nur Links, mit denen der Nutzer das DOI bestätigt. Weitere Links sind an dieser Stelle nicht zielführend.

Inhalt oder Layout, was ist wichtiger für die Landingpage?

Ich sage: Beides.

„Nur schön“ verkauft nicht, sondern gute, animierende Texte und Bilder.

Aber: Das Layout unterstützt den Inhalt. Es strukturiert, emotionalisiert und liefert einen Kontext. Das Layout ist quasi die Bühne für deine Inhalte.

Ein Beispiel für Kontext seht ihr im Bild. Beide Haftzettel haben den gleichen Inhalt, aber alleine über Änderung der Schriftart erzielt man einen komplett anderen Effekt.

Ähnliches gilt für Farbe, Weißräume, grafische Elemente etc.

Also: Inhalt und Layout sind beide wichtig für die Landingpage, neben weiteren Faktoren.

Viel Spaß beim Optimieren! 😀

8 Tipps für eine rasend schnelle Landingpage 🏎

8. CDN verwenden
Ein CDN sorgt 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.

Der ganze Beitrag:
www.projectival.de/blog/landingpage-pagespeed

Mehr zu Landingpages und Pagespeed:
www.projectival.de/landingpage
www.projectival.de/pagespeed-optimierung

8 Tipps für eine rasend schnelle Landingpage 🏎

7. Externes Tracking, nur wenn notwendig
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.

Der ganze Beitrag:
www.projectival.de/blog/landingpage-pagespeed

Mehr zu Landingpages und Pagespeed:
www.projectival.de/landingpage
www.projectival.de/pagespeed-optimierung

8 Tipps für eine rasend schnelle Landingpage 🏎

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

Der ganze Beitrag:
www.projectival.de/blog/landingpage-pagespeed

Mehr zu Landingpages und Pagespeed:
www.projectival.de/landingpage
www.projectival.de/pagespeed-optimierung

8 Tipps für eine rasend schnelle Landingpage 🏎

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.](https://www.purgecss.com/) So bleibt das CSS schlank, bevor es minimiert und zusammengefasst wird.

Der ganze Beitrag:
www.projectival.de/blog/landingpage-pagespeed

Mehr zu Landingpages und Pagespeed:
www.projectival.de/landingpage
www.projectival.de/pagespeed-optimierung

8 Tipps für eine rasend schnelle Landingpage 🏎

4. Lazy 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.

Der ganze Beitrag:
www.projectival.de/blog/landingpage-pagespeed

Mehr zu Landingpages und Pagespeed:
www.projectival.de/landingpage
www.projectival.de/pagespeed-optimierung

8 Tipps für eine rasend schnelle Landingpage 🏎

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.

Der ganze Beitrag:
www.projectival.de/blog/landingpage-pagespeed

Mehr zu Landingpages und Pagespeed:
www.projectival.de/landingpage
www.projectival.de/pagespeed-optimierung

8 Tipps für eine rasend schnelle Landingpage 🏎

2. Lazy Loading
Bilder, auch Hintergrundbilder sollten nachgeladen werden. Das macht Ihre Landingpage beim ersten Request so schnell, als hätte sie gar keine Bilder.

Der ganze Beitrag:
www.projectival.de/blog/landingpage-pagespeed

Mehr zu Landingpages und Pagespeed:
www.projectival.de/landingpage
www.projectival.de/pagespeed-optimierung

8 Tipps für eine rasend schnelle Landingpage 🏎

1. 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.

Der ganze Beitrag:
www.projectival.de/blog/landingpage-pagespeed

Mehr zu Landingpages und Pagespeed:
www.projectival.de/landingpage
www.projectival.de/pagespeed-optimierung

Pagespeed-Optimierung ist häufig ein nachträglicher Prozess. Oft sehe ich Webseiten, die auf WordPress basieren, eine Menge unnötigen Code im Theme verwenden, viele, teils unnötige Plug-ins installiert haben ... und dann sagt der Kunde auf einmal, er möchte einen PSI Score von über 90 bei Mobile haben, da er irgendwo gelesen hat, das Pagespeed ein Rankingfaktor in der organischen Suche ist.

Und das nicht nur bei großen Webseiten, sondern kleineren Microsites oder Landingpages.

Daran ist vieles gleichzeitig falsch:

1. Pagespeed-Optimierung beginnt mit dem Konzept. Es sollte die Technologie zum Einsatz kommen, die am besten passt. Was vielen Kunden nicht klar ist, Webseite geht auch ohne CMS!

2. Dinge zusammenkaufen, klicken und konfigurieren ist kein coden. Mit einem guten Build Workflow in der Frontend-Entwicklung lassen sich viele Pagespeed-Probleme direkt lösen, auch ohne nachträgliches Plug-in!

3. Der PSI Score ist kein Selbstzweck. Und SEO ist nur ein Kanal und Pagespeed nur ein Rankingfaktor. Wichtig ist: die tatsächliche Ladezeit (insb. bei Mobile) zu optimieren und den Nutzer zufrieden zu stellen.

👉 www.projectival.de/pagespeed-optimierung/