Manofmany.com ist ein australisches Stilmagazin für Männer.
Jeden Tag postet das Team coole Sachen zu Stil, Gadgets, Technik usw.
Nach einem Chat mit ihnen auf Google+ gaben wir ihnen diesen einfachen Optimierungsbericht.
Ladezeit
Verschiedene Tools zeigen unterschiedliche Daten an:
- Chrome SEO-Symbolleiste – 7,43 Sek
- Pingdom Tools – 12.62 Dez
- GTMetrix – 9,86 Sek
- Webpagetest.org – 24,14 Sek
Seitengröße
Verschiedene Tools zeigen unterschiedliche Daten an:
- YSlow: 3096,5 Bytes
- Pingdom-Tools: 4,0 MB
- GTMetrix: 3,88 MB
- Webpagetesst.org: 3.816 KB
Ich werde nur noch ein Tool verwenden, YSlow.
Komponenten
Zu viele http-Anfragen: 51. 51 ist nicht riesig, kann aber verbessert werden.
Javascript
Es gibt 15 js-Dateien mit einer Gesamtgröße von 627,1 KB:
- https://apis.google.com/js/plusone.js – 22,9 k
- http://platform.twitter.com/widgets.js – 80,7 KB
- http://www.google-analytics.com/ga.js – 37,3 KB
- http://edge.quantserve.com/quant.js – 5,8 k
- http://manofmany.com/wp-content/themes/clearly/library/js/modernizr.full.min.js – 13,6 KB
- http://manofmany.com/wp-content/themes/clearly/library/js/jquery.fitvids.js?… – 2,7 k
- http://manofmany.com/wp-content/themes/clearly/library/js/scripts.js?… – 7,1 k
- http://s3.buysellads.com/ac/bsa.js – 16,1 k
- http://s3.buysellads.com/r/s_74ca33a0013c12e56d70fc5c06b96646.js?… – 2,1 k
- http://pagead2.googlesyndication.com/pagead/show_ads.js – 13,9 KB
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?… – 15,1 k
- http://manofmany.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?… – 6,9 k
- https://apis.google.com/…/cb=gapi.loaded_0 – 129,7 k
- http://manofmany.com/wp-includes/js/jquery/jquery.js?… – 93,6 k
- http://connect.facebook.net/en_GB/all.js#xfbml=1&appId=363084773773073 – 178,9 k
JQuery.js könnte für eine bessere Geschwindigkeit aus der Google-Bibliothek geladen werden.
Das größte Problem sind die JS-Dateien für soziale Medien. Sie verwenden definitiv nicht das beste Plugin für das Teilen in sozialen Medien. Dies könnte mit einem einzigen JS von 38,5 KB oder sogar ohne Skript erfolgen.
Dadurch werden 249,6 KB eingespart und die JS-Zahl bleibt bei 11. Das ist eine erhebliche Verbesserung der Seitengröße.
CSS
Es gibt 12 CSS-Dateien mit einer Gesamtgröße von 63,7 KB.
Die Größe ist nicht so groß, aber die Anzahl ist recht hoch.
3 Dateien können zu einer kombiniert werden: das Theme „styles.css“ und die Plugins „Easy Columns“ und „Contact Form“.
Der Rest sind Schriftarten, die aus der Google-Bibliothek geladen werden. Die Frage lautet also: Benötigen Sie wirklich 9 Schriftarten?
Normalerweise sollten Sie zwei Schriftarten verwenden: eine für Überschriften und eine für den Fließtext.
PT Sans und Open Sans unterscheiden sich nicht so sehr, sodass Sie möglicherweise nur eines der beiden verwenden.
Lora und PT Serif – wie oben, verwenden Sie nur eine oder verwenden Sie einfach Georgia (es ist eine schöne websichere Schriftart).
Nixie One – Ich sehe es auf der Website nicht im Einsatz.
Bei Schriftarten, die selten verwendet werden, ist es nicht sinnvoll, sie jedes Mal zu laden. Verwenden Sie einfach Systemschriftarten: Georgia, Arial, Courier.
Dadurch werden die Anfragen von 12 auf nur 3-4 steigen. Die Größenverbesserungen sind nicht so groß, aber es summiert sich.
Bilder
Das ist das größte Problem der Website mit den größten Auswirkungen auf die Geschwindigkeit: 18 Bilder, Gesamtgröße 2597,5 KB.
Das ist riesig; Sie müssen die Bilder vor dem Hochladen optimieren.
Das größte Bild auf der Website hat 420 KB und ein einfaches smush.it zeigt, dass es um 27,6 % verbessert werden kann, also 104 KB.
Wenn wir alle um 25 % verbessern können, ist das ein Gewichtsverlust von über 600.000.
Lösungen:
1. Bilder optimieren
Verwenden Sie Photoshop und „Für das Web speichern“ mit 60 % und aktivierter progressiver Einstellung. Wenn Ihre Besucher Chrome, Firefox oder IE9 verwenden, werden progressive JPGs superschnell geladen. Im Übrigen wird es etwas langsamer sein als normale JPGs.
Andernfalls speichern Sie einfach für das Web bei 60–80 % und optimieren Sie die Prüfung. Dadurch werden normale JPGs gespeichert.
Fahren Sie anschließend mit dem Hochladen der Bilder auf WordPress fort.
Kein Photoshop?
Verwenden Sie jpegmini.com, um Bilder vor dem Hochladen zu optimieren, oder verwenden Sie einfach ein WP-Plugin, um dies automatisch beim Hochladen zu tun.
2. Bilder bereitstellen
Stellen Sie statische Inhalte von einer Domäne ohne Cookies bereit und parallelisieren Sie Downloads über Hostnamen hinweg.
Diese beiden Dinge können erreicht werden, indem Bilder von einer Subdomain ohne Cookies geladen werden, etwa images.manofmany.com.
Jetzt kann der Browser mehrere Elemente gleichzeitig herunterladen, wodurch die Geschwindigkeit der Website verbessert wird.
Faules Laden
Das bedeutet, dass die Bilder einzeln geladen werden und für die Benutzer nur bei Bedarf sichtbar sind.
Sie werden geladen, wenn sie nur im Browser-Ansichtsfenster sichtbar sind.
Indem nur Bilder über dem Falz geladen werden, ist der Geschwindigkeitsgewinn erheblich.
Andere Dinge, die Sie tun können
– Browser-Caching
– js kombinieren (falls möglich)
– Expires-Header hinzufügen
– mit gzip komprimieren
– Etags verwenden
– Plugins profilieren, um zu sehen, welche Auswirkungen die Ladezeit hat, und durch bessere Plugins ersetzen
– Code in „functions.php“ anstelle von Plugins für einfache Dinge wie verwenden Laden von Google Fonts
– Beheben von 404-Fehlern
– Minimieren von Weiterleitungen
– Laden von Javascript am Ende der Seite
– Sie können nur 5 Beiträge pro Seite anstelle von 10 verwenden
– Sie könnten kleinere Bilder wie Miniaturansichten verwenden, aber das bedeutet das Design beeinträchtigen
Abschluss
Bei den meisten davon handelt es sich lediglich um einfache Dinge, die große Auswirkungen haben können.
Für eine weitergehende Optimierung sollten wir uns das Theme und die Plugins ansehen und prüfen, ob es Leistungsprobleme gibt.
Hinterlasse eine Antwort.