WordPress / wporg-showcase-2022

The official theme of the WordPress.org showcase.
https://wordpress.org/showcase/
19 stars 4 forks source link

Single sites: Add responsive image support to site headers #222

Open ryelle opened 11 months ago

ryelle commented 11 months ago

I was navigating around the site on staging and found the single pages were pretty slow to load.

Can we update them? The related sites contribute to the slowness.

Page: https://wordpress.org/showcase-v2/opus-one/

Screenshot 2023-10-04 at 12 09 10 PM

https://github.com/WordPress/wporg-showcase-2022/pull/175#issuecomment-1746062565

ryelle commented 11 months ago

@StevenDufresne I've added responsive image hints to the site header & homepage hero, but on most desktop screen sizes you'll still get the biggest image, so I think your other issue for optimizing those would be best.

The Related Sites were already using the responsive image hints, so no change needed there. Is your screen DPR >2? Those images are a max of 533px wide, but it looks like it's loading the 1400 width — for me, with a 2x screen, I get the 1100 wide images, which are at least in the 340-500 kB range. They also shouldn't be loaded until you scroll down to them (lazy loading).

ryelle commented 11 months ago

Forgot to add— I'm leaving this issue open because I don't feel like the fix in https://github.com/WordPress/wporg-showcase-2022/commit/0fdc2ad7d5e3c65780d7ca4bb7dff545c4fbb22f really addressed the problem, so if there are other ideas this could be the place to brainstorm. But maybe the simplest answer is just to figure out image optimization https://github.com/WordPress/wporg-showcase-2022/issues/219.