Aghiuta.com ist ein Medienbeobachtungs- und Politikblog, geschrieben von Florin Popescu. Hier ist unsere WordPress-Optimierung, die wir für diesen Blog durchgeführt haben.
Vor der Optimierung
Die Ladegeschwindigkeit der ersten Seite betrug 4,3 Sekunden.
Die Homepage hat 86 Anfragen und 1,3 MB.
- 14 Javascripte – 505,6 k
- Stylesheet für 20 Websites – 41,1 KB
- 23 Dateien – 601 KB
JS
Facebook Connect JS hat 174,4 KB und wird in 0,69 Sekunden geladen. Die Facebook Like Box kann als Text-Widget eingefügt werden, indem der Iframe-Code von der Facebook Developers Like Box -Seite kopiert wird und dadurch die JS-Datei entfernt wird.
Das Gonzo-Theme enthält eine script.js-Datei mit 101,3 KB. Es enthält mehrere Skripte wie:
- fitvids
- Flexslider
- Jquery-Erleichterung
- Tabber-Tabs
- Rückenstrecken
- Prettyphoto-Leuchtkasten
- Elastislide
Backstretch wird für das große Hintergrundbild verwendet, aber mindestens vier der anderen werden nicht verwendet: Flexslider, Prettyphoto, Elastislide, Tabber Tabs.
Fitvids macht Videoeinbettungen responsiv, daher ist dies wahrscheinlich erforderlich.
jQuery Easing hat einen gewissen Effekt auf den Klick (die Folie aus dem Suchformular).
Darüber hinaus wird jQuery Easing (8,1 K) noch einmal durch das Plugin LayerSlider (26 K) geladen, das nirgendwo verwendet wird.
Ich habe die nicht verwendeten Skripte entfernt und die Dateigröße ist von 101,3 KB auf nur 29 KB gesunken.
Schaltflächen zum Teilen von JS-Dateien
Das Plugin, das die Share-Buttons auf der Website platziert, hat einen ziemlich großen Einfluss auf die Ladezeit:
- Plus 1 – 25,8K
- Google API – 84,2K
- Twitter – 84,5K
- Sozialbar – 1,8K
Jetpack gelöst werden , das eine einzelne JS-Datei von 35 KB für alle Schaltflächen lädt.
jQuery kann aus der Google-Bibliothek geladen werden, anstatt es vom Server zu laden.
Die Addfreestats JS geben einen 404-Fehler aus. Wir empfehlen die Verwendung von Google Analytics.
CSS
Es sind zu viele CSS-Dateien vorhanden (20), einige werden mit @import geladen, was nicht die beste Option für die Leistung ist.
Wir haben kombiniert, was möglich war (manchmal führt die Kombination von JS- oder CSS-Dateien zu Fehlern) und wir haben jetzt nur noch 7 CSS-Dateien.
Bilder
Bilder können besser für das Web optimiert werden (gleiche Qualität, aber weniger KB), und ich denke, wir können mindestens 5 % jedes Bildes einsparen.
Auf der ersten Seite haben die Miniaturansichten eine Größe von 166 x 166 Pixel, die geladenen Bilder sind jedoch größer, nämlich 300 x 300 Pixel.
Die Bilder sollten mit 166x166px geladen werden.
WordPress erstellt zu viele Miniaturansichten:
- 960×677
- 150×105
- 300×211
- 550×387
- 700×426
- 300×300
- 50×50
- 290×166
- 620×310
- 620×350
- 186×186
- 620×220
Die Seite benötigt nur:
- 166×166 – Miniaturansichten der ersten Seite
- 50×50 – Miniaturansichten für die Seitenleiste
- 134×77 – Miniaturansichten für verwandte Beiträge
- 290×166 – Miniaturansicht für das Kategoriearchiv
Die übrigen Dimensionen sind nutzlos und belegen Platz auf dem Server. Wir können sie löschen und den unnötigen Code aus dem Theme entfernen, der WordPress anweist, diese Thumbs zu erstellen.
Wir haben Lazy Load implementiert, sodass nur die Bilder oben auf der Seite (above thefold) geladen werden, was zu einer erheblichen Verbesserung der wahrgenommenen Geschwindigkeit führt.
Nach der Optimierung
Nach dem Entfernen von unnötigem Code aus JS-Dateien, kombinierten CSS-Dateien, korrekter Konfiguration und Implementierung von Seiten-Cache und Datenbank-Cache stellt die Website nun 48 Anfragen und hat 634,5 KB.
Ladegeschwindigkeit der ersten Seite: 1,47 Sekunden.
Wir haben eine Leistungssteigerung von rund 60 % erreicht.
Wir können noch weiter optimieren, aber das würde bedeuten, einige Elemente zu entfernen, die bestimmte, vom Eigentümer gewünschte Funktionalität bereitstellen, also haben wir hier aufgehört.
Hinterlasse eine Antwort.