11 Pasos para mejorar la velocidad de tu Web hecha en Webflow

En este tutorial de Webflow veremos cómo puedes mejorar la velocidad de tu página web hecha en Webflow en 11 pasos. El tutorial incluye:

• Analizar la velocidad de tu web.
• Ver qué elementos reducen la carga de la web.
• Paso a paso para optimizar la velocidad de una web hecha en Webflow.

A continuación puedes copiar los códigos que se indican en el video.

‍

Paso 2: Optimización de imágenes y videos

‍

En este paso, te indico que existe una forma para poder subir videos de alta calidad en Webflow, sigue los siguientes pasos:

‍

1. Sube tu video a una CDN. Yo te recomiendo que uses Cloudinary.

‍
Algo a tener en cuenta y que es recomendable, es subir tu video en dos formatos, .mp4 y .webm. Este último formato es uno de los más modernos y que muestra videos de alta calidad sin que afecten tanto a los tiempos de carga. NO es obligatorio que lo añadas, pero si te lo recomiendo.

‍

2. Una vez hayas subido tu video ahí, copia su URL.

‍

3. Copia el siguiente código en un componente Embed dentro de Webflow:

      		
        <div data-poster-url="https://assets.website-files.com/image.jpg" data-video-urls="https://res.cloudinary.com/video.mp4,https://res.cloudinary.com/video.webm" data-autoplay="true" data-loop="true" data-wf-ignore="true" class="video-class w-background-video w-background-video-atom">
            <video autoplay="" loop="" style="background-image:url("https://assets.website-files.com/image.jpg")" muted="" playsinline="" data-wf-ignore="true" data-object-fit="cover">
               <source src="https://res.cloudinary.com/video.mp4" data-wf-ignore="true">
               <source src="https://res.cloudinary.com/video.webm" data-wf-ignore="true">  
            </video>
        </div>
        	
        

Copiado

‍

En el código tendrás que modificar lo siguiente:

1. data-poster-url: Aquí deberás subir una imagen del poster del video a Webflow y copiar la URL. Esta imagen puede ser un screenshot del video. Servirá para mientras que el video está cargando, se mostrará esa imagen.
2. data-video-urls: Aquí pega la URL que has copiado de Cloudinary, la cual es la URL de tu video. Si vas a subir los dos formatos, .mp4 y .webm, tendrás que añadir ambos separados por una coma, como aparece en el ejemplo.
3. Dentro de la etiqueta <video> , después de "background-image:url(&quot;", pegar la misma URL que en data-poster-url
4. Dentro de la etiqueta <source>, en el parámetro src, añadiremos las URL de los videos, cada uno en su formato, como aparece en el ejemplo.

‍

4. Añadir CSS al componente de Video

si quieres modificar el tamaño del video o añadirle css, puedes crear un <div> en Webflow con la clase "video-class" y hacer todas las modificaciones que necesites, ya que se replicará en el elemento de video.

‍

Paso 9: Retrasar la carga de widgets

‍

Para poder retrasar la carga de los widgets como puede ser Calendly u otros widgets, puedes utilizar el siguiente script:

      		
        			
             <script>
                window.addEventListener('scroll',() =>
                      setTimeout(() => {

                         var scr_elem = document.createElement('script');
                         scr_elem.type = 'text/javascript'
                         scr_elem.src = 'https://assets.calendly.com/assets/external/widget.js'
                         document.body.appendChild(scr_elem);

                      }, 1000),
                      { once: true}                

                );
            </script>
        
        	
        

Copiado

‍

En el, sólo bastará con modificar la url de dentro de scr_elem.src por la de tu widget. En el ejemplo aparece la de calendly, que es https://assets.calendly.com/assets/external/widget.js.

‍

Si te surge alguna duda, te sugiero que la dejes dentro de los comentarios de nuestro video de Youtube.