Improving Google Pagespeed score

  • Victor Duse

    (@divimundo)


    4 months ago

    When I run a Google Pagespeed Insight report for mobile, I get two warnings related to Copy Anything to Clipboard when using the style “Icon”:

    1. Avoid an excessive DOM size.

    A large DOM will increase memory usage, cause longer style calculations, and produce costly layout reflows. Learn how to avoid an excessive DOM size. 

    span.dp-dfg-custom-field-value > button.copy-the-code-button > svg.copy-icon > path
    <path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.…">

    2. Buttons do not have an accessible name

    When a button doesn’t have an accessible name, screen readers announce it as “button”, making it unusable for users who rely on screen readers.

    p.dp-dfg-custom-field > span.copy-the-code-wrap > span.dp-dfg-custom-field-value > button.copy-the-code-button

    I think at least number two is very easy to fix by adding an aria label (like “Copy”) to the button.

    Screenshots: https://imgur.com/a/copy-anything-to-clipboard-yZ5ttZo

  • You must be logged in to reply to this topic.