Web Vitals patterns
A collection of common UX patterns optimized for Core Web Vitals. This collection includes patterns that are often tricky to implement without hurting your Core Web Vitals scores. You can use the code in these examples to help ensure your projects stay on the right track.
Banners and notices
Banners and notices are a common source of layout shifts. Inserting a banner into the DOM after the surrounding page has already been rendered pushes the page elements below it further down the page.
For more information, see Best practices for cookie notices. This banner slides-in from the bottom of the page without causing layout shifts. Modals can be used as an alternative to banner notices. This sticky footer banner does not cause layout shifts when it is inserted into the page.Animated footer
<div id="banner" class="banner">
<button id="close-button" class="close-button" aria-label="close" tabindex="0">✕</button>
<div>
<h1>Notice</h1>
Lorem ipsum dolor sit amet.
</div>
</div>
document.getElementById("close-button").onclick = () => {
document.getElementById("banner").style.display = "none";
}
body {
overscroll-behavior-y: none;
font-family: system-ui;
padding: 2em;
background-color: #f4f4f4;
}
.banner {
animation: slideIn 1000ms ease-in-out;
position: fixed;
left: 0;
bottom: 0;
right: 0;
padding: 1rem;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
@keyframes slideIn {
from {
transform: translateY(100vh);
}
to {
transform: translateY(0vh);
}
}
.close-button {
background: transparent;
border: none;
padding: 1em;
font-size: 1em;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
}
Modal
<div id="modal" class="modal">
<button id="close-button" class="close-button" aria-label="close" tabindex="0">✕</button>
<div>
<h1>Notice</h1>
Lorem ipsum dolor sit amet.
</div>
</div>
document.getElementById("close-button").onclick = () => {
document.getElementById("modal").style.display = "none";
}
body {
overscroll-behavior-y: none;
font-family: system-ui;
padding: 2em;
background-color: #f4f4f4;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
min-width: 66%;
transform: translate(-50%, -50%);
padding: 1em 2em 2em 2em;
background-color: white;
box-shadow: 0 0 15px rgba(0,0,0,0.2);
}
.close-button {
background: transparent;
border: none;
padding: 1em;
font-size: 1em;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
}
Sticky footer
<div id="banner" class="banner">
<button id="close-button" class="close-button" aria-label="close" tabindex="0">✕</button>
<div>
<h1>Notice</h1>
Lorem ipsum dolor sit amet.
</div>
</div>
document.getElementById("close-button").onclick = () => {
document.getElementById("banner").style.display = "none";
}
body {
font-family: system-ui;
padding: 2em;
overscroll-behavior-y: none;
background-color: #f4f4f4;
}
.banner {
position: fixed;
left: 0;
bottom: 0;
right: 0;
padding: 1rem;
background-color: white;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.close-button {
background: transparent;
border: none;
padding: 1em;
font-size: 1em;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
}