Connect with us


A Step-by-Step Strategy (Based on Updating 50+ Posts)



A Step-by-Step Strategy (Based on Updating 50+ Posts)

Content refreshing is one of the best ways to increase traffic of your existing content, and it’s also a great way to keep the information on your website fresh and up to date.

However, the content refreshing process isn’t always straightforward. For example, some people worry about tanking their organic traffic if they update the content (a valid concern). Other people find that it just doesn’t bring the dramatic traffic increase that some marketing experts promise.

Fortunately for you, I’ve been both of those people.

I’ve updated probably more than 50 blog posts in the past 12 months, and I’ve made a lot of mistakes. However, I’ve also seen outstanding results, such as content that drives 10 times more traffic and soars in rankings.

That said, I really wanted to know why some posts perform dramatically better post-update than others.

So I did a data study on what makes some content dramatically more successful post-update and why others continue to flounder. Using this data, I’ve come up with a content refreshing strategy that has significantly improved my content refreshing success rate. Today, I want to share that strategy with you.

Contrary to popular belief, not all blog posts are worth updating. This is one of the single most impactful realizations that has improved my content refreshing success rate. In fact, I only recommend prioritizing updates for old content that earned 20+ monthly visitors at peak performance.

In the data study mentioned above, 45% of the updated posts had fewer than 20 visitors per month pre-update. Unfortunately, this 45% of updated posts only contributed 15% of the total traffic increase (of a 96% total organic traffic increase).

That means blog posts that already had 20+ monthly visitors before the update contributed the majority of the total organic traffic increase.

My guess is posts with more traffic pre-update already rank for some keywords in positions #5–10. Therefore, it’s much easier to go from positions #5–10 to first than zero to first.

So what should you do with blog posts that have fewer than 20 monthly visitors?

Assuming these posts are targeting keywords that are valuable to your business or contain important thought leadership ideas, it’s definitely worth updating them. In addition, a smaller blog will generally have a lot more blog posts with fewer than 20 monthly visitors simply because it needs time to gain traction.

Therefore, it’s still worthwhile to update them, but prioritize posts with the most potential first.

How to update your blog posts

Once you know which posts to update, how do you actually update them? I’ve found that a lot of companies give freelance writers a process that looks like this:

  • Update old statistics, facts, quotes
  • Add additional paragraphs for keywords the posts are missing
  • Remove sections that are no longer relevant

However, I’ve found that the above strategy isn’t the best approach to refreshing content. It makes the content more up to date but doesn’t consider how the post is (or is not) fulfilling the search intent.

In other words, you have to ask why your content isn’t as useful as the posts ranking well on Google. (I’m willing to bet it’s not just because there’s an outdated statistic in the third paragraph.)

From the content refreshing research I’ve done, your post probably isn’t ranking because there is another post that:

  • Is more current.
  • Provides actionable advice (or more relevant details).
  • Offers an excellent user experience.
  • Is a better fit for the searcher’s intent.

To address these issues, here are the action steps you need to take while updating your content.

1. Update outdated information

I know I just said that refreshing content is much more than just updating outdated information—but it is a part of the process.

In addition, I’m talking about more than just updating old statistics and quotes. Often, you’ll have to update (or completely change) the examples to improve how they match the search intent.

For example, this is one of my most successful content refreshing examples ever. It was generating about 4,000 monthly visitors when I first updated it in 2019. At its peak performance, it generated about 20,000 monthly visitors.

When I started updating it, I realized that most of the examples in the post were outdated and many were TV productions. This was a problem for two reasons:

  1. TV commercials themselves aren’t really a great fit for someone searching “digital marketing campaigns.”
  2. Most of the people Googling this term don’t have the budget for a TV campaign.

Therefore, I replaced all 31 examples with 31 new examples of recent SEO, content marketing, YouTube, and podcasting successes.

Excerpt of blog post that shows one of the 31 examples


In retrospect, I wish I had focused on a specific campaign rather than the brand’s entire strategy. This is as the searcher’s intent is a digital marketing campaign, not a digital marketing strategy. I bet the post would have performed even better if I had done that. But we’ll get into searcher intent a little later.

Key Takeaway

Is the information you provide up to date with the current trends in your industry? This includes not only quotes and statistics but also examples that you use.

2. Add actionable advice/cut irrelevant detail

How often have you read a post that vaguely describes what you should do and lacks examples or the action steps needed to execute the advice?

On the other hand, have you ever read a post that has the answer to your question somewhere in it? But then there is so much unnecessary information that you can’t find what you want.

Both are equally problematic and, unfortunately, common in content marketing.

First, let’s discuss posts that lack depth. Unfortunately, there is no specific metric you can check to see if the content has depth. Though, there are a few signals that can clue you in, including:

  • Few to zero examples.
  • A significantly shorter word count than what’s ranking.
  • Generic tips with no actionable information.

You can also use content optimization tools like Clearscope, which shows the subheadings that commonly appear in other top-ranking posts. While I recommend that you take these keyword tools with a grain of salt (don’t try to sprinkle in all of the keywords), they can help you uncover topics you may have overlooked.

For example, if you’re writing a guide to “medical SEO,” the tool may show that the word “backlinking” is commonly used in other posts. Given that backlinking is a key element of SEO, this is a helpful insight because you’ll definitely want to create a section on that topic.

Beyond this, the best advice I can give you is to put yourself in your target audience’s shoes (ideally, you’ve already done extensive market research and talked to several customers).

Ask yourself: If they read this content, could they implement the advice given and see results?

To drive this home, let’s look at an example where the post lacked depth. This post, “13 Ways to Market Your Business Online,” is the very first post I ever updated. It was originally just 930 words long and drove between 30 and 50 monthly visits. The final product is 1,700 words. It now drives over 600 monthly visits.

Line graph of organic traffic

However, I didn’t just decide to make it longer to accomplish this. Instead, I added relevant, actionable advice to support my argument.

For example, in the excerpt below, you can see that I supported my argument (building a brand is important) with a quote from Google CEO Eric Schmidt. I also added an actionable tip to make the tip less vague.

Excerpt of blog post that includes quote and actionable tip

Everything highlighted was added or changed when updating the post.

That said, adding more depth isn’t always the best solution, as it can make content unnecessarily long-winded.

For example, let’s say you’re writing a post on “how to change a tire.” In this case, the reader really doesn’t want a 2,000-word guide—they just want to change their tire as quickly as possible!

So instead of writing about the mechanics of changing a tire and statistics on how many people know how to change tires, just give the reader the steps they need to change the tire.

While that may be a rather obvious case, I see this all the time when I update content (especially if it’s an ultimate guide). For example, here’s the table of contents of a post I’m preparing to update:

Table of contents

As you can see, the content is too long and repetitive. For one, it talks about the ROI of influencer marketing twice. Sure, it’s an ultimate guide. But even those reading an ultimate guide only want to consume the necessities to get them on their way.

Another example of how this content is too long-winded is in chapters 2 and 7, where both discuss tactics on reaching out to an influencer. Sure, they discuss slightly different tactics. But I’d rather read one concise section on the 80/20 of influencer outreach than several sections containing every possible way you could reach out to an influencer.

Key Takeaway

When you’re writing, include the 80/20 action steps your reader needs to know, along with examples (hypothetical or real) to prove your point. However, don’t write any more than that. The reader doesn’t necessarily need to know every single possible way to do something or the exact science behind every topic. Get to the point.

3. Improve the user experience

Google has always stressed the importance of optimizing for user experience. Much of this takes place at the site level (HTTPS, page speed, etc.). But there are things you can do to improve content on a post-by-post basis.

First, if your post is particularly long, consider adding a sticky table of contents to help the reader find exactly what they are looking for.

Excerpt of Ahrefs' link building blog post; clickable ToC on the left

Second, pay a designer to create attractive, branded graphics. This will go a long way in both keeping users on your page and establishing your blog as an authority.

Third, break up your paragraphs (ideally none longer than three to four sentences) and use bullets to keep the reader’s attention. Remember that most people are looking for fast answers and are, therefore, skimming. So contrary to popular belief, making your content skimmable will actually increase the time readers spend on your page.

As simple as these things may sound, they’re super effective in my experience.

Key Takeaway

Don’t discount the importance of a blog post that is clean and easy to read. Sometimes, long blog posts are too frustrating for users, so be sure to format your blog posts appropriately and hire a designer to help you.

4. Fulfill the searcher’s intent

Search intent is basically the reason behind the search. Does the searcher want to learn something or buy something? Are they looking for a detailed guide or skimmable listicle? Do they just want a quick answer or lots of knowledge?

If you fail to understand the answers to these questions, you’ll be at risk of misaligning your content with search intent. Consequently, it’ll be much harder (sometimes impossible) to rank the content.

This is quite a complex topic, as there are many ways you may misalign content with search intent. But here are three of the main ways I’ve noticed:

A. Post style is incorrect

Before you write your blog post, Google the main keyword to better understand what kind of blog post the reader wants.

For example, if you’re about to write a how-to guide for a term like “best CRM for small businesses,” you’re wasting your time because the searcher’s intent is clearly a simple list of tools:

Google SERP for "best crm for small business"

In this case, they don’t want to read a guide about it. They just want to see some solutions!

If you notice that your blog post is in the wrong format for that keyword, you’ll probably have to rewrite it altogether.

B. You have too much information irrelevant to the reader’s pain points

Another issue I often find when updating content is there are sections of content that just aren’t relevant to the reader’s pain points.

For example, a post on “content marketing KPIs” shouldn’t have a header with the words “what is content marketing.”

While that’s a rather extreme example, I often see subtler cases.

For example, I recently updated a post targeting the keyword “examples of storytelling marketing.” When I looked at the search results for the term, all of them were list posts that had introductions around 100–200 words. The post then dove into examples.

However, when I looked at the post I was updating, there were several sections before the “examples” section that totaled 1,800 words. In fact, here is what the post’s structure looked like:

  • What is storytelling?
  • Science behind storytelling
  • Why is storytelling important for marketing?
  • Five principles of storytelling 
    • Principle 1
    • Principle 2
    • Principle 3
    • Principle 4
    • Principle 5
  • (Finally!) Example 1

In this case, the searcher’s intent is a list of examples. So if the searcher has to scroll past 1,800 words to read what they want, they’ll likely leave. This behavior is a signal to Google that your content isn’t very good.

To update it, I cut that intro and added a few extra relevant examples (most of the other posts had 11–12, so I made the post fit that range). As of this writing (a few weeks after my updates), the post is ranking second for “examples of storytelling marketing.”

Here’s a screenshot of its traffic trajectory:

Line graph of organic traffic

C. You aren’t speaking at the reader’s knowledge level

Finally, there are plenty of blog posts that miss the search intent because they speak above or below the reader’s knowledge level. Hence, they’re deaf to the reader’s pain points and desires.

Let’s walk through an example.

Imagine you are selling a SaaS marketing tool to content marketing managers, and the keyword you’re targeting is “content marketing KPIs.”

Here’s an example of an introduction that is below their level:

Content marketing is a great way to increase your traffic and generate more leads for your business. In fact, anyone that performs a Google search is looking for blogs like yours to provide the answer to their questions. However, some content is more effective than others. Therefore, to make sure that your content is on track, you need to measure KPIs (key performance indicators).

This is inappropriate for two reasons:

  1. Content managers already understand the value of content marketing, so explaining that is redundant.
  2. Given that they are searching for KPIs, there’s no need to explain why they need KPIs. They were already convinced before they landed on your post.

In contrast, here’s a much better introduction for the very same keyword and scenario:

Tracking the performance of content marketing campaigns is tricky as the ROI often takes months or even years to realize. Therefore, most people measure their content strategy’s success by the traffic it’s generating.

While traffic can correlate with better business results, this isn’t always the case. For example, you may be driving traffic that isn’t ready to buy or from a parallel industry.

Therefore, traffic shouldn’t be your only measure of success. Instead, this post will detail which KPIs you should measure to ensure your content is driving an ROI and how to track them.

Notice the introduction above also speaks to a more experienced audience (content marketing managers). It touches on their pain points and relates to how they are (most likely) already tracking content marketing. Now, it’s probable they’ll keep reading.

However, the issue of speaking above or below an audience’s level doesn’t just apply to introductions. As you’re updating the content, ask yourself if each paragraph resonates with the audience’s pain points.

Recommended reading: Searcher Intent: The Overlooked ‘Ranking Factor’ You Should Be Optimizing For

Key Takeaway

First, Google your keyword before you start writing to make sure you are using the right blog post structure (how-to, listicle, etc.). Then ask yourself if each section within the post is relevant to the searcher’s pain points. Finally, ask yourself if the writing is at the searcher’s knowledge level.

5. Make final optimizations

Now that you’ve done the hard part of actually updating the blog post, make sure that you do these last few optimizations, as they can mean the difference between a 2X and 10X ROI.

First, take a look at your average click-through rate (CTR) in Google Search Console. According to a study done by Databox, a good organic CTR is 3%-5%. Therefore, if your post isn’t hitting that benchmark, consider updating your title tag and meta description.

If you really want to improve your organic CTR, you can also use a tool like ClickFlow to run A/B tests on your title tags and meta descriptions.

Another easy way to improve your refreshed content’s performance is by building internal links to it from other posts that are relevant and powerful (have plenty of external links from high-quality sources).

If you have the resources, building external links to your refreshed content is also a great strategy. While most outreach tactics are overused, here’s one to consider: offering to update the content for the people whom you’re reaching out to (instead of just offering a guest post).

Here’s an exact pitch I’ve used before with success:

Hi Sam,

I read your post about the best marketing agency tools for 2022 and just signed up for [Service] based on the post. So thanks for the rec!

However, I noticed that some of the recommendations are a little dated.

For example, you recommend [Tool A], but I’ve found that there are now cheaper tools like [Tool B] and [Tool C], which do essentially the same thing.

I also think that if you had 10 tools rather than 5 tools, the post might rank higher. Would you like me to update it for you for free? I’d also love to include a (non-promotional) section on our analytics tool, which a lot of agencies use.

If you don’t love my new version, no pressure to post it.


You don’t have to use this exact template. But hopefully, this can get you started. If you have examples of posts you’ve updated that later performed better, you may want to include that somewhere in the pitch.

Key Takeaway

Once you’ve updated your post, the last few optimizations include improving your title tag and meta description to drive more clicks, adding a few relevant internal links to the post, and building some external links to the post (if you have the resources).

Final thoughts

Content refreshing is still an underused tactic that a lot of blogs can benefit from. If you tried it before and it didn’t work, there could be another underlying issue, e.g., a poor user experience, an irrelevant section in the beginning, or a poor search intent match.

At the end of the day, not every blog post will perform better. Sometimes, search engines just don’t approve of certain posts. But if you make refreshing content a priority, follow the steps above, and add the updated content to your editorial calendar, you’ll have some posts that’ll take off post-update. This more than makes up for all of the time invested in posts that didn’t succeed.

Got questions? Ping me on Twitter.

Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address


No Algorithmic Actions For Site Reputation Abuse Yet




Looking up at an angle at the Google sign on the Head Office for Canada

Google’s Search Liaison, Danny Sullivan, has confirmed that the search engine hasn’t launched algorithmic actions targeting site reputation abuse.

This clarification addresses speculation within the SEO community that recent traffic drops are related to Google’s previously announced policy update.

Sullivan Says No Update Rolled Out

Lily Ray, an SEO professional, shared a screenshot on Twitter showing a significant drop in traffic for the website Groupon starting on May 6.

Ray suggested this was evidence that Google had begun rolling out algorithmic penalties for sites violating the company’s site reputation abuse policy.

However, Sullivan quickly stepped in, stating:

“We have not gone live with algorithmic actions on site reputation abuse. I well imagine when we do, we’ll be very clear about that. Publishers seeing changes and thinking it’s this — it’s not — results change all the time for all types of reasons.”

Sullivan added that when the actions are rolled out, they will only impact specific content, not entire websites.

This is an important distinction, as it suggests that even if a site has some pages manually penalized, the rest of the domain can rank normally.

Background On Google’s Site Reputation Abuse Policy

Earlier this year, Google announced a new policy to combat what it calls “site reputation abuse.”

This refers to situations where third-party content is published on authoritative domains with little oversight or involvement from the host site.

Examples include sponsored posts, advertorials, and partner content that is loosely related to or unrelated to a site’s primary purpose.

Under the new policy, Google is taking manual action against offending pages and plans to incorporate algorithmic detection.

What This Means For Publishers & SEOs

While Google hasn’t launched any algorithmic updates related to site reputation abuse, the manual actions have publishers on high alert.

Those who rely heavily on sponsored content or partner posts to drive traffic should audit their sites and remove any potential policy violations.

Sullivan’s confirmation that algorithmic changes haven’t occurred may provide temporary relief.

Additionally, his statements also serve as a reminder that significant ranking fluctuations can happen at any time due to various factors, not just specific policy rollouts.


Will Google’s future algorithmic actions impact entire websites or specific content?

When Google eventually rolls out algorithmic actions for site reputation abuse, these actions will target specific content rather than the entire website.

This means that if certain pages are found to be in violation, only those pages will be affected, allowing other parts of the site to continue ranking normally.

What should publishers and SEOs do in light of Google’s site reputation abuse policy?

Publishers and SEO professionals should audit their sites to identify and remove any content that may violate Google’s site reputation abuse policy.

This includes sponsored posts and partner content that doesn’t align with the site’s primary purpose. Taking these steps can mitigate the risk of manual penalties from Google.

What is the context of the recent traffic drops seen in the SEO community?

Google claims the recent drops for coupon sites aren’t linked to any algorithmic actions for site reputation abuse. Traffic fluctuations can occur for various reasons and aren’t always linked to a specific algorithm update.

Featured Image: sockagphoto/Shutterstock

Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address
Continue Reading


WP Rocket WordPress Plugin Now Optimizes LCP Core Web Vitals Metric




WP Rocket WordPress Plugin Now Optimizes LCP Core Web Vitals Metric

WP Rocket, the WordPress page speed performance plugin, just announced the release of a new version that will help publishers optimize for Largest Contentful Paint (LCP), an important Core Web Vitals metric.

Large Contentful Paint (LCP)

LCP is a page speed metric that’s designed to show how fast it takes for a user to perceive that the page is loaded and read to be interacted with. This metric measures the time it takes for the main content elements has fully loaded. This gives an idea of how usable a webpage is. The faster the LCP the better the user experience will be.

WP Rocket 3.16

WP Rocket is a caching plugin that helps a site perform faster. The way page caching generally works is that the website will store frequently accessed webpages and resources so that when someone visits the page the website doesn’t have to fetch the data from the database, which takes time, but instead will serve the webpage from the cache. This is super important when a website has a lot of site visitors because that can use a lot of server resources to fetch and build the same website over and over for every visitor.

The lastest version of WP Rocket (3.16) now contains Automatic LCP optimization, which means that it will optimize the on-page elements from the main content so that they are served first thereby raising the LCP scores and providing a better user experience.

Because it’s automatic there’s really nothing to fiddle around with or fine tune.

According to WP Rocket:

  • Automatic LCP Optimization: Optimizes the Largest Contentful Paint, a critical metric for website speed, automatically enhancing overall PageSpeed scores.
  • Smart Management of Above-the-Fold Images: Automatically detects and prioritizes critical above-the-fold images, loading them immediately to improve user experience and performance metrics.

All new functionalities operate seamlessly in the background, requiring no direct intervention from the user. Upon installing or upgrading to WP Rocket 3.16, these optimizations are automatically enabled, though customization options remain accessible for those who prefer manual control.”

Read the official announcement:

WP Rocket 3.16: Improving LCP and PageSpeed Score Automatically

Featured Image by Shutterstock/ICONMAN66

Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address
Continue Reading


Optimizing Interaction To Next Paint: A Step-By-Step Guide




Optimizing Interaction To Next Paint: A Step-By-Step Guide

This post was sponsored by DebugBear. The opinions expressed in this article are the sponsor’s own.

Keeping your website fast is important for user experience and SEO.

The Core Web Vitals initiative by Google provides a set of metrics to help you understand the performance of your website.

The three Core Web Vitals metrics are:

This post focuses on the recently introduced INP metric and what you can do to improve it.

How Is Interaction To Next Paint Measured?

INP measures how quickly your website responds to user interactions – for example, a click on a button. More specifically, INP measures the time in milliseconds between the user input and when the browser has finished processing the interaction and is ready to display any visual updates on the page.

Your website needs to complete this process in under 200 milliseconds to get a “Good” score. Values over half a second are considered “Poor”. A poor score in a Core Web Vitals metric can negatively impact your search engine rankings.

Google collects INP data from real visitors on your website as part of the Chrome User Experience Report (CrUX). This CrUX data is what ultimately impacts rankings.

Image created by DebugBear, May 2024

How To Identify & Fix Slow INP Times

The factors causing poor Interaction to Next Paint can often be complex and hard to figure out. Follow this step-by-step guide to understand slow interactions on your website and find potential optimizations.

1. How To Identify A Page With Slow INP Times

Different pages on your website will have different Core Web Vitals scores. So you need to identify a slow page and then investigate what’s causing it to be slow.

Using Google Search Console

One easy way to check your INP scores is using the Core Web Vitals section in Google Search Console, which reports data based on the Google CrUX data we’ve discussed before.

By default, page URLs are grouped into URL groups that cover many different pages. Be careful here – not all pages might have the problem that Google is reporting. Instead, click on each URL group to see if URL-specific data is available for some pages and then focus on those.

1716368164 358 Optimizing Interaction To Next Paint A Step By Step GuideScreenshot of Google Search Console, May 2024

Using A Real-User Monitoring (RUM) Service

Google won’t report Core Web Vitals data for every page on your website, and it only provides the raw measurements without any details to help you understand and fix the issues. To get that you can use a real-user monitoring tool like DebugBear.

Real-user monitoring works by installing an analytics snippet on your website that measures how fast your website is for your visitors. Once that’s set up you’ll have access to an Interaction to Next Paint dashboard like this:

1716368164 404 Optimizing Interaction To Next Paint A Step By Step GuideScreenshot of the DebugBear Interaction to Next Paint dashboard, May 2024

You can identify pages you want to optimize in the list, hover over the URL, and click the funnel icon to look at data for that specific page only.

1716368164 975 Optimizing Interaction To Next Paint A Step By Step GuideImage created by DebugBear, May 2024

2. Figure Out What Element Interactions Are Slow

Different visitors on the same page will have different experiences. A lot of that depends on how they interact with the page: if they click on a background image there’s no risk of the page suddenly freezing, but if they click on a button that starts some heavy processing then that’s more likely. And users in that second scenario will experience much higher INP.

To help with that, RUM data provides a breakdown of what page elements users interacted with and how big the interaction delays were.

1716368164 348 Optimizing Interaction To Next Paint A Step By Step GuideScreenshot of the DebugBear INP Elements view, May 2024

The screenshot above shows different INP interactions sorted by how frequent these user interactions are. To make optimizations as easy as possible you’ll want to focus on a slow interaction that affects many users.

In DebugBear, you can click on the page element to add it to your filters and continue your investigation.

3. Identify What INP Component Contributes The Most To Slow Interactions

INP delays can be broken down into three different components:

  • Input Delay: Background code that blocks the interaction from being processed.
  • Processing Time: The time spent directly handling the interaction.
  • Presentation Delay: Displaying the visual updates to the screen.

You should focus on which INP component is the biggest contributor to the slow INP time, and ensure you keep that in mind during your investigation.

1716368164 193 Optimizing Interaction To Next Paint A Step By Step GuideScreenshot of the DebugBear INP Components, May 2024

In this scenario, Processing Time is the biggest contributor to the slow INP time for the set of pages you’re looking at, but you need to dig deeper to understand why.

High processing time indicates that there is code intercepting the user interaction and running slow performing code. If instead you saw a high input delay, that suggests that there are background tasks blocking the interaction from being processed, for example due to third-party scripts.

4. Check Which Scripts Are Contributing To Slow INP

Sometimes browsers report specific scripts that are contributing to a slow interaction. Your website likely contains both first-party and third-party scripts, both of which can contribute to slow INP times.

A RUM tool like DebugBear can collect and surface this data. The main thing you want to look at is whether you mostly see your own website code or code from third parties.

1716368164 369 Optimizing Interaction To Next Paint A Step By Step GuideScreenshot of the INP Primary Script Domain Grouping in DebugBear, May 2024

Tip: When you see a script, or source code function marked as “N/A”, this can indicate that the script comes from a different origin and has additional security restrictions that prevent RUM tools from capturing more detailed information.

This now begins to tell a story: it appears that analytics/third-party scripts are the biggest contributors to the slow INP times.

5. Identify Why Those Scripts Are Running

At this point, you now have a strong suspicion that most of the INP delay, at least on the pages and elements you’re looking at, is due to third-party scripts. But how can you tell whether those are general tracking scripts or if they actually have a role in handling the interaction?

DebugBear offers a breakdown that helps see why the code is running, called the INP Primary Script Invoker breakdown. That’s a bit of a mouthful – multiple different scripts can be involved in slowing down an interaction, and here you just see the biggest contributor. The “Invoker” is just a value that the browser reports about what caused this code to run.

1716368165 263 Optimizing Interaction To Next Paint A Step By Step GuideScreenshot of the INP Primary Script Invoker Grouping in DebugBear, May 2024

The following invoker names are examples of page-wide event handlers:

  • onclick
  • onmousedown
  • onpointerup

You can see those a lot in the screenshot above, which tells you that the analytics script is tracking clicks anywhere on the page.

In contrast, if you saw invoker names like these that would indicate event handlers for a specific element on the page:

  • .load_more.onclick
  • #logo.onclick

6. Review Specific Page Views

A lot of the data you’ve seen so far is aggregated. It’s now time to look at the individual INP events, to form a definitive conclusion about what’s causing slow INP in this example.

Real user monitoring tools like DebugBear generally offer a way to review specific user experiences. For example, you can see what browser they used, how big their screen is, and what element led to the slowest interaction.

1716368165 545 Optimizing Interaction To Next Paint A Step By Step GuideScreenshot of a Page View in DebugBear Real User Monitoring, May 2024

As mentioned before, multiple scripts can contribute to overall slow INP. The INP Scripts section shows you the scripts that were run during the INP interaction:

1716368165 981 Optimizing Interaction To Next Paint A Step By Step GuideScreenshot of the DebugBear INP script breakdown, May 2024

You can review each of these scripts in more detail to understand why they run and what’s causing them to take longer to finish.

7. Use The DevTools Profiler For More Information

Real user monitoring tools have access to a lot of data, but for performance and security reasons they can access nowhere near all the available data. That’s why it’s a good idea to also use Chrome DevTools to measure your page performance.

To debug INP in DevTools you can measure how the browser processes one of the slow interactions you’ve identified before. DevTools then shows you exactly how the browser is spending its time handling the interaction.

1716368165 526 Optimizing Interaction To Next Paint A Step By Step GuideScreenshot of a performance profile in Chrome DevTools, May 2024

How You Might Resolve This Issue

In this example, you or your development team could resolve this issue by:

  • Working with the third-party script provider to optimize their script.
  • Removing the script if it is not essential to the website, or finding an alternative provider.
  • Adjusting how your own code interacts with the script

How To Investigate High Input Delay

In the previous example most of the INP time was spent running code in response to the interaction. But often the browser is already busy running other code when a user interaction happens. When investigating the INP components you’ll then see a high input delay value.

This can happen for various reasons, for example:

  • The user interacted with the website while it was still loading.
  • A scheduled task is running on the page, for example an ongoing animation.
  • The page is loading and rendering new content.

To understand what’s happening, you can review the invoker name and the INP scripts section of individual user experiences.

1716368165 86 Optimizing Interaction To Next Paint A Step By Step GuideScreenshot of the INP Component breakdown within DebugBear, May 2024

In this screenshot, you can see that a timer is running code that coincides with the start of a user interaction.

The script can be opened to reveal the exact code that is run:

1716368165 114 Optimizing Interaction To Next Paint A Step By Step GuideScreenshot of INP script details in DebugBear, May 2024

The source code shown in the previous screenshot comes from a third-party user tracking script that is running on the page.

At this stage, you and your development team can continue with the INP workflow presented earlier in this article. For example, debugging with browser DevTools or contacting the third-party provider for support.

How To Investigate High Presentation Delay

Presentation delay tends to be more difficult to debug than input delay or processing time. Often it’s caused by browser behavior rather than a specific script. But as before, you still start by identifying a specific page and a specific interaction.

You can see an example interaction with high presentation delay here:

1716368165 665 Optimizing Interaction To Next Paint A Step By Step GuideScreenshot of the an interaction with high presentation delay, May 2024

You see that this happens when the user enters text into a form field. In this example, many visitors pasted large amounts of text that the browser had to process.

Here the fix was to delay the processing, show a “Waiting…” message to the user, and then complete the processing later on. You can see how the INP score improves from May 3:

1716368165 845 Optimizing Interaction To Next Paint A Step By Step GuideScreenshot of an Interaction to Next Paint timeline in DebugBear, May 2024

Get The Data You Need To Improve Interaction To Next Paint

Setting up real user monitoring helps you understand how users experience your website and what you can do to improve it. Try DebugBear now by signing up for a free 14-day trial.

1716368165 494 Optimizing Interaction To Next Paint A Step By Step GuideScreenshot of the DebugBear Core Web Vitals dashboard, May 2024

Google’s CrUX data is aggregated over a 28-day period, which means that it’ll take a while before you notice a regression. With real-user monitoring you can see the impact of website changes right away and get alerted automatically when there’s a big change.

DebugBear monitors lab data, CrUX data, and real user data. That way you have all the data you need to optimize your Core Web Vitals in one place.

This article has been sponsored by DebugBear, and the views presented herein represent the sponsor’s perspective.

Ready to start optimizing your website? Sign up for DebugBear and get the data you need to deliver great user experiences.

Image Credits

Featured Image: Image by Used with permission.

Source link

Keep an eye on what we are doing
Be the first to get latest updates and exclusive content straight to your email inbox.
We promise not to spam you. You can unsubscribe at any time.
Invalid email address
Continue Reading