1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

PageSpeed Insights, WebP and CSS picture element

Discussion in 'Search Engine Optimization' started by Vanilla Gorilla, Oct 10, 2020.

0
  1. #1
    Hello,

    I recently launched a new website. It scores 100/100 on PageSpeed Insights but PSI gives me the suggestion to use next-gen image formats. And I would love to! My very optimized banner is about 200k in jpg but about 75k in webp. However, Safari doesn’t support webp. It is starting to support webp with the new Safari 14 (Sept 2020) BUT it seems that’s only if it’s Safari 14 used on the new OS/iOS, Big Sur. Since Big Sur does not support my iMac (and I believe adoption will be too low for the time being) I can’t rely on Safari’s webp support.

    So, I turn to CSS and the <picture> element. Great, a jpg banner for Safari and a webp banner for everyone else. Awesome, it works! Except suddenly my PSI score drops and my Cumulative Layout Shift goes way up.

    I really want to use webp images but can’t have a big white box appear for Safari users. And I don’t want to compromise my PSI score. Does anyone have a suggestion on how to solve this issue? Thanks for your help!
     
    Last edited by a moderator: Oct 10, 2020
    Vanilla Gorilla, Oct 10, 2020 IP