Lighthouse Extension Beta Release

Hi @danzubco,

thanks for your suggestions and report.
Some of the suggestions are already implemented in our working version, and some are still being worked on. We will probably implement all in the next beta release.

Regarding the bugs you reported, I couldn’t duplicate these on my test setup, would you be able to open a helpdesk ticket so we can collect some additional info and look into this?

It is. Thanks. You guys rock.

1 Like

Lighthouse Settings Page. Link to Help Documentation opens the Lighthouse Settings page in a new tab rather than going to a documentation page.

Screen Shot 2021-11-12 at 10.38.00 AM

1 Like

Hi, I am testing out this extension and so far works well and did the audit on +160 without any issues…
I noticed to UX issues:

  • you can’t show or hide columns which is related to the second point
  • if you want to see the mobile result, you have to scroll down of the page to see the horizontal scrolling bar…
    I can reduce the view to 10 per page but I like to see all the sites in one shot.
    But, overall, looks great! No error in the console.
    Fred

Hi all,

Find another UX issue, when you scroll, the header of the table is not sticky and sometimes, will all numbers, you don’t know if it is performance or seo… It will be nice to have it sticky. :wink: And this will be helpful for all tables in MainWP BTW.

Thanks

1 Like

I’ve just used this for the first time.
Great extension - very useful.
A couple of typos in the Settings tab:
Should this read Lighthouse not Lightspeed?


Should read Google PageSpeed Insights:
image

2 Likes

Thanks, typos fixed and fixes are in place for the next update.

Hi Fred,

thanks for the suggestion. I have been trying to handle this requirement, but at this point, sticky header doesn’t get along with the xScroll feature. In all my attempts the sticky header works well as long as there is no xScroll but when it’s there, the table header gets totally misaligned with columns.

Regarding your other suggestion, it’s implemented and set for the next update.

1 Like

Hi all,

First, let me thank you all for taking the time to test the Lighthouse extension and report problems, and send us your suggestions.

We tackled a couple of bugs we could catch and made some UI/UX improvements based on your suggestions. Some are still to be done :wink:

We just released the Beta 2 version and here is the version changelog:

  • Fixed: Multiple typos in info messages and option labels
  • Fixed: An issue with rendering extension widget on 3 column layout
  • Fixed: An issue with loading site ID in URLs
  • Fixed: An issue with showing audit details items
  • Fixed: Multiple incorrect URLs in info messages
  • Fixed: Incorrect table headers in the extension widget
  • Added: All audits filter in audit report page
  • Added: Option to hide/show columns in the Lighthouse dashboard page
  • Added: Option to show/hide the Lighthouse widget on the Overview page
  • Updated: PHP 8 compatibility
  • Updated: Failed audit icon
  • Updated: Running audit process indicator to show more details
1 Like

hi @bogdan,
Thanks for the update but how we get the Beta 2?
Went to the plugins section, click on check for updates now and nothing…
Maybe not push yet?
Thanks, Fred

Hi Fred, I am not sure why your dashboard doesn’t see the update, but you can try to simply reinstall it.

1 Like

Thanks @bogdan - I deleted and resintalled it, got the Beta 2.

1 Like

Found another issue, on the filter for the columns, Last Audit is not there:


You have it 2 times: 1 for mobile and 1 for desktop which is the same. One will be enough…

1 Like

Hi @bogdan.

  1. I found that the results of the mobile audit at Cumulative Layout Shift with a value between 0.1-0.2 are missing the icon to the left of the tilt. I investigated and I think the class-mainwp-lighthouse-utility.php: 334 line of code should be written like this:
} elseif ( $value > 0.1 && $value <= 2.5 ) {
  1. And I tried to make the navigation between the score and the audit results a little easier. This script, for Custom Dashboard / JS, makes it possible to automatically scroll the audit results when clicking on the score.
/**
 * After DOM Loaded
 */
document.addEventListener('DOMContentLoaded', () => {
	/**
	 * Lighthouse Audit - Automatically scroll to audit results by clicking on the score
	 */
	const lighthousePage = document.querySelector('body.mainwp_page_ManageSitesLighthouse');
	if (lighthousePage) {
		const auditsNavElements = lighthousePage.querySelectorAll('.mainwp-lighthouse-score');
		const offset = -45;

		auditsNavElements.forEach(el => {
			el.addEventListener('click', () => {
				const auditDomain = el.dataset.tab.split('-')[0];
				const activeTab = document.querySelector(`.ui.tab.active[data-tab^=${auditDomain}]`);
				const tabTopPos = activeTab.getBoundingClientRect().top + window.pageYOffset + offset;

				window.scrollTo({
				  top: tabTopPos,
				  behavior: 'smooth'
				});
			});
		});
	}
});

A little remark.
Possibly for those who have added more to the “DOMContentLoaded” event, it would be better to group the subscriptions to the event in a single function, I mean:

document.addEventListener('DOMContentLoaded', () => { ... }

Above I added the entire code along with the addition to the event, otherwise it would not work properly…

1 Like

Below I added the updated code, for self-scrolling to the tab.
For those who applied the “sticky” position, discussed in this post: Scroll is jumpy on some pages.

I wrote the identification of the sticky position and the calculation of the offset depending on it.

For other cases, write a desired offset value for “desiredOffset”.
Also if you want to adjust the scroll position, whether the header is sticky or other circumstances, add a value other than null, as you like for “desiredOffset”.

Updated code:

/**
 * After DOM Loaded
 */
document.addEventListener('DOMContentLoaded', () => {
	/**
	 * Lighthouse Audit - Automatically scroll to audit results by clicking on the score
	 */
	const lighthousePage = document.querySelector('body.mainwp_page_ManageSitesLighthouse');
	if (lighthousePage) {
		const desiredOffset = null;
		const topHeader = lighthousePage.querySelector('#mainwp-top-header');
		const calculatedOffset = (getComputedStyle(topHeader).position === 'sticky' && desiredOffset === null) ? topHeader.getBoundingClientRect().bottom : (desiredOffset !== null ? desiredOffset : 0);
		const auditsNavElements = lighthousePage.querySelectorAll('.mainwp-lighthouse-score');

		auditsNavElements.forEach(el => {
			el.addEventListener('click', () => {
				const auditDomain = el.dataset.tab.split('-')[0];
				const activeTab = lighthousePage.querySelector(`.ui.tab.active[data-tab^=${auditDomain}]`);
				const tabTopPos = activeTab.getBoundingClientRect().top + window.pageYOffset - calculatedOffset;

				window.scrollTo({
				  top: tabTopPos,
				  behavior: 'smooth'
				});
			});
		});
	}
});

Hi @wpexpert, @danzubco,

Updates are included in this version:

Hi @bogdan,
It broke the column setting functionality! Every time I click on the icon to change the column display, it opens a new window, no option! I cleared cache (browser, not server since we don’t have any for MainWP), reload, same error… :frowning:

Hi Fred, I can’t duplicate the problem.

Would you mind opening a private Help Desk ticket so we can collect some additional information & investigate further?

1 Like

Strange enough, now it is working so probably linked to a cache issue in my browser…
Anyway, it is working now! Thanks guys.

2 Likes