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.
- As recently reported, the Google Page Experience algorithm update has been delayed until June.
- Fewer than 20% of all websites on the internet are currently passing Core Web Vitals, and that percentage drops for websites running ads.
- As of today, The Hollywood Gossip, one of our owned and operated sites, is passing Core Web Vitals for mobile and desktop, using the exact same Mediavine script wrapper as all ± 7800 Mediavine publishers.
- Enabling Optimize Ads for Mobile PageSpeed, Optimize Ads for Desktop PageSpeed and Optimize Ads for CLS in your Mediavine Dashboard are the first step to making your site as efficient as possible while running ads.
- Balancing pagespeed needs and the potential impact of layout shift proved crucial to The Hollywood Gossip’s success in passing Core Web Vitals.
- Below, we outline the 11 steps taken to achieve passing CWV scores, all of which you can begin doing today.
- Optimized themes and plugins, like Trellis, Create and Grow Social or Grow Social Pro are recommended.
- Optimization plugins can help, but if you do not feel confident managing some of the more advanced configurations yourself, you may need the assistance of a developer or agency.
- If you do not hit Core Web Vitals and the new Page Experience requirements, don’t worry.
- Above all else, focus on strong SEO — always — because Google rewards websites with good, original content.
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).
With THG, we ditched them all.
9. Lazy Load Comments
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.
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
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.
Subscribe for Updates
Stay up to date with the latest from Mediavine
Call me a typography nerd, but choosing brand fonts is always my favorite part of the design process. Typography, the study of fonts and the way letters are designed has …