Normalmente, una creatividad HTML5 hace referencia a los anuncios creados con HTML, CSS y JavaScript. Las creatividades HTML5 permiten comprimir los archivos de distintas formas. Muchos de los consejos que se indican más abajo se pueden implementar en menos de 15 minutos.
Temas de este artículo:
Utilizar Google Web Designer
Google Web Designer es una aplicación web para desarrollo en HTML5 perfectamente integrada con Studio y la biblioteca de recursos. Además, Google Web Designer incorpora capacidad de compresión de imágenes y código, compatibilidad con fuentes web de Google, compatibilidad con SVG y compatibilidad con animación CSS, entre otras funciones.
Empezar a utilizar Google Web Designer
Revisar el tamaño del archivo
Antes de reducir el tamaño de archivo, compruebe el tamaño de archivo actual y revise las siguientes directrices y términos.
Comparación del tamaño de archivo sin procesar y el tamaño de archivo comprimido
Para revisar el tamaño del archivo sin procesar, haga lo siguiente:
- En Studio, compruebe el valor de Tamaño total del archivo en el paso Administrar archivos del flujo de trabajo de creatividades de Studio.
- En Google Web Designer, haga clic en Publicar > Publicar localmente para ver el tamaño total (archivos sin procesar) en el cuadro de diálogo de publicación. También puede ver el tamaño actual en el panel Validador de anuncios.
Google Web Designer comprime las creatividades con el software gratuito gzip. Si no utiliza Google Web Designer, puede descargar gratuitamente una copia de gzip, comprimir las creatividades en su espacio de trabajo local y examinar el tamaño de archivo.
Valor de referencia del tamaño de archivo
Antes de compilar la creatividad, es fundamental conocer las especificaciones del servicio de anuncios del editor. No obstante, muchos editores siguen las directrices de la IAB, que recomienda una carga inicial de 200 kB (tamaño comprimido) para la creatividad y de 300 o 500 kB para el tamaño total de la creatividad (según el formato). La carga inicial se refiere al tamaño total del archivo comprimido formado por todos los recursos de la creatividad que se entregan al navegador para la visualización inicial del anuncio, lo que incluye todos los archivos (imágenes, HTML, CSS y JavaScript).
Tamaño de archivo del Enabler
El Enabler debe estar incluido en las creatividades de Studio, pero los navegadores web conservan una copia almacenada en caché porque se carga la misma secuencia de comandos en todas las creatividades de Studio. El tamaño de la secuencia de comandos del Enabler es 25 kB (comprimido) y 75 kB (sin procesar).
Para más información, consulte las directrices de la IAB y de Studio:
- Directrices de la IAB referentes a HTML5 (en formato .PDF, consulte las páginas 4 y 6)
- Directrices referentes a las creatividades de Studio
Información sobre las intervenciones de anuncios pesados de Chrome
- Si su creatividad tiene muchas imágenes, vídeos, animaciones u objetos 3D, siga las directrices de Chrome para probar la creatividad y asegurarse de que no se descargue.
- Utilice la demostración de la intervención de anuncios pesados de Chrome para probar la creatividad y comprobar si se bloquea.
Carga progresiva y especificaciones de los editores
La carga progresiva retrasa la carga de otros recursos de la creatividad (como imágenes y vídeos) hasta que la página principal del editor termina de cargarse. No es lo mismo que la carga inicial, que se refiere al tamaño total del archivo comprimido que contiene todos los recursos de la creatividad que se entregan al navegador para la visualización inicial del anuncio. Si bien algunos editores requieren la carga progresiva, se recomienda incluirla siempre aunque no sea necesario. Información sobre cómo configurar la carga progresiva
Revise las especificaciones HTML5 de Rich Media de su editor. Los editores pueden contabilizar el tamaño del archivo según el formato gzip comprimido o, si lo prefieren, pueden hacerlo según el tamaño del archivo sin procesar. Las especificaciones de cada editor pueden diferir de las de la IAB en función del emplazamiento, el tipo de anuncio, etc. Es posible que algunos editores estén dispuestos a llegar a un acuerdo sobre las especificaciones de compilación. Además hay que tener en cuenta las posibles limitaciones de tiempo de reproducción de vídeo o de animaciones.
Reducir el tamaño de la imagen
Antes de proceder a reducir el tamaño de una imagen, piense si es necesario. Tenga en cuenta que algunos elementos de las imágenes pueden sustituirse con estilos de CSS. Las sugerencias y los recursos siguientes sirven para reducir el número de imágenes de la creatividad y optimizar las imágenes que necesita.
Utilice CSS para crear gradientes o colores sólidosLas imágenes GIF, JPG y PNG están basadas en píxeles (“tramas”) y tienen tamaños más grandes. Las imágenes SVG son gráficos de punto a punto (“vectores”) y pueden reducir bastante el tamaño de archivo.
Más información sobre SVG
Tutorial sobre SVG de W3Schools
Cómo utilizar SVGs
Compresión de SVGs
Las fuentes de iconos son fuentes normales que se pueden utilizar como las fuentes estándares. Suelen estar basadas en vectores, lo que reduce el tamaño del archivo. Si utiliza los mismos iconos una y otra vez, compile su propia fuente de iconos.
Recursos para la fuente de iconos
Creador de fuentes de iconos de IcoMoon
Iconos de css de Noun Project
Iconos de css de Font Awesome
Una hoja de sprites es una imagen única presentada en mosaico que se carga una vez. Con CSS, en la imagen general se muestra cada icono por separado. En cambio, con una hoja de sprites se reduce el número de solicitudes HTTP. Cuantas menos solicitudes HTTP haya, más rápido se carga la creatividad. Aun así, es importante encontrar la compresión adecuada para la hoja de sprites.
Recursos para la hoja de sprites
Descripción general de sprites de imagen de CSS de W3Schools
Generador de hojas de sprites online Stitches
Si se requieren imágenes basadas en píxeles, comprímalas todo lo que pueda sin perder calidad. Además de la función Guardar para Web de Photoshop, que probablemente conozca, existen otras herramientas online que ofrecen compresión avanzada.
Animar con CSS
Tiene la opción de usar animaciones CSS3 para las transiciones y transformaciones en lugar de JavaScript. Las transformaciones de CSS utilizan la unidad de procesamiento de gráficos (GPU) en lugar de la unidad de procesamiento central (CPU) para el renderizado de animaciones, lo que mejora el rendimiento y reduce el tamaño de archivo de JavaScript.
En el caso de las animaciones más complejas (incluidas las animaciones de partículas), se recomienda usar las bibliotecas de animación de JavaScript de GreenSock (GSAP). GreenSock simplifica los aspectos más engorrosos de la animación CSS, como puede ser el ajuste de los tiempos de varias animaciones y la animación de forma independiente de las propiedades de transformaciones.
No utilice bibliotecas de JavaScript ni frameworks que usen el método setInterval de JavaScript para las animaciones ni utilice el método setInterval cuando codifique manualmente. setInterval consume muchos recursos del navegador, afecta al rendimiento y necesita mayor programación. Si tiene que recurrir a las animaciones de JavaScript obligatoriamente, se recomienda usar el método requestAnimationFrame, que es específico para animaciones.
Información sobre cómo optimizar el rendimiento de animaciones
Usar requestAnimationFrame
Animaciones CSS frente a animaciones JavaScript
Antes de subir los archivos de CSS a Studio, minifique la imagen CSS con un minificador de CSS.
Reducir el tamaño del archivo JavaScript
A continuación, le indicamos algunos consejos para reducir el tamaño del archivo JavaScript:
No utilice jQueryEn lugar de subir bibliotecas de JavaScript con su creatividad, sustituya las referencias a las bibliotecas de JavaScript comunes por direcciones URL alojadas en Studio. Estas bibliotecas se alojan en el mismo dominio que su anuncio activo.
Studio está trabajando con el IAB para que muchas creatividades compartan y almacenen en caché estos recursos de forma que puedan excluirse de la carga inicial de su anuncio.
Si decide a qué navegadores y dispositivos va a orientar la campaña, ahorrará tiempo y necesitará menos código. No añada código en el caso de que se oriente a navegadores y dispositivos no compatibles. Esto también le permitirá ahorrar tiempo en las pruebas.
Recursos para la compatibilidad con navegadoresCompatibilidad de navegadores y dispositivos con Studio
¿Puedo utilizar…?: compatibilidad actualizada de navegadores con propiedades de JavaScript y CSS
Combinar y comprimir su JavaScript
Si tiene varios archivos JavaScript, combínelos en uno solo. Utilice herramientas que eliminen comentarios y espacios en blanco adicionales de su JavaScript.
- Tenga a mano una copia sin comprimir para realizar futuras actualizaciones.
- Studio requiere que los archivos JavaScript tengan la extensión
.jsy no.min.js. - Si minifica los archivos JavaScript, no podrá añadir el seguimiento fácilmente. Por ello, primero hay que añadir el seguimiento y luego minificar el archivo JavaScript.
Optimizar fuentes
Si utiliza una fuente web distinta de la estándar, puede utilizar Google Fonts, una biblioteca grande de fuentes gratuitas. Para reducir el tamaño de archivo, asegúrese de solicitar únicamente los caracteres que necesite de la fuente en lugar de solicitar todo el tipo de letra.
Sin embargo, también es importante recordar que los navegadores solo almacenan en caché las URLs absolutas. Aunque http://fonts.googleapis.com/css?family=Philosopher&text=Hello sea el tamaño más pequeño de una creatividad concreta, se seguirá viendo como una solicitud aparte desde http://fonts.googleapis.com/css?family=Philosopher&subset=latin, que puede estar ya almacenada en el historial del navegador. Siempre que sea posible, aproveche el almacenamiento en caché para que las creatividades se carguen con mayor rapidez.
Más información sobre fuentes web
Optimizar solicitudes de fuentes con Google Web Fonts
Crear subconjuntos de fuentes web de alojamiento propio y de Typekit