How to Improve CLS of Yoast SEO Breadcrumbs

Here’s how to improve the Cumulative Layout Shift (CLS) of Yoast SEO breadcrumbs because post titles were long, causing CLS to increase on mobile devices.

According to Google, Cumulative Layout Shift (CLS): «is a measure of the largest activity increase in layout change scores for each unexpected layout change that occurs over the entire lifespan of a page».[1]

It turns out that, when measuring the content of the website, I found in the PageSpeed ​​Insights reports that the CLS metric indicated to me that the Yoast SEO breadcrumb made a change in the design of the page.

The breadcrumb URL structure that Yoast SEO displays is like this: «home/category/post name».

Analyzing the matter, it turns out that the names of the posts are long and in the case of mobile devices, the title is moved an additional line, so it is considered a change in the design.

Considering the situation, I deduced that the solution was to reduce the breadcrumb path that Yoast SEO shows to: «home/category/», which would achieve the goal of improving the CLS score of all the pages on the website and improve, By the way, the user experience.

In my case, I have Yoast SEO installed and said plugin does not have the option to make the desired adjustments, since it is only possible to do so if you have the Yoast SEO Premium plugin.

However, Yoast SEO has a filter called: «wpseo_breadcrumb_links», which allows modifications to be made to the way breadcrumb information is presented.

With that idea, while searching for information I found a code in «Stackoverflow», [2] which on the test bench works very well:

add_filter("wpseo_breadcrumb_links", "wp_guide_wpseo_breadcrumb_links_filter");
    function wp_guide_wpseo_breadcrumb_links_filter($crumbs) {
        if (is_singular("post")) {
            unset($crumbs[2]);
        }
        return $crumbs;
}

The code does the following:

  • add_filter – This function registers a filter to be applied to the wpseo_breadcrumb_links. This hook or filter allows you to modify breadcrumb links before they are displayed.
  • wpseo_breadcrumb_links – This is the name of the link you are registering your filter on.
  • wp_guide_wpseo_breadcrumb_links_filter – This is the name of your custom filter function.
  • $crumbs – This variable contains the array of breadcrumb links.
  • is_singular(“post”) – This condition checks if the current page is a single post.
  • unset($crumbs[2]): This line removes the third element from the $crumbsarray. This element usually corresponds to the title of the post.
  • return $crumbs: This line returns the modified $crumbs array.

I showed the functional code to Bard, Google’s artificial intelligence, which presented me with two optimized code options.

The first uses the “array_splice” option which turns out to be more efficient than using «unset».

The second uses the ternary condition, being a code with fewer lines and its logic is that if the condition «is_singular(“post”)» is true, it returns a new array with the first two elements of «$crumbs», eliminating the title of the post. Otherwise, the original «array» is returned without modifications.[3]

Option 1: Using array_splice

add_filter("wpseo_breadcrumb_links", "wp_guide_wpseo_breadcrumb_links_filter");
function wp_guide_wpseo_breadcrumb_links_filter($crumbs) {
    if (is_singular("post")) {
        array_splice($crumbs, 2, 1);
    }
    return $crumbs;
}

Option 2: Using the ternary condition

add_filter("wpseo_breadcrumb_links", "wp_guide_wpseo_breadcrumb_links_filter");

function wp_guide_wpseo_breadcrumb_links_filter($crumbs) {

    return is_singular("post") ? array_slice($crumbs, 0, 2) : $crumbs;

}

In any of the three examples shown, just one of the codes shown needs to be added in the functions.php file of the active theme, and that’s it.

[1] https://web.dev/articles/cls?hl=es-419#what_is_cls

[2] https://stackoverflow.com/questions/57490452/remove-yoast-breadcrumb-last-item-on-single-pages-only

[3] You can check Bard’s answer at https://bard.google.com/share/9c9112054577

Califica post

Discover more from Politikaperu

Subscribe to get the latest posts to your email.

Discover more from Politikaperu

Subscribe now to keep reading and get access to the full archive.

Continue reading