Failing with ID attributes not unique

[CymruUSA]

Hi Guys, I have been using lighthouse and its a great resource but firstly I am failing with regards to "ID Attributes Not Unique" while I cannot find a single reference other than the single item. I am also facing an issue with offscreen images and I have lazy load enabled and it seems to be working correctly, lighthouse is still reporting the issue. The images are as small as they can possible be at this point but I am wondering if this is an issue with Lighthouse?

li id="menu-item-62" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-48 current_page_item menu-item-62">
li id="menu-item-1121" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1121">
li id="menu-item-1241" class="menu-item menu-item-type-post_type menu-item-object-post menu-item-1241">
li id="menu-item-63" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-63">"

I would also like to make a suggestion that would help me and others in their quest for the perfect score! Each category has Learn More links. It would also make a lot of sense if each category had a forum associated with it and linked. That way, people can ask and share their problems and look for help from other members of the community versus trying to comb through the web looking for information that is just not available.

Thanks.

[kdzwinel]

As far as I can see there are multiple elements with menu-item-62 ID:

Note that even if there is only one such element in the page source, JavaScript can be adding another one in the runtime. Lighthouse is analyzing DOM, not the raw page source.

[CymruUSA]

Yep. I saw that. I'm trying to figure out how and why... Thankd

…

________________________________ From: Konrad Dzwinel <[email protected]> Sent: Saturday, January 20, 2018 7:53:25 PM To: GoogleChrome/lighthouse Cc: Scott Anderson; Author Subject: Re: [GoogleChrome/lighthouse] Failing with ID attributes not unique (#4313) As far as I can see there are multiple elements with menu-item-62 ID: [screen shot 2018-01-21 at 01 49 38]<https://user-images.githubusercontent.com/985504/35189587-c315e1b0-fe4d-11e7-958a-8bfd0b61af4c.png> — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub<#4313 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/Ah9k8vJNioc2ELRR2cmKy71o-_j8yX-hks5tMoqEgaJpZM4RldvS>.

[thisizkp]

Looks like there is no issue with Lighthouse. We can close this issue. @CymruUSA

[patrickhulce]

@CymruUSA we're not really sure how your site is built, so it's tough to say why you're adding multiple elements with the same ID. Real quick, it looks like you have a duplicate menu for mobile with identical IDs instead of removing the other menu and/or using distinct IDs for the mobile menu.

As for your other comments...

• Offscreen images audit will flag images that are loaded before your first interactive time, so regardless of the approach used it could be flagged even if you're deferring load slightly. Should try to get the page interactive before loading potentially unused images
• Forum links are a good suggestion but for now GitHub issues suffice for audit discussion :)

[rphaedrus]

It looks like these are superfish menus.

When the screen gets narrow and Superfish creates the responsive "hamburger" or button style menu, it copies the menu into a new set of elements in the DOM which end up having duplicate ids -- if you go into your inspector and look at the menu items, you can see them being created and removed as you make your page wider and narrower.

[rgnyldz]

In my case I get a duplicate ID error on data-drupal-selector="edit-actions"

So does that mean that data-selectors should also be different? Why is lighthouse giving an error for ID in this case?

[rphaedrus]

In my case I get a duplicate ID error on data-drupal-selector="edit-actions"

So does that mean that data-selectors should also be different? Why is lighthouse giving an error for ID in this case?

It looks like they're intended to be a stand-in for IDs:

https://www.drupal.org/node/2503277