Connect with us


Relationship Marketing: A Comprehensive Guide



Relationship Marketing: A Comprehensive Guide

It’s no secret that successful marketing requires a good understanding of your customers. After all, you can’t create content or design campaigns that appeal to your target audience if you don’t know who they are. But what about going beyond just understanding who they are? What about building relationships with them?

In this comprehensive guide, we’ll discuss everything you need to know about relationship marketing: from understanding how it differs from the usual marketing, to measuring the success of your campaign.

  1. What is relationship marketing?
  2. Companies using relationship marketing
  3. The benefits of relationship marketing for businesses
  4. The benefits of relationship marketing for consumers
  5. Relationship marketing strategies and tools
  6. How to measure the success of your marketing campaign
  7. Some concerns about relationship marketing
  8. Key takeaway

What is relationship marketing?

Customer relationship marketing is a long-term strategy that cultivates closer relationships with customers to ensure their satisfaction and loyalty. Building strong relationships is the focus of this marketing strategy, not short-term wins or one-time sales transactions.

Customer Relationship Marketing Definition Quote Card

Usual marketing tactics aim to acquire leads and convert them into customers. Relationship marketing comes into play after those customers have made a purchase. This is when businesses work to establish a long-term relationship with the customer, in order to encourage repeat business.

By providing excellent customer service and creating a positive customer experience, businesses can increase the likelihood of a customer returning in the future.

Companies using relationship marketing

Almost all successful businesses use relationship marketing in one form or another. However, the most notable examples are those that have built their entire business model around it, such as these examples below.

Mercury Drug

Mercury Drug is the leading drugstore chain in the Philippines, and they understand customer loyalty very well as seen in their programs (they launched their Gamot Padala back in 1999). How Mercury Drug practices relationship marketing is seen in two remarkable initiatives: their exclusive Coupon Calendar for their loyal customers that was launched back in 1998, and the famous Suki (which translates to patron or regular customer) Card that was launched in 2000.

With the Suki Card, customers earn points for every purchase, which they can use as payment at Mercury Drug stores. Believe me when I say that everyone and their mother has a Suki Card.

Mercury Drug Suki Card

The program has been a massive success, as it not only increases customer loyalty, but also encourages them to recommend Mercury Drug to their friends and family.


Would you believe me if I had told you that there is a journal article (yes, an academic paper!) on Netflix’s relationship marketing? Netflix is a prime example of how relationship marketing can be used to create brand loyalty.

“This company shows a system capable of identifying the needs and habits of viewers and a continuous effort to make it easier for them to view their productions, together with a highly effective relationship marketing system at a low cost, based fundamentally on two-way communication through social networks, with an appropriate tone to generate the most virality.”

Simply put, Netflix created a system that focused on personalization (understanding their viewers) and easy engagement through social media. I mean…

The Protocol Netflix Relationship Marketing


Nike is one of the most successful companies in the world, and a large part of their success can be attributed to their relationship marketing strategy. Nike’s target market is athletes, and the company uses a variety of channels to reach them, including social media, sponsorships, and events.


They have also developed a strong brand identity (it’s virtually impossible to not recognize their logo and slogan), which further strengthens their relationships with consumers. Nike’s strategy has allowed the company to create a community of athletes who are loyal to the brand and its products. This loyalty has been a major driver of Nike’s growth and success.

Paralives Studio


I have to give a shout-out to this indie studio. Paralives is an up-and-coming dollhouse simulation that is set to compete with the Sims. Yes, that Sims from video game company giant, Electronic Arts.

Alex Massé, a video game developer, and his small team are the ones creating this game, and their Patreon has raised $39,628.57 to hire more people to work on the game.

Paralives Patreon

Perks include being part of their Discord community, getting named in the credits, being able to name “Townies” and pets, access to work in progress, access to the soundtrack upon game release, getting recreated in the game, and more.

As you can see, their patrons not only get to engage with the creators directly, but they become part of the process. The game becomes theirs. Guess how many patrons they have so far:

1649134367 206 Relationship Marketing A Comprehensive Guide

The benefits of relationship marketing for businesses

There are a number of benefits to businesses when it comes to relationship marketing. Here are some key points:

Increased customer loyalty and satisfaction

Customer loyalty is something that all businesses strive for. After all, it costs much less to keep an existing customer than it does to acquire a new one. According to Invesp, it costs as much as 5x more to acquire new customers than to retain them, while Bain & Company argues that a 5% increase in customer retention can increase your profits by as much as 25%.

Customer relationship marketing statistics quote card

That’s where relationship marketing comes in. Relationship marketing is all about creating customer loyalty through satisfied customers who are more likely to return in the future. By creating long-term relationships with customers, businesses can increase customer loyalty and customer lifetime value. In other words, happy customers mean repeat business. And that’s good for everyone involved.

Improved word-of-mouth marketing

Word-of-mouth marketing is one of the most powerful marketing tools available to businesses. When customers have a good relationship with a business, they are more likely to tell their friends and family about their positive experiences. This word-of-mouth marketing can be incredibly valuable, as it helps to create a good reputation for the business and can generate new customers.

Furthermore, customers who feel valued and appreciated are more likely to remain loyal to the business and continue to make purchases in the future. Therefore, creating a good relationship with customers is essential for businesses that want to improve their word-of-mouth marketing.

More engaged and vocal customers online

Engaged and vocal customers are vital for any business. Not only are they more likely to make repeat purchases, but they can also act as brand ambassadors, helping to spread the word about your products or services. In today’s digital age, this is more important than ever.

Edward Ferguson Apple Music

Social media and online review sites have given customers a powerful platform to share their opinions, and businesses that have a strong base of loyal customers are more likely to reap the benefits in terms of increased exposure and sales.

Less need for traditional advertising

Traditional advertising focuses on generating sales, which is important yet time-consuming and expensive—especially if the brand has no strategy to have loyal customers instead of one-time buyers.

A customer who feels a strong connection to a brand is less likely to switch to a competitor, even if that competitor is offering a lower price. In addition, happy customers are often willing to tell their friends and family about their positive experiences (AKA word-of-mouth advertising).

Transactional vs Relationship Marketing Table

Source: Meltwater

Higher conversion rates and return on investment (ROI)

One of the main benefits of relationship marketing is that it can lead to higher conversion rates. As we have tackled earlier, customers who have an established relationship with a brand are more likely to repeat their purchase. In addition, they are also more likely to recommend the brand to others. As a result, businesses that focus on relationship marketing can see a significant increase in their conversion rates.

Another key benefit of relationship marketing is that it can lead to a higher return on investment. This is because businesses are able to spend less money on acquiring new customers, and instead focus on nurturing existing relationships. As a result, they are able to see a greater ROI from their marketing efforts.

Improved brand reputation

Brand reputation is the estimation in which the brand is held by the general public. It is determined by the unique experiences and interactions that customers have had with the brand, as well as word-of-mouth reviews from friends and family.

One brand that infamously tried to save itself from reputation damage and failed is none other than Meta.

Facebook's Meta Rebrand Damaged Its Reputation, Study Finds

Source: Insider

A strong brand reputation is essential for any business that wants to be successful in the long-term. After all, customers are more likely to trust and recommend a brand that they perceive to be reliable and trustworthy. By building strong relationships with customers, businesses can create a favorable brand reputation that will result in improved sales and profitability.

These are just a few of the advantages that relationship marketing can bring to a business. Ultimately, it leads to more satisfied customers who are more likely to stick around and recommend your brand to others.

The benefits of relationship marketing for consumers

Relationship marketing can also bring a number of benefits to consumers. Here are some key points:

Improved customer service

In the past, businesses have relied on transactional marketing to keep customers happy. However, this approach is no longer enough. Today, customers expect more than just a good product or service. They want to feel valued and appreciated.

Since relationship marketing is customer-centered, this means that good excellent customer service is one of its tenets. Good customer service is essential for any business that wants to retain its customers and attract new ones. Satisfied customers are more likely to return in the future, and they may also recommend the business to their friends and family.

Here at SEO Hacker for example, we go above and beyond in serving our partners’ needs. Since we value them as partners in growth and not just as paying clients, we ensure that whatever concerns they may have are immediately addressed and that we don’t bill every single work we do for them. For us, that is what it means to do customer service.

More personalized experiences

In relationship marketing, you create personalized customer experiences that foster a sense of connection and loyalty. There are many ways to create personalized experiences, but some common methods include using customer data to customize messages and tailoring content to individual interests. This makes customers feel valued and understood.

Greater access to exclusive deals and promotions

One of the top benefits repeat customers can get from brands they are loyal to—aside from personalized attention and treatment—is early access to new products, freebies, and exclusive deals.

Human Heart Nature Relationship Marketing

Many companies offer loyalty programs and other perks to their best customers. For these reasons, customers who participate in relationship marketing can enjoy a number of benefits.

Ability to connect with other customers with similar interests

Lastly, customers benefit from relationship marketing because they get access to brand communities. This benefits them in a number of ways.

First, they are able to interact with other people who have similar interests. This can create a sense of belonging and community that is often lacking in other forms of marketing. Additionally, customers are able to learn more about the product or service from other community members. They can also provide feedback that can help the company improve its offering, which in turn gives them better products or services.

These are just a few of the advantages that relationship marketing can bring to consumers. Ultimately, it leads to more personalized experiences that cater specifically to their needs and desires.

Relationship marketing strategies and tools

Brands should focus on creating loyal customers. These customers should feel connected to the brand, and shouldn’t think twice about recommending it to friends or family. In order to achieve this, brands need to focus on creating a strong emotional connection with their customers.

Create valuable and relevant content

Creating valuable and relevant content is one of the best ways to build a relationship with your customers. By providing them with information that is valuable and relevant to their lives, you show that you understand their needs and are committed to helping them meet their goals.

Blog Writing 101 E-book

Download: Blog Writing 101: Everything You Need to Know [E-book]

In our case, we create free content and update our subscribers by email. Your valuable and relevant content can be anything from blog posts and articles to video tutorials and infographics. The important thing is that it provides the customer with something that they can use to improve their life or business.

In addition, your content should be updated regularly to ensure that it remains relevant. By producing quality content, you can build trust and credibility with your customers, leading to stronger relationships.

Create a brand community

According to the journal article I referenced earlier,

“In the field of relationship marketing, the brand community has become a decisive aspect that confers value on the organization, given the set of social interactions between the brand and its target audience, and among the customers who meet with a brand with which they feel pleased and identified, to the point of becoming prescribers of it.”

A brand community is a group of people who share a passionate interest in a brand. This can include employees, customers, and even fans. Brand communities can be created intentionally by businesses as a way to practice relationship marketing. This kind of community can provide a sense of belonging for customers and help to create loyalty and brand advocacy.

Nike Jordan Community

In order to do this, businesses need to create spaces where community members can interact with each other and the brand. They can take many different forms, from online forums and social media groups to in-person meetups and events. Businesses should also provide content that is relevant and engaging for brand community members. By creating a brand community, businesses can build strong relationships with their customers and create a loyal base of brand advocates.

Create customer loyalty programs

Starbucks Loyalty Program

Loyalty programs are another great way to keep customers engaged with your brand. By offering incentives such as points, discounts, or special access, you can encourage customers to stick with you and continue purchasing your products or services.

Use customer feedback for improvement

BeautyMNL Customer Feedback

The best way to create satisfied customers is by using their feedback to improve your products or services, and of course—your marketing strategies. Listening to what customers have to say allows you to provide them with the type of experiences they want and makes them more likely to return in the future.

Measure the success of your relationship marketing campaign

Like any other marketing strategy, it’s important to measure the success of your relationship marketing campaign. This can be done by looking at things such as customer loyalty rates, brand awareness, and social media engagement.

Relationship marketing is a great way to connect with customers and create loyal, satisfied customers. By using the strategies and tools listed above, you can implement a successful relationship marketing campaign that will benefit both your business and consumers alike!​

How to measure the success of your relationship marketing campaign

When it comes to relationship marketing, there are a few different ways to measure the success of your campaign. Here are a few key metrics to look at:

Track customer loyalty rates

In order to track the effectiveness of your relationship marketing tactics, you need to track customer loyalty rates before and after implementing them. This will give you a clear idea of whether or not your tactics are actually increasing customer loyalty.

There are a number of different ways to track loyalty rates, but one of the most effective is to survey your customers regularly. This can be done online, by phone, or in person. Make sure to ask the same questions each time so that you can track changes in customer loyalty over time.

Measure brand awareness

Brand awareness is the measure of how visible and recognizable a brand is to its target consumers. It’s important for businesses to measure brand awareness before and after implementing relationship marketing tactics, such as customer loyalty programs. By doing so, businesses can gauge the effectiveness of their efforts in terms of increasing brand exposure.

Brand awareness is typically measured through surveys or consumer research questions about a company’s products or services. The results of these surveys can provide valuable insights into how well consumers know and remember a brand, which can in turn help businesses make necessary adjustments to their relationship marketing strategies. In short, measuring brand awareness is an essential part of ensuring that relationship marketing tactics are successful in promoting a business’ products or services.

Monitor social media engagement

Monitoring social media engagement levels before and after relationship marketing can help you see if there was an increase in activity surrounding your brand on social media platforms. By tracking how many people are talking about your brand, and how often, you can get a sense of whether relationship marketing is having the desired effect. If you see a spike in social media activity after implementing relationship marketing techniques, it’s safe to say that your efforts are paying off. On the other hand, if engagement levels remain flat or even decline, it may be time to reassess your approach. In any case, monitoring social media engagement is a valuable way to gauge the success of your customer relationship marketing campaigns.

Additionally, monitoring social media engagement can help you identify any potential problems with your campaigns so you can make adjustments accordingly.

Compare sales/conversion rates

Your conversion rate is a measure of how successful your relationship marketing campaign was. To calculate your conversion rate, simply take the number of sales or conversions and divide it by the number of leads or inquiries you received. For example, if you generated 100 leads and had 10 sales, your conversion rate would be 10%. Comparing your conversion rate before and after your campaign can give you a good indication of whether or not your campaign was successful. If you see a significant increase in your conversion rate, it’s safe to say that your campaign was effective. However, if you don’t see much of a change, it may be time to reevaluate your strategy.

Some concerns about relationship marketing

In this section we quickly address two questions about this strategy.

Can businesses still use relationship marketing despite the pandemic?

In the wake of the pandemic, many businesses have been forced to reevaluate their marketing strategies. With in-person interactions being limited, the effectiveness of events and personal meetings is also limited. Even though the pandemic has forced many businesses to adopt a more digital approach, relationship marketing can still be effective. In fact, there are still plenty of ways to build and nurture relationships with clients and customers, even during a pandemic.

Some things you can do for your customers:

  • You can reach out via email or social media to keep in touch with your clients.
  • You can offer virtual consultations or webinars to provide valuable information and build trust.
  • You can be understanding and flexible with customers.
  • You can find ways to show genuine concern for their wellbeing.

By being creative and adaptable, businesses can build strong relationships with their customers that will last long after the pandemic is over.

State of SEO

Download: State of SEO in the Philippines 2022 [Report]

Remember, the goal is to create, maintain, and strengthen relationships with customers. This absolutely can be done online.

Can small businesses compete with big brands in relationship marketing?

Small businesses have long been at a disadvantage when it comes to marketing due to the lack of budget and human resources, but the rise of social media has leveled the playing field. Small businesses absolutely can compete with big brands in relationship marketing, and they might even have an edge.

The key is to focus on building genuine relationships with customers and followers—which entails connecting with customers on a personal level, something small businesses are often better at than big brands. Think of mom-and-pop and other local businesses whose owners and staff become your friends.

Big brands, because of their size and priorities, can come across as impersonal and even detached. Small businesses, on the other hand, are usually more nimble and adaptable. They can quickly create custom solutions for each customer, building strong relationships in the process. Go back to the Paralives example.

Some things you can do for your customers:

  • Empathizing with your customers and meeting them where they are.
  • Highlighting and engaging customers on social media.
  • Being authentic and transparent, two qualities that are often lacking in big brands.
  • Creating a community where you can engage with them.

When small businesses focus on relationship marketing, they can build the kind of loyalty and trust that big businesses desperately want.

Key takeaway

Relationship marketing is all about building trust and loyalty with your customers. By providing valuable content, being transparent, and engaging with your customers on a personal level, you can create long-lasting relationships that will benefit both you and your customers.

While the pandemic may present some challenges to businesses trying to use relationship marketing strategies, it’s not impossible. Small businesses can compete with big brands by using creative methods like social media contests or targeted ads. The most important thing is to be authentic and put the needs of your customers first.

Have you tried implementing any relationship marketing strategies? Let me know in the comments below!

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