- Verbessert Shadow DOM die Stil-Performance? — Nolan Lawson erklärt, wie sich durch die inhärente Kapselung des Shadow DOM das Styling etwas schneller anwenden lässt, als wenn diese Styling-Regeln für die gesamte Seite relevant wären. Aber wie immer kommt es darauf an, und es stellt sich heraus, dass Klassen und IDs außerhalb davon tatsächlich schneller sind (?!), also wenn Sie nur mit diesen stylen, ist das der richtige Weg.
- HTML-first, JavaScript last: das Geheimnis für Web-Geschwindigkeit! — Miško Hevery spricht über Qwik und eines der Dinge, die es schnell machen. Ich weiß nicht viel über Qwik, aber es sieht aus wie ein JavaScript-Framework, das ziemlich SSR-freundlich ist, da es den Zustand direkt im HTML/DOM speichert (z. B.
div ::app-state="./AppState" app-state:1234="{count: 321}">), was man denken würde, dass es langsam ist, aber anscheinend nicht. - Kleine Bundles, schnelle Seiten: Was tun mit zu viel JavaScript — Einige Gedanken von Ben Schwarz, was mit diesen problematischen großen Bundles zu tun ist. Machen Sie sie kleiner ist das Hauptziel, und behalten Sie sie dann ständig im Auge.
- Den
headrichtig gestalten: Ein neuer CSS-Performance-Diagnose-Snippet — Wir haben Harrys super cleveren Snippet vor einiger Zeit behandelt, aber Vitaly war uns zuvor gekommen und es lohnt sich, es erneut zu teilen, weil es verdammt cool ist. - Neue HTTP-Standards für Caching im modernen Web — Tim Perry befasst sich mit zwei brandneuen (vorgeschlagenen) Cache-Headern:
Cache-Statusund TargettedCache-Control. „Diese sollen die HTTP-Standards aktualisieren, um der Realität des CDN-gestützten Webs von heute zu entsprechen, und Spezifikationen erstellen, die bestehende Praktiken beliebter CDNs formalisieren.“ Fühlt sich wie gute Arbeit an, wo Webstandards eingreifen und eine knifflige Situation lösen können. - Optimierung des Ressourcenladens mit Prioritäts-Hints — Leena Sohoni, Addy Osmani und Patrick Meenan sprechen über die Prioritäts-Hints…. äh… Ich würde es eine API nennen, außer es ist wirklich nur ein
importance-Attribut in HTML oder ein JavaScript-Parameter in anderen APIs. Hier ist der Entwurf der Spezifikation. Es ist eines dieser Dinge, wie responsive Bilder mitsrcset/sizesoderwill-change, wo Sie, der Autor, mehr wissen als der Browser und ihm damit Informationen geben können, die er benötigt, um besser zu funktionieren. - Haben Core Web Vitals das Web schneller gemacht? — CWVs wurden im Mai 2020 angekündigt und dann wurde uns gesagt, dass sie bis Mai 2021 ein Faktor für SEO werden würden. Barry Pollard prüft nach, ob dieser große Karottenstock (oder Stock?) uns alle dazu verleitet hat, Websites massenhaft schneller zu machen. Die Antwort ist kompliziert, da sich die Art und Weise, wie CWVs gemessen werden, in dieser Zeit geändert hat. Einige Messungen sagen ja, die Dinge sind besser. Aber wenn Sie stetige alternative Messungen von davor/danach verwenden, sehen die Dinge schlechter aus. Es kommt alles darauf an, welchen Ausschnitt des Webs Sie betrachten.
- Verbesserung der Performance mit Islands Architecture und PostCSS — Astro hat eine coole Funktion für Komponenten – wie
<Sidebar client:media={"(min-width: 768px)"} />–, bei der dieses Element gar nicht geladen wird, es sei denn, die Media Query stimmt überein. Ich könnte argumentieren, dass dies nur dann eine gute Idee ist, wenn es sich um eine schwere Komponente handelt oder JavaScript benötigt. Das sage ich, weil die Verwendung für etwas wie statisches HTML jeden potenziellen Gewinn zunichtemachen würde, da zusätzliches JavaScript ausgeführt werden muss, um die Medienbedingungen zu testen und dann bedingt Assets abzurufen. Aber trotzdem zeigt Oliver Turner, wie Media Queries zwischen Ihrem JavaScript und CSS (über PostCSS) geteilt werden können. - Image Optimizer — Dies ist ein Electron-basierter (aber nur für macOS) Drag-and-Drop-Bildoptimierer. Ähnlich wie ImageOptim, nehme ich an. Beide sind kostenlos.
Links on Performance V
Chris Coyier on
DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Image Optimizer ist im Vergleich zu ImageOptim super schnell. Allerdings verwendet Image Optimizer pngquant, was ich als sehr aggressiv empfinde, wenn die Bildqualität eine Rolle spielt. ImageOptim hat auch zusätzliche Optionen, die Image Optimizer nicht hat. Die Wahl des einen über den anderen hängt vom Anwendungsfall ab.