- Making GitHub’s new homepage fast and performant — Tobias Ahlin beschreibt, wie die Scroll-Effekte dank
IntersectionObserverperformanter umgesetzt werden und dass dabei Methoden vermieden werden, die Reflows auslösen, wiegetBoundingClientRect. Außerdem WebP + SVG-Masken! - Alles, was wir über Core Web Vitals und SEO wissen — Simon Hearne erklärt, warum alle gerade so auf CWV fixiert sind: SEO. Simon sagt etwas, das ich schon ein paar Mal gehört habe:
Das Page Experience Update ist eher ein Anreiz als ein Zwang – es gibt keine direkte Strafe für das Nichterreichen der Google-Ziele.
Das heißt, du wirst nicht für schlechte CWV bestraft, aber du erhältst einen Bonus für gute Werte. Aber wenn alle um dich herum diesen Bonus erhalten, außer dir, ist das nicht dasselbe wie eine Strafe? - Cloudflare Workers für Web-Performance-Optimierung und -Tests einrichten — Matt Hobbs beginnt mit einer Einführung in die Einrichtung eines Cloudflare Workers und wie man ihn verwendet, um eine CSS-Datei abzufangen und alle
font-family-Deklarationen durch Comic Sans zu ersetzen. Vielleicht öffnet das deine Augen für die Möglichkeiten: Wenn du alle Assets wie HTML, CSS und JavaScript manipulieren kannst, kannst du diese Dinge dazu zwingen, performantere Dinge zu tun. - Jetzt wird’s Service Worker! — Jeremy Wagner richtet einen „Streaming“-Service Worker ein, der gängige Teilbereiche einer Website (z. B. Header und Footer) zwischenspeichert, sodass die Einwohner von Waushara County, Wisconsin, mit langsamem Internet die Website ungefähr doppelt so schnell laden können. Dies baut auf Philip Waltons Artikel „Smaller HTML Payloads with Service Workers“ auf.
- Wer hat 2021 die schnellste F1-Website? — Jake Archibalds epische, fast zehnteilige Serie analysiert die Performance von F1-Rennsport-Websites (oh, die Ironie). Es sieht so aus, als ob Red Bull bisher in Führung liegt, mit Ferrari, das hinterherhinkt. Es gibt viel zu lernen in all diesen Artikeln, und es ist irgendwie kathartisch, lustige Stellen wie diese zu sehen:
Ihre Seite war langsam wegen eines 1,8 MB großen blockierenden Skripts, aber 1,7 MB davon waren ein inline eingebettetes 2300×2300 PNG eines Pferdes, das nur als 20×20 angezeigt wurde.
Außerdem glaube ich nicht, dass ich wusste, dass Jake der ursprüngliche Entwickler von Sprite Cow war! (Verwende das nicht, denn es stellt sich heraus, dass Sprites schlecht sind.) - Echter Vergleich der Performance von CSS vs. CSS-in-JS — Tomas Pustelnik betrachtet die Performance-Auswirkungen von CSS-in-JS. Oder, wie ich gerne darauf hinweise: CSS-in-React, denn das ist es immer, da alle anderen großen JavaScript-Frameworks ihre eigenen gesegneten Styling-Lösungen haben. Tomas verglich nicht styled-components mit handgeschriebenem Vanilla CSS, sondern mit Linaria, das meiner Meinung nach die meisten Leute immer noch als CSS-in-JS betrachten – nur dass es anstatt die Styles in JavaScript zu bündeln, CSS ausgibt. Ich stimme zu, dass es, was auch immer eine Styling-Bibliothek für die DX tut, für die Produktion CSS zu produzieren scheint der richtige Weg zu sein. Noch ein Grund, warum ich css-modules mag. Neuere, schickere Bibliotheken machen das auch.
- Der Fall der 50ms-Anfrage — Julia Evans hat dieses interaktive Rätsel zusammengestellt, um herauszufinden, warum eine Serveranfrage länger dauert als sie sollte. Mehr ein Backend-Ding als ein Frontend-Ding, aber die Troubleshooting-Schritte fühlen sich vertraut an. Probiere es auf deinem Rechner aus, auf meinem Rechner, sieh nach, was der Server tut, usw.
Links on Performance III
Chris Coyier am
DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Ich glaube, ich bin hier nicht auf dem neuesten Stand... Was hat sich bei Sprites geändert? Sie wurden früher empfohlen, um die Anzahl der HTTP-Anfragen zu reduzieren... :o
https://jakearchibald.com/2021/f1-perf-part-8/#issue-sprite-sheets-are-bad-now