Verbessern Sie Interaction to Next Paint durch Verzicht auf JavaScript-Scrolling

Erstellen Sie ein schönes, flüssiges Scroll-Erlebnis, das die Core Web Vitals nicht beeinträchtigt

Arjen Karel - linkedin

Last update: 2026-02-07

Ersetzen Sie JavaScript-Scrolling heute durch CSS

Dieser Blog hat ein bisschen Geschichte. Bis 2017 war der einzige Weg, konsistentes Smooth-Scrolling-Verhalten hinzuzufügen, die Verwendung einer JavaScript-Bibliothek. Und viele Entwickler taten genau das. Die Core Web Vitals waren noch kein Thema und jeder benutzte jQuery als seine Haupt-JavaScript-Bibliothek.

Springen wir nun in die heutige Zeit. Es gibt viel bessere, schnellere und einfachere Alternativen zum JavaScript-basierten Anker-Scrolling. Als Core Web Vitals Berater sehe ich sie jedoch immer noch jeden Tag.

Table of Contents!

Ersetzen Sie JavaScript-Scrolling heute durch CSS
Warum JavaScript-basiertes Scrolling 'schlecht' ist
Warum CSS Smooth Scrolling 'gut' ist
Vollständiges Beispiel:

Warum JavaScript-basiertes Scrolling 'schlecht' ist

JavaScript-basiertes Scrolling ist aus 2 Gründen schlecht: Es ist kompliziert und es ist langsam.

Kompliziert: JavaScript-basiertes Scrolling ist unnötig kompliziert. Sie müssen schwer lesbaren Code schreiben und warten, und obwohl die [url=https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo]Window.scrollTo()[/url] Methode diesen Code viel einfacher gemacht hat, ist er immer noch viel schwerer zu warten als CSS.

Langsam. JavaScript neigt dazu, den Main-Thread zu blockieren und ist immer langsamer als sein CSS-Gegenstück. Je nachdem, wie die Scroll-Funktion implementiert wurde, kann sie den Main-Thread für geraume Zeit blockieren und eine erhebliche Verzögerung in der Interaction to Next Paint Metrik verursachen!

Warum CSS Smooth Scrolling 'gut' ist

Ich habe darüber gesprochen, warum JavaScript-basiertes Scrolling schlecht ist. Das Gegenteil gilt für CSS-basiertes Smooth Scrolling. Es ist wirklich so einfach wie das Hinzufügen des Folgenden zu Ihrem Stylesheet:

html{ scroll-behavior: smooth;}

Einfach und effektiv

Der CSS-Einzeiler html { scroll-behavior: smooth; } ist super einfach zu implementieren und effizienter als JavaScript-basierte Lösungen. Diese einzige Zeile Code ermöglicht flüssiges Scrollen für die gesamte Seite ohne schwer zu wartende JavaScript-Funktionen.

Bessere Leistung

CSS-basiertes Smooth Scrolling wird nativ vom Browser gehandhabt und wird in allen Fällen JavaScript-Implementierungen übertreffen. Dies ist besonders wichtig für die Optimierung der Interaction to Next Paint (INP) Metrik, da es den Main-Thread des Browsers weniger belastet.

Browser-Kompatibilität

CSS Smooth Scrolling hat eine ziemlich tolle Browser-Unterstützung. Alte Browser, in denen Smooth Scrolling nicht unterstützt wird, fallen einfach auf den standardmäßigen direkten Sprung zum Anker zurück.

Einfache Anpassung

CSS lässt Sie das Scroll-Verhalten einfach anpassen. Zum Beispiel lässt Sie die scroll-margin-top Eigenschaft den oberen Abstand zum gescrollten Element einstellen:

h1, h2, h3 {scroll-margin-top: 5rem;}

Oder noch einfacher mit der '[url=https://developer.mozilla.org/en-US/docs/Web/CSS/:target]target[/url]' Pseudo-Klasse

:target {scroll-margin-top: 5rem;}

Vollständiges Beispiel:

Um diesen Code in Aktion zu sehen, klicken Sie einfach auf das Inhaltsverzeichnis oben auf dieser Seite. Sie werden ein schönes flüssiges Scrollen zum angeklickten Anker bemerken.

Hier ist ein vereinfachtes Beispiel zum Kopieren und Wiederverwenden

<html>

<head>
    <title>Smooth scroll to target</title>
    <style>
        html {
            scroll-behavior: smooth;
        }
        :target {
            scroll-margin-top: 5rem;
        }
        .largedivider {
            height: 1000px;
        }

    </style>
   
</head>

<body>
    <nav>
        <a href="#target">scroll to target</a>
    <nav>
    <div class="largedivider"> -- </div>
    <h2 id="target">scroll to me</h2>
    <div class="largedivider"> -- </div>
</body>

</html>