Ladezeit Optimierung » PageSpeed verbessern

Zurück zu OXOONO media » Blog » Tipps & News » Design-Agentur
Eule Ladezeit Optimierung // PageSpeed

Ladezeit Optimierung » PageSpeed verbessern

Die Website Ladegeschwindigkeit

Mit dem PageSpeed ist die Ladegeschwindigkeit einer Website gemeint. Die Ladezeit einer Webseite hat großen Einfluss auf das Nutzerverhalten und die Platzierung auf der Suchergebnisseite von Google.

Die Optimierung der Ladezeit ist keine Wissenschaft. Sie hängt von relativ einfachen Faktoren ab. Eine Webseite sollte schnellstmöglich laden, denn Webseiten-Besucher sind ungeduldig. Niemand wartet gern. Das kennt man von sich selbst. Die Geduld von Menschen ist unterschiedlich und daher rein subjektiv. Zahlen, Daten und Fakten hierzu sind zwar vorhanden, aber nicht besonders hilfreich. Auch Google selektiert inzwischen und bevorzugt schnell ladende Internetseiten in den Suchergebnissen. PageSpeed ist also wichtig.

Um sich orientieren zu können bietet Google den Service PageSpeed Insights an. Dort kannst Du den Link Deiner Webseite eintragen und Dir die Ergebnisse ansehen. Das Tool zeigt Dir auf, in welchen Bereichen Du noch optimieren kannst. Die Hilfestellungen hierzu sind für den Laien nicht besonders aufschlussreich, aber immerhin ein Indiz dafür, dass Verbesserungsbedarf vorliegt und an welchen Stellen.

Umfangreichere Ergebnisse erhälst Du bei Pingdom.


Was beeinträchtigt die Ladegeschwindigkeit?

Große Bilddateien

In erster Linie alles, was in direktem Zusammenhang mit Deiner Homepage steht. Fangen wir bei den Bildern an. Bilder lassen sich komprimieren. Die Dateigrößen können oftmals bis zu 80% reduziert werden. Nicht immer funktioniert das ohne Qualitätsverlust. Für die Darstellung im Internet reichen mittlere Qualitäten aber oft völlig aus. Entweder exportierst Du Deine Bilder mit einem professionellen Bildbearbeitungsprogramm oder Du nutzt kostenlose Online-Tools, wie z. B. TinyPNG. Dieses kann nicht nur PNG-Dateien, sondern auch JPG-Dateien komprimieren.

HTML, CSS, JavaScript und PHP-Files

Deine Webseite besteht aus etlichen Dateien. In diesen Dateien verbirgt sich das Gerüst in Form von Quellcode. Je besser eine Seite programmiert wurde, desto einfacher ist dieser Code zu lesen. Das ist nicht nur hilfreich für die Interpretation des Browsers, sondern auch für die Google-Robots. Je umfangreicher und aufwändiger Dein Auftritt im Web ist, desto mehr Daten sammeln sich auf Deinem Server an. Innerhalb dieser Quellcodes lässt sich einiges verbessern, um die Dateigröße zu reduzieren. Unter anderem können Leerzeilen und Kommentare gelöscht werden, die den Code unnötig aufblähen. Auch hierzu gibt es ein Online-Tool. HTMLCompressor erkennt den Dateityp automatisch und reduziert die Größe der Dateien soweit, wie möglich.

Für eine weitere Beschleunigung der Seiten, sollten JavaScripts, CSS-Files und eingebundene Schriften am Ende des Codes geladen werden.

WordPress beschleunigen

Wenn Du eine WordPress Seite betreibst, hast Du auch hier die Möglichkeit die Ladezeit deutlich zu verbessern. Teste die Geschwindigkeit Deiner Seite mit Pingdom oder Google PageSpeed Insights. Merke Dir das Ergebnis, um hinterher einen Vergleich zu haben.

Schritt 1

Installiere im WordPress Backend das Plugin „Cache Enabler“ und aktiviere es. Dieses Plugin erzeugt statische HTML Dateien und speichert sie auf dem Server. Dadurch, dass der Server die statischen HTML Seiten anzeigt, werden ressourcenfressende Prozesse vermieden. Die Performance Deiner Webseite wird damit erheblich verbessert.

Schritt 2

Ersetze den Inhalt Deiner .htaccess Datei mit folgendem Inhalt:
(WICHTIG: Ändere „deinedomain“ in der Datei. Ohne .de/.com/etc.)

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
</IfModule>

<IfModule mod_headers.c>
Header append Cache-Control "public"
Header append Vary Accept-Encoding
Header set Connection keep-alive
Header unset ETag
FileETag None
</IfModule>

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access 60 seconds"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
</IfModule>

<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME} \.(jpg|jpeg|png|gif|ico|css|js)$ [NC]
RewriteCond %{HTTP_REFERER} !^https?://([^.]+\.)?deinedomain\. [NC]
RewriteRule \.(jpg|jpeg|png|gif|ico|css|js)$ - [F,NC,L]
</ifModule>

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Teste die Ladezeit Deiner WordPress Page erneut und vergleiche die Ergebnisse.


Sicherlich gibt es zahlreiche weitere Möglichkeiten zur Verbesserung des PageSpeed einer Webseite. Insbesondere für WordPress gibt es unendlich viele Plugins. Viele davon eignen sich eher für erfahrene Nutzer und bleiben in diesem Beitrag unbeachtet. Wir möchten, dass Du mit einfachen Mitteln viel erreichen kannst, ohne Deine Webseite dabei zu zerstören.

Wenn Du Hilfe benötigst, die Ladezeit Deiner Webseite weiter zu verbessern oder ein komplett optimiertes Webdesign haben möchtest, sprich uns an! Du erreichst uns per E-Mail oder über unseren Live-Chat von Montag-Samstag, zwischen 10 und 22 Uhr.

Telefonisch erreichst Du uns unter (05451) 499 56 08.

Zusammenfassung
Artikelname
Ladezeit Optimierung / PageSpeed verbessern
Beschreibung
Mit dem PageSpeed ist die Ladegeschwindigkeit einer Website gemeint. Die Ladezeit einer Webseite hat großen Einfluss auf das Nutzerverhalten und die Platzierung auf der Suchergebnisseite von Google. So kannst Du sie verbessern....
Autor
Verleger
OXOONO media
Avatar

Teilen

Zurück zu OXOONO media » Blog » Tipps & News » Design-Agentur