Para quienes nos interesa optimizar al máximo la velocidad de carga y renderizacion de nuestros sitios, habremos notado que cada vez que insertamos un iframe nuestra pagina se pone más lenta y más aun si usamos varios iframes como: youtube, facebook, tripadvisor, twitter, etc.

En esta ocasion haré una buena optimizacion con los videos de yotube cargan un pesado base.js que pesa no menos de 1MB y la solucion recomendada es cargarlo despues que otros elementos de nuestra pagina ya haya cargado y al ultimo el iframe de youtube, haciendo este cambio yo pase de 83% a 93 en gtmetrix

Lo primero que analizaremos es el codigo iframe de un video de youtube  que es el siguiente

aqui haremos unos cambios

  1. cambiaremos lo que dice “src”  y le pondremos “data-src” y agregaremos otro donde solo pondremos src=”” (así vacio)
  2. Le agregaremos una clase llamada “videoyoutube”, (Esto para que no haga conflicto ni perjudique a otros iframes)

Nuestro cogido debería quedar así

NOTA: aque te recomiendo usar un shortcode (WordPress) o una funcion para automatizar la insersion de Videos

Luego agregamos este codigo que “buscará” todos los iframes con la clase que pusimos anteriormente

Eso es todo podemos hacer un test en gtmetrix o otro de tu preferencia

Fuente: https://varvy.com/pagespeed/defer-videos.html

http://stackoverflow.com/questions/19246954/getelementsbytagname-with-the-class-selector