Performance Tips: Turn OFF Play Icon on Video widget to improve Google Page Speed Insights score

  • 20 August 2021
  • 11 replies
  • 461 views

Userlevel 3
Badge +2

Hi Elementor users ^^

Perhaps this tips is for new users or beginners who struggle with Google Page Speed Insights score.

 

Speed Test on Google Page Speed Insights

I just did a little test using the Video widget. Here is the SS:

This Play Icon feature located

Tested with Google Page Speed Insights
 

Condition A: With Play Icon active

The score with Play Icon active

 

Eicons is detected

 

Condition B: Without Play Icon (deactive)

Play Icon is Turn Off
No Eicons is detected

So, there is an improvement of about 15 to 20 score (I tested 2 - 3 times). Not bad , right?

 

The Problem with the look

So, if you need to use the Video widget and want to improve Google PSI score, turn off the Play Icon. But there is a little problem. The problem is the look is awful without the PLAY icon :cry:

 

The Solution

→ put the Play icon as part of your image thumbnail ^^ as an JPG image.

Here is example I created on Canva:

 

Guys, hope this small tip is useful. Thanks ^^

Cheers,

Clement Yo ^^
https://elemn.to/Clement 

 

Disclaimer: The site is a dummy site, not optimized yet.


11 replies

Userlevel 4
Badge +1

Thanks, Clement! Great tip. It is interesting how such a small thing can make such a big difference!

Great find! Thanks for sharing this, Clement. 

Userlevel 3
Badge +1

Wow, what a big difference. Thanks for sharing!

Userlevel 3
Badge +2

Great find! Thanks for sharing this, Clement. 

Thanks Tamara ^^ still learning ^^ hope this little trick is helpful :yum:

Userlevel 3
Badge +2

Wow, what a big difference. Thanks for sharing!

Thanks Brian ^^ Love to share what I know. Actually what I did is preparation for our local Elementor Meetup. At first, I just play around then when I did the testing before & after, the score got my attention. So, I just want to share what I found ^^ 

Userlevel 6
Badge +2

woff2 is fonts, so its fonts families are not called or that was causing Issue, I have been using it but i have not faced it, so I am curious to know more.

Regards

Userlevel 3
Badge +2

woff2 is fonts, so its fonts families are not called or that was causing Issue, I have been using it but i have not faced it, so I am curious to know more.

Regards

Hi, James. Yes, woff2 is for Fonts. And if you are using eicons (elementor icons), it is consider as Font Icons (Fonts / Woff2). 

For example, if you are using the Video Widget with Play Icon is active (as the example I use above on my post), the icon of PLAY is consider as eicons.woff2 something like that. Other example of eicons is when you’re using Elementor Nav Bar, and you have Sub Menu (Dropdown menu). You will find a caret right icon for the dropdown menu. See this list of eicons https://elementor.github.io/elementor-icons/

As far as I know these list of eicons are considerd as Fonts Woff2 ^^ Please correct me if mistaken. I can be wrong too ^^

The best way is to test before and after you activate any Elementor widget which using eicons on Google Page Speed Insights.

Cheers  

Userlevel 4
Badge +2

But in your post on Facebook, I did not answer why lite-youtube method is far better than Elementor’s video widget.

And here the answers-

  1. Elementor’s video widget depends on many JS files some of them are frontend.min.js, webpack.runtime.js, frontend.modules.js, jQuery, etc where this lite-youtube JS has no dependencies.
  2. JS is significantly lower than Elementor video widget.
  3. It is difficult to delay any JS loaded by Elementor if it isn’t done properly Elementor editor will not work whereas you can delay lite-youtube JS with flying-scripts.

Here the markup-

<!-- 
* Videoid refers to YouTube id after https://www.youtube.com/watch?v="videoid"
* VideoTitle refers to the video title
* It's accessible via keyboard and will set ARIA via the videotitle attribute
* It's locale ready; you can set the videoplay to have a properly locale-based label
* JS already handles webp with jpeg format
* Also support YouTube iframe API https://developers.google.com/youtube/player_parameters
* Title & Play for accessibility purposes only
-->



<lite-youtube

videoid="guJLfqTFfIw"
videotitle="This is a video title"
videoplay="Play"
params="controls=0&enablejsapi=1">

</lite-youtube>

And this is the JS, you need to enqueue to your footer or end of the body tag.

<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.6.2/lite-youtube.js">

By default, this JS has no support for native loading=”lazy” attribute but you can modified the JS and update markup.

Here the modified JS it has loading=”lazy” attribute

<script type="module" defer src="https://foxscribbler.com/wp-content/uploads/assets/lite-youtube.min.js"></script>

If you don’t want to get hand dirty, here the widget I have created with Unlimited Elements with Elementor and you can download it for personal or clients use.

Cheers
Thangjam Kishorchand

Userlevel 6
Badge +2

woff2 is fonts, so its fonts families are not called or that was causing Issue, I have been using it but i have not faced it, so I am curious to know more.

Regards

Hi, James. Yes, woff2 is for Fonts. And if you are using eicons (elementor icons), it is consider as Font Icons (Fonts / Woff2). 

For example, if you are using the Video Widget with Play Icon is active (as the example I use above on my post), the icon of PLAY is consider as eicons.woff2 something like that. Other example of eicons is when you’re using Elementor Nav Bar, and you have Sub Menu (Dropdown menu). You will find a caret right icon for the dropdown menu. See this list of eicons https://elementor.github.io/elementor-icons/

As far as I know these list of eicons are considerd as Fonts Woff2 ^^ Please correct me if mistaken. I can be wrong too ^^

The best way is to test before and after you activate any Elementor widget which using eicons on Google Page Speed Insights.

Cheers  





What I fail to understand : is Icon causing delay or js is causing delay.
these two have two diffrent solutions

Userlevel 3
Badge +2

But in your post on Facebook, I did not answer why lite-youtube method is far better than Elementor’s video widget.

And here the answers-

  1. Elementor’s video widget depends on many JS files some of them are frontend.min.js, webpack.runtime.js, frontend.modules.js, jQuery, etc where this lite-youtube JS has no dependencies.
  2. JS is significantly lower than Elementor video widget.
  3. It is difficult to delay any JS loaded by Elementor if it isn’t done properly Elementor editor will not work whereas you can delay lite-youtube JS with flying-scripts.

Here the markup-

<!-- 
* Videoid refers to YouTube id after https://www.youtube.com/watch?v="videoid"
* VideoTitle refers to the video title
* It's accessible via keyboard and will set ARIA via the videotitle attribute
* It's locale ready; you can set the videoplay to have a properly locale-based label
* JS already handles webp with jpeg format
* Also support YouTube iframe API https://developers.google.com/youtube/player_parameters
* Title & Play for accessibility purposes only
-->



<lite-youtube

videoid="guJLfqTFfIw"
videotitle="This is a video title"
videoplay="Play"
params="controls=0&enablejsapi=1">

</lite-youtube>

And this is the JS, you need to enqueue to your footer or end of the body tag.

<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@0.6.2/lite-youtube.js">

By default, this JS has no support for native loading=”lazy” attribute but you can modified the JS and update markup.

Here the modified JS it has loading=”lazy” attribute

<script type="module" defer src="https://foxscribbler.com/wp-content/uploads/assets/lite-youtube.min.js"></script>

If you don’t want to get hand dirty, here the widget I have created with Unlimited Elements with Elementor and you can download it for personal or clients use.

Cheers
Thangjam Kishorchand

Thanks man for your sharing ^^ It is very helpful for those who wants to use YouTube and get better performance ^^ 

Userlevel 3
Badge +2

woff2 is fonts, so its fonts families are not called or that was causing Issue, I have been using it but i have not faced it, so I am curious to know more.

Regards

Hi, James. Yes, woff2 is for Fonts. And if you are using eicons (elementor icons), it is consider as Font Icons (Fonts / Woff2). 

For example, if you are using the Video Widget with Play Icon is active (as the example I use above on my post), the icon of PLAY is consider as eicons.woff2 something like that. Other example of eicons is when you’re using Elementor Nav Bar, and you have Sub Menu (Dropdown menu). You will find a caret right icon for the dropdown menu. See this list of eicons https://elementor.github.io/elementor-icons/

As far as I know these list of eicons are considerd as Fonts Woff2 ^^ Please correct me if mistaken. I can be wrong too ^^

The best way is to test before and after you activate any Elementor widget which using eicons on Google Page Speed Insights.

Cheers  





What I fail to understand : is Icon causing delay or js is causing delay.
these two have two diffrent solutions

Hi, James. Sorry, I don’t have any answer for this about Icon and JS delay ^^ as far I know there is no JS for eicons. Maybe other friends could answer ^^ @Thangjam Kishorchand @Nigel Hancock 

On my post, I just want to mention that by not using Play Icon on Video widget, we’ll get better performance score on Google Page Speed Insights. So, as alternative, we can use an image thumbnail with the play icon on the image design ^^

Hope you can get better answer :blush: Cheers

 

Reply