How Vercel + Monogram help improve Google Core Web Vitals together

What is 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.

Learn more about Google Core Web Vitals or test your website using the free tool.

Breaking down the score

🏎 Performance

Audits for metrics like first paint and time to interactive to determine lag. This basically means that users across various different devices, browsers, and network situations should be able to load your website within a second or two— flat.

👓 Accessibility

In an ever-diverse world with over 640,000 people connecting to the internet for the first time every single day [source], accessibility is key. Legibility, aria-tags, alt tags, and properly marked content is paramount. Google checks for common issues that may prevent users 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

The buzz word that companies spend billions of dollars on every year, but still somehow remains a black box for most. This aspect of the Lighthouse test checks for best practices to ensure your site is discoverable to search engines.

Why does all this matter?

In one word— SEO. Starting May 2021, your Core Web Vitals score will become a ranking factor in Google searchresults. That means that poorly-scoring websites will slide down Google search results while high-performing websites will rise up above their competition.

Monogram likes to partner with clients, and as subject matter experts in the state of the web, we cannot simply let our clients get left behind, so we’re raising awareness to the importance of this issue and helping spread our knowledge of how we improve our scores.

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 the heart of Monogram’s devOps, deployments, and hosting. Vercel combines the best developer experience with an obsessive focus on end-user performance. In other words, Vercel lets Monogram worry about design and code, and handles the rest. It auto-deploys our code from GitHub across various branches, sets proper environment variables, and builds websites and web apps across multiple frameworks such as Next.js, Gatsby.js, Nuxt.js, Jekyll, and more.

Monogram is proud to be a partner with Vercel, and we look forward to improving the web, one fast website and web app at a time.

Our Journey

Monogram has started the migration of all legacy websites to an updated tech stack that achieves green scores across the board, but we wanted to start off with a client who is very special to us— LeVar Burton.

Before

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

Embarrassing? Not so much— since this is still way better than most other websites out there. In comparison, Pelotongets a 0/100 in performance and The Home Depot gets a measly 13/100. This is because Monogram does a lot of things right out-of-the-box, such as hosting on Vercel CDN, compressing HTML & CSS, and using a Composable-architecture approach.

How to improve performance

Despite scoring better than most websites out there, Monogram wanted to bring LeVar's website into the green— because that's our culture here at Monogram. So let's break down some tips about how we improved our score:

📸 Properly size and serve images

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

Never serve an image in a larger resolution than it needs
Compress images to drastically reduce file size
Always use a CDN. Monogram uses Prismic, which automatically compresses images and serves them through a 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), then you should let your browser know that. An example is that if you're going to the grocery store to buy milk, bread, and eggs— it probably is wiser for you to take a list beforehand and get all three items at once instead of making three trips for three items. Learn more about reconnecting 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, we promise it will work 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 `unload` 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 `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.