Was jeder Webentwickler über Front-End-Leistung wissen sollte

Allzu oft ignorieren wir als Entwickler einen entscheidenden letzten Schritt vor dem Start einer Website: Optimierung für Leistung.

Die meisten Entwickler erkennen mittlerweile, dass organisierter, gültiger Code Wartbarkeit und Kompatibilität gewährleistet.

Wer daran zweifelt, muss lediglich mit einem Entwickler sprechen, der die Arbeit an einer alten Website übernommen hat, die mit unorganisiertem, unkommentiertem Spaghetti-Code übersät ist.

So wie es wichtig ist, unseren Code so vorzubereiten, dass er von anderen Entwicklern gelesen werden kann, ist es auch wichtig, unseren Code so vorzubereiten, dass er von Browsern gelesen werden kann. Eine großartige Webentwicklung beginnt vielleicht mit einer großartigen Organisation, endet aber mit einer großartigen Optimierung.

In diesem Artikel werden Best Practices für die Front-End-Leistung vorgestellt.

Die Geschichte einer Webanfrage

Wenn ein Besucher eine Seite Ihrer Website anfordert, passieren mehrere Dinge:

  • Ihr Webserver gibt ein HTML-Dokument zurück;
  • Der Browser des Besuchers sucht nach verlinkten Dateien (CSS, JavaScript, Bilder) und fordert diese an;
  • Ihr Webserver gibt diese verknüpften Dateien zurück;
  • Der Browser des Besuchers zeigt diese Dateien an, führt sie aus oder durchsucht sie nach weiteren anzufordernden Dingen (z. B. CSS-Hintergrundbildern).

Auch wenn dieser Vorgang einfach zu sein scheint, kann er durch eine Reihe von Komplikationen erheblich verlangsamt werden:

  • Jede angeforderte Datei verfügt über Header, die ebenfalls gesendet werden müssen. Das Versenden vieler kleiner Dateien erzeugt unnötigen Overhead, den Sie mit ein paar großen Dateien vermeiden.
  • Bei den meisten Browsern ist die Anzahl der Dateien, die sie gleichzeitig von einer Domain herunterladen können, begrenzt. Wenn Sie 24 Dateien von derselben Domain herunterladen möchten, beginnt der Download der neunten erst, wenn die erste abgeschlossen ist.
  • Viele Browser blockieren alle parallele Downloads beim Laden von externem JavaScript.
Lesen:  Mythen über Zuckerentgiftung

Auch wenn sich das alles etwas kompliziert anhört, gibt es bewährte Methoden, die es viel einfacher machen. Sowohl Google als auch Yahoo bieten ziemlich umfassende Richtlinien, um die Website-Optimierung auf die Spitze zu treiben:

Viele ihrer Empfehlungen erfordern ein wenig Arbeit. Nachfolgend finden Sie die fünf besten Dinge, die Sie tun können Heute um die Leistung Ihrer Website mit minimalem Aufwand zu verbessern.

5 schnelle Änderungen zur Verbesserung der Leistung Ihrer Website

1. Verschieben Sie Ihr JavaScript in die Fußzeile

Das Verschieben Ihrer JavaScript-Dateien in die Fußzeile der Seite ist die schnellste und einfachste Möglichkeit, die Leistung zu verbessern. Viele Browser blockieren parallele Downloads beim Laden externer JavaScript-Dateien; Wenn Sie Ihre Dateien in die Fußzeile einfügen, laden Browser zuerst andere Dinge.

Achten Sie jedoch auf Nebenwirkungen im Hinblick auf Zeitpunkt und Aussehen. Wenn Sie JavaScript verwenden, um das Erscheinungsbild eines Elements zu ändern, wird es erst mit einer längeren Zeitverzögerung ausgeführt.

2. Stellen Sie das CSS an die erste Stelle

Das erste Laden des CSS ist aus zwei Gründen genauso wichtig wie das Platzieren des JavaScript am Ende des HTML-Dokuments:

  1. CSS enthält oft Hintergrundbilder, die eine weitere Anfragerunde erfordern. Es ist wichtig, diese so schnell wie möglich in Angriff zu nehmen.
  2. Seiten werden gerendert, sobald das CSS bereit ist.

Indem Sie das CSS oben im Dokument platzieren, stellen Sie sicher, dass alle Hintergrundbilder sofort geladen werden und Ihre Website so schnell wie möglich gerendert wird.

3. Kompilieren und minimieren Sie Ihr CSS und JavaScript

Beim Schreiben von Code aus Gründen der Wartbarkeit ist die Verwendung mehrerer unterschiedlicher Stylesheets und JavaScript-Dateien oft sinnvoll. Bei der Optimierung der Leistung ist dies fast das Schlimmste, was Sie tun können. Mit jeder Datei, die Sie hinzufügen, muss ein Header gesendet werden und eine zusätzliche Anfrage muss zum und vom Server gesendet werden.

Kombinieren Sie Ihr gesamtes CSS in einer Datei und Ihr gesamtes JavaScript in einer anderen und minimieren Sie dann beide. (Vergessen Sie nicht, das CSS oben im HTML-Dokument und das JavaScript in der Fußzeile einzufügen.)

Lesen:  Webdesign und SEO: Alles, was Designer wissen sollten

Obwohl das Neukompilieren und Minimieren Ihrer Dateien nach jeder Änderung mühsam klingen mag, ist der Leistungsunterschied wirklich dramatisch.

Kompilierungs- und Minimierungsressourcen:

4. Hüten Sie sich vor Skripten von Drittanbietern

Viele Websites enthalten heutzutage Skripte und Widgets von Drittanbietern, die Daten von anderen Servern laden. Beispiele sind der Tweet-Button, die Facebook-Fanbox, der Share This-Button und sogar Google Analytics. Man könnte meinen, dass diese alle gut konstruiert wären, aber viele sind es nicht. Zum Beispiel die Das Digg-Widget stellt neun Anfragenist 52 KB groß und blockiert den Download der Hauptseite!

Gehen Sie sparsam mit diesen Widgets um, messen Sie ihre Leistung und suchen Sie nach asynchronen Alternativen. Es stehen Alternativen zu den beliebtesten Widgets zur Verfügung. Die Installation ist etwas komplizierter, aber sie bieten eine viel bessere Leistung. Normalerweise kann man sie mit ein wenig Graben finden.

Asynchrone Widget-Ressourcen:

5. Messen Sie Ihre Ergebnisse

Es gibt eine Reihe großartiger Tools, mit denen Sie die Leistung Ihrer Website ganz einfach messen können. Einige können im Browser verwendet werden; andere sind online:

  • Firefox Firebug
    Schauen Sie sich die Registerkarte „Netz“ in Firebug an, um eine visuelle Zeitleiste zu sehen, die zeigt, wie lange das Laden Ihrer Website dauert und warum das so ist.
  • YSlow für Firebug
    Yahoo hat ein Plug-in für Firebug veröffentlicht, das eine Website anhand ihrer YSlow-Empfehlungen analysiert und Möglichkeiten zur Leistungsverbesserung vorschlägt.
  • PageSpeed ​​für Firebug
    Dies funktioniert genauso wie YSlow, basiert jedoch auf den PageSpeed-Empfehlungen von Google.
  • GTMetrix
    Dieses Tool verwendet eine URL und liefert einen vollständigen Bericht über die Leistung der Website basierend auf YSlow und PageSpeed. Dies ist praktisch, wenn Firebug nicht verfügbar ist oder Sie die Ergebnisse über einen Link teilen möchten.

Einen Schritt weiter gehen

Die meisten Webentwickler könnten die fünf oben genannten Tipps ziemlich einfach umsetzen. Allerdings lohnt es sich, noch eine Reihe anderer Dinge zu tun, wenn Sie etwas tiefer in die Materie einsteigen und die Konfiguration Ihres Servers optimieren möchten.

Fügen Sie Expires-Header hinzu

Fügen Sie jeder Datei, die Ihr Server sendet, einen Expires-Header hinzu. Dadurch wird dem Browser mitgeteilt, wie lange die Datei gültig ist. Auf diese Weise weiß der Browser, dass er die Datei für den nächsten Zugriff speichern muss, sodass er sie nicht erneut vom Server abrufen muss.

Lesen:  Horde-E-Mail-Abwertung: Was Sie wissen müssen

Viele Websites enthalten auf jeder Seite dieselbe CSS-Datei, es gibt jedoch keinen Grund, warum ein Besucher sie für jede Seite herunterladen muss; Der Browser sollte wissen, wie er es zwischenspeichern kann.

Verwenden Sie die Gzip-Komprimierung

Heutige Computer sind wirklich schnell. Die Gzip-Komprimierung macht sich dies zunutze, indem sie den Server auffordert, jede Datei zu komprimieren, bevor sie sie an den Besucher sendet.

Der Browser des Besuchers lädt es dann herunter und dekomprimiert es. In der Vergangenheit mussten wir bei der Entscheidung, ob wir dies aktivieren wollten, die Serverressourcen berücksichtigen. Heutzutage gibt es im Wesentlichen keine Nachteile mehr bei der Aktivierung von gzip.

Erwägen Sie die Installation von mod_pagespeed

Google hat gerade ein Apache-Modul namens veröffentlicht mod_pagespeed. Es implementiert automatisch fast alle Techniken in diesem Artikel.

Es ist jedoch immer noch wichtig, die Techniken zu verstehen, bevor Sie dieses Modul implementieren. Wenn Sie wissen, wie die Website funktioniert, können Sie die vielen Filter von mod_pagespeed nutzen. Ein solcher Filter, Kombinieren Sie CSSfindet, kombiniert und minimiert alle im HTML referenzierten CSS.

Das Modul verfügt über eine Reihe von Filtern und Einstellungen, die die Leistung Ihrer Website verbessern können. Alle sind einen Blick wert.

Abschluss

Auch wenn es nicht das glamouröseste Thema ist, verdient die Optimierung mehr Aufmerksamkeit. Unsere Aufgabe als Entwickler besteht darin, die Best Practices der Branche kennenzulernen, um unseren Kunden und Benutzern Arbeit von höchster Qualität zu liefern.

Dieser Beitrag wurde exklusiv für Webdesigner Depot von Joel Sutherland, Gründer und Webentwickler bei, geschrieben Neue Medienkampagnen. Er ist Teil des Teams, das gerade gegründet wurde Hifiein modernes Content-Management-System, das für Designer mit Blick auf ihre Kunden entwickelt wurde. Folgen Sie Joel auf Twitter oder kontaktieren Sie ihn auf der HiFi-Website.

Kennen Sie eine einfache Möglichkeit, die Leistung einer Website zu verbessern, die in diesem Artikel nicht erwähnt wurde? Bitte teilen Sie es und Ihre Erfahrungen in den Kommentaren unten.

Aktuelle Artikel:

Empfohlen