How the Test has been run
With the help of Puppeteer, we have run lighthouse tests on multiple AWS regions with simulated network traffic. 63 test pages have been created based on script location, script injection method, Script Load Type, and Ad Unit Tag Type combination.
Code, Config and test pages are available on branch name year-pagespeed in folder test/pagespeed.
https://bitbucket.org/monetizem/m2hb/src/year-pagespeed/test/pagespeed/
Location
- head
- body start
- body end
Script Injection
- script tag (sync/async/defer)
- embedded script (sync/async)
- embedded wrapped in function (sync/async)
Script Load Type
- sync
- async
- defer
AdUnit Tag Type
- id – html div with id – <div id=”{slotId}”></div>
- limitation – can’t use same id multiple times
- attribute – html div with custom attribute – <div class=”pg-ad” data-pg-ad=”{slotId}”></div>
- pgtag – custom html tag – <pubguru data-ad=”{slotId}”></pubguru>
Device Type Simulated
- desktop
- mobile
Result data from lighthouse test
https://docs.google.com/spreadsheets/d/1zVhA4DlWCzWPr5q6sbywhjh61H5uf63RsaBd0gY1ZlE/edit?usp=sharing
Description of Metrics used in the Test
First contentful paint
- First Contentful Paint marks the time at which the first text or image is painted.
- https://web.dev/first-contentful-paint/
Speed index
- Speed Index shows how quickly the contents of a page are visibly populated.
- Speed Index measures how quickly content is visually displayed during page load. Lighthouse first captures a video of the page loading in the browser and computes the visual progression between frames.
- https://web.dev/speed-index/
Total blocking time
- Sum of all time periods between FCP and Time to Interactive, when task length exceeded 50ms, expressed in milliseconds. https://web.dev/lighthouse-total-blocking-time/
Interactive
- Time to interactive is the amount of time it takes for the page to become fully interactive. https://web.dev/interactive/
Bootup time (JavaScript execution time)
- Consider reducing the time spent parsing, compiling, and executing JS. You may find delivering smaller JS payloads helps with this. https://web.dev/bootup-time/
Performance score
- The Performance score is a weighted average of the metric scores. Naturally, more heavily weighted metrics have a bigger effect on your overall Performance score. The metric scores are not visible in the report but are calculated under the hood.
- https://web.dev/performance-scoring/
SEO score
- These checks ensure that your page is optimized for search engine results ranking. There are additional factors Lighthouse does not check that may affect your search ranking.
- https://support.google.com/webmasters/answer/35769
Cumulative layout shift
- Cumulative Layout Shift measures the movement of visible elements within the viewport. https://web.dev/cls/
Largest contentful paint
- This is the largest contentful element painted within the viewport. https://web.dev/lighthouse-largest-contentful-paint/
First meaningful paint
- First Meaningful Paint measures when the primary content of a page is visible. https://web.dev/first-meaningful-paint/
Conclusion
Based on average of performance score, time to interactive and speedindex I have found bodyEnd-embeddedWrapped-async performance better for desktop and mobile both.
bodyEnd-embeddedWrapped-async means javascript code to load script asynchronously is wrapped in function and placed at the end of body tag. Please check following snippet with example tag how it looks like.
<body>
<script>
(function(d){
var script = d.createElement(‘script’);
script.async = true;
script.type = ‘text/javascript’;
script.src = ‘//m2d.m2.ai/pghb.minecraftresourcepacks.js’;
var target = d.getElementsByTagName(‘head’)[0];
target.insertBefore(script, target.firstChild);
})(document);
</script>
</body>
