rtCamp/rt-optimizer

Fix image sizes issue for LCP

Opened this issue · 2 comments

pradeep910 commented

Google pagespeed insights mostly gives issue for image sizes.

There is a good article here - https://danielbachhuber.com/solving-properly-size-images-wordpress/, which uses a tool to identify image sizes that need to be generated or fixed.

For more automation these are the things we can do:

  • The plugin can use the tool to identify and show it like query monitor or debug bar on the frontend. Linter for images https://ausi.github.io/respimagelint/
  • Later the plugin can have option to generate image sizes identified by the tool for a particular page.
pradeep910 commented

Thanks @Souptik2001 for pushing code to newspack.rt.gw, I can see "Link Images" option in admin bar, and also see failed and passed images.
To further make it automated in terms of fixes, there is CLI script for generating images that we can run on ajax call for the sizes needed.
https://github.com/wearetinybit/tinybit-core-plugin/blob/d85709769f2fe9d0e16db25205d7a51d46be5459/inc/class-cli.php#L40

Try using the following image sizes in instead:
256×173, 700×474, 1110×751, 1400×947, 1590×1076, 1760×1191

We might need a filter as well to convert output of image tag to use new sizes.
Maybe everything we will have to do with image block render filter or the_content filter
I think let's test it if it really works and improves LCP or not.

Todo:

  • First thing we should check is that if that hardcoded replacement of sizes works or not.

Try using the following image sizes in instead: 256×173, 700×474, 1110×751, 1400×947, 1590×1076, 1760×1191

  • If works, then we use filter to automate this.
pradeep910 commented

We have to hold this as the tool is not able to identify issues with images same as page speed insights.
There is difference in page speed insights recommendations and this tool. https://ausi.github.io/respimagelint/

Ideally, we should have recommendations just like Page speed insights for a particular page in Query Monitor style output in footer.

I think the tool based on PHP or JS will be good. Maybe we can try using https://github.com/topics/google-pagespeed-insights some tools from this list.
and log the results in Query Monitor style in footer.

cc @Souptik2001