Layout Shift / Menu Jumping Issue Caused by Rank Math PRO Upgrade Prompt

#1120914
  • I am writing to report a significant user experience issue on my website, which I believe is related to how the Rank Math SEO plugin loads its elements. My website uses the Smartmag theme on a WordPress installation.

    Issue Description (Layout Shift)

    When a page is initially loaded or a user performs a refresh, the entire upper section of the site (including the main menu) experiences a noticeable “layout shift” or “jump.”

    This is causing poor performance metrics (specifically affecting Core Web Vitals scores) and a degraded user experience.

    Upon careful observation, it appears that the jump is triggered by the brief, asynchronous loading and display of a hidden element, likely the “Upgrade to PRO” banner or button. This element is loaded for a fraction of a second, takes up space, and then disappears or is moved, causing the layout to snap back into place.

    Request for Resolution

    Could you please investigate this matter? I need a solution to prevent this specific PRO promotional element from loading or displaying briefly on the frontend of the site, which is the source of the layout shift.

    The element must be fully suppressed or have its space pre-reserved to ensure a stable load and to prevent the content from jumping.

    Thank you for your time and assistance in resolving this urgent UX and speed issue.

    BTW : i will buy pro and ai content 🙂

    Best regards

Viewing 2 replies - 1 through 2 (of 2 total)
  • Hello,

    We apologize for the issue you are facing with the layout shift on your website due to the Rank Math PRO upgrade prompt. Thank you for bringing this concern to our attention.

    This layout shift can indeed affect your Core Web Vitals scores and overall user experience. While we currently do not have a specific solution to suppress or reserve space for the PRO promotional element, we recommend checking for any updates to the Rank Math plugin, as updates often include performance improvements and bug fixes.

    You can also consider implementing custom CSS to hide the upgrade prompt until the rest of the page has loaded. Here’s a simple example of how you might do that:

    .rank-math-upgrade-prompt {
        display: none;
    }

    This code snippet would hide the upgrade prompt, but please note that it may not be a permanent solution, and we recommend monitoring your site’s performance after applying any changes.

    If you continue to experience issues, please reply to this ticket with your site URL so that a human agent from our support team can investigate further and provide more tailored assistance.

    Thank you for your understanding, and we appreciate your interest in upgrading to PRO and using our AI content features!

    This is an automated reply from Rank Math Support Bot. Your ticket has been assigned to a human agent and we will get back to you shortly.

    Hello,

    I have updated the sensitive data as requested. Can you please check further?

    Thank you.

Viewing 2 replies - 1 through 2 (of 2 total)

You must be logged in to reply to this ticket.