As its name implies, viewability means that your ads are seen by readers, giving advertisers the performance they need to pay a premium for your inventory.

We’ve touched on this topic approximately 700 times (here’s a good guide to ad viewability), but today, we’re excited to talk not just viewability, but specific viewability goals.

For the first time ever!

That’s right, with the goal of helping publishers better monitor and improve viewability, we’re launching our first new health check in years: the Content Viewability health checks.

Much like their In-Content Ad health check cousins, the Content Viewability Health Checks come as a pair: Mobile and Desktop, each with their own goals.

Content Viewability vs. Site-Wide Viewability

Mediavine prides itself on high viewability scores, with our sticky sidebar and adhesion units playing a major role.

Both the sticky sidebar and adhesion units “stick” with users as they scroll through a page, nearly guaranteeing highly-viewable ads.

That’s a good thing, right?

Absolutely, but the downside is that these sticky units significantly skew site-wide viewability scores to appear better than they truly are.

How do we accurately measure viewability where publishers can most move the needle? With Mediavine’s new Content Viewability Health Check.

By measuring viewability from in-content units, recipe cards and feeds, while no longer factoring in adhesion or sticky sidebar ads, Content Viewability offers the most accurate gauge.

Introducing Content Viewability Goals

During this initial launch, we’re starting with ambitious goals for content viewability. Here’s what percentage you need to Go For Teal on mobile and desktop:

Mobile

• Teal: ≥ 65%
• Green: ≥ 60%
• Yellow: ≥ 50%
• Red: < 50%

Desktop

• Teal: ≥ 70%
• Green: ≥ 65%
• Yellow: ≥ 55%
• Red: < 55%

Yes, we know these are ambitious numbers. More than a few publishers who were well-optimized / all teal prior to these new health checks may suddenly see green dots ruining their perfect record.

But that’s a good thing.

Your website is more than just five data points. The more health checks we add, the easier it is to paint the most accurate picture of your site’s performance.

Even if your scores aren’t what you want to see this instant, these new health checks are a tool to help improve earning potential. So how do you do that?

Glad you asked!

How to Improve Content Viewability

First, you may have noticed that these new health checks launched shortly after Mediavine’s latest viewability solution – InView.

That’s no coincidence. By far and away the easiest way to boost viewability across the board is to enable InView on both Desktop and Mobile.

Within a few days, publishers see an 8.22% improvement on their mobile health checks and 6.57% on desktop, on average, after switching on InView.

This alone is likely enough to move a lot of you from green to teal, just by pressing one button. But remember, not all viewability improvements are just a click away.

In order to absolutely optimize your site for viewability and the revenue that comes with it, we recommend a deep dive into how users consume your content.

For instance, if users on your recipe blog often skip your content and head right to the recipe, make sure you run a recipe card like Create and use our recommended recipe ad optimizations.

That’s just one of many examples and solutions, but you get the idea. We have lots of great tips for improving page speed, content performance and beyond in our viewability help article.

(Health) Check Yourself Before You Wreck Yourself

Again, if you see a dip in scores that you’re not happy with, remember that we’re not trying to make life difficult with these health checks. This is a good thing.

Viewability truly is one of the best measurable indicators of how well your ads will perform for advertisers, and it’s important to be as accurate as possible.

Adding this health check is meant to give you more insights into your site’s performance, so that you can position yourself for short- and long-term success.

Mediavine publishers already lead the pack in viewability. Thanks to these health checks and new technology like InView, our publishers will set the bar even higher.

The post Content Viewability Health Check: Simple Goals For Maximizing Revenue appeared first on Mediavine.

The much-anticipated (or at least much-talked-about) Google Page Experience algorithm is officially in effect as of Wednesday, June 16.

What do we know (and still not know) about the Page Experience algorithm change? Let’s break down all things Core Web Vitals.

First, it’s finally live.

According to Google Search Central, “the page experience update is now slowly rolling out,” and “Top Stories will begin using this new signal by Thursday.”

As previously stated, “it will be complete by the end of August 2021.”

Bottom line: This just went into effect and is a gradual process. No matter how much work you’ve put in to pass Core Web Vitals, you may not see much of a change immediately.

More likely, you won’t see significant changes until later this summer.

The good thing is that your hard work isn’t for naught; It will eventually pay off, and you still have time before the update is entirely in effect.

Another important thing to note is that right now, the update is only rolling out on mobile.

If you check out Google Search Console, you may have a new Page Experience page that will indicate how your website is faring on mobile.

With that said, how much does desktop matter?

While mobile is always the priority, you should absolutely optimize for both. During Google I/O, the company made it clear that it will be bringing Page Experience to desktop next.

We’ve also learned, per that same I/O discussion, that Google will be using what it calls RUM (Real User Metrics) or CruX (Chrome Reader User Experience).

Translation: The pagespeed scores reported by real users as they browse your site, found in PageSpeed Insights under origin or field summary, are the only numbers that matter.

But let’s get to the important stuff …

How Are Mediavine Publishers Doing with Core Web Vitals?

If you’re not familiar with Core Web Vitals, Google established three “pagespeed” metrics that publishers must hit in order to pass:

• Largest Contentful Paint (LCP)
• First Input Delay (FID)
• Cumulative Layout Shift (CLS)

While running ads, CLS has been the hardest of the three for our publishers to pass — until Mediavine released the industry’s first Optimize Ads for CLS in March.

(ASIDE: If you’re not running Optimize Ads for CLS, or haven’t turned on Optimize Ads for Page Speed mode on mobile and desktop, please do it now.)

With the release of Optimize Ads for CLS, it’s possible to pass all three of Google’s Core Web Vitals — and pass Page Experience — while running Mediavine ads.

We’re excited to announce that more than 1,500 Mediavine publishers are passing Core Web Vitals on mobile — far more than any other ad management company.

Once more for those in the back: 1,500 Mediavine publishers’ mobile sites are passing LCP, FID and CLS on their origin per CruX, the same values that Google will use for Page Experience.

The end of summer is looking bright for these publishers. But what if you’re not passing yet?

We’ll say it again, there’s still plenty of time. The Page Experience algorithm is now in effect, but you have until August until it’s fully rolled out.

But How Do I Pass Core Web Vitals, Eric?

Since you asked, I’ll show you!

Here’s a full explanation of how The Hollywood Gossip is passing Core Web Vitals. It’s not short, but if you’re up for the challenge, it shouldn’t be overwhelming.

If you’re feeling adventurous and are technically capable, the explanation linked above is a guide on how we got The Hollywood Gossip and Food Fanatic to pass on both Desktop and Mobile.

These two sites, which Mediavine owns and operates, are not running WordPress let alone our secret weapon, Trellis (more on that coming soon), but everything we did there is possible on WordPress, and as we said, both are passing on Desktop and Mobile with flying colors.

Plus, as I said at the beginning of the post, the rollout is slow. So you’ve got a little time. But we recommend getting to work ASAP.

The post Mediavine Core Web Vitals Update: What You Need to Know appeared first on Mediavine.

Typography, the study of fonts and the way letters are designed has long been pivotal in providing readers with easy reading experiences. 

(Okay, yes, I am a typography nerd.)

Best practices for choosing fonts for your website

I always recommend hiring a designer if you can afford one, even if just for your logo. If you’re in a situation where you have to choose a font, here are the most basic categories of fonts to choose from:  

A quick crash course on typefaces 

• Serif — Latin for the word “foot,” these fonts have “feet.” These are great for headlines or body text and logos, too. With higher screen quality these days, you don’t have to worry as much about these appearing pixelated when used at smaller sizes. Examples: Georgia, Times, Courier, Garamond. 
• Sans Serif — These fonts tend to be more modern looking, as they don’t have the “feet” of serifs. (“Sans” means without!) They’re great for most uses online, from logos (hello, look at ours!) to headlines to body text. Examples: Arial, Tahoma, Verdana 
• Script — Cursive, handwriting, whatever you want to call them. Examples: Brush Script, Comic Sans. 
• Display — These fonts are everything else, pretty much. They’re the fun ones that don’t fit into the other categories, but they can be great for logos. Scripts can also fall into this category as they can sometimes be less readable. Use with caution but know that there are usually some fun ones in this area! 

Choose a combination of fonts

When designing your website or brand, it’s a good idea to stick to only a few fonts. For example, at Mediavine, our brand consists of two fonts (a serif and a sans serif), which we use on everything we make. We will pull out other fonts for emphasis only on special occasions, such as a social post or an event logo. 

Utilizing the different weights of your typeface is a good way to provide variety without overdoing it. Weights are the various thicknesses available within a typeface, such as thin, light, Roman, bold, extra bold, etc. 

Keep accessibility top of mind

Back in the letterpress days, typesetters chose individual typefaces and letters and manually spaced them out to best suit the reader and the final output. Now, we can code these choices right into our websites, but many of the same best practices still abide. 

Website accessibility is a big talking point these days, and for good reason: What’s the point of publishing all that wonderful content if a percentage of readers can’t see it? 

For people with any kind of visual impairments, making sure all the text on your site is readable and legible is a huge part of being a good internet citizen. Here are a few tips: 

• Body copy should have a line height and font size set to a comfortable level for all readers. (Bonus: This is great for RPM and above the fold SEO too!) 
• Hyperlinks especially should at least be underlined and in a text color that is accessible, like blue. The idea is that a user should easily be able to tell when text provides a hyperlink. (Check out six ways to make your site more accessible for some examples!)
• Any font you are using should have contrast against the background. Fonts with thin lines and narrow details can be hard to read, so you might opt for a thicker weight. For example, Raleway is a font commonly used for body copy, but some of the thinner weights can be hard to read at smaller body copy sizes.   
• When it comes to text colors, avoid using solid black (#000000). Solid black is the absence of light, so it stops light emitting from the screen and puts strain on the eyes as they adapt. Instead, opt for a dark gray such as #444444. 
• Page titles and headings should be distinct from the body copy so they stand out for ease of reading. 
• Though it may be tempting to adjust the fonts used in your site’s navigational features (like the navigation, sidebar and footer) to keep the focus on your content, keep in mind those areas should have fonts clear enough for a reader to find, read and click. 

Pagespeed is paramount

Unfortunately for designers who could nerd out about fonts for hours, fonts aren’t always the best for pagespeed. And what do users, search engines and social media sites all care about?

Pagespeed. 

Alas, fonts are an area of your brand that you may end up compromising for the sake of speed.

But you do have a few options when it comes to this compromise:

1. Stick to web-safe fonts 

Web-safe fonts are the fastest option because the browser and website aren’t loading any extra files. This can be accomplished via some quick CSS or, if you’re using Trellis, in the Trellis settings.

This is the method we use on our owned-and-operated site, The Hollywood Gossip, which we mention in our case study on how The Hollywood Gossip passed Core Web Vitals.

2. Self-host fonts

With this approach, you can load the fonts into your theme directly, but there is a chance for some slowdown. Chrome and other browsers introduced font fallbacks, but when that fallback font is swapped with your Google Font, cumulative layout shift can occur.

No bueno. 

3. Configure the CSS ‘font-display’ instruction 

This method is a bit more technical, so I’m going to let our Product team take this one: 

4. Install a third-party font 

You can install a font through a service like Google Fonts or Adobe Fonts, but it also means your website can’t show any text until that font loads, so do so at your own risk of not passing Core Web Vitals.

This is definitely our least favorite option. 

But what about my branding? 

Believe me, it hurts my designer soul that some of my favorite fonts aren’t available as web-safe fonts. And it begs the question, why would Google provide web fonts and then ding us for using them? 

But I have faith that the industry will catch up and give us more choices — eventually. In fact, there are new browser capabilities in development that will provide more options to balance performance and font selection. 

My favorite part of being a designer is coming up with creative solutions to difficult problems, so I say there’s still a way you can maintain a branded look without compromising speed: 

Incorporate the non-web-safe font of your choice into your logo or any images you have on your website while still using a web-safe font for text.

Use your favorite design tool to make branded images with the fonts of your choosing, all while keeping your site speed-focused with web-safe fonts. 

And don’t fret — much to any designer’s chagrin, probably no one but you will notice that you make changes to your typefaces. Web-safe fonts are so ubiquitous, most people won’t think twice about seeing them. 

The post How to Choose Fonts for Site Speed and Accessibility appeared first on Mediavine.

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.

The post The Hollywood Gossip Passes Core Web Vitals: Here’s How You Can Too appeared first on Mediavine.

Cutting down on unnecessary plugins not only helps with site speed and performance, but it can also make identifying bugs and conflicts much easier.

Getting started with a plugin audit can feel daunting, especially if you have a lot of plugins. But this post will help you break it down and make it manageable. Let’s get started.

The most important thing to ask yourself when performing a plugin audit is “What do I really need?” In other words, what value does each plugin provide to you and your site?

Here is the process our Support Engineers follow when we audit plugins:

Inactive Plugins

First, note how many plugins you have and how many are inactive. If you have inactive plugins, decide whether they are needed.

Generally anything that’s inactive is not being used and therefore no longer needed. Unless the plugin was recently deactivated as part of a troubleshooting process and that process is not complete, you should feel comfortable removing your inactive plugins.

List the Active plugins

List all of your active plugins and take note of the following for each.

Are any plugins out of date?

Keeping your plugins up to date is a way to prevent vulnerabilities and keep your site safe. If you have plugins that are out-of-date, you may not be using them. Determine if they are important enough to update or whether you may no longer need them.

Note the must-use plugins

On the Plugins page you can find your Active, Most-Used, Inactive and other categories of plugins. Note your “Must-Use” plugins if you have any. You likely won’t be able to remove any of the Must-Use plugins:

Note the plugin descriptions

Next, note what each plugin does. You can read the description of each plugin on your Plugins page to figure out what each one does for you. Determine how much value each plugin brings to you and your site.

For example, our Grow Social Pro plugin is a social sharing plugin.

More than one plugin for the same thing?

Keep an eye out for plugins that are performing the same tasks. For instance, if you have two caching plugins, are you using both of these plugins and do they work well together? Any time you have more than one plugin performing the same task, you have a good candidate for slimming down your plugin list, which is something we recommend when getting your site ready for Trellis before installing Trellis.

If you find two or more plugins performing the same tasks, decide which of those plugins are the best supported and which you like to use the most.

Are your plugins still supported?

If your plugins haven’t been tested for the most recent WordPress Core Updates, your plugins might not be well supported. That means they might be more susceptible to vulnerabilities, and you may not be able to get support if something goes wrong.

To find out if your plugins are well supported, check out the WordPress Plugin Repository. You can see the latest version of WordPress that the plugin has been tested with under the Plugin Description.

Here’s an example for our own WordPress plugin, Create:

If the plugin you are using has not been tested with the version of WordPress you are running, and has not been tested with the last couple of major releases before the one you are currently running, (for instance if you are running 5.6 and the plugin has not been tested since 5.0) you may want to consider using a better-supported plugin.

Once you evaluate the value of your plugins and their effectiveness, you can slim down your plugin list to run a faster and more streamlined site.

Plugin audit spreadsheet

The Mediavine team put together a plugin audit spreadsheet as a Google Sheets template for publishers:

As you follow along with the steps of this post and enter in all the details of your plugins, the spreadsheet will automatically flag any plugins with the color red if:

• a plugin is marked as “inactive,”
• it detects any plugins that have the same purpose,
• you write “don’t know” for the plugin purpose,
• the plugin was last updated before year 2020,
• the working WordPress version is older than 5.0.0.

Use it as a checklist to help you decide what plugins to delete and which ones to investigate further.

The post How To Do A Plugin Self Audit: The Mediavine Way appeared first on Mediavine.

The slow rollout of the Google Page Experience update we expected in May has now been pushed back to mid-June, according to the Google Search Central Blog.

Since late last year, we’ve been preparing for the Page Experience update, ensuing that publishers and website owners are prepared to meet Google’s latest and greatest metrics.

Just last week, we published a comprehensive Core Web Vitals checklist for bloggers. Please read this as all of the guidance still applies; now you just have a little more time to prepare.

According to Google, the new Page Experience signals — which include Core Web Vitals — will factor into ranking systems beginning in mid-June 2021.

Moreover, the company says Core Web Vitals “won’t play its full role as part of those systems until the end of August.”

Why the two-and-a-half-month ramp-up period? Google likens this to adding flavoring to food you’re preparing gradually, rather than all at once. In other words, a gradual rollout allows the company to monitor the new Page Experience for any unexpected or unintended issues.

Google says its adjusted rollout schedule was made in part to give publishers more time to make changes with Page Experience in mind. While we can all breathe a little easier thanks to the new timeline, we encourage you to prepare for the rollout as soon as possible, particularly if you need Google to re-crawl your pages.

What Does the Page Experience Update Entail?

As we’ve discussed at length, the Page Experience update will consider several aspects of site performance that are already ranking factors but will now be under this new, rebranded umbrella — mobile-friendliness, safe browsing, HTTPS and making sure there are no intrusive interstitials.

The big change is that it will also include the three Core Web Vitals metrics:

1. Largest Contentful Paint (LCP)
2. First Input Delay (FID)
3. Cumulative Layout Shift (CLS)

Google Chrome’s updating of CLS measurements will also be reflected in the Page Experience update. Again, please see the links above for more on all of these metrics.

Beyond Core Web Vitals and their importance regarding pagespeed, as part of this update, AMP formatting is no longer required for posts to appear in previously AMP-only / Top Stories carousels.

This means not only will a better Page Experience help you improve search results across the board, but passing scores open up the possibility of appearing in areas previously off limits.

It’s a tremendous opportunity, although as we mentioned during our Core Web Vitals Facebook Live last week, Page Experience remains one of many factors that Google takes into account.

Writing great content should always come first. Without that, none of this matters.

On our end, Mediavine will do its part to keep you updated, solve for potential problems and make our products, themes and scripts the fastest, most lightweight and most efficient on the web.

The post Google Page Experience Update: Rollout Delayed Until Mid-June appeared first on Mediavine.

The much-discussed Google Page Experience update is set to hit next month (May 2021) and with it comes several new requirements, including the elusive Core Web Vitals.

Google’s Core Web Vitals are three new Page Experience requirements, all of which are crucial for publishers’ pagespeed and SEO performance. How crucial?

Not only will they help you improve search results across the board, but passing scores open up the possibility of appearing in previously AMP-only carousels. This is big.

What are Page Experience requirements and how do Core Web Vitals fit in?

Page Experience, overall, is a rebranding of sorts; Google has combined existing requirements with the new Core Web Vitals metrics that are all about pagespeed.

All of this is illustrated in the Page Experience chart below.

Let’s break down each component, along with what you need to do to set yourself up for success!

Mobile Friendly

Ten years ago, making your site as mobile friendly as possible was a novel concept. In 2021, with a vast majority of readers using phones and tablets, it’s the new standard.

Google took its old ranking signal from 2015 (not quite a decade ago, but close) and packaged it as part of Page Experience. How is your site holding up?

If you have a responsive theme that does things like remove the sidebar and you’re using a mobile-friendly font size, you’re probably passing.

To make sure, put your homepage and a few of your articles to the Google Mobile-Friendly Test. There’s also the “Mobile Usability” section of Google Search Console that will make you aware of any errors your website might have.

Safe Browsing

Safe Browsing is another rebranding of a set of existing requirements, and in this case it signals that your website hasn’t been hacked and isn’t hosting malware. 

To keep your site safe, make sure you keep your WordPress or CMS software and plugins updated. In general, be mindful of what you install.

Whether it’s a plugin or a piece of third-party JavaScript, such as an influencer badge, any of those things can lead to your site failing the Safe Browsing signal.

How do you know if you’re failing? The Security Issues Report will notify you and you’ll be able to fix any issues, although chances are good that if you’re careful with your plugins and scripts, you won’t need to worry about this one.

HTTPS

We’ve been pushing sites for years to go secure with SSL, and so has Google. 

Having a secure site (with a valid TLS certificate and a url beginning with https://) has been a ranking factor with Google since 2014. 

Yes, you read that right — it’s a seven-year-old algorithm getting a new name.

If somehow you’re not running TLS (or what you may have seen previously labeled as SSL), make sure you start from now on. It’s incredibly easy to tell, because Chrome will display a symbol in the search bar that visually informs a reader whether your site is “safe”, “not secure”, or even “dangerous”. Mediavine ads are SSL compatible so no worries there.

When you go to your site and look in the address bar, does it begin with https://? If so, you’re good to go with this one. Just make sure your website is also redirecting traffic requested with http:// to https:// and you’ll be fine. Your host should be able to help with this.

No Intrusive Interstitials

Publishers are likely familiar with this one; Google banned mobile interstitials back in 2016 on the basis that these experiences make web content less accessible.

That somewhat vague language has been debated over the years, but the basic guidance is this: no pop-ups covering the content when a user arrives on a page from a Google search result — unless it’s for legal reasons such as a cookie consent or the Mediavine CMP.

This signal is simply being renamed “No Intrusive Interstitials”. The same rules still apply as Google itself linked to the original guidance in its announcement.

No Intrusive Interstitials still applies to mobile, even if it’s not in the name. This is nothing new from 2016. To pass, either ditch pop-ups entirely or only run them on desktop or for users arriving from sources other than Google Search. 

Core Web Vitals: The Big Three

Finally, we come to Core Web Vitals, the new ranking signals and those representing actual changes. Google’s emphasis on pagespeed isn’t new, of course.

Google has been stressing the importance of pagespeed since 2010, so Core Web Vitals are just the latest, most specific iteration of this decades-long push.

The biggest change in May 2021 is that instead of vague requirements (faster is better!), there are now actual metrics to measure your website’s performance.

These are the Core Web Vitals, and they are a critical part of Page Experience.

For the first time, you can actually check your scores in Google Search Console and see if you’re “passing” these new requirements. 

Initially, these may seem hard to hit, but we’re okay with that. At least there are clear goals, and a challenge beats vagueness or uncertainty any day.

Without further ado, let’s get to know your Core Web Vitals and three favorite new acronyms.

Largest Contentful Paint (LCP)

Largest Contentful Paint, or LCP, is the time it takes for the largest object in your first screenview (whether it’s a block of text or image) to load.

Whatever that largest element is, your goal is to make sure it loads in under 2.5 seconds. 

How do you optimize for LCP? Well, it’s going to take some effort on the pagespeed front, but it’s also something you can use to your advantage.

In addition to the regular pagespeed advice Mediavine espouses, make sure you’re running a web safe or a system font, and if you can, make the largest element text instead of an image. You’ll be passing LCP in no time at all.

Also, make sure you’re running both our Optimize for Mobile and Desktop PageSpeed options in your Mediavine Dashboard. That will get the ads out of the way while your largest element is being “painted” (loading) and help you achieve optimal scores.

Please see our guide on how to optimize for LCP for more tips and advice.

First Input Delay (FID)

First Input Delay, or FID, is a pagespeed metric measuring the time it takes a website to respond after a user’s first input — whether that’s clicking on a link, button, scroll, etc. 

In effect, it’s a measurement of the interactivity of your site. 

The best way to keep your site responding quickly to its readers is to reduce the JavaScript running on site or limit things tying up the main thread.

What the heck does that mean? Glad you asked. 

Running fewer scripts overall, being mindful of what every script loads and making sure everything is deferred whenever possible is the key to success.

Running settings like Optimize Ads for PageSpeed for both Desktop and Mobile will help with FID from ads, but you’ll also need to have well-optimized plugins and a theme (have you met Trellis?) or a well-configured optimization plugin.

As always, reducing the sheer number of plugins and third-party scripts and monitoring those you do run is the best way to optimize for FID. 

Keep your site light and fast!

Cumulative Layout Shift (CLS)

Finally, the big one — even if they’re all big. The yin to pagespeed’s yang, Cumulative Layout Shift (CLS) may be both the most important and the most challenging. 

As publishers have done everything they can optimize for pagespeed through lazy loading, deferring JavaScript from loading, running font fallbacks and other speed tricks, they often cause pages to shift as these elements are loaded.

That’s where Google’s new metric comes into effect. CLS measures how much a page shifts when the site first loads and as the user scrolls.

How can you optimize for Cumulative Layout Shift? 

Step one is properly using placeholders to, well, hold the space needed as new images and other elements are loaded onto the page.

Generally, this will be handled by whatever you’re using to lazy load your images, font, etc. In other words, it’s typically the responsibility of the plugin or theme (hey, another chance to plug Trellis!) that is optimizing your website for speed.

Once you’ve solved Cumulative Layout Shift for the page itself comes step two. Yes, there’s another culprit out there regarding CLS issues: ads. 

Ads can cause layout shifts if they’re lazy loaded or if the size isn’t known until the ad wins an auction or even when they refresh if a user stays on long enough.

The good news is if you’re a Mediavine Ad Management customer, we have a solution — just enable Optimize Ads for CLS in your Dashboard.

We’ll load a placeholder to hold that spot for the largest ad and make sure any potential refreshes don’t cause CLS either.

We’ve Got This — Together

While many Google tools are confusingly titled (looking at you, FLoC), Core Web Vitals are what their name implies. These are the new vital signs of a website’s core Page Experience.

These requirements may not be simple to hit out of the gate, but that’s what differentiates those who get there eventually. If optimizing pagespeed were easy, everyone would do it.

Bookmark this page and its related resources for step-by-step guidance on how to own Core Web Vitals on your end. On our end, we will always have your back.

Behind the scenes, Mediavine will do its part to solve for potential problems and make our products, themes and scripts the lightest, fastest and most efficient on the market.

The post Core Web Vitals: Google Page Experience Checklist For Bloggers appeared first on Mediavine.

Pagespeed is always top of mind at Mediavine, but with this Google change on the horizon, it should be a priority for everyone.

To that end, we’re here to break down all of Google’s pagespeed ranking signals — old and new.

Today we’re tackling Largest Contentful Paint, one of Google’s three Core Web Vitals that determine Page Experience.

What is Largest Contentful Paint?

Largest Contentful Paint (LCP) is word salad, that’s for sure.

It’s defined as how long the largest piece of content in the first screen view of a web page takes to “draw” and is measured in seconds.

Let’s try that again in more human terms.

As we often say, pagespeed is the highest priority but it’s also a relatively subjective term.

How do you determine if a page is fast?

In Google’s opinion (and Mediavine’s), what matters is that a site feels fast for the user, not a pagespeed score.

Google has always measured pagespeed based on how fast a page loads in the initial screen view on a mobile phone or whatever is showing in your desktop browser before you begin to scroll.

First impressions are everything, as the saying goes, but LCP represents a change from how this has traditionally been assessed.

Previously, Google measured pagespeed by how long the First Contentful Paint (FCP), or the first piece of content, took to render.

However, they later concluded that this wasn’t the most useful. As a user, do you only want part of the first screen view to render?

No, and therefore Google adjusted accordingly.

Now, LCP measures how long it takes for the biggest element in that screen — measured by its height in pixels — to load. In practical terms, if you have a big logo or large photo in the first screen view, that’s most likely going to be the largest element.

If you have a wall of text, then it’s going to be that. Google’s goal with LCP is to measure whatever your users are most likely going to notice first as a page is loading. Whatever will feel like the page is ready for them.

How Do You Measure LCP?

Luckily, unlike Cumulative Layout Shift, measuring LCP is fairly simple. No Chrome extensions are required; just the handy PageSpeed Insights tool and potentially a little bit of Google Search Console.

When you run a particular webpage through PageSpeed Insights, there will be a section called “Lab Data.”

Lab Data is what PageSpeed Insights detects when running on your site and performing a simulation of a user viewing your page.

Note: You’ll want to run PageSpeed Insights on individual blog posts or pages, not just your homepage!

As you go through your top posts (we suggest you start with those), you’ll likely see varying LCP scores. You’ll also want to check both tabs — mobile and desktop — because those results will also differ.

Both have the same goal, though: making sure your Largest Contentful Paint (object) renders within 2.5 seconds.

You’ll also want to check the Origin Summary which shows how your overall domain is performing for LCP in the real world.

How long does it take the average reader browsing your website with Chrome to see your LCP? This is how you find out.

Even better: If you’re browsing a page with enough traffic, such as your homepage, you might also see Field Data which shows you how that particular page is doing with real world traffic!

This real world usage, as reported by Field Data and Origin Summary, will also appear in Google Search Console and is the best representation of what Google will use in its ranking algorithm.

It’s important to use PageSpeed Insights Lab Data to help you debug given that it’s using real-time information. Keep in mind though that Origin Summary and Field Data are only showing you a 30-day average.

In other words, immediate actions may take time to show results.

It’s also important to note that you can use Chrome Developer Tools and Lighthouse, the tool which powers PageSpeed Insights, in order to measure the same lab results.

How Do You Optimize For LCP?

Knowing how to measure your Largest Contentful Paint is great, but what do you do about it if you’re not already perfect?

(As much as we love you, most likely, you’re not.)

You’ll probably see a fair number of posts failing in Google Search Console and/or by playing around with PageSpeed Insights.

How do you fix this?

First, we will refer you to all previous Mediavine pagespeed resources and advice because there’s lots of generally helpful guidance there.

More specifically, we recommend a third-party JavaScript and plugin audit to see what’s slowing your site down and how badly.

You’ll also need a well-optimized theme (say, Trellis by Mediavine), plus optimized plugins (or a theme that does it for you … have we introduced you to this Trellis thing everyone’s been talking about?).

Beyond the usual speed tricks, mastering LCP has a much less technical, easier component that any publisher can take on: Change your post formatting.

Pagespeed tips vary widely in terms of how complex they are and how technical you need to get, but optimizing for LCP is pretty simple.

Assuming your theme is well-designed, your content is going to be what impacts LCP most and no one knows that better than you.

Remember what LCP is measuring: How long does your largest piece of content take to load. How can you speed that up?

Optimizing LCP with Content

You guessed it: Improving the time it takes your largest piece of content to load can be as easy as changing up that content!

The most effective strategy for optimizing for LCP is very similar to our Above the Fold SEO advice — lead with text.

If your first screen view of content on a phone is all text, which therefore pushes the first image below the fold, that’s going to mean lightning-fast load times for users — and passing LCP scores to follow.

As for how much text you need to accomplish this, we generally say that 3-4 paragraphs of text should have you covered.

If you’re following our advice — using shorter sentences and paragraphs (e.g. pressing the Enter key early and often), increasing font size and line height to optimize for accessibility — it shouldn’t take more than that.

We love it when SEO, accessibility and pagespeed come together!

System / Web Safe Fonts

One important caveat to all this: Before your text can display, you still have to wait for whatever font you’re using to load.

While faster than an image for sure, it still won’t be instantaneous if you’re using something like Google Fonts.

This is why with Trellis, we recommend that publishers stick to System fonts and Web Safe fonts whenever possible.

If you’re running System fonts, a well optimized theme, start with text and push images down, you’ll pass LCP with flying colors.

Mastering LCP, along with its fellow metrics CLS and FID, will place you among the elite percentage of publishers passing Core Web Vitals.

You can do this, and we’re here to help every step of the way. Together, we can be excited for — and not scared of — the May Page Experience algorithm.

The post Largest Contentful Paint: Optimizing for LCP appeared first on Mediavine.

This change in Google’s calculation methods for these all-important pagespeed metrics is so subtle you could easily miss it.

As of February 17, 2021, instead of using “less than” as a boundary for web page scores, Google is using “less than or equal to.”

While we’re talking about fractions of a second here, this entire exercise is about fractions of seconds and every little bit helps.

Google says this tiny adjustment can result in publishers seeing changes from red to yellow or yellow to green indicators.

Here’s the official wording, which we’ll translate below.

“The metrics defining the boundaries for LCP, FID, CLS, which used to be < (less than), are now defined as <= (less than or equal to). Therefore you might see a change in statuses (for the better) in this report.”

Basically, instead of being flagged as “Needs Improvement” if you’re right on the number, Google now gives you the green light.

Here are the boundaries:

If Google loves one thing in this world, it’s acronyms. If it loves two things, it’s acronyms and performance metrics.

Core Web Vitals, integrated into Lighthouse 6 in mid-2020, delivers on both fronts! They are comprised of three important metrics:

• Largest Contentful Paint (LCP): A measure of load performance, or whether your largest content load happens within 2.5 seconds.
• First Input Delay (FID): A measure of interactivity; when a user taps on something, the web browser should respond as close to instantly as possible, defined as within 100 milliseconds.
• Cumulative Layout Shift (CLS): You know this when you see it. CLS is a measure of visual stability, or the idea that items within the browser window shouldn’t move around while a page loads. The ideal score is defined by Google as 0.1 or lower.

These figures have been the targets all along, but now that “equal or less than” puts you in the green, at least you have the extra millisecond(s).

In other words, scores of 2.5 for LCP, 100 ms for PID and 0.1 for CLS all qualify as good now, thanks to this change.

Before, you needed 2.49, 99 and 0.099 respectively. Again, that’s not as significant as it seems given the speeds we’re talking about.

We wouldn’t be surprised if some of you see more green based on this subtle shift when reporting updates in a few days.

Behind the scenes, Mediavine is working to ensure that all of our products help publishers attain and maintain optimal scores.

Trellis, Create and Grow are optimized for LCP, FID and CLS alike, while Mediavine ads are already optimized for LCP and FID; we’re currently testing a CLS solution that we hope to release soon!

Please see the above links for even more details on Web Vitals and check out our additional pagespeed resources.

You’ve heard us talk about pagespeed a time or 300 because these scores impact rankings, user experience and earning potential.

Faster sites are better sites. One nanosecond at a time.

The post Google Announces Core Web Vitals Change: Less (Than) is More appeared first on Mediavine.

This week, Google announced the rollout date for these new ranking signals. We can expect them to take effect starting in May 2021.

As their name implies, Google Page Experience signals measure how readers interact with a web page, in order to gauge (and reward) the relative quality of user experiences across the web.

We’ve known these changes were coming for some time, and still have another six months to go. Below, we’ll talk about what publishers can expect and what you can do to prepare.

What is Google Page Experience?

Page Experience involves numerous existing, relatively obvious ranking signals like mobile-friendliness, HTTPS, safe browsing and a lack of intrusive interstitials on a given website.

Important Note: Mediavine recently announced the return of mobile interstitials. Rest assured, these new ad units will pass Google’s strict guidelines (and could earn you additional revenue)!

Page Experience will combine the above factors with Core Web Vitals.

These much-discussed vital signs are basically the old PageSpeed Insights such as the First Input Delay, a retooled Largest Contentful Paint (LCP) and the new Cumulative Layout Shift (CLS).

Google Search Console already uses these metrics, which are also now incorporated into Lighthouse 6 and PageSpeed Insights.

TL;DR/too many acronyms and fake-sounding words — Core Web Vitals are the new pagespeed metrics Google wants us all to hit.

We encourage publishers to check out this article Mediavine’s Director of Product Jordan Cauley wrote about Core Web Vitals to learn what all of these mean — and how to optimize for them — in detail.

Our CEO Eric Hochberger also recently published this helpful guide to solving for Cumulative Layout Shift (CLS) specifically.

Visual Indicators Will Highlight Page Experience

Google’s blog post regarding the release of Page Experience contains an interesting and telling section on how the success of publishers at these metrics will be communicated on screen:

[Providing information] about the quality of a web page’s experience can be helpful to users in choosing the search result that they want to visit.

On results, the snippet or image preview helps provide topical context for users to know what information a page can provide.

Visual indicators on the results are another way to do the same, and we are working on one that identifies pages that have met all of the page experience criteria. We plan to test this soon and [if successful], it will launch in May 2021 and we’ll share more details [in the coming months].

Google’s goal has always been to provide users with quality content they are searching for, and this indicates how important Page Experience is becoming. If your user experience is deemed top-notch, Google will let readers know with more visual cues.

How Much Will Page Experience Influence Rankings?

Only Google can truly answer that, but we’re confident in saying: a lot.

If you’re a Mediavine publisher, or tuned in to the web publishing world at all, you know that site speed has been an important ranking factor for years and is only becoming more critical.

Google using Page Experience as a ranking factor that is more heavily weighted than ever is as safe a bet as you’ll find.

In a previous blog post, Google even said that Page Experience is more important for Search when ranking pages with similar content.

For a company whose explanations of products can be opaque, to put it nicely, this is pretty straightforward. Look for Page Experience to be as influential as we’ve predicted and then some.

What About AMP Pages?

Until now, the only way to be eligible for Google’s Top Stories carousel was to be a Google News publisher and run AMP pages.

You’ll still need to be a Google News publisher to qualify come May 2021, but Page Experience guidelines will take the place of AMP pages, which marks a significant change in the overall calculus.

While Google says AMP remains an easy and cost-effective path to great page experiences, our recommendation is to make Page Experience a priority across your entire site, not just AMP.

AMP is, in essence, a second version of your pages. Our philosophy is to solve for Page Experience site-wide, maintaining full control of your site and only maintaining one version of it.

It not only makes for a better experience for publishers and users alike, but because you (and Mediavine) will have greater control over monetization, revenues should increase as well.

The long and short of it: Solve for Page Experience and you won’t need AMP.

Gearing Up For the Requirements

If you’re a reader of the Mediavine blog, chances are good that your site is already mobile-friendly, secure and free of invasive, obnoxious advertising.

And perhaps you’ve heard us champion the virtues of pagespeed once, maybe even two or three times.

We will make certain that our Script Wrapper is optimized for these new Web Vitals goals, along with our plugins Create and Grow.

Oh, and it should go without saying that Trellis will help you hit the Web Vital scores you need.

We’ll be monitoring any further developments and passing along any new details, but remember, changes impacting site speed and improving the web are something we’re prepared for and advocate for.

Page Experience is no different, and we’ve got this together.

The post Google Page Experience Signals: Coming May 2021 appeared first on Mediavine.