SEO - Mobile PageSpeed Insights issue with videos/images

Hello,
I have an SEO problem with a client website: the homepage on desktop uses web-optimized background videos in the header, these are set to display hidden for tablet and mobile view and are replaced with optimized images. But Google PageSpeed Insights still reads the videos instead of images for mobile, which worsens the ranking. How do I make it so that for mobile really only the images and not the videos are loaded?


> Here is my site Read-Only

Hi @Natri ,

Hiding assets, like a video or image, will not prevent them from being downloaded >> only hides them from being displayed ( display:none )

To avoid that, you will need to selectively add the videos using javascript.
You can use this custom code to get it done.

  1. add id to each video element (you can use 1,2,3 like in the example or assign your own)

  2. Adjust the width as you need (in example > 500)

  3. Paste in the URL for each video (if you host in webflow or any host service)

You can use it for as many videos as you need, just duplicate the lines in 1 & 3.

<script> 
   // 1. give your videos id of 1,2,3 OR replace 1,2,3 in code to the relevant id.
   const vid1 = document.getElementById('1').getElementsByTagName('video')[0];
   const vid2 = document.getElementById('2').getElementsByTagName('video')[0];
   const vid3 = document.getElementById('3').getElementsByTagName('video')[0];
  
   //  2. will add videos only if screen is > 500px width. change as needed. 
   if (window.innerWidth > 500) {    
   
   var source = document.createElement('source');
   source.setAttribute('src', 'https://video1.mp4'); // 3. replace with relevant source url
   vid1.appendChild(source);
  
   var source = document.createElement('source');
   source.setAttribute('src', 'https://video2.mp4'); // 3. replace with relevant source url
   vid2.appendChild(source);
   
   var source = document.createElement('source');
   source.setAttribute('src', 'https://video3.mp4'); //3. replace with relevant source url
   vid3.appendChild(source); 

   }
</script>

Hope it helps.

2 Likes

Many thanks, I will try it right away.

If it helps
here is a working demo for you to use:

https://preview.webflow.com/preview/shys-supercool-project-a4802e?utm_medium=preview_link&utm_source=designer&utm_content=shys-supercool-project-a4802e&preview=eb61eb736e57fbf16394f15e2399575f&workflow=preview

Link

Thanks, I tried it but Google PageSpeed Insights still reads the videos on mobile. Heres the read only link, did I forget something? It’s only about the slider on the homepage.

You’re almost there… :grinning:

Some small fixes:

  1. You need to update the variable names on the 3rd part of the code.
    after vid3, update to vid4, vid5, vid6 (see updated script in the bottom)

  2. Put the embed code at the bottom of document/Navigator OR in the “Home Settings” in the “Before tag” part. ( if you use this slider in other pages as well, then it needs to be in “Project settings” “Before tag”)
    The Reason being the code references the video elements.
    if the code will appear before them, the browser will result in an error because he hasn’t created them yet so he cant find them.

  3. The video elements need to be empty.
    what we’re actually doing, is using webflow empty video element
    and injecting them with the videos, but only in a specific criteria (if window is larger than X).
    If you choose to use webflow host as a workaround,
    delete the video elements after you extracted the URL’s and replace them with empty video elements (apply same class and don’t forget the id’s for each video).
    Personally, I haven’t hosted this way so I would make sure the
    assets will not be deleted in the future by webflow in this way.
    If there is a problem you could always host them on Amazon/Dropbox etc…

<script> 
   // give your videos id of 1,2,3 OR replace 1,2,3 in code to the relevant id.
   const vid1 = document.getElementById('1').getElementsByTagName('video')[0];
   const vid2 = document.getElementById('2').getElementsByTagName('video')[0];
   const vid3 = document.getElementById('3').getElementsByTagName('video')[0];
   const vid4 = document.getElementById('4').getElementsByTagName('video')[0];
   const vid5 = document.getElementById('5').getElementsByTagName('video')[0];
   const vid6 = document.getElementById('6').getElementsByTagName('video')[0];
  
   //  will add videos only if screen is > 768px width. change as needed. 
   if (window.innerWidth > 768) {    
   
   var source = document.createElement('source');
   source.setAttribute('src', 'https://assets.website-files.com/5bbe33c27d75d377daf5f7be/5be95eace4a547a66c1bbf44_Sanssouci-ITSM_Willkommen-transcode.mp4'); // replace with relevant source url
   vid1.appendChild(source);
  
   var source = document.createElement('source');
   source.setAttribute('src', 'https://assets.website-files.com/5bbe33c27d75d377daf5f7be/5be95faf1634403277c0e452_Langjaehrige_Projekterfahrung-transcode.mp4'); // replace with relevant source url
   vid2.appendChild(source);
   
   var source = document.createElement('source');
   source.setAttribute('src', 'https://assets.website-files.com/5bbe33c27d75d377daf5f7be/5be9604f163440d6eac0e483_Dialogpartner_und_Problemloeser-transcode.mp4'); // replace with relevant source url
   vid3.appendChild(source); 
   
   var source = document.createElement('source');
   source.setAttribute('src', 'https://assets.website-files.com/5bbe33c27d75d377daf5f7be/5be961e4dda30e367c608c94_Nachhaltigkeit_als_Ziel-transcode.mp4'); // replace with relevant source url
   vid4.appendChild(source); 
   
   var source = document.createElement('source');
   source.setAttribute('src', 'https://assets.website-files.com/5bbe33c27d75d377daf5f7be/5c1a32e4f264d604634b8cd0_Agilitaet_Projekte-transcode.mp4'); // replace with relevant source url
   vid5.appendChild(source); 
   
   var source = document.createElement('source');
   source.setAttribute('src', 'https://assets.website-files.com/5bbe33c27d75d377daf5f7be/5be963b01f965b4a3b740ef6_Passgenaue_Loesungen-transcode.mp4'); // replace with relevant source url
   vid6.appendChild(source); 
   }

</script>
1 Like

Thank you @11149 !!! This works perfectly.

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.