Geben Sie die URL eines Artikels oder einer wichtigen Seite ein und Google zeigt an, wie gut oder schlecht Ihre Website derzeit performt.<\/p>\n
![\"Wordpress](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/05\/speed-up-wordpress-site.png\")
<\/p>\n
Erstellen Sie einen Plan.<\/h2>\n
Wir haben unsere eigene Seite vor ziemlich genau einer Woche getestet und haben bemerkt, dass unser Blog einige Verbesserungen ben\u00f6tigt.<\/p>\n
Wir dachten, dass wir nun wochenlang damit besch\u00e4ftigt sein w\u00fcrden. Zum Gl\u00fcck war dies nicht der Fall. Wir waren selbst \u00fcberrascht, wie schnell wir damit fertig waren.<\/p>\n
In nur zwei Stunden!<\/p>\n
Heute will ich unsere Erfahrungen mit Ihnen teilen und Ihnen zeigen, wie Sie Ihren WordPress Blog optimieren k\u00f6nnen.<\/p>\n
WordPress ist Ihr SEO-Freund.<\/h2>\n
Wie bereits zu Beginn erw\u00e4hnt: WordPress ist Ihr Freund! Und WordPress ist auf jeden Fall Ihr Freund, wenn es um Suchmaschinenoptimierung geht.<\/p>\n
WordPress erlaubt Ihnen weitere Plugins hinzuzuf\u00fcgen, um Ihre Website schneller zu machen.<\/p>\n
Voraussetzungen, um Ihren Website-Speed zu optimieren<\/h2>\n
Ich will hier nicht zu sehr ins Detail gehen, aber wenn Sie Ihren Website-Speed optimieren wollen, sollten einige Voraussetzungen erf\u00fcllt sein.<\/p>\n
Stellen Sie sicher, dass …<\/p>\n
- \n
- sie eine Caching-Strategie haben<\/li>\n
- ein CDN<\/a> verwenden<\/li>\n
- sie das SEO Yoast Plugin installiert haben<\/li>\n
- das Google Webmaster Tools installiert haben<\/li>\n
- die letzte Version von WordPress installiert haben<\/li>\n<\/ul>\n
Das waren unsere Aufgaben:<\/p>\n
- \n
- Unsere beiden Blogs zu optimieren usersnap.com\/blog (english) und usersnap.com\/de\/blog (deutsch)<\/li>\n
- Ziel: Eine Bewertung h\u00f6her als 85 f\u00fcr Mobile & Desktop<\/li>\n<\/ul>\n
Wichtig war f\u00fcr uns die Optimierungen so schnell wie m\u00f6glich durchzuf\u00fchren. Idealerweise mit so geringen Aufwand wie m\u00f6glich.<\/p>\n
Plugins aufr\u00e4umen<\/h2>\n
Wenn Ihre WordPress-Seite schon ein paar Jahre alt ist, kann es sein, dass Sie noch alte und deaktivierte Plugins haben. Im ersten Schritt sollten Sie daher alle Plugins, die Sie nicht aktiv verwenden, l\u00f6schen.<\/p>\n
Verschieben Sie JavaScript Files below-the-fold<\/h2>\n
JavaScript erlaubt Entwicklern gro\u00dfartige Dinge zu machen und es wird viel von WordPress Websites verwendet.<\/p>\n
Der Nachteil ist, das viele JavaScript Files, die in Ihren above-the-fold-Content eingebettet sind, Ihre Website verlangsamen. Google empfiehlt daher alle (render-blocking) JavaScript Files im above-the-fold-content zu l\u00f6schen bzw. In den below-the-fold Bereich zu verschieben.<\/p>\n
Das macht Ihre Website um ein Vielfaches schneller.<\/p>\n
![\"wordpress](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/05\/buffer-website-speed.png\")
<\/p>\nSeien Sie sich dar\u00fcber bewusst, dass es Services von Drittanbietern gibt wie Sharing-Buttons oder ein Kommentarsystem, die es problematisch machen, alle above-the-fold JavaScript Files zu l\u00f6schen.<\/p>\n
CSS Files aufr\u00e4umen<\/h2>\n
Wenn man an einer neuen Website arbeitet, dann fokussieren sich viele haupts\u00e4chlich auf das Design und das UI einer Seite. Das liegt nahe, wenn man \u00fcberlegt, dass wir unsere Welt vor allem visuell wahrnehmen.<\/p>\n
Dennoch ben\u00f6tigen die komplexen, Bild-lastigen Interfaces eine Menge CSS. Und das ist der Nachteil: CSS-Dateien m\u00fcssen geladen werden (um Ihr elegantes Webdesign abzubilden) und brauchen daf\u00fcr Ladezeit.<\/p>\n
Wenn Sie nun Ihre Website schneller machen wollen, f\u00fchrt kein Weg daran vorbei, die CSS Dateien aufzur\u00e4umen.<\/p>\n
Das k\u00f6nnen Sie tun:<\/p>\n
- \n
- Je weniger Zeilen Code Sie verwenden, desto besser. Reduzieren Sie die Zeilenspr\u00fcnge, verwenden Sie einfach Kommentare etc. Je kleiner eine CSS-Datei ist, desto besser. Versuchen Sie eine CSS-Datei auf weniger als 10 KiloBytes zu beschr\u00e4nken.<\/li>\n
- Das Wichtigste: F\u00fcgen Sie Ihre CSS inline<\/a> hinzu.<\/li>\n<\/ul>\n
Ich wei\u00df, dass die meisten Style Sheets als externe Style Sheets eingef\u00fcgt sind. Es macht allerdings Sinn, die wichtigsten Styles inline einzuf\u00fcgen, f\u00fcr sehr schnelle Ladezeiten.<\/p>\n
Denken Sie aber auch dabei daran, Ihre CSS-Datei zu minimieren.<\/p>\n
<\/p>\n
Beispiel: Kommentare in CSS<\/em>
\nSchlecht:<\/strong><\/em><\/p>\n\/************************************\/\r\n\/* Content Page *\/\r\n\/************************************\/\r\n<\/pre>\n
Gut:<\/strong><\/em><\/p>\n
\/* content page *\/<\/pre>\n
<\/p>\n
PS: Ich glaube, ich muss nicht dazu sagen, dass, je komplexer Ihre CSS Datei-Struktur ist, desto schlechter ist es f\u00fcr Ihre Website-Performance.<\/p>\n
PPS: Ich bin mir bewusst, dass es einen Konflikt zwischen Design und Speed gibt. Es geht dabei nicht darum, der Geschwindigkeit einer Website jedes Design zu opfern, sondern eine ausgewogene Balance zu finden.<\/p>\n
Optimieren Sie Ihre Bilder.<\/h2>\n
Bilder dominieren modernes Website-Design. War eine Website vor 10 Jahren noch haupts\u00e4chlich textlastig, so sind es heute haupts\u00e4chlich Bilder, die dominieren.<\/p>\n
Das Problem ist: Bilder machen eine Seite gr\u00f6\u00dfer und beeinflussen daher die Ladezeit. Was sollen Sie also tun?<\/p>\n
Die Antwort liegt bei der Bild-Optimierung:<\/p>\n
- \n
- Format Auswahl:<\/b> PNG-Bilder sind am besten f\u00fcr Logos, Illustrationen und Text. In jedem anderen Fall, verwenden Sie lieber JPEG.<\/li>\n
- Dateigr\u00f6\u00dfe:<\/b> Hier gilt: je kleiner desto besser.<\/li>\n
- Bild-Komprimierung: <\/b>Hier m\u00fcssen Sie eine Balance finden, zwischen der Qualit\u00e4t und der Bildgr\u00f6\u00dfe.<\/li>\n<\/ul>\n
Was haben wir gemacht, um unsere WordPress-Seite schneller zu machen?<\/p>\n
Zuerst haben wir das Compress JPEG & PNG images Plugin<\/a> installiert. Dieses Plugin erlaubt Ihnen, Bilder zu optimieren und zu komprimieren.<\/p>\n
![\"wordpress](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/05\/compress-images-wordpress.png\")
<\/p>\nJedes Bild, das zu WordPress hochgeladen wird, wird zuerst analysiert, dann optimiert und schlie\u00dflich als kleinere Version gespeichert. Auf der Website steht, dass JPEG-Bilder durchschnittlich 40-60% komprimiert werden und PNG Bilder 50-80% ohne sichtbaren Verlust.<\/p>\n
Nachdem wir das Plugin installiert haben, haben wir alle Bilder auf unserem Blog komprimiert. Das waren insgesamt 4113 Bilder. Diese Optimierung dauerte 10 Minuten und hat uns $32 gekostet.<\/p>\n
![\"wordpress](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/05\/speed-up-wordpress-site-compression-300x164.png\")
<\/p>\nWeitere Content Optimierung<\/h2>\n
Wenn Sie andere Content-Formate verwenden – wie Videos und Gifs – dann schlage ich vor, diese \u00fcber einen Drittanbieter zu integrieren.<\/p>\n
Wer unseren Blog kennt, der wei\u00df, dass wir gro\u00dfe Fans von GIFs sind, weshalb wir alle Gifs auf giphy.com<\/a> hochgeladen haben und das GIF mit einem kleinen Code-Snippet integriert haben. Das gleiche gilt f\u00fcr unser Video-Material, das wir auf YouTube hochladen.<\/p>\n
Das Ergebnis<\/h2>\n
Insgesamt hat uns das Aufr\u00e4umen von JavaScript & CSS Dateien, das L\u00f6schen von Plugins und die Optimierung von Bildern zwei Stunden gekostet.<\/p>\n
Das Ergebnis ist absolut zufrieden stellend und wir haben es in den gr\u00fcnen Bereich im Page Insights Test geschafft. M\u00f6glichkeiten f\u00fcr Verbesserungen gibt es aber immer noch:<\/p>\n
![\"wordpress](\"http:\/\/usersnap.com\/de\/blog\/wp-content\/uploads\/2016\/05\/speed-up-wordpress-website-test.png\")
<\/p>\nDas wichtigste aber ist, dass wir gesehen haben, dass diese Verbesserungen unseren organischen Traffic verbessern.<\/p>\n
- Dateigr\u00f6\u00dfe:<\/b> Hier gilt: je kleiner desto besser.<\/li>\n
- Format Auswahl:<\/b> PNG-Bilder sind am besten f\u00fcr Logos, Illustrationen und Text. In jedem anderen Fall, verwenden Sie lieber JPEG.<\/li>\n