WordPress Bern: Performance Optimierung

Ich war am Mittwoch an einem MeetUp von WordPress Bern. Das Thema lautete Performance Optimierung für Nicht-Entwickler. Durch das MeetUp führte Nico Martin von der say hello GmbH. Doch warum ist dieses Thema so wichtig? Nun ja, es ist eines von schätzungsweise über 200 SEO- Kriterien von Google.

SEO: Der Platz an wie vielter Stelle die Webseite bei einer Suchmaschine angezeigt wird

Ausserdem kann die Ladezeit einer Seite einen echten Sales- Killer sein, da sich die Kunden bei zu langer Ladezeit eventuell für eine anderen Webshop entscheiden.

Meine Aha- Erlebnisse

Insgesamt hatte ich vier grössere Erkenntnisse.

1. Die Distanz macht auch das Internet zu schaffen.

Also, es macht einen Unterschied wo der Server auf der Welt steht, echt? Ich dachte immer das Internet verbindet Menschen aus allen Weltteilen ohne einen Unterschied zu machen. Der Server von ZumMedium.ch steht in Molinis, GR. Wenn man beispielsweise diese Seite ZumMedium.ch von Amsterdam aufruft, dauert es 1.012 Sekunden. Aus Tokyo dauert es hingegen 2.928 Sekunden. Fast dreimal soviel!

Die Werte stammen vom Performancetest von Scuri. Der Test von Google hingegen unterscheidet zwischen Mobil (etwa 80 Punkte) und Desktopgeräte (etwa 95 Punkte). Leider spuckt dieser Test bei mir je nach Tageszeit eine andere Punktenzahl aus.

2. Die Codelänge beeinträchtig die Performance

Genauso wichtig ist zum Beispiel die Grösse des Codes von dem verwendten Themes und den aktiven Plugins. Deshalb ist es auch wichtig, dass man die nicht gebrauchten Plugins deaktiviert. So kann man schon mal ganz einfach die Performance optimieren. Doch Achtung, installierte Plugins können auch eine Sicherheitslücke darstellen. Aus diesem Grund ist es ganz sinnvoll die Plugins zu deinstallieren.

Tab, Enter usw.

Was mich beeindruckt hat, ist welche Speichergrösse die manuelle Gliederung von CSS, HTML und JavaScript Dateien einnimmt. Minify (bedeutet auf Englisch verkleinern) entfernt diese und kommprimiert so die Dateien. Die kleineren Dateien werden dann logischerweise auch schneller vom Server auf das Gerät übertragen, wo man sich die Internetseite anschauen will.

3. Render-Blocking

Wenn in einem HTML/ PhP Dokument der CSS oder der Javascript Code geladen wird, so kann es sein, dass der Browser den Dateiaustausch stoppt bis diese Datei geladen ist. Leider bedeutet das auch, dass die Seite weiss bleibt bis die CSS& die Javascript Dateien geladen sind. Da der Browser ein Dokument immer von oben nach unten liest, kann man alle Dokumente die einen Render-Block verursachen, vom <head> in den <footer> verschieben. Das geht leider nur bei CSS-Dateien, da bei JavaScript Dateien zum Teil die Reihenfolge des Ladens eine Rolle spielt.

Allerdings entsteht so, zum Beispiel wenn man eine CSS Datei in den Footer verschiebt, zuerst eine reine Text Seite. Das Design der Seite ploppt dann nach etwa einer Sekunde auf. Um dies zu verhindern, kann man das sogennante Critical CSS im Header belassen. Das Critical CSS ist der Teil des CSS, den der Besucher auf der Seite als erstes wahr nimmt. Um diesen Teil herauszusuchen gibt es Generatoren wie zum Beispiel diesen.

4. Browser Caching

Etwas, das ich schon etwas länger auf dem Schirm hatte, ist das Browser Caching. Dabei wird beim ersten Besuch der Webseite, einen Teil der Webseite auf dem Aufrufgerät gespeichert. Dies hat der Vorteil, das bei dem zweiten Besuch das Laden schneller geht. Jedoch entsteht der Nachteil, das die Seite nicht immer bei allen Besuchern sofort die Homepage aktualisiert wird.

 

Herzlichen Dank an Nico von WordPress Bern für das MeetUp!

Falls Sie eine eigene WordPressseite wünschen, kontaktieren Sie uns doch!

 

 

 

 

 

Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.