How Vercel + Monogram help improve Google Core Web Vitals together

    Fixing Core Web Vitals on an enterprise Next.js site is engineering work: choosing how each route renders, controlling when third-party scripts load, and making sure the hero image and fonts do not arrive last. That is work Monogram does on Next.js and Vercel. When we rebuilt Newfront's ABD Portal in Next.js on Vercel, Largest Contentful Paint came in at 0.5 seconds on desktop, and its PageSpeed Insights scores sit in the high 90s to 100. How we scope this work is on our web performance page.

    What are Core Web Vitals?

    Optimizing for quality of user experience is key to the long-term success of any site on the web. Whether you‘re a business owner, marketer, or developer, Web Vitals can help you quantify the experience of your site and identify opportunities to improve.

    Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

    Core Web Vitals are three metrics measured from real visits: Largest Contentful Paint (LCP) for loading, Interaction to Next Paint (INP) for responsiveness, and Cumulative Layout Shift (CLS) for visual stability. Google's thresholds for a good experience are an LCP within 2.5 seconds, an INP of 200 milliseconds or less, and a CLS of 0.1 or less, measured at the 75th percentile of page loads. INP replaced First Input Delay as a Core Web Vital in 2024.

    Learn more about Core Web Vitals or test your website with PageSpeed Insights, which reports field data from real Chrome users alongside a Lighthouse lab test.

    Breaking down the Lighthouse score

    Lighthouse is the lab test behind PageSpeed Insights. It is good at finding problems, but as web.dev puts it, lab measurement "is not a substitute for field measurement." It scores four categories:

    🏎 Performance

    Measures lab metrics such as Largest Contentful Paint, Total Blocking Time and Cumulative Layout Shift. Together they show how quickly the main content appears, how long scripts block the page, and how much the layout shifts as it loads, all in a lab run rather than for real users.

    👓 Accessibility

    Legibility, ARIA attributes, alt text and properly marked-up content all matter. Lighthouse checks for common issues that may prevent people from accessing your content.

    👍 Best Practices

    This looks for everything from HTTPS usage to correct image aspect ratios. In other words, these aren‘t rules, but they‘re relatively new things that are good practice for every website to use. In other words, dotting the i‘s and crossing the t‘s of website design.

    🔎 SEO

    This part of the Lighthouse test checks basic best practices that keep your site discoverable to search engines.

    Why does all this matter?

    Search, mostly. Google treats Core Web Vitals as part of page experience, which it says "aligns with what our core ranking systems seek to reward," and it recommends that site owners achieve good Core Web Vitals. Good scores do not replace relevant content, but they are one of the signals Google asks for directly.

    Meet Vercel.

    Half the challenge of serving a fast website is to use a fast web host. That’s where Vercel comes in.

    Vercel is where we deploy and host many of our Next.js builds, including Newfront's ABD Portal and Kasada. It builds every branch from GitHub with its own preview URL and serves production from a global edge network, which leaves us free to focus on design and code.

    Monogram is a Vercel partner.

    Our Journey

    In 2021 we started this work with a client who is very special to us: LeVar Burton.

    Before

    This is what LeVar's website scores looked like before any optimizations:

    Not a bad starting point. Monogram does a lot of things right out of the box, such as hosting on the Vercel CDN, compressing HTML and CSS, and using a composable architecture.

    How to improve performance

    Monogram still wanted to bring LeVar's website into the green, because that's our culture here at Monogram. So let's break down how we improved the score:

    📸 Properly size and serve images

    If you can only do one thing to improve your website score, do this. The rules are simple:

    1. Never serve an image in a larger resolution than it needs
    2. Compress images to drastically reduce file size
    3. Always use an image CDN. On LeVar's site, Prismic compressed images automatically and served them through its CDN.

    💻 Assess your JavaScript

    Update everything you can. This one is simple. If you're using old versions of JavaScript and CSS libraries, update them. Newer versions typically shed the weight of legacy browsers and are better positioned to deliver you a better score.

    Remove what you don't need. As developers, it's easy to get caught in the "framework" mentality of bringing everything that worked in your previous website into your new one. In this case, LeVar's website was loading jQuery alongside Alpine.js, but we didn't need both, so we rewrote the little jQuery code we had into either Alpine or vanilla JavaScript, and shed jQuery altogether.

    🌎 Prefetch and Preconnect

    If you know you're going to be connecting to a certain domain multiple times (for example, your CMS or image CDN), let your browser know ahead of time. It is the same reason you take a list to the grocery store instead of making three trips for milk, bread and eggs. Learn more about preconnecting to required origins.

    🛑 Defer render-blocking scripts

    A good mindset to have when building fast websites is to constantly ask yourself: "does the user need this JavaScript as soon as the page loads?" Chances are, the answer is no. Defer it. Use the defer attribute to delay render-blocking scripts until the rest of the HTML is parsed and displayed to the user.

    🎨 Inline critical styles

    We understand deferring stylesheets can be a scary thought, but if you take the plunge, it works well.

    Basically, you need to create an inline stylesheet in the head of your document which contains only the styles needed to render content above the fold. Typically this includes navigation, the header, your hero, and some other general styles. The rest of your stylesheet can be deferred using an onload handler, meaning it will still be preloaded alongside the rest of your document, but the browser does not have to perform the heavy task of parsing it until after the page is visible. Learn more about how this works.

    How to improve your other scores

    Accessibility

    • Add a lang attribute to the html tag.
    • Add labels to all form tags (even if you visibly hide them)
    • Always use alt attributes on images with descriptive text. A good method of writing alt text is to imagine you're describing the image to someone over the phone.
    • Don't use pictures of text. Prefer embedded SVG if you'd like to maintain text composition in an image format.
    • Follow Google's recommendations

    Best Practices

    • Ensure links to cross-origin destinations are safe
    • Don't leave any errors in the browser console
    • Clean up after yourself when writing code
    • Use a good code linter (HTMLhint & eslint are a good pair)
    • Follow Google's recommendations.
    • Always keep improving your skillset.

    SEO

    The final result speaks for itself.

    That was 2021. Here is what the same work looks like on the enterprise sites we build now.

    How we approach Core Web Vitals on enterprise sites now

    • Rendering and delivery: We rebuilt Newfront's ABD Portal in Next.js on Vercel, replacing a self-managed server. First Contentful Paint is 0.2 seconds, Largest Contentful Paint is 0.5 seconds on desktop, and PageSpeed Insights scores fall in the high 90s to 100 across Performance, Accessibility, Best Practices and SEO.
    • Third-party scripts: On Kasada, audit-aware script loading and work on hero media keep marketing and analytics tools from degrading Core Web Vitals. On Lightcast, dozens of analytics scripts were making over 2000 requests at page load, and we used Partytown to reduce their impact while keeping the data the business needed.
    • Fonts and embeds: On a workflow mini-site for Vercel, optimizing fonts and embeds earned a perfect PageSpeed Insights score without dropping analytics or issue tracking.

    A limit worth stating: these are scores and measurements reported in individual case studies, not field data across every route of a large site. On an enterprise site, the useful first step is finding which templates fail for real visitors.