Google Lighthouse vs Third Party Scripts

Lighthouse score should reflect real user website performance.

Google Lighthouse is a great tool to benchmark website peformance but it can give misleading results. Scripts like hotjar or google analytics can destroy any website Lighthouse score. It often eats more assets budget than all of the actual website JavaScript files combined. In theory it could be performance factor. In the real world most users has those scripts downloaded before they enter the website we are benchmarking or they have some kind of a tracking blocker installed.

There's a way to quickly check the results without those scripts by blocking them in chrome dev tools before launching Lighthouse. Long term solution is to disable them in the code.

For Gatsby following code placed in gatsby-ssr.js makes sure few third party scripts are not executed when the Lighthouse benchmarking process is detected using the user agent.

exports.onPreRenderHTML = ({
   getHeadComponents, replaceHeadComponents,
   getPostBodyComponents, replacePostBodyComponents
}) => {
    const notForLighthouse = script => `if(!navigator.userAgent.match('Lighthouse')) {
        ${script}
        }`

    // keys of gatsby plugins to be excluded
    const pluginsToWrap = ['gatsby-plugin-facebook-pixel', 'plugin-google-tagmanager', 
      'gatsby-plugin-hotjar', 'gatsby-plugin-google-analytics']

    const wrapComponents = components => {
        components
            .filter(cmp => pluginsToWrap.includes(cmp.key))
            .forEach(({ props: { dangerouslySetInnerHTML } }) =>
                dangerouslySetInnerHTML.__html = notForLighthouse(dangerouslySetInnerHTML.__html))

        return components
    }

    replaceHeadComponents(wrapComponents(getHeadComponents()))
    replacePostBodyComponents(wrapComponents(getPostBodyComponents()))
}

Detecting Lighthouse condition can be applied to any framework or CMS by wrapping target scripts:

if(!navigator.userAgent.match('Lighthouse')) {
  // third party script inclusion
}

Example results before and after:

For the constant improvement having a meaningful benchmark is critical. Google Lighthouse provides a tool that with some tweaks like the above can make a complex and confusing process of the performance improvement much more bearable.