Google AMP Cache, AMP Lite y la furia por la velocidad
jueves, 31 de agosto de 2017
En Google, creemos en la velocidad como principio fundamental para el diseño de productos. El formato Accelerated Mobile Pages (AMP) permite garantizar que el contenido se cargue de manera rápida y confiable, pero se pueden obtener resultados aún mejores.Read More
En Google, creemos en la velocidad como principio fundamental para el diseño de productos. El formato Accelerated Mobile Pages (AMP) permite garantizar que el contenido se cargue de manera rápida y confiable, pero se pueden obtener resultados aún mejores.
El almacenamiento inteligente en caché es uno de los ingredientes claves en las experiencias de AMP casi instantáneas a las que acceden los usuarios en productos como Búsqueda de Google y Google Noticias y clima. Gracias al almacenamiento en caché, podemos acercar, en general, el contenido a los usuarios que lo solicitan, de modo que la trayectoria de los bytes para llegar a ellos sea más corta. A su vez, el uso de una infraestructura común como la memoria caché proporciona una mayor uniformidad en los tiempos de procesamiento de páginas a pesar de que el contenido se origina en muchos hosts, que podrían ofrecer una latencia muy diferente (y mucho mayor) al procesar el contenido en comparación con la caché.
Las páginas procesadas en la experiencia de AMP de Búsqueda de Google provienen de Google AMP Cache principalmente porque la entrega es más rápida y uniforme. La infraestructura unificada de procesamiento de contenido de Cache brinda la atractiva posibilidad de crear optimizaciones que se ajusten para mejorar la experiencia en el procesamiento de cientos de millones de documentos. Hacer esto de modo que cualquier documento pueda aprovechar estos beneficios es una de las razones principales por las cuales Google AMP Cache se encuentra disponible de manera gratuita para cualquier usuario.
En esta entrada, destacaremos dos mejoras que introdujimos recientemente: (1) la entrega optimizada de imágenes y (2) la posibilidad de que el contenido se procese mejor en condiciones de restricción de ancho de banda a través de un proyecto llamado “AMP Lite”.
En promedio, las imágenes en la Web representan el 64% de los bytes de una página. Esto convierte a las imágenes en un objetivo muy promisorio para la aplicación de optimizaciones significativas.
La aplicación de optimizaciones vinculadas a imágenes es una opción eficaz para reducir el tráfico de bytes. Google AMP Cache usa la pila de optimización de imágenes que se emplea en los módulos de PageSpeed y la compresión de datos de Chrome. (Observen que, para realizar las transformaciones mencionadas, Google AMP Cache no tiene en cuenta el encabezado “Cache-Control: no-transform”). Los sitios pueden obtener las mismas optimizaciones en sus orígenes si se instala PageSpeed en sus servidores.
A continuación, se ofrece un resumen con las optimizaciones que aplicamos:
1) Eliminación de datos que son invisibles o resultan difíciles de visualizar
Quitamos los datos de imágenes invisibles para los usuarios, como los metadatos de miniaturas y ubicación geográfica. En el caso de las imágenes JPEG, también reducimos la calidad y las muestras de color si sus valores superan lo necesario. Para ser exactos, reducimos la calidad del formato JPEG a 85 y el valor de las muestras de color a 4:2:0; es decir, una muestra de color cada cuatro píxeles. La compresión de una imagen JPEG hasta una calidad o un valor de muestras de color más altos que estos implica un mayor volumen de bytes, pero resulta difícil notar la diferencia en términos visuales.
Los datos de imagen reducidos posteriormente se someten a una compresión exhaustiva. Descubrimos que estas optimizaciones reducen el volumen de bytes en más de un 40% y, al mismo tiempo, no suponen cambios perceptibles para el ojo del usuario.
2) Conversión de imágenes al formato WebP
Algunos formatos de imagen son más aptos para dispositivos móviles. Convertimos los archivos JPEG a WebP para los navegadores admitidos. Esta transformación reduce en más de un 25% el volumen de bytes sin pérdida de calidad.
3) Adición de srcset
Agregamos “srcset” si no se incluye. Esto se aplica a etiquetas “amp-img” que tienen el atributo “src” y carecen del atributo “srcset”. La operación incluye la expansión de la etiqueta “amp-img” y el redimensionamiento de la imagen a varios tamaños. Esto reduce más el conteo de bytes en dispositivos con pantallas pequeñas.
4) Uso de imágenes de calidad inferior en determinadas circunstancias
Reducimos la calidad de las imágenes JPEG cuando existen indicios de que el usuario lo prefiere o la velocidad de la red en cuestión es muy reducida (como parte de lo que se afirma sobre AMP Lite, a continuación). Por ejemplo, reducimos la calidad de las imágenes JPEG hasta 50 para usuarios de Chrome que activan la extensión Reducir datos. Esta transformación proporciona una reducción adicional de más del 40% en el volumen de bytes de estas imágenes.
En el ejemplo siguiente, se muestran las imágenes antes (izquierda) y después (derecha) de las optimizaciones. La imagen tiene un tamaño original de 241 260 bytes. Después de las optimizaciones 1, 2 y 4, este es de 25 760 bytes. Después de las optimizaciones, el aspecto de la imagen es básicamente el mismo y se logra una reducción del 89% en el volumen de bytes.
Muchas personas en todo el mundo acceden a Internet con bajas velocidades de conexión a través de dispositivos con capacidades de memoria RAM reducidas. Además, hemos descubierto que algunas páginas AMP no están optimizadas para estos usuarios que experimentan severas restricciones de ancho de banda. Por ello, Google también lanzó AMP Lite con el propósito de restar un volumen de bytes aún mayor a las páginas AMP para estos usuarios.
Con AMP Lite, se aplican a las imágenes todas las optimizaciones mencionadas. En particular, siempre empleamos niveles de calidad inferiores (consulten el inciso 4, arriba).
A su vez, optimizamos las fuentes externas usando la etiqueta amp-font y fijamos el tiempo de espera de carga de fuentes en 0 segundos, de modo que sea posible mostrar las páginas de inmediato independientemente de que la fuente externa en cuestión se almacene en caché previamente o no.
AMP Lite se implementará para usuarios con restricciones de ancho de banda en varios países, como Vietnam y Malasia, y para quienes tengan dispositivos con capacidad de memoria RAM reducida la implementación se hará en todo el mundo. Tengan en cuenta que estas optimizaciones pueden modificar los detalles sutiles de algunas imágenes, pero no afectarán otras secciones de la página en las que se incluyan anuncios.
* * *
En suma, una vez aplicadas todas las optimizaciones mencionadas observamos una reducción combinada del 45% en el volumen de bytes.
Esperamos lograr aún más avances en el intento por aportar más eficacia al empleo de los datos de los usuarios, a fin de proporcionar experiencias de AMP incluso más rápidas.
Publicado por Huibao Lin y Eyal Peled, ingenieros de software, Google
El almacenamiento inteligente en caché es uno de los ingredientes claves en las experiencias de AMP casi instantáneas a las que acceden los usuarios en productos como Búsqueda de Google y Google Noticias y clima. Gracias al almacenamiento en caché, podemos acercar, en general, el contenido a los usuarios que lo solicitan, de modo que la trayectoria de los bytes para llegar a ellos sea más corta. A su vez, el uso de una infraestructura común como la memoria caché proporciona una mayor uniformidad en los tiempos de procesamiento de páginas a pesar de que el contenido se origina en muchos hosts, que podrían ofrecer una latencia muy diferente (y mucho mayor) al procesar el contenido en comparación con la caché.
Las páginas procesadas en la experiencia de AMP de Búsqueda de Google provienen de Google AMP Cache principalmente porque la entrega es más rápida y uniforme. La infraestructura unificada de procesamiento de contenido de Cache brinda la atractiva posibilidad de crear optimizaciones que se ajusten para mejorar la experiencia en el procesamiento de cientos de millones de documentos. Hacer esto de modo que cualquier documento pueda aprovechar estos beneficios es una de las razones principales por las cuales Google AMP Cache se encuentra disponible de manera gratuita para cualquier usuario.
En esta entrada, destacaremos dos mejoras que introdujimos recientemente: (1) la entrega optimizada de imágenes y (2) la posibilidad de que el contenido se procese mejor en condiciones de restricción de ancho de banda a través de un proyecto llamado “AMP Lite”.
Optimizaciones de imágenes a través de Google AMP Cache
La aplicación de optimizaciones vinculadas a imágenes es una opción eficaz para reducir el tráfico de bytes. Google AMP Cache usa la pila de optimización de imágenes que se emplea en los módulos de PageSpeed y la compresión de datos de Chrome. (Observen que, para realizar las transformaciones mencionadas, Google AMP Cache no tiene en cuenta el encabezado “Cache-Control: no-transform”). Los sitios pueden obtener las mismas optimizaciones en sus orígenes si se instala PageSpeed en sus servidores.
A continuación, se ofrece un resumen con las optimizaciones que aplicamos:
1) Eliminación de datos que son invisibles o resultan difíciles de visualizar
Quitamos los datos de imágenes invisibles para los usuarios, como los metadatos de miniaturas y ubicación geográfica. En el caso de las imágenes JPEG, también reducimos la calidad y las muestras de color si sus valores superan lo necesario. Para ser exactos, reducimos la calidad del formato JPEG a 85 y el valor de las muestras de color a 4:2:0; es decir, una muestra de color cada cuatro píxeles. La compresión de una imagen JPEG hasta una calidad o un valor de muestras de color más altos que estos implica un mayor volumen de bytes, pero resulta difícil notar la diferencia en términos visuales.
Los datos de imagen reducidos posteriormente se someten a una compresión exhaustiva. Descubrimos que estas optimizaciones reducen el volumen de bytes en más de un 40% y, al mismo tiempo, no suponen cambios perceptibles para el ojo del usuario.
2) Conversión de imágenes al formato WebP
Algunos formatos de imagen son más aptos para dispositivos móviles. Convertimos los archivos JPEG a WebP para los navegadores admitidos. Esta transformación reduce en más de un 25% el volumen de bytes sin pérdida de calidad.
3) Adición de srcset
Agregamos “srcset” si no se incluye. Esto se aplica a etiquetas “amp-img” que tienen el atributo “src” y carecen del atributo “srcset”. La operación incluye la expansión de la etiqueta “amp-img” y el redimensionamiento de la imagen a varios tamaños. Esto reduce más el conteo de bytes en dispositivos con pantallas pequeñas.
4) Uso de imágenes de calidad inferior en determinadas circunstancias
Reducimos la calidad de las imágenes JPEG cuando existen indicios de que el usuario lo prefiere o la velocidad de la red en cuestión es muy reducida (como parte de lo que se afirma sobre AMP Lite, a continuación). Por ejemplo, reducimos la calidad de las imágenes JPEG hasta 50 para usuarios de Chrome que activan la extensión Reducir datos. Esta transformación proporciona una reducción adicional de más del 40% en el volumen de bytes de estas imágenes.
En el ejemplo siguiente, se muestran las imágenes antes (izquierda) y después (derecha) de las optimizaciones. La imagen tiene un tamaño original de 241 260 bytes. Después de las optimizaciones 1, 2 y 4, este es de 25 760 bytes. Después de las optimizaciones, el aspecto de la imagen es básicamente el mismo y se logra una reducción del 89% en el volumen de bytes.
AMP Lite para redes de baja velocidad
Con AMP Lite, se aplican a las imágenes todas las optimizaciones mencionadas. En particular, siempre empleamos niveles de calidad inferiores (consulten el inciso 4, arriba).
A su vez, optimizamos las fuentes externas usando la etiqueta amp-font y fijamos el tiempo de espera de carga de fuentes en 0 segundos, de modo que sea posible mostrar las páginas de inmediato independientemente de que la fuente externa en cuestión se almacene en caché previamente o no.
AMP Lite se implementará para usuarios con restricciones de ancho de banda en varios países, como Vietnam y Malasia, y para quienes tengan dispositivos con capacidad de memoria RAM reducida la implementación se hará en todo el mundo. Tengan en cuenta que estas optimizaciones pueden modificar los detalles sutiles de algunas imágenes, pero no afectarán otras secciones de la página en las que se incluyan anuncios.
* * *
En suma, una vez aplicadas todas las optimizaciones mencionadas observamos una reducción combinada del 45% en el volumen de bytes.
Esperamos lograr aún más avances en el intento por aportar más eficacia al empleo de los datos de los usuarios, a fin de proporcionar experiencias de AMP incluso más rápidas.