Web Performance Calendar

Avatar of Robin Rendle
Robin Rendle am

DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!

Der Web Performance Calendar wurde dieses Jahr gerade neu gestartet. Die ersten beiden Beiträge bisher handeln, nun ja, von Performance! Zuerst schreibt Rick Viscomi über die mythische „schnelle“ Webseite

Wie Sie die Leistung einer Webseite messen, kann Ihnen sagen, ob sie auf Geschwindigkeit ausgelegt ist oder ob sie sich schnell anfühlt. Wir nennen sie Labor- und Feldwerkzeuge. Laborwerkzeuge sind die Mikroskope, die eine Seite auf alle möglichen Reibungspunkte untersuchen. Feldwerkzeuge sind die Ferngläser, die Ihnen einen Überblick darüber geben, wie Benutzer die Seite erleben.

Das lässt mich vermuten, dass Feldwerkzeuge die Zukunft der Performance-Überwachung sind. Aber Ricks Beitrag geht weit darüber hinaus.

Zweitens schrieb Matt Hobbs über die font-display CSS-Eigenschaft und wie sie die Leistung unserer Websites beeinflusst.

Wenn Sie rein über die wahrgenommene Leistung sprechen und die Verbindungsgeschwindigkeit keine Rolle spielt, würde ich sagen, font-display: swap ist am besten. Wenn diese Einstellung verwendet wird, rendert sie die Fallback-Schriftart fast sofort. Dies ermöglicht es einem Benutzer, mit dem Lesen von Seiteninhalten zu beginnen, während die Web-Schriftart im Hintergrund weiter geladen wird. Nach dem Laden wird die Schriftart entsprechend ausgetauscht. Bei einer schnellen, stabilen Verbindung geschieht dies normalerweise sehr schnell.

Meine Empfehlung hier wäre, sich intensiv um den Layout-Shift zu kümmern, wenn Sie diese Eigenschaft verwenden. Sobald die Schriftart geladen und ausgetauscht ist, könnten Sie einen großen Text-Shift erzeugen, der alles durcheinanderbringt. Ich habe einmal eine Änderung an einer Website mit dieser Eigenschaft veröffentlicht, ohne mich um den Layout-Shift zu kümmern, und die Benutzer haben sich sehr beschwert.

Es war eine gute Lektion: Leute kümmern sich sicher um die Leistung, auch wenn sie es nicht laut sagen. Sie kümmern sich auch intensiv um den "Cumulative Layout Shift".

Direkter Link →