Page Speed Optimierung – 10 Tricks für eine schnellere Webseite

Kann man durch eine schnelle Webseite eine bessere Nutzererfahrung (UX = User Experience)  und geringere Absprungrate erreichen? Ist das wirklich so? Ich denke, alle hassen es, wenn die Webseite nicht mehr aufhört zu laden. Wie oft hast du schon deine „Mission“ abgebrochen, weil die Webseite ewig lange brauchte? Da bist du bestimmt nicht der Einzige.

Schnelle Ladezeiten bieten schlagkräftige Vorteile!

Heutzutage surfen die Menschen nicht mehr nur auf dem Computer, sondern vermehrt auch auf mobilen Endgeräten. Besonders dort wo die Netzabdeckung schlecht bzw. gering (in einem Tunnel) ist, wirkt sich ein hoher Page Speed positiv auf das Nutzungsverhalten aus. Je schneller eine Webseite ist, desto schneller wird sie auch von Google gecrawlt.

Es gibt viele Tools, mit dem man den Page Speed messen kann. Gute Page Speed Tools sind z.B. GTmetrix (http://gtmetrix.com/) oder WebPagetest (http://www.webpagetest.org/). Probiert es doch mal aus und schaut, wie schnell eure Webseite wirklich ist.

 

 

 

 

 

 

 

10 Faktoren, die es möglich machen, den Page Speed zu verbessern:

1. HTTP Request’s (Hypertext Transfer Protocol) reduzieren. Zur vollständigen Darstellung eines Dokuments im Web Browser sind unterschiedlich viele HTTP-Request’s zwischen Server und Client erforderlich. Je weniger Request’s zur Darstellung erforderlich sind, desto besser der Page Speed.

Wie reduziere ich HTTP Request’s?

  • Zusammenfassung mehrerer Stylesheet-Dateien in eine gemeinsame Datei.
  • Zusammenfassung der JavaScript-Dateien
  • Kombination von Bildern mittels CSS Sprites

Wie ermittle ich die Anzahl an HTTP Request’s?
Wir würden euch empfehlen den Google Chrome zu benützen.
Download Google Chrome: https://www.google.com/chrome/browser/desktop/index.html

So geht Ihr im Google Chrome vor:

1. Geht z.B. auf die https://www.inm.ch Website und macht einen rechtsklick.
2. Klickt auf Element untersuchen. Der Chrome Inspektor öffnet sich nun.
3. Im Reiter-Menü klickt ihr auf Network. Im Sucherschlitz des Browsers könnt ihr nun die gewünschte Adresse eingeben.

PageSpeed2

 

 

 

 

 

 

 

2. Aktiviere Gzip Kompression. Gzip ist ein patentiertes Algorithmen freies Kompressionsprogramm. So kann man die Daten vom Server zum Client komprimiert übertragen. Das Resultat, man spart Bandbreite und erhöht den Page Speed.

Teste die Gzip Kompression deiner Website schnell und einfach: http://www.gidnetwork.com/tools/gzip-test.php

3. Aktiviere Browser Caching. Durch die Aktivierung des Browser Caching kann dem Web- Browser mitgeteilt werden, welche Daten aus dem bestehenden Cache gezogen werden sollen. Das heisst, je mehr Daten aus dem Browser Cache geladen, (also sind schon einmal geladen worden) desto schneller.

4. Reduziere den Quellcode. Sehr effizient zur Page Speed Optimierung. Besonders gut geeignet ist das Auslagern von CSS Styles und JavaScript. Es ist von Vorteil und sehr sinnvoll alle CSS Styles in eine einzige Datei auszulagern.

5. Komprimiere CSS und JavaScript. Ausgelagerte Styles und Skripte komprimieren.

6. Komprimiere Bilder und Grafiken. Bilder und Grafiken sollten komprimiert werden, um die Latenz- oder Ladezeit zu verringern.

7. Verwende CSS Sprites. CSS-Sprites ist eine Grafikdatei, die viele einzelne Symbole, Icons, Bilder und Grafiken enthält. Durch die CSS Eigenschaft width, height und background-position werden Bildausschnitte der Gesamtdatei ausgewählt. Hier findest du einige Beispiele.

8. Optimiere die Bildsprache fürs Web. Lade die Bilder nur in der Grösse auf den Server, wie sie schlussendlich maximal dargestellt werden. Beachte aber: Facebook und andere Social Networks verlangen beim Sharen von Artikeln mittlerweile auch Files in grösseren Dimensionen.

9. Achte auf vollständige Grössenangaben von Bildern. Wenn jedes Bildelement die Grössenanagaben „width“ und „height“ erhalten, können Texte, Tabellen, Listen usw. schneller geladen werden.

10. Lade wichtige Inhalte zuerst. Die Nutzererfahrung (User Experience) kann erhöht werden, wenn relevante Inhalte vor erforderlichen Skripten geladen werden. Daten, die zum „verschönern“ sind, sollten weiter unten im Quellcode (</body>) eingegliedert werden. Das Ergebnis, der Web-Browser muss nicht mit der Darstellung der Inhalte warten weil z.B. ein JavaScript noch nicht fertig geladen wurde.

 

Vor 7 Jahren gingen nur gerademal 13% mit dem Handy / Smartphone ins Internet. Seit 2013 sind es erstaunliche 70%. Auch in den nächsten paar Jahren wird es stetig steigen.

 

Fazit: Durch wenige Tricks könnt ihr euren Page Speed optimieren. Es wird sich lohnen, diese wichtigen Tricks anzuwenden. Ihr werdet zudem merken, dass es die Kunden sehr schätzen werden, denn in der heutigen Welt muss alles schnell gehen.

Weiterempfehlen

image description

Kommentieren

1 Kommentar

image description
  1. leo | 12.02.2015 14:25

    Sehr Gut! Ich danke dir sehr für die Informationen, sind sehr nützlich und auch wichtig für das seo!
    Freundliche Grüsse:

Kommentar schreiben

Please copy the string 9Q0jEy to the field below: