4 Tipps zur Verbesserung der Leistung Ihrer Seite

Sep 15, 2025

wie man

Web-performance expert Henri Helvetica sitting with his laptop

Web Performance Analyst. Henri Helvetica. Wird seine Pro-Tipps, wie Sie die Leistung Ihres Standorts steigern können New York generieren 2018. Holen Sie sich jetzt Ihr Ticket .

Die Leistung wird endgültig zu einem größeren Teil des Gesprächs in Webdesign und -entwicklung. Es kann jedoch immer noch eine Herausforderung sein, Menschen dazu zu bringen, tatsächlich den großen Inhalt zu konsumieren, der da draußen ist, und einen Leistungsansatz regelmäßiger annehmen.

Glücklicherweise ist freiberuflicher Entwickler- und Web-Performance-Analyst Henri Helvetica (echter Name Henri Bridard), um seine Top-Tipps zum Suppen der Leistung Ihrer Website anzubieten.

01. Bemühen Sie sich zu messen

Helvetica schlägt vor, dass Sie zunächst sicherstellen müssen, dass Sie messen müssen. "Sie können niemals verbessern, was Sie nicht messen", erklärt er. "Sobald Sie Ihre Messungen und Daten haben, müssen Sie herausfinden, welche wichtigen Elemente zu messen sind. Sie könnten zwei Seiten haben, die in neun Sekunden laden, aber man kann den Ansichtsfenster viel schneller erfüllt haben, sodass Sie ein besseres Benutzererfahrung haben.

"Sie müssen messen, was im Lastprozess für Ihre Website und Ihr kommerzielles Unternehmen wichtig ist. Denken Sie darüber nach, was für Ihre Benutzer wichtig ist, mit der Sie miteinander interagieren können. Jede Site hat seine eigenen individuellen Bedürfnisse."

Sobald er einen Blick auf eine Seitenlast hatte, wodurch ihm hilft, wie und wann bestimmte Gegenstände laden, ist der nächste Schritt von Helveticas in der Regel chrome Devtools, um genau zu bewerten, was los ist. Es ist eine offensichtliche Wahl, denn es ist genau dort, und es ist frei - Sie müssen nicht in ein anderes Werkzeug springen, um zu entdecken, warum eine Seite langsam sein kann. Doch viele Entwickler verwenden es kaum. "Devtools ist ein bisschen wie ein Rauchdetektor", argumentiert Helvetica. "Wenn es ein Feuer gibt, sagt Devtools Ihnen. Es wird dir wenigstens zeigen, wo der Rauch ist. "

02. etwas verlieren

Dann schaut Helvetica auf den Wasserfall, der auf verschiedene Themen wie die Größe eines Vermögenswerts und der Latenz angibt, die an der Belüftung beteiligt waren. Wenn die Site beispielsweise schlecht dimensionierte Bilder enthält, z. B. sehen Sie normalerweise einen sehr langen Wasserfall, der eine der leichteren Schmerzpunkte ist, um schnell abzuholen. Bilder sind einer der größten Täter für einen langsamen Ladestätten - ein Problem, das ziemlich leicht behoben werden kann. Da sie die größte Datenquelle sind, sind Bilder auch die größte Quelle für Dateneinsparungen.

"Ich würde immer auf Ihr Sage-Gewicht berücksichtigen", erklärt Helvetica. "Egal wie Sie es schneiden, wenn Sie ein Bild haben, das 3 MB oder sogar drei Bilder bei jeweils 1 MB haben, werden Sie wahrscheinlich eine User-Erlebnisherausforderung haben.

Web-performance expert Henri Helvetica coding on his laptop

"Dieses Seitentgewicht wird auch das Opfer Ihres Netzwerks sein, da ein zelluläres Netzwerk niemals vorhergesagt werden kann. Sie möchten also sicherstellen, dass Ihre Vermögenswerte klein sind und für den Ansichtsfenster optimiert sind, was bedeutet, dass Sie keine sehen können Desktop-Größe-Assets auf einem mobilen Gerät. "

Helvetica empfiehlt auch das Lazy-Laden, eine Technik, die das Laden eines Objekts verzögert, bis er benötigt wird. "Nicht alle Benutzer machen es bis zum Ende einer Seite", warnt er. "Häufig können Sie Vermögenswerte laden, die niemals gesehen werden. Die Verwendung von faulen Last wird sehr vorteilhaft sein, da Sie Daten sowie Batterieabfluss oder Speicherverwaltung sparen. Wenn Sie das Bild nicht laden, haben Sie keinen Speicher, um den Gerät auf dem Gerät zu verwenden. "

03. Sehen Sie, wie Sie stapeln

Ein weiterer Grund, warum Helvetica bevorzugt Devtools ist, weil es nun auch Metriken wie die erste Farbe bereitstellt (die Zeit, die den Benutzer benötigt, um das erste Pixel des Inhalts zu sehen) und die erste sinnvolle Farbe (die Zeit, die es dauert, dass der Primärinhalt der Seite sichtbar ist, um sichtbar zu werden ).

Dann gibt es den Filmstreifen (entweder in Devtools oder Performance Tool Webpagetest), der inkrementellen Screenshots des Browsers eine Site zeigt, sodass Sie sehen können, wie eine Seite aussieht, wenn es geladen wird. Indem Sie sie untersuchen, können Sie herausfinden, welche Vermögenswerte geladen wurden, wann und untersuchen Sie, dass einige von ihnen einige von ihnen in der Timeline geladen werden.

In Webpagetest - Welcher Helvetica lobt sich für ein inspirierendes Maß an Details - Sie können auch ein Video der Ladung exportieren und den Filmstreifen mit dem eines Mitbewerbers vergleichen. "Sobald Sie die Punkte anschließen, können Sie untersuchen, wie Sie die Benutzererfahrung verbessern können, indem Sie diese Vermögenswerte schneller in den Ansichtsfenster bringen", erklärt Helvetica.

04. Schneiden Sie das Unordnung

Helvetica-Highlights, die Designentscheidungen auch auf die Leistung auswirken, und dass Ihre erste Last in den Ansichtsfenster idealerweise nicht nur so schnell wie möglich sein sollte, sondern auch als unordnungfrei wie möglich ist.

Aus diesem Grund müssen Sie die Reihe von Ereignissen verstehen, die erfolgt, um die erste Ansicht einer Webseite zu rendern, um die erste Ansicht einer Webseite zu rendern - der kritische Rendering-Pfad. Diese Ereignisse können optimiert werden, indem Ladevermögen vermieden werden, die nicht erforderlich sind, und durch Entscheidungen rund um die Auswahl von Web-Schriften und Bildformaten.

"Stellen Sie sicher, dass Sie Ihre SVGs so komplexitätsfrei wie möglich halten," Helvetica schlägt mittels eines Beispiels vor. "Dann haben Sie weniger Code, wenn Sie Ihre SVG rendern. Ich höre das ganze Zeit von Entwicklern. Sie werden eine SVG von den Designer bekommen und müssen es zurückschicken, weil er die Leistung beeinträchtigen würde. "

Dieser Artikel wurde ursprünglich in Ausgabe 303 von Net, dem weltweit besten Verkaufsmagazin für Webdesigner und Entwickler, veröffentlicht. Kaufen Ausgabe 303. oder Net abonnieren .

Willst du einen weiteren Einblick in die Geschwindigkeit deiner Seite?

Henri Helvetica is giving his talk Planet of the APIs: A Tale of Performance & User Experience at Generate New York from 25 - 27 April 2018 — Henri Helvetica gibt seinem Talk-Planeten der APIs: eine Geschichte von Performance & AMP; Benutzererfahrung bei Generieren von New York vom 25. bis 27. April 2018

Wenn Sie daran interessiert sind, Ihre Seiten schnell aufzunehmen, stellen Sie sicher, dass Sie ein Ticket ergreifen New York generieren . Henri Helvetica wird anwesenden heutigen und sogar experimentellen Praktiken, die in Mess von Web-Apps eingesetzt werden, und anbieten Leistungsbenutzererfahrungen sowie mehr Einblick in Messungen wie erste Farbe, sinnvoller Lack und Time, um interaktiv zu machen.

Generieren Sie New York, findet vom 25. bis 27. April 2018 statt. Holen Sie sich jetzt Ihr Ticket .

Zum Thema passende Artikel:

7 Expert-Tipps zum Nageln von Web-Leistung
3 Top-Tools zum Testen der Webleistung
Warum die Webleistung schnell fühlen muss

4 Tipps zur Verbesserung der Leistung Ihrer Seite

01. Bemühen Sie sich zu messen

02. etwas verlieren

03. Sehen Sie, wie Sie stapeln

04. Schneiden Sie das Unordnung

Willst du einen weiteren Einblick in die Geschwindigkeit deiner Seite?

wie man - Die beliebtesten Artikel

Facebook-Datenschutzeinstellungen: So halten Sie Ihr Profil privat

So deaktivieren Sie Webbenachrichtigungen für Windows, MacOS und Android

So ändern Sie ein Bild in Photoshop

Erstellen Sie einen Blog mit Grid und Flexbox

So erstellen Sie eine AR-App

Erste Schritte mit diffus

Wie man reizvolle Miniaturen malt

Malen Sie eine Original-Tarot-Karte

Kategorien