So messen Sie die Leistung der Front-End-Website

Über Optimierungsprozesse zu sprechen, ist unter Webdesignern von New Age fast nicht vorhanden. Selbst viele Webdesigner, die ein Jahrzehnt oder länger im Geschäft waren, verstehen die Bedeutung der Website-Optimierung nicht vollständig.

Nach einer längeren Zeitspanne beginnt eine Website herunterzufahren. Die Frontend-Dateien können übertriebene Codeblöcke oder gesperrte, verborgene Bits enthalten. Dies tritt meistens in JavaScript-Dateien oder Bildern auf. Es kann wichtig sein, eine angenehme Website für die Benutzererfahrung zu erstellen, aber ohne eine optimierte Website kann das Design nicht einmal die Chance haben, ungeduldige Benutzer voll zu nutzen.

Die folgenden Tipps sind für interessierte Einsteiger und fortgeschrittene Webentwickler gedacht ihre Seiten optimieren in vollen Zügen. Es gibt viele verfügbare Techniken, und jede von ihnen verhält sich unterschiedlich, je nachdem, welche Probleme Ihre Website hat. Versuchen Sie, einige Bereiche zu überfliegen, und prüfen Sie, ob Sie diese Techniken auf Ihre eigenen Marken anwenden können.

HTTP-Anfragen

Bei jedem Laden Ihrer Website wird eine HTTP-Anforderung an einen Remote-Server gesendet. Diese Art der Datenübertragung wird als a bezeichnet Netzwerkprotokoll Wird speziell zum Verteilen und Speichern von Klartextdateien verwendet. Diese enthalten häufig Ihren grundlegenden Frontend-Code wie HTML, CSS und JavaScript.

Sobald die Anfrage gesendet wurde, analysiert Ihr Browser jedes Seitenelement. Abhängig von der Parsing-Engine wird jede Website unterschiedlich geladen und die Elemente werden basierend auf den Übertragungsgeschwindigkeiten in unterschiedlicher Reihenfolge angezeigt. Beispielsweise werden von Internet Explorer Webseiten anders dargestellt als in Chrome oder Safari, und alle diese verwenden etwas andere Parsing-Engines als Firefox oder Opera.

Zu beachten ist, wie lange die Anforderungszeit für jede Datei dauert und ob dieser Trend konsistent bleibt. Erwägen Sie, mehr als 100.000 Besucher oder 1 Million Besucher pro Monat zu erhalten. Es ist die Aufgabe des Browsers, jedes Seitenelement zusammenzusetzen und externe Dateien in den Speicher zu laden.

Oft sind die Faktoren, die die optimierte Geschwindigkeitsreferenz einer Website beeinträchtigen, klobiges JavaScript oder große Bilddateien. Mit der Popularisierung von Verizon FiOS erreichen Internetgeschwindigkeiten 600kbps und steigen weiter! Leider ist dies nicht die Norm und selbst bei Hochgeschwindigkeitsverbindungen können Optimierungsfehler auftreten.

Abhilfemaßnahmen zur Site-Performance

Wir sind nicht allein im Bereich Webentwicklung und Frontend-Optimierung. Für eine ordnungsgemäße Arbeit sind bestimmte Werkzeuge erforderlich, um die Arbeit zu erledigen.

Google hat ein Projekt mit dem Titel Page Speed ​​veröffentlicht, das Entwicklern dabei helfen soll, ihre Websites zu optimieren und die besten Leistungswerte zu ermitteln. Ursprünglich startete das Projekt als Open-Source-Firebug-Add-On und wird nun als Referenz eines Drittanbieters für Website-Tests akzeptiert.

Eine weitere Option für Firebug-Benutzer ist das YSlow-Add-on von Yahoo! Das Skript analysiert jede Webseitenanforderung und schlägt die am häufigsten verwendeten Methoden zur Verbesserung der Leistung vor. Diese Vorschläge basieren auf der Yahoo! Entwicklerressource für die besten Optimierungsmethoden im Webdesign.

Das Programm kann anfangs etwas abrasiv sein, da es so viele Informationen enthält. Halten Sie sich einfach an die Grundlagen und durch einfache Dokumentation sollte der Vorgang ein Kinderspiel sein.

Entwickler sind immer daran interessiert, in ein Projekt zu springen, um Code aufzuschlüsseln. Dies sollte ein Kinderspiel sein. Eine kleine Hilfe finden Sie in der YSlow-Hilfe.

Geschwindigkeitstechniken

Es gibt einige einfache Tricks, die Sie sofort auf Ihre Website anwenden können, um die Leistung zu steigern. Der erste und einfachste Weg ist, Ihre CSS- und JavaScript-Dateien zu trennen.

CSS-Code gehört in die Kopfzeile Ihres Dokuments. Dies ist nützlich, da CSS-Eigenschaften analysiert werden müssen, während das DOM geladen wird. Sobald ein Webbrowser Ihre CSS-Stile in der Überschrift erkennt, wartet er mit der vollständigen Anzeige der Webseite, bis alle Stile geladen sind. Auch Bilder, die für Symbole oder Hintergrunddesigns verwendet werden, benötigen Zeit zum Laden, dies sollte jedoch zuerst geschehen.

Auf der anderen Seite kann das Verschieben aller JavaScript-Dateien in die Fußzeile Ihrer Website die Aufhängezeiten drastisch lösen. Viele Browser blockieren parallele Downloads. Dies bedeutet, dass der Webbrowser eines Benutzers vor dem Rendern der Seite möglicherweise für 4 Sekunden angehalten wird, um externe JS-Include-Dateien vollständig zu laden.

Dies ist nicht immer möglich und auch nicht für jede Website erforderlich. Wenn Ihre Seiten unabhängig von der Platzierung von Include-Dateien gleich hohe Antwortzeiten laden, machen Sie sich keine Manöver.

Dynamischer Inhalt kann nicht geladen werden, bis das gesamte DOM abgeschlossen ist. Manchmal werden jedoch Fehler zurückgegeben. Testen Sie CSS / JS-Includes, um zu sehen, ob Sie Optimierungsvorteile zurückgeben können.

Dateigrößenkomprimierung

Das Komprimieren großer Dateien ist sehr beliebt geworden. Es kann jetzt sogar in Webseiten verwendet werden, um Ladezeiten zu reduzieren und die Dateigrößen sehr niedrig zu halten. Ein Großteil der Arbeit wurde bereits erledigt, und mit Tools wie YUI Compressor sind Dateien im Mini-Format ein Prozess ohne Energie.

Es gibt viele andere kostenlose Dienste im Internet, die auch bei dieser Aufgabe helfen. CSS reduzieren verfügt über eine gesamte CSS-Komprimierungsschnittstelle, um den Prozess zu vereinfachen. Dieselbe Website verfügt auch über einen benutzerdefinierten JavaScript-Kompressor, der viele der gleichen Aufgaben ausführt, aber das Skripting organisiert hält.

Sie können auch die größten Bilder auf Ihren Webseiten komprimieren. Dies kann mit jeder Bildbearbeitungssoftware wie Adobe Photoshop oder GIMP durchgeführt werden, indem das Bild einfach mit einer niedrigeren Auflösung neu aufgenommen wird. PNG-Bilder werden im Durchschnitt viel kleiner als jpg- oder TIFF-Formate exportiert. Es gibt auch viele Online-Tools wie Image Optimizer, die den Kompressionsprozess unterstützen.

Quellenprüfung und Metriken

Dies ist eine Routine, die von Webentwicklern nicht oft praktiziert wird und erstaunliche Ergebnisse liefert. Durch die Analyse aller Seitenelemente auf Ihrer Website können Sie feststellen, welche Ladezeit am längsten gedauert hat und in welcher Reihenfolge die einzelnen Elemente geladen wurden.

Das beliebteste Tool Mozilla Firebug ist ein Plug-In für den Firefox-Browser. Diese App installiert eine kleine Symbolleiste am unteren Rand Ihres Browsers, um Antwortzeiten, Kopfzeileninformationen, Seitenelemente und Skripts für jede Website zu überprüfen. Das Skript wurde auch als Erweiterung für Google Chrome in Firebug Lite portiert.

Apache mit mod_pagespeed

Nicht bei allen Setups wird ein Apache-Webserver ausgeführt, daher ist diese Option nicht immer verfügbar. Dieses Modul steht in direktem Zusammenhang mit Googles Page Speed ​​Monitor zuvor erwähnt. Tatsächlich basierte der Code für mod_pagespeed ursprünglich auf vielen Bibliotheken aus den Datenbanken von Google Code.

Mit Apache können Serveradministratoren kleine Pakete, sogenannte Module, installieren, um die Leistung ihrer Server zu verbessern. mod_pagespeed ist eines dieser Module, das zur Laufzeit automatisch Optimierungstechniken durchführt. Es gibt zu viele Prozesse, um aufgelistet zu werden, obwohl einige der Hauptanwendungen die direkte HTML / CSS / JS-Komprimierung und das Zwischenspeichern von Bildern umfassen.

Das Projekt ist derzeit bei Google untergebracht und steht Entwicklern offen. Google hat mit GoDaddy zusammengearbeitet, um mod_pagespeed in alle Hosting-Konten zu implementieren, auf denen der Apache HTTP-Server ausgeführt wird.

Obwohl viele andere Optionen zur Verfügung stehen, ist die Frontend-Entwicklungsarbeit eine der intensivsten, vor allem in Bezug auf die Voroptimierung wichtiger Webseiten. Die Optimierung für Kopfzeilen und große Bilder kann eine äußerst mühsame und lohnende Aufgabe sein.

Stellen Sie sich einige der in diesem Artikel vorgestellten Techniken vor und sehen Sie, wie diese in Ihre Webprojekte angewendet werden können. Entwickler nehmen sich oft nicht genug Zeit, um ihre Arbeit zu würdigen und alte Codes zu entfernen. Wenn Sie sich noch nach ein paar Tipps sehnen, sollten Sie unseren ultimativen Web-Optimierungsleitfaden mit Hinweisen zur Wartung des Frontends und praktischen Leistungsverbesserungen lesen.