Si aún no te has dado cuenta, hemos añadido una serie de nuevos controles que te permiten optimizar el rendimiento de tu sitio todavía más.
Aquí tienes una lista rápida de las actualizaciones, con detalles sobre cada una a continuación:
- Las imágenes nuevas se cargan de forma diferida (lazy load) por defecto, lo que significa que se cargan cuando aparecen en pantalla.
- Habilita una carga de fuentes más fluida configurando font-display en “swap” para evitar el parpadeo de texto invisible al cargar las páginas.
- Configura la precarga de enlaces para que las páginas y recursos destacados se carguen más rápido cuando un visitante haga clic en ellos.
Las imágenes se cargan de forma diferida por defecto
Para ayudar a que tus sitios carguen más rápido, hemos hecho que todas las imágenes nuevas se carguen de forma diferida (lazy load) por defecto, lo que significa que se cargan cuando aparecen en pantalla, en lugar de cargar todas las imágenes de una página al abrir el sitio por primera vez.
Un poco de contexto: los sitios con muchas imágenes pueden ralentizar drásticamente la carga de las páginas. Además de cambiar el tamaño y optimizar los recursos individuales (o confiar en nuestra optimización de imágenes adaptables), un truco que puedes usar para solucionar este problema es añadir un atributo personalizado “loading = lazy” a las imágenes, que indica al navegador que no cargue esa imagen hasta que el usuario se desplace hasta ella.
Esto siempre ha sido posible con código personalizado, pero puede ser un engorro; así que, para que tus sitios funcionen más rápido y tu vida sea un poco más fácil, hemos configurado todas las imágenes nuevas para que se carguen de forma diferida por defecto.
Esta actualización no afecta a las imágenes existentes en los sitios, aunque puedes habilitar fácilmente este ajuste para cada imagen desde su panel de configuración. También puedes anular este valor predeterminado por imagen si prefieres que se carguen al abrir la página inicialmente.
También es importante señalar que la carga diferida solo se aplica a las imágenes en línea (es decir, <img> elementos), y no cubre las imágenes de fondo, que pueden ser una fuente importante de lentitud si no se optimizan correctamente. Además de comprimir y optimizar las imágenes de fondo que utilices, también puedes usar image object-fit como alternativa, lo que te permite lograr los mismos diseños aprovechando la carga diferida y la función de imágenes adaptables integrada de Webflow.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Opciones avanzadas de carga de fuentes
Un aspecto a menudo pasado por alto del rendimiento de un sitio web son las fuentes, que, como cualquier recurso personalizado en un sitio, a menudo tardan un poco en cargarse al abrirlo. Aunque las fuentes de respaldo pueden ayudar mostrando fuentes ya cargadas antes de que se descarguen las personalizadas, algunos navegadores ocultan el texto hasta que la fuente se carga, provocando un parpadeo de texto invisible.
Además de verse mal, esto también es una señal de alerta para la accesibilidad, ya que no hay texto que leer. Afortunadamente, existe una propiedad “font-display” con un atributo “swap” que le dice al navegador que muestre inmediatamente el contenido en cuestión usando una fuente del sistema precargada.
Para facilitarte el uso de la propiedad font-display en Webflow, hemos añadido los ajustes de visualización de fuentes directamente en la configuración de tus fuentes personalizadas*. Para habilitar “font-display: swap” en tus fuentes, simplemente selecciona la opción “swap” para cada fuente que estés usando. (Obtén más información sobre las otras opciones de visualización de fuentes en la documentación de Mozilla.)
*Ten en cuenta que los controles de visualización de fuentes solo están disponibles con fuentes personalizadas, no con fuentes de Google o Adobe. Para habilitar los ajustes de visualización de fuentes para esas fuentes, deberás descargarlas y añadirlas a tu sitio como una fuente personalizada.
Precarga enlaces importantes
¿No sería genial poder decirle al navegador qué página es probable que visiten los usuarios a continuación y que esta comience a cargarse en segundo plano, para que esté lista y en caché cuando hagan clic en el enlace? Buenas noticias: puedes hacerlo gracias al prefetching y prerendering, que ahora hemos hecho más fácil que nunca de configurar en tu sitio de Webflow.
Ahora tienes tres nuevas opciones de "precarga" en el panel de configuración de los enlaces de tu página:
- Predeterminado: la página vinculada se carga después de que el visitante haga clic.
- Prefetch: indica al navegador que descargue los recursos de la página vinculada en cuanto tenga tiempo libre (una vez que la página actual se haya cargado por completo).
- Prerender: indica al navegador que renderice completamente y empiece a descargar todos los recursos necesarios (CSS, imágenes, JavaScript) para esa página antes de abrirla. (Esto supone una carga muy pesada para el navegador, así que úsalo solo para enlaces clave, como llamadas a la acción o aquellos que creas que los visitantes tienen muchas probabilidades de pulsar).
Una advertencia: estas opciones de prefetching y prerendering pueden mejorar el rendimiento si tienes bastante claro qué páginas cargará el usuario a continuación; sin embargo, si no estás seguro, estos métodos pueden sobrecargar el navegador y ralentizar el rendimiento general.
Estas actualizaciones te ofrecen un mayor control a la hora de optimizar el rendimiento de tu sitio publicado. Si tienes más ideas o sugerencias para mejorar la velocidad de tu sitio, cuéntanoslo en los comentarios o envíanos tus propuestas a nuestra lista de deseos.
