CLS issue

Hello atcrips,

thank you for the interesting question.

I checked our homepage https://foliovision.com/ with Google PageSpeed and it reports 0 CLS – although the Lab Data show something else – we only fixed a problem with the mobile menu loading last week.

But I see that if I click to play the video the Google Chrome Performance tool reports the Layout Shift – although I do not notice anything wrong visually, even with 6x slow down.

The problem seems to be that we position the video element out of the player when it’s still loading.

You can use this CSS in wp-admin -> Settings -> FV Player -> Skin -> Custom CSS:

.flowplayer.is-loading .fp-engine { top: 0em; opacity: 0 }

That will keep the report clear. But I will have to check why did Flowplayer stop using the opacity approach and moved to top: -9999em years ago: https://github.com/flowplayer/flowplayer/commit/56cd0a21231231e0ef74a4fdab033b8beba52ac2

Thanks,
Martin

Hello,

Thank you for the response.

I applied the fix you provided and it seems to have fixed it. However, now a new issue is being reported regarding the font used for the UI:

Related Nodespan.fp-elapsed
Related Nodespan.fp-duration
Related Nodediv.fp-volume
Related Nodea.fp-fullscreen.fp-icon

https://ibb.co/942Y9G1
https://ibb.co/RTrS9dy

• This reply was modified 2 years, 12 months ago by atcrips.

I am able to preload the font on single post pages:

<link rel="preload" href="<?php echo WP_PLUGIN_URL; ?>/fv-wordpress-flowplayer/css/icons/flowplayer.woff2" crossorigin="anonymous" as="font" type="font/woff2">

And this seems to solve the issue. However, I was wondering if there is any better way to fix it since doing this will increase initial page size by 8KB (even if the user doesn’t end up playing any video).

• This reply was modified 2 years, 12 months ago by atcrips.

Hello atcrips,

thank you for your reply!

Please reinstall FV Player from this link? https://github.com/foliovision/fv-wordpress-flowplayer/archive/master.zip To do that you will have to first deactivate and delete the current FV Player plugin you are using. WordPress will warn you that you might loose settings and data, but it’s not the case with our plugin, no settings now videos will be lost. Or you can just replace the plugin files via FTP.

Then the font will load before the video starts playing, but only if the video is actually getting loaded. So you can remove your preload link and there will be no layout shift.

Thanks,
Martin

Hello,

I checked with the latest version of the plugin, and unless I use the preload method mentioned above, the font doesn’t load in time and square icons are displayed instead.

Layout Shift:
Related Nodespan.fp-elapsed
Related Nodespan.fp-duration
Related Nodediv.fp-volume
Related Nodea.fp-fullscreen.fp-icon

Related Nodediv.fp-timeline.fp-bar::before

Hello atcrips,

it’s strange, you should really see the flowplayer.woff2 file loading as soon as you click the video.

Here’s what I’m getting in Network tab of Chrome developer tools: https://foliovision.com/images/2022/04/fv-player-font-loads-on-load.png

I cleared that Network tab once I loaded the page, then I clicked the HLS video to play and it would start loading both the video and the font at the same time – making sure the font is loaded before the video started to play.

Do you see the font loading at the same time as you click the video, or does it only start to load once the video starts playing? If so, then you are probably somehow getting the old version of the scripts – perhaps reinstalling from https://github.com/foliovision/fv-wordpress-flowplayer/archive/master.zip again will help.

Thanks,
Martin

• This reply was modified 2 years, 11 months ago by Foliovision: Making the web work for you.