The Hollywood Gossip Passes Core Web Vitals: Here’s How You Can Too

As you’ve heard us talk about at length, Google is set to release its new pagespeed requirements, known as Core Web Vitals, as part of the Google Page Experience algorithm update.

Originally scheduled for sometime in May, we reported last week that the update is now delayed until June to give publishers enough time to prepare for its rollout.

A little extra time isn’t a bad thing given that fewer than 20% of websites are currently passing Core Web Vitals, and that percentage drops even lower if sites are running digital ads.

Core Web Vitals have set such a high bar that many publishers have questioned whether it’s even possible to hit these new requirements while running ads.

It’s a fair question, as it’s no secret that ads are slow, and tricks like lazy loading and deferred loading that help improve pagespeed now cause publishers to fail Cumulative Layout Shift (CLS).

But it can be done.

We can say this definitively, today, as we own and operate one of the first sites to pass Core Web Vitals while running Mediavine Ad Management.

The Hollywood Gossip is officially passing Core Web Vitals for both mobile and desktop using the exact same Mediavine Script Wrapper and full suite of ad placements as all Mediavine publishers.

Needless to say, passing Core Web Vitals is awesome if you can do it.

Not only will you see improved rankings from existing search results, you’ll be eligible to appear in previously AMP-only carousels as well. (We’re very excited to be able to AMP on THG.)

So how did our celebrity gossip blog pass with flying colors? We’re excited to break it down for you and help you do the same!

Optimizing Ads for Core Web Vitals

Before you can pass Core Web Vitals with ads, your site itself needs to pass — and debugging your website if it’s already failing from ads can be challenging. 

So let’s start at the beginning.

Your first step should be to turn on both of the Mediavine Optimize for PageSpeed settings as well as the Optimize Ads for CLS features.

This should get the Script Wrapper out the way of your Core Web Vitals.

Note: Mediavine and its scripts may still appear in some of the PageSpeed Insights results, and that’s okay! Mediavine ads are the fastest in the industry, but ads will be ads. They’re slow.

Remember, the reason we’re telling you this is that with Mediavine Ad Management, you can still pass. These settings will make your site as efficient as it gets while running ads.

Optimizing The Hollywood Gossip for Core Web Vitals

Now that ads are out of the way, let’s focus on your site: What can you do to balance pagespeed needs with the potential impact from layout shift? Glad you asked!

Below, we’ll take you through a step-by-step process of how we achieved passing grades for THG. A lot of these are things you’ve heard us discuss before that you can start doing today.

1. Lazy Load Images

Perhaps one of the easiest optimizations you can do is lazy loading of images. After ads and videos, images are often the biggest culprit when it comes to slower load times.

We used the lazysizes library on THG, but if you’re on WordPress, good news: Trellis does this right out the gate (using the same library), and there are are lots of plugin solutions for other themes.

2. Use Image Placeholders

Now that you’re lazy loading images, as we touched on earlier, there’s a chance for layout shift (CLS) as images load and move content around. You can solve for this by setting a placeholder where the image will load.

THG uses a CSS ratio hack to accomplish this; Trellis has this functionality built into its core, but it’s something you should confirm that your lazy loading script is handling for you.

3. Serve Next Gen Images

Lazy loaded images are great, but not every image can be lazy loaded; your logo and images appearing in the first screen view can’t utilize this tactic. For those, making sure you have solid image compression and are serving next gen images like WebP will be essential for pagespeed.

Of course, next gen images will also make your lazy loaded images much quicker as the user scrolls, which is an added benefit. With THG, we actually use the Cloudinary service to handle this, but if you’re on Trellis, our free Trellis Images service is included with your yearly API.

Again, there are third-party plugins built to handle this with other themes.

4. Switch to System / Web Safe Fonts 

We know that Google fonts and other custom typography may look beautiful, but it also means your website can’t show any text until that font loads.

That’s why Chrome and other browsers introduced font fallbacks, but unfortunately, while that fallback font is swapped with your Google Font, layout shift can still occur as a result.

The easiest solution? Skip the font fallback and the loading of custom fonts by using a system or web safe font. THG uses system fonts, but you can easily select other web safe fonts.

This can be accomplished via some quick CSS or right in the Trellis settings.

5. Remove Font Icons

This one is a little more theme and plugin dependent.

THG was using the Font Awesome icon library to handle menu and search icons. As was the case when loading the heading and body fonts, nothing could be displayed until these fonts loaded.

When they pop in, these icons can cause both pagespeed and/or layout shifts, depending on the fallback chosen. Since there’s no system version of font icons, we recommend switching over to SVGs.

THG did this, and we’ve done it with Trellis and our Grow Social plugin. Again, this will likely be more theme and plugin dependent and not typically handled by your optimization plugin.

6. Removing Blocking CSS / Load CSS Asynchronously

Stylesheets tell the browser how to make your website look, so it makes sense a site can’t load until stylesheets are downloaded. That’s why it’s considered “blocking” as it prevents a page from loading prior to this.

The solution? Asynchronously load CSS.

On THG, we use the loadCSS library. The catch? While waiting for the stylesheet to load asynchronously, there is a Flash of Unstyled Content (FOUC … yes, there’s an actual technical term and acronym).

That FOUC can cause (you guessed it) layout shift.

7. Serve Critical CSS

So how do you stop FOUC? First, you need to generate critical CSS, which are just the styles needed to render the first screen view of your content.

This critical CSS will be loaded directly inline with your HTML, not via an external stylesheet. Then you can safely async the rest of your stylesheets. 

For THG, we hand-generate these using the critical node module. Trellis does this automatically via our Trellis API (included in your yearly fee), and many plugins offer integrations with other APIs to do the same.

Bonus points for Trellis: It will also remove unused styles from your stylesheets, which will speed up your site even more. Because THG generates styles by hand and not via an API, this wasn’t doable (but hey, we’re still passing).

8. Remove as Much Third-party JavaScript as Possible

This is one everyone can and should handle, as JavaScript is one of the biggest causes of slow site speeds. Every piece of JavaScript you install, whether it’s a tracking pixel from Facebook or an influencer network, social media sharing tools, push notifications, recommended content, etc., are all slowing you down.

With THG, we ditched them all.

Right now, the only third-party JavaScript we run is from Mediavine. That’s a third party we trust. You can’t have lightning fast pagespeed and low CLS until you do.

If you really want to take this to the next level, consider axing even first-party JavaScript that’s served by plugins on your site. The more you reduce, the faster your site will load.

9. Lazy Load Comments

Here’s a somewhat surprising one: Comments powered by third-party JavaScript will slow down your site and ones that are built in (like WordPress) can create a lot of DOM elements, which also slows things down.

THG used Facebook and Disqus for its comments and moved both behind a Load Comments button. The good news for Trellis publishers is that comments are lazy loaded by default.

You can easily do this with a plugin for other themes on WordPress, as well.

10. Defer (or Async) JavaScript

You should add the “defer” attribute to all JavaScript on your page to make sure it’s loaded after the page loads. This or “async” needs to be on every external script tag on your page to prevent JavaScript from blocking or otherwise slowing down your page load.

THG uses a special script loader to handle this, and Trellis automatically does this for you, but if you run an optimization plugin, this should be an easy thing to configure.

Just be careful if there are certain scripts which depend on each other. Such as…

11. Ditch jQuery

This is a tough one, but loading jQuery and other JavaScript frameworks can potentially block other JavaScript from running, even if it’s deferred. This can cause the whole site to stop loading until jQuery is ready. 

With The Hollywood Gossip, we moved any JavaScript that was dependent on jQuery until after First Input Delay, and all JavaScript required for initial page load to non-jQuery.

For your WordPress site, we recommend instead you just pick a theme (have we mentioned Trellis?) and plugins (looking at you, Create and Grow Social) that don’t depend on jQuery.

How can you do all of these pagespeed tricks?

If all of that felt overwhelming, we understand, because it was for us too. That’s one of the reasons we built Trellis — and Mediavine in general — the way we have.

We know not everyone has a programer for a webmaster like The Hollywood Gossip does, which is why all of these tricks and best practices are built-in and done by default with Trellis and all Mediavine plugins.

We also recognize that people run themes and plugins not built by Mediavine.

In those situations, most of these techniques can still be accomplished via optimization plugins. If you’re nervous configuring these yourself, we recommend looking for a developer or agency that can help you.

But please remember, less is more. Only you can decide what to remove from your site. If you hire someone or use an optimization script or plugin, it can only do so much in the end.

The key to hitting Core Web Vitals and creating a great experience for readers is to run a script and plugin audit. Removing anything slowing down your site is a win on every front.

And, at the end of the day, this may come as a surprise to the three of you who read all the way to the end, but if you can’t hit Core Web Vitals and the new Page Experience requirements, don’t worry. It’s just one of many signals Google takes into account.

There’s lots of SEO you can do without any technical knowledge, and above all else, Google rewards sites with great original content.