PageSpeed Optimierung

Automatische PageSpeed Optimierung
für Ihre Webseite

PageSpeed optimieren - Ladezeiten reduzieren

Mehr als 50 % aller Suchanfragen erfolgen über mobile Endgeräte. Ist die PageSpeed, auch als Sitespeed bezeichnet, zu gering, hat dies eine erhöhte Abbruchrate zur Folge. Denn die Nutzer sind bezüglich der Ladezeiten von Websites verwöhnt und strafen langsame Seiten ab. Dies gilt ebenfalls für Google. Als elementarer Bestandteil der Usability ist die PageSpeed für Google seit 2010 ein bedeutender Rankingfaktor und erhält einen immer höheren Stellenwert in der Suchmaschinenoptimierung.

Kurze Ladezeiten erhöhen die Conversionrate

Viele Seitenbetreiber optimieren Ihre Website hinsichtlich der User-Experience und des User Interfaces und bieten den Nutzern eine auf den ersten Blick perfekte Page. Der Content ist auf alle Rankingfaktoren abgestimmt, bietet dem Besucher den erforderlichen Mehrwert und eine hohe Keywordrelevanz ist selbstverständlich. Trotzdem findet sich die Website kaum an den vorderen Rankingplätzen. Denn ein zu langsamer Seitenaufbau strapaziert die Geduld des Besuchers und er verlässt die Website zugunsten des Konkurrenzangebotes. Die Folge: Eine kontinuierlich fallende Conversionrate bei schlechterem Ranking.

Optimierungsbeispiele

Wir zeigen Ihnen an fünf Beispiele die erfolgreiche Optimierung der Ladezeit durch unser PageSpeed-Modul.

Mehrere Javascript-Dateien in eine zusammenführen


CMS-Lösungen wie Wordpress besitzen zahlreiche Vorteile für den Nutzer, nicht umsonst ist es eines der am meistgenutzten Managementsysteme. Allerdings wirkt es sich durch das Einbinden mehrerer Javascript-Dateien nachteilig auf die Ladezeit der Website aus, da der Browser jede einzelne Datei anfragen muss.

Die Lösung: Das PageSpeed-Optimierungs-Modul führt die einzelnen Dateien automatisch in eine Datei zusammen und reduziert die Ladezeit signifikant.

Vorher
<html> <head> <title>combine_javascript example</title> <script src="combine_javascript1.js"></script> <script src="combine_javascript2.js"></script> </head> <body> Hello, PageSpeed! </body> </html>
Nachher
<html> <head> <title>combine_javascript example</title> <script src="combine_javascript1.js+combine_javascript2.js.pagespeed.jc.zYiUaxFS8I.js"></script><script>eval(mod_pagespeed_9LI9RJ222v);</script> <script>eval(mod_pagespeed_ax3xZPXVpu);</script> </head> <body> Hello, PageSpeed! </body> </html>

Mehrere CSS-Dateien in eine zusammenführen


Cascading Style Sheets (CSS) wirken sich auf die Ladezeit einer Website oft nachteilig aus. Vor allem dann, wenn Sie externe, und zumeist in eigene Dateien ausgelagerte Frameworks nutzen. Denn mehrere Requests erhöhen die Ladezeit.

Die Lösung: Im Rahmen der Sitespeed-Optimierung erfolgt die automatische Zusammenführung in ein Stylesheet und es ist nur mehr ein Request erforderlich.

Vorher
<html> <head> <title>combine_css example</title> <link rel="stylesheet" type="text/css" href="styles/yellow.css"> <link rel="stylesheet" type="text/css" href="styles/blue.css"> <link rel="stylesheet" type="text/css" href="styles/big.css"> <link rel="stylesheet" type="text/css" href="styles/bold.css"> </head> <body> <div class="blue yellow big bold"> Hello, PageSpeed! </div> </body> </html>
Nachher
<html> <head> <title>combine_css example</title> <link rel="stylesheet" type="text/css" href="styles/yellow.css+blue.css+big.css+bold.css.pagespeed.cc.xo4He3_gYf.css"> </head> <body> <div class="blue yellow big bold"> Hello, PageSpeed! </div> </body> </html>

Kleine CSS-Dateien direkt einbinden


Stylesheets müssen nicht zwangsläufig als eigene Datei eingebunden werden. Vor allem bei kleinen Stylesheets ist es sinnvoll, das CSS direkt im HTML zu nutzen und auf diese Weise Requests einzusparen.

Die Lösung: Automatische Optimierung mit dem PageSpeed-Modul, das eine eventuelle Ladezeit-Einsparung selbstständig verifiziert.

Vorher
<html> <head> <title>inline_css example</title> <link rel="stylesheet" href="styles/all_styles.css"> <link rel="stylesheet" href="styles/yellow.css" media=", ,print, screen "> <link rel="stylesheet" href="styles/rewrite_css_images.css" media="all"> </head> <body> <div class="blue yellow big bold"> CSS that was linked should be inlined in the source. </div> </body> </html>
Nachher
<html> <head> <title>inline_css example</title> <style>.yellow {background-color: yellow;} .blue {color: blue;} .big { font-size: 8em; } .bold { font-weight: bold; } </style> <style media=", ,print, screen ">.yellow {background-color: yellow;} </style> <style media="all">.foo { background-image: url(images/BikeCrashIcn.png); width: 100px; height: 100px; }</style> </head> <body> <div class="blue yellow big bold"> CSS that was linked should be inlined in the source. </div> </body> </html>

HTML-Kommentare entfernen


Jedes eingesparte Byte wirkt sich positiv auf die Sitespeed aus. Das PageSpeed-Modul entfernt überflüssige HTML-Kommentare während des Produktivbetriebs.

Kommentare, die vom Browser benötigt werden, bleiben von dem Modul unangetastet.

Vorher
<html> <head> <title>remove_comments example</title> </head> <body> <!-- This comment will be removed --> <div>Hello, world!</div> <!-- Apply IE-specific CSS --> <!-- [if IE ]> <link href="iecss.css" rel="stylesheet" type="text/css" title="This IE directive will be preserved"> <![endif]--> </body> </html>
Nachher
<html> <head> <title>remove_comments example</title> </head> <body> <div>Hello, world!</div> <!-- [if IE ]> <link href="iecss.css" rel="stylesheet" type="text/css" title="This IE directive will be preserved"> <![endif]--> </body> </html>

… und noch viele weitere Optimierungen


Das Modul zur Sitespeed-Optimierung befindet sich in kontinuierlicher weiterentwicklung, um es an die steigenden Anforderungen der Anwender und Suchmaschinenoptimierung anzupassen.

Zusätzlich zur optimalen Einbindung von Javascripten oder CSS-Dateien konzentriert sich das Modul auf die Prozesse im Webserver.

Viele der Verbesserungen finden im Webserver selbst statt, wie zum Beispiel:

  • Optimiertes Cachingverhalten
  • Verlustfreie Komprimierung von Bildern
  • Bildskalierung
  • Priorisierung relevanter Stylesheets während des Ladevorgangs

Eine komplette Liste der vorhandenen Optionen finden Sie auf der Projektseite.

With from Mannheim, Europe.