content-visibility

Rendering performance boost ab Chrome 85. Ermöglicht es dem user agent, die Rendering-Arbeit eines Elements, einschließlich Layout und Paiting zu überspringen, bis sie benötigt wird.

https://www.notion.so/content-visibility-582037349d55442597462ee774cd9d22

content-visibility

  • Boost rendering performance
  • Ab Chrome 85 verfügbar
  • Support nur Chrome 85 aufwärts
  • Firefox will es noch einführen
  • https://caniuse.com/?search=content-visibility
  • Ermöglicht dem user agent, die Rendering-Arbeit eines Elements, einschließlich Layout und Painting, zu überspringen, bis sie benötigt wird
  • Da das Rendern übersprungen wird und ein großer Teil Ihres Inhalts außerhalb des Bildschirms angezeigt wird, wird der initial load schneller

Im folgenden beispiel haben wir lila markierten container die Eigentschaft

content-visibility: auto

Die Performance ist in diesem Beispiel bis zu 7x gestiegen

https://webdev.imgix.net/content-visibility/demo.jpg

content-visibility hat 3 Werte:

  • visible

    → Keine Änderung

  • hidden

    → Ein mix zwischen display: none und visibility: hidden. Startet mit display: hidden und wird hinterher visibility hidden

  • auto

    → rendert das Element sobald es vom Browser benötigt wird.

    .element {
        content-visibility:auto;
    }

Ohne content-visibility

https://res.cloudinary.com/practicaldev/image/fetch/s--3v4V-T1H--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1600617553251/eXoyruH_a.png

Mit content visibility

https://res.cloudinary.com/practicaldev/image/fetch/s--3A-Wul7g--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://cdn.hashnode.com/res/hashnode/image/upload/v1600617628097/TnFz-bqnQ.png

443ms → 415ms → 28ms schneller

content-visibility: the new CSS property that boosts your rendering performance

I made my website 28ms faster with content-visibility 🤓

Wir freuen uns Sie kennen zu lernen

Hat Sie unser Angebot überzeugt? Dann freuen wir uns, Sie kennen zu lernen. Kontaktieren Sie uns gerne für ein unverbindliches Erstgespräch.

newcubator GmbH
Freie-Vogel-Straße 369
44269 Dortmund
dortmund@newcubator.com
+49 231/586 873 80
newcubator GmbH
Bödekerstraße 22
30161 Hannover
hannover@newcubator.com
+49 511/957 313 00