| • Gilles | |
| Aug 6 2020, 10:05 AM |
| F32357622: Screenshot 2020-09-21 at 09.36.57.png | |
| Sep 21 2020, 7:37 AM |
| F31967520: Screenshot 2020-08-06 at 12.06.09.png | |
| Aug 6 2020, 10:06 AM |
We collect data from the Layout Instability API and attribution has recently been added to it. That information is available in Chrome 84+ https://www.chromestatus.com/feature/5712483207610368
Let's collect some of that information in order to get some insight about where layout shifts are coming from.
One caveat of this new "sources" attribute is that it lists elements affected by the shift, not elements causing the shift. Still, it should be enough information to figure out what is shifting.
| Subject | Author | Repo | Branch | Lines +/- | |
|---|---|---|---|---|---|
| Collect some attribution for layout shifts | Gilles | mediawiki/extensions/NavigationTiming | master | +48 -7 |
Change 618731 had a related patch set uploaded (by Gilles; owner: Gilles):
[mediawiki/extensions/NavigationTiming@master] Collect some attribution for layout shifts
Change 618731 merged by jenkins-bot:
[mediawiki/extensions/NavigationTiming@master] Collect some attribution for layout shifts
Now that the data is flowing in, here are the top 10 most frequent layout shift first nodes. I've tried to figure out where the shifts are coming from.
| Selector | Count | Likely source |
| h1#firstHeading.firstHeading | 131224 | CentralNotice banners |
| div.pre-content.heading-holder | 119961 | CentralNotice banners on mobile |
| table.infobox | 113968 | CentralNotice banners |
| div#right-navigation | 52023 | ? |
| table.infobox.biography.vcard | 44174 | CentralNotice banners |
| div.thumbinner | 40233 | CentralNotice banners, for above-the-fold thumbnails? |
| div.mw-mmv-image-metadata-column.mw-mmv-image-metadata-links-column | 24739 | MediaViewer false positive from the drawer animation |
| div.mw-mmv-post-image.mw-mmv-ttf-ellipsis-container.invite | 23369 | MediaViewer false positive from the drawer animation |
| div.mw-mmv-about-links | 21278 | MediaViewer false positive from the drawer animation |
| nav#p-participate.vector-menu.vector-menu-portal.portal | 20840 | Language selection gadget on Commons  |
Digging deeper into div#right-navigation, I can't find any particular pattern (wiki, OS, authed, etc.). The fact that only Chromium has implemented this API makes it difficult to know if this is an issue on our end that only happens sometimes (CN banner-related ?) or if it's a browser bug.
