Hosting Dashboard: Previews in sites grid are rendered using mShots where possible

[p-jackson]

Proposed Changes

Proposal to use our mShots screenshot service when possible (https://github.com/automattic/mshots)

mShots uses Chromium in a webservice to screenshot the site and caches it. We use the s0.wp.com CDN to service the image quickly.

A proof of concept. Other work to do:

• Set up the logic for refreshing the screenshot when the site updated
• Should use sizes and srcset image attributes to determine the
• Hide the loading gif
• Use a "share" link to allow "Coming Soon" sites to use mshots

Why are these changes being made?

The sites grid is very heavy to load

• So many requests!
• No caching
• When the DOM is super heavy it's been known to crash mobile devices
• If the site has videos/gifs above the fold then they start playing on the dashboard (I guess that could be a good thing?)
• You can see the scrollbars (a user preference on Mac, but on Windows this is what everyone will see)

My network tab looks like this when the grid is loaded with iframes

When I switching to mshots it looks like this

Testing Instructions

Pre-merge Checklist

• Has the general commit checklist been followed? (PCYsg-hS-p2)
• Have you written new tests for your changes?
• Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
• Have you checked for TypeScript, React or other console errors?
• Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
• Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
  • For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
• For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-8c6d8e11d9561fad517f390aa04d61262ff359b7

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-8c6d8e11d9561fad517f390aa04d61262ff359b7&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:commit-8c6d8e11d9561fad517f390aa04d61262ff359b7&env=a8c-for-agencies

[p-jackson]

@youknowriad @ellatrix the sites grid is slow :) Even when only showing 10 sites. This is a proposal to use mShots to render the sites grid rather than iframes. This is how we usually render site previews on dotcom, but I wanted to check whether the use of iframes was an explicit decision or just an expedient one.

CC @Automattic/lego

[ellatrix]

Hi! I've already made a PR for this here: #103375

[StevenDufresne]

@p-jackson We discussed this here: p1745913932302249-slack-C08JZTRS6NA

[ellatrix]

Also, #103375 already implemented srcset and loading state etc.

[ellatrix]

When the DOM is super heavy it's been known to crash mobile devices

I've never seen this before, can you elaborate? These are site front-ends. GB DOM can get waay heavier (not to mention memory allocation) and we also make use of frames.

No caching

That's not entirely true. Are we not caching the WP sites of our customers? 🤔

[p-jackson]

#103375 already implemented srcset and loading state etc.

Perfect! I should have searched before trying this out. I'll add my answers about DOM weight and caching in one of the other discussions.