Close Menu
Webmemo Consulting Walter Schärer | Generative AI Beratung
  • Home
  • Social Media
  • Online-Tools
X (Twitter) LinkedIn Facebook RSS
  • Home
  • Kontakt / Über mich
  • Datenschutz
  • Nach oben
Webmemo Consulting Walter Schärer | Generative AI Beratung
LinkedIn YouTube RSS
  • Home
  • Social Media
  • Online-Tools
Webmemo Consulting Walter Schärer | Generative AI Beratung
NavigationHome»Usability»Pagespeed-Optimierung für besseres Ranking
Gregor Meier von SEO One über Pagespeed Optimierung
Gregor Meier über Pagespeed Optimierung
Usability

Pagespeed-Optimierung für besseres Ranking

Walter SchärerBy Walter Schärer24. April 2023Ein Kommentar4 Mins Read
Hier teilen
LinkedIn Twitter Facebook Email
Pagespeed-Optimierung von Webseiten gemäss Gregor Meier von SEO One. Eine schnellere Ladezeit ist bei Nutzern beliebt und deshalb ein Google Ranking-Faktor.
Schneller ladende Websites weisen weniger Absprünge auf. Das bedeutet mehr Conversions und eine bessere Usability. Auch der Suchmaschinen-Crawler braucht dann weniger Zeit, um die Inhalte herunterzuladen und zu indexieren.Deshalb gilt Pagespeed-Optimierung als Massnahme der Suchmaschinenoptimierung. Eine schnelle Ladegeschwindigkeit gilt als Ranking-Faktor.Nach ein paar Umstellungen konnte ich diesen Blog für Mobile und Desktop in den «grünen» Bereich optimieren:
Optimierte Werte in Googles Pagespeed Insights für webmemo.ch
Googles Pagespeed Insights für diesen Blog
Man muss nicht programmieren können, um die Ladezeit zu beschleunigen. Den Code im .htaccess-File kann jeder editieren.Ein teureres Hosting kann Sinn machen bei grossen Webseiten. Bei einigen 100 Besuchern am Tag kann man auch mit einem Shared Hosting gute Resultate erzielen.Die meisten CMS wie WordPress oder andere eignen sich für schnelle Webseiten. Mit wenig Zeitaufwand kann man gute Resultate erzielen.Die Ladezeit kann man einfach in Google Pagespeed Insights messen. 11 objektive Kriterien werden angewandt, um ein Ranking von 0-100 zu erstellen. Ab 85/100 wird der Balken im Google-Tool grün.Dies deckt aber noch nicht die effiziente Ladezeit dar. Auf die sollte man auch achten. Die Ladezeit kann man bei webpagetest.org messen. Hier werden alle Ladezeiten der einzelnen Elemente ausgewiesen. Nach spätestens einer Sekunde sollten Inhalte dargestellt werden. Mobile Webseiten brauchen allein für die Verbindung bereits eine halbe Sekunde!

1. Schritt: Bilder optimieren

Man sollte Bilder in der später auf der Website benötigten Grösse hochladen und nicht unbedingt in der ursprünglichen Originalgrösse.Die Komprimierung in JPG besteht aus Pixeln. Damit können mehr Informationen dargestellt werden, als das menschliche Auge überhaupt erkennen kann. JPG Mini oder TiniPNG.com konvertieren die JPG-Vorlagen in PNG-Formate. Für WordPress gibt es auch Plugins, die die Bilder beim Hochladen optimieren.Ich nutze auf diesem Blog das kostenpflichtige kraken.io. Kostenlos ist auch das Plugin EWWW zu empfehlen.Die Optimierung der Bilder bringt im Pagespeed Insights Tool von Google die grösste (und einfachste) Verbesserung!

Schritt 2: CSS optimieren

Im CSS-File legt man das Design einer Website fest unabhängig von den eigentlichen Inhalten. Das ist sehr praktisch.Unter cssminifier.com kann man CSS-Dateien um Kommentare und Leerschläge reduzieren.UnusedCSS ist ein Firefox-Plugin, das prüft, ob man CSS-Deklarationen effektiv nutzt, die alle geladen werden.Für WordPress gibt es ein Plugin Autoptimize. Die verschiedenen Optionen für die Kompression der Files sollte man auf einer Staging-Seite testen. Manche Einstellungen können das Layout einer Seite zerschiessen. Dasselbe gilt für das folgende Kapitel über JavaScript-Optimierungen.

Schritt 3: JavaScript optimieren

Mittels JavaScript können dynamische Effekte auf Webseiten umgesetzt werden. Das bedeutet aber oft auch grosse Datenmengen, die heruntergeladen werden müssen, z.B. bei Form-Validierung. Diese sollten nur geladen werden wo man sie effektiv benötigt.Wie bei CSS-Dateien kann man die Umbrüche und Leerschläge entfernen, z.B. JavaScriptMinifyer.com. Betreibt man eine technisch wenig ändernde Website, kann man dies einmalig tun.

Schritt 4: Browser-Caching einsetzen

Der Browser-Cache speichert Inhalte, damit sie bei einem nächsten Aufruf nicht wieder vom Internet, sondern lokal von der eigenen Maschine geladen werden. Geht man also auf eine Folgeseite der Webseite, lädt diese viel schneller als die erste, da viele Elemente zwischengespeichert wurden.Dafür kann man in der .htaccess-Datei einen mod_expires Eintrag erfassen. Damit weiss der Browser, bis wann bereits heruntergeladene Inhalte gültig bleiben und ab wann er sie wieder im Internet holen soll.

Schritt 5: HTML reduzieren

Hier ist viel Handarbeit nötig. Mann kann sich aber auf häufig geladene Elemente fokussieren, z.B. Header oder Footer.

Schritt 6: Komprimierung

Man kann Wiederholungen weglassen, aber dafür referenzieren. Z.B. folgendermassen:
Auch ein kleiner Beitrag ist ein Beitrag Auch ein kleiner Beitrag ein -4 -3
Dafür muss man GZIP-Kompression aktivieren, indem man in der .htaccess-Datei mod_gzip.c einträgt.

Schritt 7: Kritischen Rendering-Pfad optimieren

Man kann den Browser anweisen, welche Inhalte er zuerst laden soll. Optimal lädt man zuerst nur, was man für den obersten Teil der Webseite braucht (above the fold). Dies verstösst leider gegen den W3C-Standard.Dafür lädt man im Header die nötigsten Dateien, die restlichen im Footer. Per CriticalPathCSS-Tool kann man sich sagen lassen, welche Inhalte man above the fold braucht.

Schritt 8: Server-Cache aktivieren

Ähnlich wie im Browser-Cache kann man Daten auch auf dem Server zwischenspeichern.In WordPress kann man mit dem Plugin WP SuperCache den Server-Cache aktivieren. Seiten mit wenigen Besuchern müssen darauf achten, dass mindestens ein Besucher pro Seite vorbeikommt, damit der Prozess startet.Die Ablaufzeit ist mit 1440 optimal, das entspricht einem Tag.Mit diesen Massnahmen kann man im Google Pagespeed-Tool auf 100/100 kommen.Zusätzlich kann man Animationen durch CSS ersetzen. Image Maps für Icons können auch helfen. Content Delivery Networks beschleunigen, indem sie den Server entlasten, weil die Inhalte auf andere Server weltweit kopiert und von dort aufgerufen werden.
Google Internet-Briefing Vortrag
Share. LinkedIn Twitter Facebook Email
Walter Schärer
  • Website
  • Facebook
  • X (Twitter)
  • LinkedIn

Walter Schärer ist ein Generative AI Marketing Manager und Solutions Architect und bloggt bei webmemo.ch über Trends in künstlicher Intelligenz KI.

Ähnliche Informationen

The Bored Apes ecosystem: Learnings from a native brand

16. Mai 2023

How Orange adds value in the Metaverse

17. Mai 2023

Demystifying the metaverse: A framework for business leaders

16. Mai 2023
View 1 Comment

Ein Kommentar

  1. Sandra on 27. September 2018 11:41

    Hey, super interessanter Artikel. Vielen Dank für die Auflistung der Tipps. Besonders Tipp 7 wird oft vernachlässigt. Bei meiner Recherche bin ich auf https://tim-brettschneider.com/wordpress-pagespeed-optimieren-schritt-fuer-schritt-fuer-anfaenger/ diese Schritt für Schritt Anleitung gestoßen die ich sehr gut aufgebaut fand. LG

    Reply
Leave A Reply Cancel Reply

Über Walter Schärer

Dies ist Walter Schärers Blog über Online-Themen wie Generative AI, Digital Marketing, Search Engine Optimierung (SEO), Content Marketing und Performance Marketing.

Walter Schärer arbeitet seit 1994 als Scrum Product Owner und Online-Manager im Web-Umfeld.

  • Von HTML / VRML kam er via
  • Powerpoint / Word zu
  • Confluence / Jira dann
  • Trello / Whiteboard (Edding 500) und organisiert sich aktuell mit
  • Asana / Google Drive, wenn er nicht gerade mit
  • ChatGPT / MidJourney oder
  • WordPress / Elementor experimentiert.

«Programmierung» begann er mit

  • NoCode von Make und
  • LowCode von ChatGPT, ging über zu tatsächlicher Programmierung in
  • Python auf Anaconda und dann in
  • Google Colab / Gemini / Claude Sonnet sowie
  • Visual Studio Code / GitHub Copilot

Die Inhalte dieses Blogs spiegeln meine persönliche Meinung und sind von keinem Arbeitgeber beeinflusst.

© 2010 - 2025 Webmemo Consulting | Walter Schärer
  • Home
  • Kontakt / Über mich
  • Datenschutz
  • Nach oben

Type above and press Enter to search. Press Esc to cancel.