() translation by (you can also view the original English article)
AMP, en pocas palabras, es un método para optimizar sitios web de forma que sean más rápidos y más eficaces.
AMP es el acrónimo en inglés de "Accelerated Mobile Pages", significa Páginas Móviles Aceleradas, y aunque el objetivo declarado es aumentar el rendimiento en dispositivos móviles, los aumentos de velocidad que aporta no son sólo útiles para los dispositivos móviles. AMP integra un conjunto de métodos de optimización que ofrecen varios beneficios, pero su capacidad de hacer las webs más rápidas es si cabe más importante webs con gran cantidad de imágenes y en sitios pesados debido a la profusión de vídeos.
Dado que las webs más rápidas consiguen más visitas y visitantes más fieles, en potencia se posicionan mejor en las páginas de resultados de los motores de búsqueda (y por lo tanto obtienen una mayor exposición), en definitivamente merece la pena considerar la implementación de AMP cuando planificas el próximo "escaparate" de tu trabajo en una web.
AMP es un proyecto de código abierto respaldado por Google, y ahora ha estado en fase de desarrollo desde aproximadamente septiembre de 2015, con versiones de webs que usan AMP apareciendo en los resultados de búsqueda de Google desde el 24 de febrero este año. Nosotros hemos estado hablando sobre AMP desde su lanzamiento público a principios de este año, así que es una gran idea leer el artículo "El Proyecto AMP: Hará Que Tus Sitios Sean Más Rápidos" si deseas conocer algunos antecedentes antes de continuar con esta lectura.
En ese artículo encontrarás mucha información sobre el valor que aporta en conjunto trabajar con AMP, pero miremos más directamente los dos aspectos más relevantes sobre el trabajo con imágenes y vídeo: los elementos a medida de AMP <amp-img> y <amp-video>.
¿Qué es <amp-img> y <amp-video>?
Cuando creas una página según los requisitos de AMP usarás una serie de elementos personalizados en lugar de algunos de los elementos HTML predeterminados a los que estás acostumbrados.
- En lugar de utilizar el elemento habitual
<img>usaremos<amp-img> - En lugar de utilizar el elemento
<video>usarás<amp-video>
Al utilizar estos elementos personalizados automáticamente te beneficias de algunos de los beneficios inherentes de AMP. Echemos un vistazo a lo que son y por qué son dignos de tu consideración.
¿Por Qué Usar <amp-img> y <amp-video>?
Ya sabes que el propósito de AMP es ayudarte a conseguir que tus páginas sean más rápidas, pero ¿qué hacen, en concreto los elementos <amp-img> y <amp-video>?, ¿qué nos ofrecen? Los beneficios más pertinentes son los siguientes.
Carga Perezosa, más conocida por su término en inglés "Lazy Loading"
Por defecto, si tienes una página con varias imágenes, cada imagen tiene que ser cargada de golpe. Esto podría fácilmente arrastrar el tiempo de carga total de tu web a una larga duración. Cuanto mayor sea tu tiempo de carga inicial, más probable será que los visitantes abandonen tu sitio y peor será su rendimiento en los motores de búsqueda.
Sin embargo con una técnica llamada "Lazy Loading", en lugar de otro puede tener sólo las primeras pocas imágenes cargadas con el resto para más tarde. Bastante contenido se carga para que el visitante comenzar la visualización de la página, y las imágenes restantes están "cargadas de perezoso" cuando el visitante se desplaza hacia abajo. Esto puede conseguir mejoras considerables en lo relativo a tu velocidad de carga.
Por ejemplo, en las pruebas que realicé como investigación para mi artículo "AMP proyecto: será que hacer sus sitios más rápido", encontré que en una conexión móvil simulada, se tardó 26 segundos en cargar una página con cinco imágenes de 500Kb. Con una versión de la misma web con AMP implementado, el tiempo de carga bajo hasta 16 segundos.
No Existe Flujo de Diseño
Una de las principales ventajas de usar AMP es que evita el problema de tener que realizar el reflujo de la maquetación del diseño de la página varias veces.
Mientras se envía una página, los elementos multimedia no descargados inicialmente no disponen de una altura o anchura definidas. Por lo tanto, el navegador despliega los elementos de la página como si los objetos multimedia no formasen parte de ella. Después cuando una imagen termina de cargarse, el diseño de la maquetación tiene que ser re-calculada, algunos elementos son desplazados y redimensionados para adaptarse al espacio libre alrededor de la imagen, a esto le llamamos reflujo. Si otros medios de comunicación son también pero cargar la página tiene a reflujo una y otra vez para cada elemento.
En los dispositivos móviles en particular, los visitantes pueden enfrentar frustración si ya están ocupados y lo que se está centrado en de repente salta fuera de la vista debido al reflujo. Esto puede llevar muy fácilmente a visitante menor abandono de atención o sitio, especialmente si sucede varias veces.
Con AMP, reflujo nunca ocurre. Esto es porque cada pieza de medios tiene un marcador de posición correctamente tamaño añadido en el diseño de la palabra ir. Una vez que los medios de comunicación se cargan lo reemplaza el marcador de posición, no es necesario reflujo.
CDN libre acceso
Almacenamiento y ancho de banda para grandes cantidades de medios de comunicación pueden convertirse en costoso bastante rápidamente, y elegir un host que puede entregar rápidamente a los espectadores en todo el mundo no siempre es fácil.
Cuando se utiliza sin embargo AMP, tienes acceso a una CDN proporciona Google gratuitamente. Como crear una página que pasa validación AMP, Google caché automáticamente sus documentos HTML, archivos JS e imágenes en el CDN de AMP.
Relativamente liberan de las manos
La verdad es la mayoría de las cosas AMP para que usted también se puede hacer de otras maneras a través de diversas metodologías y secuencias de comandos. Sin embargo es una de las enormes ventajas a usar amplificador no necesita familiarizarse íntimamente con los detalles técnicos que van a configurar optimizaciones equivalente.
Mediante el uso de AMP puede evitar manualmente seleccionar, configurar y mantener varias secuencias de comandos y procesos. En cambio usted sólo tiene que utilizar AMP preescrita y todo sucede en segundo plano sin necesidad de su implicación práctica.
Primeros pasos con AMP
Antes de adentrarnos en los detalles de la utilización de <amp-img>y <amp-video>debe saber cómo crear una página de la AMP con el código repetitivo necesario.</amp-video> </amp-img> Cubrimos cómo hacerlo en otro tutorial, por lo que conseguir la bola rodando te puede dirígete a "cómo para hacer un básico AMP página From Scratch".
AMPCómo Crear una Página Básica con AMP Desde Cero
AMPProyecto AMP: ¿Va a Hacer Tus Webs Más Rápidas?
No es necesario que sigas el tutorial completo, así que sigue los pasos hasta el final de la sección titulada "Tratar con CSS en línea" y estarás preparado para volver de nuevo aquí.
Cómo utilizar <amp-img>
En una página creada con AMP, usarás <amp-img> para la carga individual de cada imagen. Veamos cómo utilizar este código correctamente y lo que hace cada uno de su atributos asociados.
(Puedes encontrar la documentación completa de <amp-img> en la web de referencia del proyecto AMP).
Inclusiones esenciales
Cuando se agrega un elemento <amp-img> existen unos atributos básicos que debes incluir. De la misma forma que con el elemento tradicional <img> debes utilizar un atributo src para especificar la ubicación de la imagen, y un atributo alt para establecer un texto alternativo.
También es un requisito en AMP especificar la altura (height) y la anchura (width) cada vez. Esto se debe a que AMP utiliza los atributos height y width para definir el tamaño de los marcadores de posición antes de cargar la imagen.
Si le preocupa acerca de cómo hacer imágenes comportarnos sensiblemente dado usted está configurando dimensiones fijas, no te preocupes porque el amplificador tiene funcionalidad incluida para manejar ajustes sensibles, que nos va tocar más tarde.
Un ejemplo básico de la <amp-img>con estas inclusiones esenciales es:</amp-img>
1 |
<amp-img src="/img/amp.jpg" width="1080" height="610" alt="an image"></amp-img> |
2 |
Usar srcset
El elemento <amp-img> proporciona un atributo srcset que puede usarse para especificar imágenes alternativas que se mostrarán o bien en diferentes anchuras o en densidades de pixel distintas (retina, 4k).
Se usa de la misma manera que el habitual elemento <img> , puedes conocer más sobre todo lo referente a este atributo y su funcionamiento en: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset
Por ejemplo, para proporcionar imágenes distintas según las diferentes densidades de píxel de los dispositivos podrías utilizar:
1 |
<amp-img src="/img/amp.jpg" srcset="amp@1x.jpg 1x, img/amp@2x.jpg 2x" width="1080" height="610" alt="an image"></amp-img> |
2 |
O para cargar imágenes diferentes dependiendo del ancho de la ventana de visualización, podrías usar:
1 |
<amp-img src="/img/amp.jpg" srcset="/img/amp.jpg 1080w, /img/amp-600.jpg 600w, /img/amp-300.jpg 300w" width="1080" height="610" alt="an image"></amp-img> |
2 |
Nota, si usas valores que contienen w el atributo src será ignorado en los navegadores que soportan srcset.
Añadir la Atribución
Si necesitas añadir los créditos a una imagen, podrías usar attribution, por ejemplo:
1 |
<amp-img src="/img/amp.jpg" width="1080" height="610" attribution="CC courtesy of Cats on Flicker" alt="an image"></amp-img> |
2 |
Aplicar Estilo a los Marcadores de Posición
Si desea controlar el aspecto de los marcadores de posición que aparecen en la página mientras se carga de imágenes puede hacerlo con CSS orientado al amp-img elemento, por ejemplo:
1 |
amp-img { background-color: grey; } |
2 |
Cómo utilizar <amp-video>
En una página AMP deberás usar <amp-video> cuando quieras insertar un vídeo desde tu propia fuente. Si usted está buscando para incrustar vídeo de terceros, como por ejemplo de YouTube o a través de un iFrame, puede en cambio utilizar otros elementos como <amp-youtube>o <amp-iframe>.</amp-iframe> </amp-youtube>
(De nuevo, puedes encontrar la documentación completa de <amp-video> en la web de referencia del proyecto de AMP).</amp-video>
Inclusiones Esenciales
Como sucede con <amp-img>, existen algunas inclusiones esenciales cuando se usa <amp-video>. Una vez más src es necesario especificar para indicar la ubicación del vídeo, lo mismo sucede con height y width de forma que AMP pueda colocarlos correctamente en la página mientras se carga.
Un ejemplo básico con los atributos necesarios podría ser:
1 |
<amp-video src="/video/tokyo.mp4" width="480" height="270"> </amp-video> |
2 |
Agregar una Alternativa de Respaldo
En caso de que el vídeo no se cargue o muestre por una u otra razón, es posible configurar una alternativa anidándola en un <div> dentro del elemento <amp-video>. El <div> debe incluir el atributo fallback.
Por ejemplo:
1 |
<amp-video src="/video/tokyo.mp4" width="480" height="270"> <div fallback> <p>Video could not be loaded. Please check that your browser supports HTML5 video.</p> </div> </amp-video> |
2 |
Añadir Múltiples Fuentes
El elemento <source> puede ser anidado dentro del elemento <amp-video> para proporcionar múltiples formatos de archivo y aumentar la probabilidad de compatibilidad en diferentes navegadores.
Esto funciona de la misma manera que lo hace el habitual elemento HTML5 <video> para más detalles consultar: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source
Como ejemplo:
1 |
<amp-video src="/video/tokyo.mp4" width="480" height="270"> <div fallback> <p>Video could not be loaded. Please check that your browser supports HTML5 video.</p> </div> <source type="video/webm" src="/video/tokyo.webm"> <source type="video/ogg" src="/video/tokyo.ogg"> </amp-video> |
2 |
Configurar un "Poster"
Antes de iniciar la reproducción de un video se mostrará por defecto el primer fotograma del vídeo. Sin embargo, si deseas personalizar lo que se muestra antes de la reproducción, puedes especificar una imagen con el atributo poster.
Por ejemplo:
1 |
<amp-video src="/video/tokyo.mp4" poster="/img/tokyo.jpg" width="480" height="270"> </amp-video> |
2 |
Atributos Adicionales
Además de lo que hemos discutido anteriormente, hay algunos atributos adicionales se pueden usar con el elemento <amp-video>. Son los siguientes.
Función de Reproducción Automática
Por defecto los videos no se reproducen automáticamente. Para reemplazar este comportamiento incluye el atributo autoplay:
1 |
<amp-video src="/video/tokyo.mp4" autoplay width="480" height="270"> </amp-video> |
2 |
Controles
Los controles del vídeo no se mostrarán a menos que agregues el atributo controls:
1 |
<amp-video src="/video/tokyo.mp4" controls width="480" height="270"> </amp-video> |
2 |
Loop
Para que un vídeo se reproduzca de forma continua y se repita sin fin incluye el atributo loop:
1 |
<amp-video src="/video/tokyo.mp4" loop width="480" height="270"> </amp-video> |
2 |
Vídeo Silenciado
Para desactivar el sonido de un vídeo agrega el atributo muted:
1 |
<amp-video src="/video/tokyo.mp4" muted width="480" height="270"> </amp-video> |
2 |
El Atributo "Layout"
Los elementos AMP <amp-img> y <amp-video> pueden tener el atributo layout ajustado a uno de entre seis valores, cada uno de los cuales hace que el elemento se comporte de forma diferente:
- responsive
- fill
- fixed
- fixed-height
- flex-item
- nodisplay
Echemos un rápido vistazo a lo que hace cada uno.
(Encuentra la documentación completa sobre el atributo layout aquí: https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md)
responsive
Tu elección para el ajuste "layout" debería ser responsive para la mayoría de las situaciones, usa éste si no estás seguro de qué elegir. Esto hará que el elemento se amplíe hasta la máxima anchura de su elemento padre, manteniendo su proporción entre la anchura y la altura.
La habilidad de agregar este atributo es por qué no tendrás que preocuparte de garantizar capacidad responsiva, a pesar de haber establecido explícitamente valores para la altura (height) y la anchura (width) en los elementos.
fill
El ajuste fill es similar a responsive, sin embargo, el elemento se expandirá hasta alcanzar tanto la anchura como la altura máximas de su padre, sin respetar una relación proporcional entre ambas.
fixed
Utilizar un diseño fijo (fixed) mantendrá el elemento con su altura y anchura especificadas sin posibilidad de cambiar el tamaño.
fixed-height
Con el ajuste fixed-height un elemento estirará su anchura hasta encajar en el elemento primario, pero mantendrá su altura sin cambios.
flex-item
Si has aplicado el CSS display: flex; al padre de un elemento, puede usar el valor de layout flex-item para llenar todo el espacio disponible dentro del elemento padre. Si varios elementos hijo de un mismo padre utilizan el layout flex-item compartirán el espacio igualmente.
nodisplay
El ajuste nodisplay permite ocultar un elemento. Su propósito es permitir que el contenido se muestre cuando el usuario realice una acción, como cuando sucede conjuntamente con el elemento <amp-lightbox>.
Resumiendo
Esto cubre todos los aspectos fundamentales del trabajo con los elementos personalizados de AMP <amp-img> y <amp-video>, desde el por qué deben usarse hasta cómo debe hacerse.
AMP ofrece un método consolidado, y sin ensuciarte las manos para optimizar los sitios web pesados con muchos elementos multimedia para mejorar la experiencia móvil, pero que paralelamente mejora también la experiencia de escritorio.
Para más información consulta los siguientes enlaces.
Enlaces relacionados:
- AMP Project: Will it Make Your Sites Faster
- How to Make a Basic AMP Page From Scratch
- AMP in 60 Seconds
- Quick Tip: Make AMP’s Inline CSS Easier With Jade or PHP
- En el Blog oficial de Google, Introducing the Accelerated Mobile Pages Project
- www.ampproject.org
- AMP Project en Github
- Plugin AMP para WordPress
- Páginas Móviles Aceleradas (AMP) para WordPress en Envato Market
