In-Browser Performance Linting Mit Feature Policies

Hier ist eine nette Idee von Tim Kadlec. Er nutzt die Modheader-Erweiterung, um benutzerdefinierte Header in seinem Browser umzuschalten. Sie zeigt ihm auch an, wenn Bilder zu groß sind und optimiert werden müssen. Dies ist eine großartige Möglichkeit, solche Probleme in einer lokalen Umgebung zu erkennen, da Browser einen Fehler ausgeben und sie überhaupt nicht anzeigen!

Wie Tim erwähnt, liegt der Trick im Feature Policy-Header mit der oversized-images-Richtlinie, und er schaltet sie wie folgt ein:

Feature-Policy: oversized-images ‘none’;

Tim schreibt:

Standardmäßig, wenn Sie dem Browser ein Bild in einem unterstützten Format zur Verfügung stellen, wird es angezeigt. Es skaliert diese Bilder sogar hilfreich, damit sie gut aussehen, selbst wenn Sie eine riesige Datei bereitgestellt haben. Aus diesem Grund ist es nicht sofort ersichtlich, wenn Sie ein Bild bereitgestellt haben, das größer ist als die Website benötigt.
Die oversized-images-Richtlinie weist den Browser an, keine Bilder zuzulassen, die mehr als ein vordefinierter Faktor ihrer Containergröße sind. Die empfohlene Standardgrenze beträgt 2x, aber Sie können diese bei Bedarf überschreiben.

Ich liebe diese Idee, den Browser für uns zum Linting zu nutzen! Ich frage mich, auf welche anderen Weisen wir den Browser nutzen könnten, um Schutzplanken für unsere Arbeit zu schaffen und zukünftige Fehler zu vermeiden...

Direkter Link →

Mark Root-Wiley

# 27. Februar 2020

Sehr clever. Das ist nicht ganz dasselbe, aber ich habe angefangen, meinen WordPress-Redakteuren eine freundliche Erinnerung an die Bedeutung von Alt-Texten zu geben, indem ich alle Bilder ohne diesen hervorhebe.

Der erforderliche Selektor variiert, aber hier ist einer, den ich in einem echten Projekt verwende:

.logged-in .page-content img[alt=""]:not([aria-hidden="true"]) {
    outline: 5px dotted tomato;
    outline-offset: 5px;
}

Kommentare