#perfmatters: Tools für Performance-Ninjas
Wenn Sie sich mit Ihren Entwicklungstools auskennen, sind Sie auf dem besten Weg, ein Experte für Leistung zu werden. Colt ging auf die drei Säulen der Leistung ein: Netzwerk, Rechenleistung und Rendering. Dabei erläuterte er die wichtigsten Probleme in den einzelnen Bereichen und die Tools, mit denen sie gefunden und behoben werden können.
- Sie können Chrome auf Android-Geräten jetzt mit den Entwicklertools erfassen, die Sie vom Computer kennen.
- Die Iterationsschleife für die Leistungsarbeit besteht aus den drei Schritten: Daten erheben, Erkenntnisse gewinnen, Maßnahmen ergreifen.
- Priorisieren Sie Assets, die sich auf dem kritischen Renderingpfad Ihrer Seiten befinden.
- Vermeiden Sie das Streichen, da es sehr teuer ist.
- Vermeiden Sie Arbeitsspeicherauslastung und die Ausführung von Code in kritischen Momenten in Ihrer App.
#perfmatters: Netzwerkleistung optimieren
Netzwerk und Latenz machen in der Regel 70% der gesamten Seitenladezeit einer Website aus. Das ist ein großer Prozentsatz, aber es bedeutet auch, dass alle Verbesserungen, die Sie dort vornehmen, enorme Vorteile für Ihre Nutzer haben. In diesem Vortrag ging Ilya auf die jüngsten Änderungen in Chrome ein, die die Ladezeit verbessern, sowie auf einige Änderungen, die Sie in Ihrer Umgebung vornehmen können, um die Netzwerklast auf ein absolutes Minimum zu beschränken.
- Chrome M27 enthält einen neuen und verbesserten Ressourcenplaner.
- Mit Chrome M28 sind SPDY-Websites noch schneller.
- Der einfache Cache von Chrome wurde überarbeitet.
- SPDY / HTTP/2.0 bieten enorme Verbesserungen bei der Übertragungsgeschwindigkeit. Es gibt ausgereifte SPDY-Module für nginx, Apache und Jetty (um nur drei zu nennen).
- QUIC ist ein neues und experimentelles Protokoll, das auf UDP basiert. Es befindet sich noch in der Anfangsphase, aber wie auch immer es sich entwickelt, die Nutzer profitieren davon.
#perfmatters: Layout und Rendering mit 60 fps
Eine Bildrate von 60 fps in deinen Projekten steht in direktem Zusammenhang mit dem Nutzer-Engagement und ist entscheidend für den Erfolg. In diesem Vortrag haben Nat und Tom über die Rendering-Pipeline von Chrome, einige häufige Ursachen für fehlende Frames und wie diese vermieden werden können, gesprochen.
- Ein Frame ist 16 ms lang. Es enthält JavaScript, Stilberechnungen, Malen und Compositing.
- Das Lackieren ist sehr teuer. Ein Paint Storm ist eine unnötige Wiederholung teurer Malerarbeiten.
- Ebenen werden verwendet, um gemalte Elemente im Cache zu speichern.
- Eingabe-Handler (Touch- und Mausrad-Listener) können die Reaktionsfähigkeit beeinträchtigen. Vermeiden Sie sie nach Möglichkeit. Sie können sie nicht auf ein Minimum beschränken.
#perfmatters: Instant-Apps für mobile Websites
Der kritische Rendering-Pfad bezieht sich auf alles (JavaScript, HTML, CSS, Bilder), was der Browser benötigt, bevor er mit dem Zeichnen der Seite beginnen kann. Die Bereitstellung von Assets auf dem kritischen Renderingpfad muss priorisiert werden, insbesondere für Nutzer auf Geräten mit eingeschränkter Netzwerkkapazität, z. B. Smartphones in Mobilfunknetzen. Bryan erklärte, wie das Google-Team die Assets für die PageSpeed Insights-Website identifiziert und priorisiert hat, um die Ladezeit von 20 Sekunden auf etwas mehr als 1 Sekunde zu verkürzen.
- Entfernen Sie JavaScript- und CSS-Ressourcen, die das Rendering blockieren.
- Priorisieren Sie sichtbare Inhalte.
- Laden Sie Scripts asynchron.
- Rendern Sie die anfängliche Ansicht serverseitig als HTML und ergänzen Sie sie mit JavaScript.
- Minimieren Sie renderblockierendes CSS. Reichen Sie nur die Stile ein, die zum Anzeigen des ursprünglichen Darstellungsbereichs erforderlich sind, und dann den Rest.
- Große Daten-URIs, die in renderblockierendes CSS eingefügt sind, beeinträchtigen die Renderleistung. Sie blockieren Ressourcen, während Bild-URLs nicht blockieren.