Benötigt Ihre Website eine Browser-Diät?

Vor einigen Wochen habe ich das Thema Front-End-Design mit dem Artikel "Neue Konzepte in der Front-End-Webdesign-Architektur" angesprochen, der einen umfassenden Ansatz für einige der aktuellen und aktuellen Gedanken und Prinzipien darstellt, die sich in der Welt der Webentwicklung bewegen.

In diesem Beitrag werde ich mich eingehender mit den Faktoren befassen, die sich auf die Front-End-Leistung Ihrer Website auswirken, und die wichtigsten Punkte einer relativ neuen Ressource namens Browser-Diät hervorheben. Die Browser-Diät nennt sich "Der endgültige Front-End-Leistungsleitfaden: Wie man im Browser Gewicht verliert." Diese Front-End-Performance-Ressource wurde von einem Konsortium aus Leuten wie Briza Bueno von Americanas.com, Davidson Fellipe von Globo.com, Giovanni Keppelen von Ex-Peixe Urbano, Jaydson Gomes von Terra, Marcel Duran mit Twitter und Mike Taylor von erstellt Opera, Renato Mangini mit Google und Sérgio Lopes in Caelum. Die GitHub-Ressource von Browser Diet listet über fünfzig Referenzen auf, darunter Themen und Quellen aus Büchern, Websites, Personen, HTML, CSS, JavaScript, jQuery, Bildern und Servern. Als Stakeholder auf der Website Ihres Unternehmens möchten Sie möglicherweise einige dieser Leitprinzipien für die Leistung des Front-End-Webdesigns berücksichtigen.

Abbildung B.

Warum ist Leistung wichtig?

Wir alle wissen als Webentwickler, dass, wenn Ihre Webseiten für Ihre Benutzer nicht schnell genug geladen werden, die Conversion-Raten sinken, der Umsatz pro Benutzer sinkt, die Suche pro Benutzer leidet, der Umsatz sinkt und die Download-Geschwindigkeit kriecht. Die Leute von Browser Diet haben einen schönen kurzen Impact of Performance zusammengestellt, der zeigt, wie die großen Suchmaschinen wie Bing, Google und Yahoo! verbesserte ihre Leistung sowie Beispiele aus verschiedenen vertikalen Märkten wie Shopzilla, Mozilla und Netflix.

Die "endgültige" Anleitung

Der "Definitive Guide" der Browser-Diät ist in sieben Abschnitte unterteilt, die die Hauptthemen HTML, CSS, JavaScript, jQuery, Images, Server und einen Bonus-Teil umfassen. Ich werde einige der wichtigsten Leitziele hervorheben, auf die sich die Browser-Diät bezieht.

HTML

Vermeiden Sie Inline- und eingebetteten Code

Als Faustregel möchten Sie externe Aufrufe verwenden, um Ihr CSS aus a und JavaScript aus dem src- Attribut innerhalb des Tags zu laden. Während eingebetteter und Inline-Code für einige Implementierungen wie kleine Seiten oder Seiten, die nur für vorübergehende Zwecke verwendet werden, nützlich sein kann, möchten Sie in den meisten Fällen Ihr CSS und JavaScript aus externen Quellen aufrufen. Der andere Vorteil besteht darin, dass der Browser die externen Dateien zwischenspeichern kann, was die Leistung der Webseite verbessert. Eines der Tools, auf die hier verwiesen wird, ist der Assetgraph-Builder, das AssetGraph-basierte Build-System (meistens) für einseitige Webanwendungen.

Stellen Sie Ihre Stilaufrufe oben und Skriptaufrufe unten auf der Seite

Dies ist eine Standardpraxis, die wirklich ein Kinderspiel ist. Sie möchten jedoch Ihre Stile aus dem laden, damit die Seite mit den intakten Stilen gerendert und beim Laden der Seite angewendet wird. Und für alle Tags möchten Sie sicherstellen, dass sie direkt vor dem schließenden Tag am unteren Rand der Webdokumentseite platziert werden. Dies scheint der Bereich zu sein, der nicht viel Anklang gefunden hat, aber bei Websites und Entwicklern mehr Akzeptanz findet. Der Grund dafür ist, dass das Laden von JavaScript oder JQuery auf der Seite möglicherweise etwas länger dauert als normalerweise vom Benutzer erwartet. Wenn Sie die Skripte am Ende der Seite aufrufen, können alle nicht skriptbasierten Inhalte geladen werden zuerst laden.

Weitere HTML-Themen sind das Minimieren Ihres HTML-Codes, das Beibehalten von lesbarem Code und die Verwendung des asynchronen Attributs für eine bessere Ladezeit, sodass Skripte asynchron heruntergeladen werden können, während der Rest der Seite weiterhin geladen wird.

CSS

Minimieren Sie Ihr CSS

Während kommentierter und lesbarer CSS-Code mit Einrückungen gut aussieht, fügt dies Ihrem Stylesheet tatsächlich etwas Aufblähung hinzu. Browser kümmern sich nicht um Kommentare und Einrückungen in Ihren Stylesheet-Dateien. Daher werden CSS-Dateien schneller geladen, wenn das zusätzliche menschliche Aufblähen entfernt wird. Es gibt mehrere automatisierte Tools, mit denen Sie Ihr kommentiertes CSS aufnehmen und minimieren können, bevor Sie es in die Bereitstellung einfügen In Produktionsumgebungen zeigt das unten gezeigte Beispiel ein Beispiel für typisches kommentiertes und eingerücktes CSS und anschließend denselben minimierten CSS-Code:

Vor
 /* Kopf */ 
 .logo a { 
 Bildschirmsperre; 
 Höhe: 46px; 
 Texteinzug: -999em; 
 Breite: 115px; 
 }} 
 .head .homelink { 
 Hintergrund: # 0b5375 URL ('/ i / bg-area-title.gif') no-repeat; 
 Höhe: 78px; 
 links: -20px; 
 Position: relativ; 
 Breite: 490px; 
 }} 
Nach (minimiert)
 .logo a {Anzeige: Block; Höhe: 46px; Texteinzug: -999em; Breite: 115px;}. Kopf .homelink {Hintergrund: # 0b5375 url ('/ i / bg-area-title.gif') no- wiederholen; Höhe: 78px; links: -20px; Position: relativ; Breite: 490px} 

In der "Browser-Diät" heißt es: "... diejenigen, die Vorprozessoren wie Sass, Less und Stylus verwenden, können Ihre kompilierte CSS-Ausgabe so konfigurieren, dass sie minimiert wird." In der Referenz sind auch einige andere Tools zum Minimieren Ihres CSS aufgeführt, darunter CSS Minifier und CSSmin.js.

Reduzieren Sie die Anzahl der Anforderungen für CSS-Dateien

Wie oft haben Sie so etwas in Ihren Webseiten-Dokumenten gesehen?

Jede dieser CSS-Anforderungen benötigt mehr Zeit zum Laden der Seite. Daher ist es sinnvoll, Ihr gesamtes CSS in einer einzigen Datei zu kombinieren, für die die Seite nur eine Anforderung stellen muss:

Das letzte CSS-Thema besagt, dass es bevorzugt wird, over @import zum Aufrufen Ihres Stylesheets zu verwenden, da Browser nicht in der Lage sind, @ import-Assets parallel herunterzuladen.

JavaScript

Laden Sie Inhalte von Drittanbietern asynchron

Wie oft binden Sie Skripte von Drittanbietern von YouTube, Vimeo, Twitter oder Facebook in Ihre Webseiten ein? Das Problem ist, dass viele dieser Inhaltsverbindungen von Drittanbietern nicht immer sauber oder effizient verteilt sind. Es gibt eine Vielzahl von Variablen, die die Endbenutzererfahrung verändern können. Um dieses Problem zu vermeiden, können Sie diese Codes asynchron laden und einen Link zu einem Import bevorzugen. Mit diesem Skript können mehrere Widgets von Drittanbietern geladen werden.

Vermeiden Sie document.write

Da dies immer erfordert, dass die Seite jedes Mal vollständig geladen wird, wenn der Aufruf von document.write zurückgegeben wird.

Weitere JavaScript-Themen sind:

  • Caching-Array-Längen
  • Minimieren Sie Neulackierungen und Rückflüsse
  • Minimieren Sie Ihr Skript
  • Kombinieren Sie mehrere JS-Dateien zu einer.

JQuery

Verwenden Sie immer die neueste Version von jQuery

Dies ist ein weiteres Prinzip, das immer in Ihre Skriptaufrufe integriert werden sollte, wenn Sie jQuery verwenden. Es musste jedoch enthalten sein, da viele Leute auf statische Versionen der Bibliothek verweisen. Verweisen Sie auf die Präsentation, Tipps und Tricks zur bewährten Leistung von jQuery. Die neueste Version von jQuery ist verfügbar unter: http://code.jquery.com/jquery-latest.js.

Andere jQuery-Themen umfassen die Verwendung für anstelle von jedem und verwenden jQuery nur, wenn dies unbedingt erforderlich ist.

Bilder

Verwenden Sie CSS-Sprites

Durch Gruppieren mehrerer Bilder in einer einzigen Datei und anschließendes Positionieren in Ihrem CSS können Sie die Anzahl der Anforderungen verringern. Die weithin bekannte Sprite-Technik ist zwar nicht weit verbreitet, wurde jedoch in jüngster Zeit bei der Parallax-Scrolling-Technik verwendet.

Daten-URI

Als Alternative zu den CSS-Sprites bietet dieses Schema die Möglichkeit, Daten inline einzuschließen. Mit dieser Technik können normalerweise separate Elemente wie Bilder und Stylesheets in einer einzelnen HTTP-Anforderung und nicht in mehreren HTTP-Anforderungen aufgerufen werden, was zu einer höheren Effizienz und Leistung führt.

Weitere Bildthemen sind: Skalieren Sie Bilder im Markup nicht neu und optimieren Sie Ihre Bilder.

Server

Aktivieren Sie das intelligente Caching

Wie ich in meinem Beitrag "Cache ist König: Erfahren Sie mehr über Richtlinien zum Zwischenspeichern von Websites" erwähnt habe, besteht der beste Weg zur Optimierung Ihrer Webseitenanforderungen vor einigen Wochen darin, überhaupt keine Anforderung zu haben. Dies bedeutet, dass der Browser zwischengespeichert werden kann Ihre Ressourcen und Vermögenswerte.

Das andere Serverthema ist die Verwendung von gzip zum Komprimieren Ihrer Dateien auf Serverebene.

Bonus

Der Bonusbereich enthält einige Ressourcen zum Testen der Leistung Ihrer Website, einschließlich Erweiterungen, die Sie in Ihre Browser wie YSlow und PageSpeed ​​aufnehmen können, sowie Online-Tools wie WebPageTest und HTTP Archive.

Wenn Ihre Organisation diesen Grundsätzen bereits folgt, haben Sie wahrscheinlich eine Website mit ziemlich guten Leistungsniveaus. Wenn nicht, möchten Sie möglicherweise die fehlenden Ideologien in Ihre Webentwicklungs- und Produktionsumgebungen integrieren.

© Copyright 2021 | mobilegn.com