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
Script Injection
- script tag (sync/async/defer)
- embedded script (sync/async)
- embedded wrapped in function (sync/async)
Script Load Type
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
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
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
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
Cumulative layout shift
- Cumulative Layout Shift measures the movement of visible elements within the viewport. https://web.dev/cls/
Largest contentful paint
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>
