Connect with us


5 HTTP Security Headers You Need To Know For SEO



5 HTTP Security Headers You Need To Know For SEO

Security headers are easily overlooked in website audits.

While some may say that website security is not an SEO-related concern, it does become SEO-related when a site becomes hacked and search traffic dwindles to zero.

Security headers should be a top concern of everyone who publishes anything on the Internet.

The good news is that they are relatively simple to configure and will help keep your website and its visitors safe.

in this column, you’ll learn what security headers are and how they work as well as the top 5 security headers, how to implement them, which WordPress plugins you can use for setting security headers, and more.

Let’s get started!

What Are Security Headers?

Security headers are directives browsers must follow that are passed along through the HTTP header response.

An HTTP header is a response by a web server to a browser that is trying to access a web page.

The header response communicates things such as when the web page does not exist (400 response header).

Or that it’s okay to download a font from Google but not to trust any other data outside of the website’s domain.

In that example, the part that tells the browser that it’s okay to download Google fonts but not trust any files originating elsewhere other than the website itself is a security directive.

A security directive like that will block a browser from downloading malicious files from another website.

Security headers introduce restrictions and instructions that prevent unintended security events.

Why Use Security Headers?

Automated bot software are constantly probing and testing websites for security weaknesses.

These vulnerabilities can be introduced by the content management system, by the JavaScript library used to add functionality, and for security weaknesses introduced by a plugin or a theme.

Websites that use security headers are said to be hardened against security threats.

While a website can get along without using security headers by keeping its components up to date and using security plugins, doing so needlessly exposes the website and the site visitors to security risks.

For example, security plugins can’t stop ad injections that rob a site owner of ad revenue.

Perhaps the best reason to use security headers is because they are relatively easy to implement and ensure that a website keeps running normally.

Top 5 Security Headers

1. Content-Security-Policy (CSP)

A content security policy (CSP) helps to protect a website and the site visitors from Cross Site Scripting (XSS) attacks and from data injection attacks.

Cross-Site Scripting (XSS)

Cross-Site Scripting (XSS) exploits happen when hackers take advantage of a security hole to upload malicious scripts to a website which are then downloaded to a victim’s browser.

XSS attacks take advantage of flaws in a content management system that allows unexpected inputs to be injected because of insufficient user input file sanitization.

For example, ordinarily, an email form should be coded to expect a restricted input.

A poorly coded form may allow some other input which can then lead to an injection of malicious files.

An XSS attack can be used to steal passwords or as part of a multi-step hacking event.

Injection Attacks

The Open Web Application Security Project (OWASP) describes injection attacks as a serious security risk:

“Injection is an attacker’s attempt to send data to an application in a way that will change the meaning of commands being sent to an interpreter.

For example, the most common example is SQL injection, where an attacker sends “101 OR 1=1” instead of just “101”. When included in a SQL query, this data changes the meaning to return ALL records instead of just one.

…Frequently these interpreters run with a lot of access, so a successful attack can easily result in significant data breaches, or even loss of control of a browser, application, or server. Taken together, injection attacks are a huge percentage of the serious application security risk.”

The content security policy by itself does not 100% protect a site from attacks but it does help to diminish the possibility of a cross site scripting attack.

A CSP header instructs the browser to only download resources from a set group of domains and only from those domains.

Any attacker that is downloading malicious scripts from another server outside of that trusted group will be blocked.

Creating a content security policy can be as strict or as lenient as a publisher requires.

Warning: However, setting one up can be a little tricky because you have to list all of the scripts and resources that are being downloaded from outside of your domain in order to whitelist them.

2. Strict-Transport-Security Header (HSTS)

The Strict-Transport-Security Header is also called the HTTP Strict Transport Security header (HSTS).

Many websites only have a 301 redirect from HTTP to HTTPS.

But that’s not enough to keep the website secure because the website is still vulnerable to a man-in-the-middle attack.

HSTS prevents an attacker from downgrading the HTTPS connection to an HTTP connection which then allows the attacker to take advantage of insecure redirects.

For example, if a person types in to access a site, without actually typing in the https part (or they simply type http out of habit), then the opportunity exists for a man-in-the-middle attack.

That kind of attack can compromise the site visitors’ connection to the website and any sensitive information exchanged between the visitor and the website becomes visible to the attacker.

For example, an attacker can intercept cookies that contain sensitive information like login credentials.

The United States government lists three scenarios where HTTPS can be downgraded to HTTP and subsequently allow an attacker to compromise security.

These are the three ways HTTPS can be downgraded:

  • When a user types “” into the URL bar, browsers default to using http://.
  • A user may click on an old link that mistakenly uses an http:// URL.
  • A user’s network may be hostile and actively rewrite https:// links to http://.

The HSTS header prevents this from happening by forcing the browser to absolutely not accept an HTTP connection.

The HTTP Strict Transport Security (HSTS) header tells the browser that the entire website should only be accessed by a secure HTTPS protocol.

Side Note: How To Preload HSTS Into Chrome

On a related note, Google Chrome has an HSTS Preload program where publishers can submit their sites to be listed by Chrome as only accessible via the HTTPS protocol.

Many Chrome-based web browsers will subsequently preload these websites with HTTPS and only via HTTPS, hard coding that standard right into the browser.

Qualifying sites must already be serving the HSTS security header.

These are the four requirements needed to qualify for Chrome HSTS preloading:

  1. “Serve a valid certificate.
  2. Redirect from HTTP to HTTPS on the same host, if you are listening on port 80.
  3. Serve all subdomains over HTTPS. In particular, you must support HTTPS for the www subdomain if a DNS record for that subdomain exists.
  4. Serve an HSTS header on the base domain for HTTPS requests:- The max-age must be at least 31536000 seconds (1 year).- The includeSubDomains directive must be specified.- The preload directive must be specified.- If you are serving an additional redirect from your HTTPS site, that redirect must still have the HSTS header (rather than the page it redirects to).

You’ll find more information at

3. X-Content-Type-Options

This security header stops certain kinds of exploits that can happen, for example, through malicious user-generated content.

Browsers can “sniff” if a content is an image (.jpg), a movie (.mp4), or text, HTML, JavaScript, and other kinds of content that can be downloaded from a website.

The “sniffing” allows a browser to download the web page elements and correctly render them, in particular in situations when the metadata the browser needs to render the element is missing.

Sniffing allows the browser to figure out what the element is (an image, text, etc.) and then render that element.

Hackers however will try to trick browsers into thinking that a harmful JavaScript file is actually an image, allowing the browser to download the file and then subsequently executing that file, causing any number of negative outcomes for that site visitor, especially with what’s known as a Drive-by Download Attack.

The X-Content-Type-Options header can stop that and other related attacks by disabling the ability of browsers from “sniffing” for the content type.

4. X-Frame-Options

The X-Frame-Options security header helps stop click-jacking attacks.

Mozilla describes Click-jacking as:

“…the practice of tricking a user into clicking on a link, button, etc. that is other than what the user thinks it is.

This can be used, for example, to steal login credentials or to get the user’s unwitting permission to install a piece of malware.”

The X-Frame-Options header works by preventing a web page from being rendered within an iframe, for example.

It prevents more than just iframe-based attacks, though.

Microsoft defines frame sniffing in this way:

“Framesniffing is an attack technique that takes advantage of browser functionality to steal data from a website.

Web applications that allow their content to be hosted in a cross-domain IFRAME may be vulnerable to this attack.

The X-Frame-Options header can be used to control whether a page can be placed in an IFRAME.

Because the Framesniffing technique relies on being able to place the victim site in an IFRAME, a web application can protect itself by sending an appropriate X-Frame-Options header.”

The Open Web Application Security Project (OWASP) provides a helpful explanation of click-jacking attacks:

“…imagine an attacker who builds a web site that has a button on it that says “click here for a free iPod”.

However, on top of that web page, the attacker has loaded an iframe with your mail account, and lined up exactly the “delete all messages” button directly on top of the “free iPod” button.

The victim tries to click on the “free iPod” button but instead actually clicked on the invisible “delete all messages” button.

In essence, the attacker has “hijacked” the user’s click, hence the name “Clickjacking”.”

The X-Frame-Options header is important for protecting your site visitors as well as your site’s reputation.

The OWASP web page on click-jacking goes on to describe how Adobe Flash fell victim to a click-jacking attack that allowed hackers to take control of microphones and cameras, thus cementing Flash’s negative reputation as a security nightmare.

Becoming known across social media and the greater Internet as a security hazard is bad for business.

The X-Frame-Options header is a useful security measure to implement.

5. Referrer-Policy

The purpose of a Referrer-Policy header is to allow a website publisher to control what information is sent when a site visitor clicks a link to visit another website.

When a site visitor clicks a link and lands on another site, the visitor’s browser provides information about what web page sent that visit.

When you look at your server logs the referrer information is sent that tells what sites sent visitors.

However, there are some situations where the URL of the site referring a visitor to another visitor could contain sensitive information which could be leaked to a third party.

How the Referrer-Policy works is by limiting how much information is sent after a site visitor clicks a link.

A website publisher can choose to send no information as to the referrer, they can choose to send just the domain name or they can send the entire URL string.

There are eight directives that can be sent using the Referrer-Policy header:

  • Referrer-Policy: no-referrer.
  • Referrer-Policy: no-referrer-when-downgrade.
  • Referrer-Policy: origin.
  • Referrer-Policy: origin-when-cross-origin.
  • Referrer-Policy: same-origin.
  • Referrer-Policy: strict-origin.
  • Referrer-Policy: strict-origin-when-cross-origin.
  • Referrer-Policy: unsafe-url.

A common referrer policy setting is Header “no-referrer-when-downgrade” which means that referrer information will be sent to trustworthy URLs that are on HTTPS but that no referrer information will be sent to untrusted HTTP websites.

It is important to note that the referrer policy setting will not affect affiliate links.

The referrer information is coded within the landing page URL, thus the referrer information and earnings are recorded by the merchant receiving the affiliate referral.

How To Implement Security Headers

There are multiple ways to set security headers, and one popular way is with an .htaccess file.

A benefit of using the .htaccess file is that it saves a publisher from downloading another plugin.

Poorly coded plugins can become a security risk, so minimizing the number of installed plugins can be useful.

Important: Every security header implementation is going to be different according to the specifics of each website, especially the Content-Security-Policy (CSP).

WordPress Plugins For Setting Security Headers

There are some popular plugins that are already installed on millions of websites that come with the option for setting security headers.

If you already have these plugins installed, then the option for using a plugin rather than fussing with an .htaccess file is there for those who would prefer the convenience.

Really Simple SSL Pro

Over five million websites already have Really Simple SSL installed.

Upgrading to the reasonably priced pro version provides the option for setting up to eight security headers the easy way.


The 100% free WordPress Redirection plugin has been around for over ten years and is installed on over 2 million websites.

This plugin allows you to choose from many different preset security headers in addition to the top five listed in this article.

Preset means that you can choose from the standard directives.

According to the Redirection WordPress download page:

HTTP headers can be added to redirects or your entire site that help reduce the impact of redirects or help increase security. You can also add your own custom headers.”

Additionally, the Redirection plugin allows you to custom craft your own security headers if there’s something there you don’t find.

Screenshot of Security Headers UI, February 2022

The Redirection plugin makes it easy to successfully install the top five security headers:

  • X-Frame-Options.
  • X-Content-Type-Options.
  • Referrer-Policy.
  • Strict-Transport-Security.
  • Content-Security-Policy.

Set Security Headers With Cloudflare

Cloudflare has a way to set security headers using their Cloudflare workers.

Cloudflare also has another support page with directions:

“Attaching headers
To attach headers to Cloudflare Pages responses, create a _headers plain text file in the output folder of your project.

It is usually the folder that contains the deploy-ready HTML files and assets generated by the build, such as favicons.

The _headers file should not always be in the root directory of the repository. Changes to headers will be updated to your website at build time, so make sure you commit and push the file to trigger a new build each time you update headers.

Header rules are defined in multi-line blocks.

The first line of a block is the URL or URL pattern where the rule’s headers should be applied. On the next line, an indented list of header names and header values must be written…”

How To Check Security Headers

Security headers are easy to check. offers a free security header checking service.

Web auditing software Screaming Frog also has the option for checking headers which is available in the Security Tab.

Make Security Headers A Part Of Your SEO Audits

Security headers are something that many publishers or SEO experts might not consider.

But security headers are important and should be top of mind in every site audit, whether that audit is conducted in-house or by third-party SEO site auditing.

Website security is an SEO-related issue because failure to mitigate negative security issues can reverse every ranking-related success.

A negative reputation can hurt rankings and sales.

Loss of search visibility causes devastating losses.

Implementing security headers is relatively easy, it should be among the top boxes to check when publishing any website.

More resources: 

Featured Image: Monkey Business Images/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


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