Ultimate Guide zur Weboptimierung (Tipps und bewährte Vorgehensweisen)

Web-Optimierung ist ein wesentlicher Bestandteil der Webentwicklung und -wartung, aber auch von Webmastern oft übersehen. Denken Sie nur an das Geld, das Sie sparen können, und wie es potenziell dazu beitragen kann, Ihre Leserschaft und Ihren Traffic zu erhöhen, wenn sie ordnungsgemäß ausgeführt werden.

Falls Sie bisher noch keine Optimierung Ihrer Website (oder Ihres Blogs) vorgenommen haben oder lediglich wissen möchten, wie Sie Ihre Website beschleunigen können, werfen Sie einen Blick auf diese Liste der von uns zusammengestellten Optimierungstipps.

Wir haben die Dinge zur besseren Lesbarkeit in drei separate Abschnitte aufgeteilt serverseitige Optimierung, Anlagenoptimierung (Dazu gehören Webkomponenten wie CSS, Javascript, Bilder usw.) und Plattform, wo wir uns konzentrieren werden WordPress-Optimierung. Im letzten Abschnitt haben wir ein paar Links eingefügt, die wir als nützlich erachteten. Vollständige Liste nach dem Sprung.

Optimierung: serverseitig

1. Wählen Sie einen anständigen Webhost aus

   Ihr Webhosting-Konto hat keine direkte Beziehung zu den Optimierungen, die Sie durchführen möchten. Wir haben uns jedoch für die Wahl des richtigen Webhosting-Kontos entschieden. Daher haben wir uns entschlossen, es zuerst auf Ihre Aufmerksamkeit zu lenken. Das Hosting-Konto ist die Grundlage Ihrer Website / Ihres Blogs. Sicherheit, Zugänglichkeit (cPanel, FTP, SSH), Serverstabilität, Preise und Kundenunterstützung spielen eine wichtige Rolle. Sie müssen sicherstellen, dass Sie in guten Händen sind.

   Empfohlene Lektüre: So wählen Sie einen Webhost aus durch wikiHow ist ein großartiger Artikel, der Ihnen Schritte und Tipps bietet, die Sie vor dem Kauf eines Webhosting-Kontos kennen sollten.

2. Host Assets separat

   Wenn wir Assets erwähnen, meinten wir Webkomponenten wie Bilder und statische Skripte das erfordert keine serverseitige Verarbeitung. Dazu gehören alle Webgrafiken, Bilder, Javascripts, Cascading Style Sheets (CSS) usw. Das gesonderte Hosting von Assets ist kein Muss, aber wir haben bei dieser Implementierung enorme Auswirkungen auf die Serverstabilität festgestellt, als das Blog eine Verkehrsspitze hatte.

   Literatur-Empfehlungen: Parallele Downloads in der Fahrgemeinschaftsspur maximieren.

3. Komprimierung mit GZip

   Kurz gesagt, Inhalte werden von Server-Seite zu Client-Seite (umgekehrt) weitergeleitet, wenn eine HTTP-Anforderung gestellt wird. Durch das Komprimieren des Inhalts für das Senden wird die für die Verarbeitung jeder Anforderung erforderliche Zeit erheblich reduziert.

   GZip Dies ist eine der besten Möglichkeiten, dies zu tun, und es hängt von der Art der verwendeten Server ab. Zum Beispiel, Apache 1.3 verwendet mod_zip, Apache 2.x verwendet mod_deflate und so wird's gemacht in Nginx. Hier sind einige wirklich gute Artikel, um Sie mit serverseitigen Komprimierungen vertraut zu machen:

   • Beschleunigen Sie eine Website, indem Sie die Apache-Dateikomprimierung aktivieren
   • Komprimieren Sie die Webausgabe mit mod_gzip und Apache
   • So optimieren Sie Ihre Site mit GZIP-Komprimierung
   • Serverseitige Komprimierung für ASP

4. Minimieren Sie Weiterleitungen

   Webmaster führen die URL-Weiterleitung (egal ob es sich um Javascript oder um META-Weiterleitungen handelt) ständig um. Manchmal besteht der Zweck darin, Benutzer von einer alten Seite auf eine neue Seite zu verweisen oder die Benutzer lediglich zur richtigen Seite zu führen. Jede Umleitung erstellt eine zusätzliche HTTP-Anforderung und RTT (Round-Trip-Time). Je mehr Umleitungen Sie haben, desto langsamer wird der Benutzer auf die Zielseite gelangen.

   Literatur-Empfehlungen: Vermeiden Sie Weiterleitungen von Google Code gibt Ihnen einen guten Überblick über die Angelegenheit. Der Artikel empfiehlt auch einige praktische Möglichkeiten, die Umleitung zu minimieren, um die Servogeschwindigkeit zu erhöhen.

5. Reduzieren Sie die DNS-Lookups

   Gemäß Yahoo! Blog des Entwicklernetzwerks, Es dauert etwa 20-120 Millisekunden, bis das DNS (Domain Name System) die IP-Adresse für einen bestimmten Hostnamen oder Domänennamen auflöst. Der Browser kann nichts tun, bis der Vorgang ordnungsgemäß abgeschlossen ist.

   Autor Steve Souders schlug vor, dass das Aufteilen dieser Komponenten auf mindestens zwei, aber nicht mehr als vier Hostnamen die DNS-Suche verringert und parallele Downloads in hohem Maße zulässt. Weiterlesen auf dem Artikel.

Optimierung: Die Assets (CSS, Javascripts, Images)

1. Mehrere Javascripts in eins zusammenführen

   Leute bei rakaz.nl gibt an, wie Sie mehrere Javascripts kombinieren können:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   In eine einzige Datei, indem Sie die URL wie folgt ändern:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   durch Manipulieren des .htaccess und Verwenden von PHP. Klick hier um mehr zu lesen.

2. Komprimiere Javascript & CSS

   Minimieren ist eine PHP5-App, die mehrere CSS- und Javascript-Dateien kombinieren, deren Inhalt komprimieren kann (d. h. das Entfernen von unnötigen Leerzeichen / Kommentaren) und die Ergebnisse mit HTTP-Kodierung (gzip / deflate) und Headern liefert, die eine optimale clientseitige Zwischenspeicherung ermöglichen.

   

   Komprimiere sie online!Es gibt auch einige Webdienste, mit denen Sie Ihre Javascripts und CSS-Dateien online manuell komprimieren können. Hier einige, die wir kennenlernen:

   • Kompressor.Biene (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • CleanCSS (CSS)
   • CSS Optimizer (CSS)

3. Header-Ablauf / -Caching anpassen

   Kredit: httpwatch

   Durch die Verwendung eines benutzerdefinierten Expiry-Headers haben Ihre Webkomponenten wie Bilder, statische Dateien, CSS und Javascript eine unnötige HTTP-Anforderung übersprungen, wenn derselbe Benutzer die Seite zum zweiten Mal neu lädt. Es reduziert die benötigte Bandbreite und hilft auf jeden Fall dabei, die Seite schneller zu liefern.

   Empfohlene Lesungen:

   • Yahoo! Blog des Developer Network - Fügen Sie einen Expires-Header hinzu
   • So fügen Sie in Apache 1.3 Good Expires-Header zu Bildern hinzu
   • HTTP-Caching
   • Caching-Tutorial für Webautoren und Webmaster

4. Laden Sie die Assets ab

   Unter Entladen wird die Trennung von Javascripts, Bildern, CSS und statischen Dateien vom Hauptserver verstanden, auf dem die Website gehostet wird, und sie auf einem anderen Server ablegen oder auf andere Webdienste zurückgreifen. Wir haben hier eine deutliche Verbesserung gesehen Hongkiat Durch Entladen von Assets auf andere verfügbare Webdienste bleibt der Server hauptsächlich für die PHP-Verarbeitung verantwortlich. Hier sind einige Vorschläge für Online-Dienste zum Entladen:

   • Bilder: Flickr, Smugmug, Bezahlte Hostings *
   • Javascripts: Google Ajax Library, Google App Engine, Bezahlte Hostings *
   • Web-Formulars: WuFoo, FormStack
   • RSS: Google Feedburner
   • Umfrage und Umfragen: SurveyMonkey, PollDaddy

   * Bezahlte Hostings - Bezahlte Dienste haben immer eine höhere Zuverlässigkeit und Stabilität. Wenn Ihre Website ständig nach den Assets fragt, müssen Sie sicherstellen, dass sie in guten Händen sind. Wir empfehlen Amazon S3 und Cloud Front.

5. Umgang mit Web-Images

   Bilder sind ein wichtiger Teil Ihrer Website. Wenn sie jedoch nicht ordnungsgemäß optimiert werden, können sie zu einer Belastung werden und am Ende unvorhersehbar große Bandbreiten pro Tag ausnutzen. Hier sind einige Best Practices zur Optimierung Ihrer Bilder:

   • Optimieren Sie PNG-BilderDie Leute des Smashing Magazine beschreiben einige clevere Techniken, mit denen Sie Ihre PNG-Bilder optimieren können.
   • Optimierung für das Web - Was Sie wissen müssen (die Formate) Erfahren Sie mehr über JPEG, GIF, PNG und wie Sie Ihre Bilder für das Web speichern.
   • Bilder nicht skalierenÜben Sie immer das Einfügen der Breite und Höhe für jedes Bild. Verkleinern Sie ein Bild nicht, nur weil Sie eine kleinere Version im Web benötigen. Zum Beispiel: Erzwingen Sie keine Skalierung von 200 × 200 px für Ihre Website auf 50 × 50 px Breite und Höhe. Holen Sie sich stattdessen ein 50 × 50 px.

   Optimierung mit Web Services und Tools. Eine gute Nachricht ist, dass Sie kein Photoshop-Experte sein müssen, um Ihre Bilder zu optimieren. Es gibt zahlreiche Webdienste und Tools, die Ihnen bei der Arbeit helfen.

   • Smush.itWahrscheinlich eines der effizientesten Online-Tools zur Optimierung von Bildern. Es gibt sogar ein WordPress-Plugin dafür!
   • JPEG & PNG StripperEin Windows-Tool zum Entfernen / Reinigen / Entfernen von unnötigen Metadaten (Junk) aus JPG / JPEG / JFIF- und PNG-Dateien.
   • Online Image OptimizerMit dieser Option können Sie Ihre Gifs, animierten GIFs, JPGs und PNGs auf einfache Weise optimieren, sodass sie mit Dynamic Drive so schnell wie möglich auf Ihre Website geladen werden
   • SuperGIFVerkleinern Sie mühelos alle Ihre GIF-Bilder und Animationen.
   • Hier ist mehr.

6. Umgang mit CSS

   Moderne Websites verwenden CSS als Grundlage für den Stil sowie für das Erscheinungsbild. Nicht nur CSS bietet eine große Flexibilität für Änderungen, sondern auch weniger Code. Wenn sie jedoch schlecht codiert sind, kann es zu einem Backfire kommen. Hier sind einige Checklisten bzw. Anleitungen, mit denen Sie sicherstellen können, dass Ihr CSS richtig optimiert ist:

   • Die Kinder Ihrer Elemente in Einklang mit den Nachkommen haltenSo halten Sie Ihre Markierungen mit CSS Selectors sauber.
   • CSS kurz haltenWenn sie denselben Stil angeben, sind die Codes umso besser, je kürzer sie sind. Hier ist ein CSS-Kurzanleitung Sie werden wahrscheinlich brauchen.
   • Verwenden Sie CSS SpriteDie CSS-Sprite-Technik reduziert die HTTP-Anforderung jedes Mal, wenn eine Seite geladen wird, indem mehrere (oder alle) Bilder in einer einzigen Bilddatei kombiniert werden und deren Ausgabe mit CSS gesteuert wird Hintergrundposition Attribut. Hier sind einige nützliche Anleitungen und Techniken zum Erstellen von CSS-Sprites:
     • Online-CSS-Sprite-Generator
     • Bester Online- und Offline-CSS-Sprites-Generator
   • Jede Deklaration nur einmal verwendenWenn Sie nach einer Optimierung Ihrer CSS-Dateien suchen, können Sie jede Deklaration nur einmal verwenden.
   • Reduzieren Sie die Anzahl der CSS-DateienDer Grund ist einfach: Je mehr CSS-Dateien Sie haben, desto mehr HTTP-Anforderungen müssen bei der Anforderung einer Webseite gestellt werden. Anstelle von mehreren CSS-Dateien wie folgt:

     Sie können sie in einem einzigen CSS kombinieren:

   Empfohlene Lesungen:

   • Nützliche Tools zum Überprüfen, Reinigen und Optimieren Ihrer CSS-DateiEinige der nützlichen Tools, mit denen Sie Ihren CSS-Code optimieren können, auch wenn Sie keine Kenntnisse über CSS-Codierung haben.
   • 7 Prinzipien eines sauberen und optimierten CSS-CodesBei der Optimierung wird nicht nur die Dateigröße minimiert, sondern auch organisiert, störungsfrei und effizient.
   • Best Practices zur Optimierung von CSSBetrachten Sie diesen Artikel eher als eine akademische Übung und nicht als echte Optimierungstipps.

Optimierung für WordPress

Von Zeit zu Zeit überwachen, messen und analysieren wir die Leistung unseres WordPress-Blogs. Wenn die Site langsam läuft, müssen wir wissen warum. Hier sind einige grundlegende Änderungen, die wir vorgenommen haben, und wir haben die Geschwindigkeit Ihres WordPress-Blogs erheblich gesteigert.

1. Zwischenspeichern Sie Ihren Worpress-Blog

   WP-Cache ist ein äußerst effizientes WordPress-Seiten-Caching-System, mit dem Sie Ihre Website schneller und reaktionsschneller machen können. Wir empfehlen auch WP Super Cache was das zuvor erwähnte Plugin verbessert und auch eine gute Arbeit leistet.

2. Deaktivieren und löschen Sie nicht verwendete Plugins

   Wenn Sie feststellen, dass Ihr Blog sehr langsam geladen wird, prüfen Sie, ob eine Vielzahl von Plugins installiert ist. Sie könnten der Täter sein.

3. Entfernen Sie nicht benötigte PHP-Tags

   Wenn Sie einen Blick in die Quellcodes Ihres Themas werfen, werden Sie viele Tags wie diese finden:

   Sie können durch Textinhalte ersetzt werden, die den Server nicht belasten. Auschecken Michael Martin's 13 Zu löschende Tags aus Ihrem WordPress BloG

Empfohlene Lesungen:

• 3 einfachste Möglichkeiten, WordPress zu beschleunigenJohn Pozadzides berichtet, wie sein Blog reibungslos durch eine Digg-Verkehrsspitze segelt.
• 13 großartige WordPress-Geschwindigkeitstipps und -Tricks für maximale Leistung Hier sind ein paar Dinge, die Sie ausprobieren sollten, wenn Sie feststellen, dass Ihre WordPress-Website nicht so gut funktioniert, wie es aufgrund von hohem Datenverkehr oder versteckten Problemen, die Sie nicht kennen, möglich ist.
• 40 Tipps zur Optimierung von WordPressOptimierungstipps in Folien. 40 Tipps in 40 Minuten.

Zu guter Letzt…

Im Folgenden finden Sie einige nützliche Webservices und Tools, die Ihnen eine breitere Perspektive und eine bessere Analyse bieten, um Sie bei der Weboptimierung zu unterstützen.

• Yahoo! YSlow

  YSlow analysiert Webseiten und schlägt Möglichkeiten vor, ihre Leistung basierend auf einem Satz von Regeln für Hochleistungswebseiten zu verbessern. Sie erhalten eine gute Vorstellung davon, was zu tun ist, damit die Website schneller geladen wird.

  (Firebug erforderlich)

  

• PageSpeed

  Ähnlich zu Yahoo! YSlow, Google Seitengeschwindigkeit ist ein Open-Source-Firebug-Add-On, mit dem Sie die Leistung der Website bewerten und ermitteln können, wie Sie diese verbessern können. (Firebug erforderlich)

  

• Pingdom-Werkzeuge

  Pingdom-Werkzeuge Laden Sie Ihre Website einschließlich aller Objekte (Bilder, CSS, JavaScripts, RSS, Flash und Frames / Iframes) vollständig auf und zeigt Ihnen allgemeine Statistiken über die geladene Seite an, z. B. Gesamtzahl der Objekte, Gesamtladezeit und Größe Objekte.

  

Empfohlene Lesungen:Hier finden Sie weitere Tipps und Tools, die einen Blick wert sind.

• Google Web Optimizer
• 15 Tools zur Entwicklung schnellerer Webseiten
• Über 15 Tipps zur Beschleunigung Ihrer Website und zur Optimierung Ihres Codes!