Leap agiliza la optimización de la velocidad de su sitio web con una sola herramienta. Leap de Ezoic hace el trabajo de múltiples plugins e incluye las siguientes 18 características (¡se añaden más continuamente!):

CSS

1. CSS crítico: Introduce el CSS crítico en la etiqueta de encabezado y carga de forma asíncrona las hojas de estilo. Esto evita que el sitio "salte" cuando el CSS se carga lentamente. En otras palabras, el CSS crítico ayuda a que su sitio se cargue mejor al no cargar todos los estilos a la vez, y mejora la velocidad al poner el CSS importante en línea. Dentro de la función de CSS crítico también puede hacer clic en el enlace "Bloquear o resaltar archivos específicos (avanzado)", que le permitirá introducir URL específicas que deben ser procesadas u omitidas por la función de CSS crítico:






2. Eliminar el CSS no utilizado: Elimina cualquier CSS que no sea utilizado por la página actual y sirve una versión minificada del CSS que no se utiliza, lo que da como resultado un tamaño de página más pequeño y una carga más rápida.
   
   

   

   
   

3. Eliminar el CSS no utilizado por página: Elimina las clases CSS que no se utilizan en cada URL individual, y sirve una versión minificada del CSS que se utiliza en esa URL. (La función "Eliminar CSS no utilizado" debe estar activada para poder utilizar también esta función).
   ADVERTENCIA: Aunque esto debería aumentar la puntuación de velocidad de su sitio, puede hacer que su sitio sea más lento para los usuarios reales si la mayoría de las páginas utilizan el mismo conjunto de CSS. Esto sucede porque el usuario tiene que descargar un nuevo archivo para cada página que visita.
   
   





4. Optimización de fuentes: Las fuentes declaradas en la hoja de estilo en línea se optimizan para evitar destellos mientras se cargan las fuentes, y las múltiples llamadas a la API de fuentes se encapsulan en una sola solicitud
   

   

5. Precarga de fuentes: Precarga las fuentes que se encuentran en archivos CSS externos para que estén listas para ser mostradas más rápidamente sin bloquear la renderización de la página. Debería considerar el uso de esta configuración si Pagespeed Insights sugiere "Precargar solicitudes clave" con archivos de fuentes como los recursos a precargar.
   
   

   

Imágenes

1. Lazy loading de imágenes: Ayuda a que su sitio se cargue más rápido al cargar las imágenes solo cuando el usuario realmente las va a ver. Las imágenes situadas más abajo en la página se cargan a medida que el usuario se desplaza hacia abajo. Las únicas imágenes que se cargarán inmediatamente son las que se muestran en la primera pantalla, no las imágenes inferiores de la página. (Es necesario activar esta función cuando se utilicen las funciones Formatos Next-Gen y Redimensionar imágenes)

2. Formatos Next-Gen: En los navegadores compatibles, esta función servirá las imágenes en formato WebP - un nuevo formato de imagen diseñado para tener un tamaño de archivo más pequeño

3. Redimensionar imágenes: Redimensiona automáticamente las imágenes de su página en función del tamaño de la pantalla del usuario para minimizar los tiempos de transferencia y mantener la calidad de la imagen.

4. Precarga de imágenes de fondo: Añade etiquetas de precarga para las imágenes de fondo definidas en las hojas de estilo en línea. Las imágenes de fondo no se cargan hasta que se han procesado todas las hojas de estilo, por lo que esta función debería acelerar la carga de las imágenes grandes definidas como fondos.

5. Establecer anchura y altura explícitas: Establece los atributos Anchura y Altura en las etiquetas de imagen que no los tienen. No afecta a las etiquetas de imagen que ya tienen definidos los atributos Anchura y Altura.

Política eficiente de caché estática

Esta característica indica al navegador que almacene en caché sus activos estáticos, lo que puede aumentar la velocidad de su sitio porque el usuario no tiene que descargar esos activos más de una vez. Esta función configurará el encabezado de almacenamiento en caché de sus activos con una duración adecuada. Los activos estáticos disponibles que pueden ser almacenados en caché son:

1. Imágenes

2. Hojas de estilo

3. Scripts

4. Fuentes

También puede configurar ciertas reglas de URL de caché estática de la siguiente manera:

Preconectar

1. Orígenes de preconexión: Analiza su página para identificar otros dominios desde los que solicita activos. A continuación, añade etiquetas para indicar al navegador que se preconecte a esos dominios para acelerar la carga de esos activos.

Minificar el HTML

1. Minificar Javascript: Elimina los espacios en blanco, los comentarios y los caracteres innecesarios de los archivos de Javascript para minimizar el tamaño de la carga útil del mismo, reduciendo el tiempo de envío del archivo al usuario.

2. Minificar CSS: Elimine los espacios en blanco, comentarios y caracteres innecesarios de los archivos CSS para minimizar el tamaño de la carga útil del CSS, reduciendo el tiempo de envío del archivo al usuario.

3. Minificar el HTML: Elimine los espacios en blanco, los comentarios de atributos y los caracteres innecesarios del HTML para minimizar el tamaño de la página, reduciendo el tiempo de envío de la misma al usuario..

Tenga en cuenta que tiene la opción de "evitar" que cierto HTML sea minificado.

a. Mantener los comentarios condicionales de IE: Conservar los comentarios condicionales de IE en el HTML.

b. Mantener los valores de los atributos por defecto: Conservar los atributos por defecto de la etiqueta.

c. Conservar las etiquetas finales: Preservar las etiquetas finales.

d. Mantenga las comillas: Conserve las comillas alrededor de los atributos de las etiquetas como type='text/javascript'

e. Mantener los espacios en blanco: Preservar los espacios en blanco entre las etiquetas en línea, pero aún así colapsar múltiples caracteres de espacio en blanco en un solo carácter de espacio en blanco.

Ejecución de scripts

1. Retraso del Script: Retrasa la carga y ejecución de Javascript hasta que se haya cargado el contenido principal.

También puede configurar las reglas de URL de retardo de scripts de la siguiente manera. Si quiere excluir ciertas URL del retraso de script puede hacerlo utilizando parámetros "no diferidos" en su código. Aquí tiene información sobre cómo implementarlos:

https://developers.google.com/speed/pagespeed/service/DeferJavaScript

Alternativamente, puede configurar las "Reglas de URL" para excluir que el "Retraso de Script" se aplique a scripts, páginas o directorios específicos de su sitio:

¿No está seguro de qué scripts hay que excluir? Puede utilizar la función "Buscar scripts retrasados" para identificar la combinación correcta de scripts que debe excluir.

Comience por poner todos los scripts en "no" y luego utilice el proceso de eliminación para averiguar qué scripts pueden retrasarse ("sí") sin que ello afecte a la funcionalidad. Tenga en cuenta que a menudo será necesario excluir más de un script ("no") antes de dar con la combinación ganadora.

2. Retraso de anuncios: Retrasa la carga y ejecución de los anuncios hasta que se haya cargado el contenido principal.

3. Reduzca las tareas que consumen demasiada CPU: Ralentiza las tareas de javascript que están consumiendo demasiada CPU para que el procesador del navegador tenga tiempo libre para renderizar la página. Puede afectar a la sincronización de las llamadas SetInterval y SetTimeout.

4. Método de carga jQuery: Precarga de funciones del núcleo de jQuery. Si excluye scripts que requieren funciones jQuery, en lugar de excluir también toda la librería jQuery, añada un pequeño script que habilite la funcionalidad del núcleo hasta que se cargue el archivo jQuery principal.
Cargar jQuery desde CDN. Cargue jQuery desde una CDN global para que más usuarios lo tengan en caché.

Contenido

1. Lazy Load Iframes: Esta característica le permite cargar de manera diferida los iframes que aparecen fuera de la vista inicial de la pantalla. Esto ayuda a que su sitio se cargue más rápido, ya que solo se cargan los iframes cuando el usuario realmente los va a ver.

También puede configurar las reglas de lazy load de las URL de los iframes.

Con estas características, sus usuarios podrán interactuar con sus páginas mucho más rápido, mientras que los elementos menos esenciales se cargan en segundo plano. Para ponerlo en práctica, debe cargar Leap y generar una versión.