Be Yours bietet die Möglichkeit, das Laden der ersten Seite erheblich zu beschleunigen.
Auf dieser Seite
Der Mechanismus
Normalerweise rendert der Browser fast alle Elemente auf einer Seite. Selbst wenn Sie oben stehen, sind die Teile unten auf der Seite immer noch betroffen.
Aber nicht mehr, es gibt eine neue CSS-Eigenschaft namens content-visibility . Möglicherweise möchten Sie diese komplexen Terminologien ignorieren. Zur Visualisierung überspringt die Technik das Rendern der Seitenelemente, bis sie kurz vor Ihrer Ansicht stehen. Diese Fähigkeit ist jetzt in Be Yours integriert. Wir können den Browser anweisen, die Renderarbeit bestimmter Seitensegmente, z. B. Abschnitte mit viel Layout, zu verzögern und sie erst dann zu rendern, wenn sie gerade sichtbar sind.
In unserer Demo führt die Anwendung content-visibility auf die Abschnitte der Startseite zu einer 5-fachen Steigerung der Rendering-Leistung beim ersten Laden.
Vor-und Nachteile
Offensichtlich trägt dies dazu bei, die Rendering-Kosten langer Seiten zu senken, ohne die In-Page-Suche oder SEO zu beeinträchtigen. Stellen Sie sich vor, Sie hätten einen Dropshipping-Shop und viele Bereiche auf der Startseite, die Produkte oder Kollektionen repräsentieren; oder eine Art Schaufensterladen, dessen Landingpage mit vielen Bildern gefüllt ist, und in diesen Fällen ist die Technik von Vorteil.
Allerdings bringt diese Technik auch ihre Grenzen und Fehler mit sich. Wenn Sie durch die Seite scrollen, werden Sie feststellen, dass die Bildlaufleiste ziemlich gezackt erscheint. Das bedeutet, dass sich der Seiteninhalt an den neu gerenderten Inhalt anpasst. Und da die nicht gerenderten Elemente im Layout an Höhe verlieren, sieht man manchmal, dass der Inhalt beim Scrollen mit der Maus etwas verzögert erscheint.
Es ist auch wichtig zu beachten, dass diese Technik nicht vollständig kompatibel ist. Es wird derzeit von Firefox und Interner Explorer nicht unterstützt:
