-
Grundlagen
-
Technik
-
Marketing
-
Rechtliches
-
HTML Grundkenntnisse
-
CSS Grundkenntnisse
-
PHP Grundkenntnisse
-
JS Grundkenntnisse
-
Tools für deine Website
Pagespeed – Definition und Gründe für die Optimierung
Der Pagespeed oder die Reaktionsgeschwindigkeit deiner Homepage beschreiben die Länge der Zeit, die deine Website braucht, um die Medien und Inhalte vom Webhosting-Anbieter herunterzuladen und schließlich beim User im Webbrowser anzuzeigen. Auch wenn sich diese Definition zunächst etwas kompliziert liest, ist die Optimierung der Ladezeit deiner Website dennoch wichtig.
Der wichtigste Grund dafür sind Suchmaschinen wie Google. Die Ladezeit der Websites ist für Google ein wichtiger SEO-Rankingfaktor. Websites, die schnell laden, werden qualitativ höher eingeschätzt und die positive User Experience somit belohnt. Homepages, die zu langsam laden, crawlt auch der Googlebot langsamer und weniger oft. Für ein gutes Ranking muss deine Website also schnell sein. Falls du einen Webshop betreibst, geht es beim Pagespeed letzten Endes um bares Geld. Die Conversion Rate, also die Kaufabschlüsse deines Shops, nehmen bei zu langen Ladezeiten rapide ab.
Wie deine Website performt, hängt von verschiedenen Faktoren ab. Wie du selber zur Optimierung der Geschwindigkeit beiträgst, zeigen wir dir jetzt.
Deine Bilder
Hast du dich schon um die Bildoptimierung für deine Website (Link Bildoptimierung) gekümmert? Wenn ja, dann überspringe diesen Punkt gerne. Wenn nicht, dann ist das der erste Schritt zur Pagespeed-Optimierung. Sind die Bilder zu groß, dann wird zu viel Speicherplatz auf deinem Server blockiert. Dies hat eine langsame Ladezeit zur Folge. Verkleinere deine Bilder mit kostenfreien Tools wie Skitch, Optimizilla, TinyPNG oder Imagify.
Unsere Empfehlung: Imagify
Imagify ist ein Bildoptimierungstool, das dir hilft, die Größe deiner Bilder auf einfache Weise zu reduzieren, ohne dass die Qualität darunter leidet. Imagify konvertiert deine Bilder auch in das WebP-Format, was die Größe deiner Website zusätzlich reduziert und sie schneller macht.
Dein Browser-Cache
Zur Optimierung der Ladezeit kannst du auf deinen Browser-Cache zurückgreifen. Jeder Webbrowser arbeitet mit einem eingebauten Cache. Hier werden viele Daten gespeichert, die zur Website gehören. Viele davon verändern sich aber nicht oft beziehungsweise nie, wie zum Beispiel Bilder, Style Sheets oder JavaScript-Dateien. Das erhöht die Ladegeschwindigkeit. Je nach Content Management System kannst du das Browser-Caching mit Plugins oder Erweiterungen einstellen.
Aktiviere zunächst das Modul „mod_expires“ in der Datei „/etc/httpd/conf/httpd.conf“ durch einfaches einkommentieren. Starte im Anschluss den apache-Webserver neu:
LoadModule expires_module modules/mod_expires.so
Kopiere diesen Code an das Ende deiner .htaccess Datei oder direkt in die httpd.conf
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/html "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
</IfModule>
Deine Webinhalte
Wie schon bei den Bildern weiter oben, geht es auch bei allen anderen Inhalten darum, sie zu komprimieren. Geringere Datenmengen steigern die Geschwindigkeit. Ob die Komprimierung auf deiner Website erfolgreich ist, kannst du mit dem Tool Feedthebot zuverlässig überprüfen.
Aktiviere als erstes das Modul „mod_deflate“ in der Datei „/etc/httpd/conf/httpd.conf“ durch einfaches Einkommentieren. Starte im Anschluss daran den apache-Webserver neu.
LoadModule deflate_module modules/mod_deflate.so
Kopiere diesen Code an das Ende deiner .htaccess Datei oder direkt in die httpd.conf
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-shockwave-flash
</IfModule>
Dein Disk-Cache
Mit dem Disk- oder Festplatten-Cache kannst du die benötigte Zeit verbessern, um Inhalte von einer Festplatte zu lesen oder darauf zu schreiben. Bei aktiviertem mem_cache im apache-Webserver werden Daten direkt im Arbeitsspeicher gespeichert, alternativ kannst du auch „disk_cache“ nutzen und die Daten so auf deiner Festplatte zwischenspeichern. Das Ziel ist auch hier, auf Daten, die genutzt werden, sehr schnell und effizient zugreifen zu können. Da heute weiterverbreiteten SSD-Platten sparen Arbeitsspeicher und setzen auf Disk-Cache. Diese Option bringt meist einen sofort spürbaren positiven Effekt.
Aktiviere zunächst das Modul „disk_cache“ in der Datei „/etc/httpd/conf/httpd.conf“ durch einfaches einkommentieren. Starte im Anschluss den apache-Webserver neu.
LoadModule disk_cache_module modules/mod_disk_cache.so
Kopiere diesen Code an das Ende deiner .htaccess Datei oder direkt in die httpd.conf
<IfModule mod_disk_cache.c>
CacheEnable disk /
CacheRoot "/var/cache/mod_proxy"
</IfModule>