Eine zu langsam ladende Webseite kann Seitenbesucher kosten und dadurch die Zugriffszahlen in den Keller treiben. Deshalb ist, neben dem eigentlich Seiteninhalt, die Ladegeschwindigkeit einer der wichtigsten Faktoren, die du im Auge behalten musst. Oder anders: Du solltest alles dafür tun, dass deine Seite in "brauchbarer" Geschwindigkeit geladen wird - das gilt v.a. auch für den Zugriff aus mobilen Netzen, bei denen die Übertragungsgeschwindigkeit ohnehin bereits reduziert ist (in einem Digital-Entwicklungsland wie Deutschland sowieso).
Grundregeln
Ein paar Möglichkeiten, die Ladeschwindigkeit zu verbessern, sind:
- Komprimiere deine Bilder soweit möglich. Dazu gibt es einige kleine Programme wie JPGmini oder ImageOptim. Aber auch Photoshop und andere Bildbearbeitungsprogramme bieten die Möglichkeit, Bilder webfreundlich auszugeben. Orientiere dich dabei an der Ausgabegröße, die nachher auf der Webseite angezeigt werden soll.
- Slider beinhalten viele Bilder und laden deshalb langsam. Vermeide deshalb nach Möglichkeit Slider. Slider werden zwar gerne eingesetzt, weil diese animierten Bildershows vermeintlich gut bei Seitenbesucher ankommen, aber was nützt es dir, wenn ein Slider verhindert, dass die Seite hinreichend schnell lädt, im Ranking abfällt und letztlich auch ein schlechteres Nutzererlebnis verursacht.
- Beschränke die Zahl der Schriften, die du auf deiner Webseite verwendest. Auch hier hast du ein ähnliches Problem wie mit den Bildern: Zuviel Schriften verlangsamen die Seite, weil immer erst ein Haufen Daten geladen werden müssen, um den Seiteninhalt anzuzeigen.
- Schau, dass dein Server hinreichend schnell ist. Darauf hast du im Wesentlichen nur über ein entsprechendes Hostingpaket oder über die Auswahl eines Hosters Einfluß. Preiswerte Hoster bieten oft auch nicht die schnellsten Server. Hoster mit den besten Ladezeiten findest du mit Hilfe einer Google-Abfrage. Die größten Hoster sind dabei nicht unbedingt die besten.
- Benutze eine RapidWeaver-Vorlage, die ressourcensparend aufgebaut ist. Grundregel ist hierbei, dass eine Webseite umso langsamer wird, je komplexer das Theme aufgebaut ist. Auch die Frameworks sind, bei allen Vorteilen, die sie bieten, diesbezüglich kritisch zu sehen. Foundry 2 z.B. hat einen recht aufgeblähten Code, auch wenn es recht einfach zu nutzen ist, während die neue Foundation 6 Suite recht sparsam mit den Ressourcen umgeht, aber auch deutlich komplexer zu erleben ist.
Es gibt noch etliche andere wichtige Faktoren, welche die Ladegeschwindigkeit beeinflussen, die du als RapidWeaver-Nutzer teilweise nur schwer beeinflußen kannst:
CSS- und Javascript
Es ist wichtig, CSS- und Javascript-Abfragen reduzieren (in einen Grenzen kannst du erreichen, dass bestimmte Javascript-Anteile erst am Ende des Ladevorgangs geladen werden). Zumindest aber führe unterschiedliche CSS-Stylesheets zusammen um die Serverabfrage bzw. Die Ausgabe der Webseite im Browser zu beschleunigen.
GZIP Komprimierung
Aktiviere die sogenannte GZiP Kompression. Das erreichst du über entsprechende serverseitige Vorgaben, die du in die .htaccess-Datei schreiben kannst:
<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>
Es gibt noch andere serverseitige Möglichkeiten der Kompression, auf die du aber nur Zugriff hast, wenn du deinen Server selbst administrierst - was bei der Mehrzahl der RapidWeaver-Nutzer wohl nicht der Fall sein dürfte.
Browser Caching
Nutze Browsercaching, denn das verhindert, dass bestimmte Ressourcen beim erneuten Laden deiner Seite nicht umständlich aus dem Netz geladen werden müssen, sondern durch den Browser lokal auf dem Rechner des Seitenbesuchers abgelegt werden und dann von dort geladen werden können. Das Browsercaching aktivierst du serverseitig durch Vorgaben in der .htaccess:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
Eine andere Möglichkeit, das Browsercaching zu aktivieren ist Cache-Control, auf das ich hier nicht weiter eingehe. Du solltest dich ohnehin nur für eine der beiden Möglichkeiten entscheiden.
Keep alive
Aktiviere Keep Alive. Das ist eine Methode, die bei HTTP-Anfragen, also bei Zugriffen auf deine Webseite immer die gleiche TCP-Verbindung nutzt, anstatt bei jeder Anfrage eine neue zu öffnen. Auch das gibts du mit einer Regel in der.htaccess vor:
<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>
Redirects
Minimiere bzw. verhindere Redirects
Redirects bzw. Umleitungen sind Anweisungen, die beim Aufruf eines bestimmten Dokuments bzw. einer in deine Webseite eingebundenen Datei auf einen externen Speicherort bzw. Server weitergeleitet werden. Jede dieser Weiterleitungen vermindert die Ladegeschwindigkeit deiner Seite.
Darauf hast du als RapidWeaver leider nur in Grenzen Einfluß, da du nicht in vollem Umfang kontrollieren kannst, was im Backend deines Webprojekts passiert. Achte aber v.a. darauf, dass Redirects mit dem HTTP-Statuscode 200 ausgegeben werden. Welche Redirects deine Seite produziert, kannst du mit diesem Tool überprüfen: Redirect Mapper
Critical Rendering Paths
Optimiere sogenannte kritische Renderingpfade. Dabei handelt es sich um bestimmte Ereignisse, die im Backend des Ladevorgangs ablaufen müssen, bevor die Seiteninhalte hinreichend dargestellt werden.
Leider haben viele Webseiten schreckliche Renderingpfade, weil sie viele Dinge aufrufen, die der Browser erst laden muss, bevor die Webseite angezeigt werden kann. RapidWeaver macht da keine Ausnahme und du hast als RapidWeaver-Nutzer auch kaum Einfluss darauf. Was du aber machen kannst:
- Nutze Warehousing von Bildern.
- Komprimiere CSS (in den Projekteinstellungen unter Advanced damit die Vielzahl am Stylesheets zusammengeführt werden.
Vertrauen ist gut, Kontrolle ist besser
Hab die Ladezeit deiner Webseite im Blick. Dazu gibt es als Goldstandard diese drei Tools:
Ein weiteres, eher unbekanntes Tool, das die Ergebnisse aber grafisch recht schön aufbereitet, ist:
Der Nachteil all dieser Tools ist, dass die Einzelseiten deines Projekts alle einzeln geprüft werden müssen. Das kannst du dir erleichtern mit einem Tool, dass Janis von Bleichert entwickelt hat und dass alle deine Projekte in einem Rutsch von Google PageSpeed Insights prüfen lässt und du kannst die Testergebnisse direkt aus dem Tool heraus öffnen. Diese Seite bietet auch noch ein Hilfsmittel für die Keyword-Recherche. Das Tool ist selbsterklärend.
EXPERTE.de Bulk PageSpeed Test
Weitere, auch kostenlos durchaus brauchbare Tools findest du über die Suchmaschine deiner Wahl.
---
Bildquelle: Pexels