Share
AMP, en pocas palabras, es un método para optimizar los sitios web para que sean más rápidos y más eficaces..
AMP significa "Páginas móviles aceleradas", y si bien el enfoque declarado es el rendimiento en dispositivos móviles, las ganancias de velocidad que puede aportar son igual de útiles en dispositivos no móviles. AMP contiene un conjunto de métodos de optimización que ofrecen varios tipos de beneficios, pero el poder de hacer que los sitios sean más rápidos es sin duda el más significativo en los sitios de imagen y video..
Dado que los sitios son más rápidos para los visitantes más comprometidos, los rankings en los motores de búsqueda potencialmente más altos (y por lo tanto una mayor exposición), definitivamente vale la pena pensar en AMP cuando cree la próxima muestra de su trabajo basada en la web.
AMP es un proyecto de código abierto con Google que lo respalda, y ha estado en desarrollo desde septiembre de 2015, con versiones de sitios de AMP que aparecen en los resultados de búsqueda de Google desde el 24 de febrero de este año. Hemos estado cubriendo AMP desde su lanzamiento público a principios de este año, por lo que es una buena idea leer el "Proyecto AMP: hará que sus sitios sean más rápidos" si desea conocer algunos antecedentes antes de continuar.
En ese artículo, encontrará mucha información sobre el valor general de trabajar con AMP, pero vamos a ver un poco más directamente los dos aspectos más relevantes para trabajar con imágenes y videos: la costumbre de AMP.
Faro por ssuaphoto / PhotoDune. AMP puede ayudar a que sus sitios funcionen mejor en la búsqueda.Cuando cree una página de acuerdo con los requisitos de AMP, utilizará una serie de elementos personalizados en lugar de algunos de los elementos HTML predeterminados a los que podría estar acostumbrado..
Accentsconagua
![]()
Cuando use estos elementos personalizados, aprovechará automáticamente algunos de los beneficios inherentes a AMP. Echemos un vistazo a lo que son y por qué son dignos de su consideración.
Ya sabe que se supone que AMP ayuda a que sus sitios sean más rápidos, pero ¿qué hace específicamente el
De forma predeterminada, si tiene una página con varias imágenes en ella, cada imagen debe cargarse de una vez. Esto puede arrastrar fácilmente el tiempo de carga total de su sitio hasta una duración considerable. Cuanto mayor sea el tiempo de carga inicial, mayor será la probabilidad de que los visitantes abandonen su sitio y peor podrá hacerlo en los motores de búsqueda..
Sin embargo, con una técnica llamada "Carga perezosa", puede tener las primeras imágenes cargadas con el resto para luego. Se ha cargado suficiente contenido para que el visitante comience a ver la página, y las imágenes restantes se "cargan de forma perezosa" cuando el visitante se desplaza hacia abajo. Esto puede hacer mejoras considerables a su velocidad de carga..
Por ejemplo, en las pruebas que ejecuté como parte de mi artículo "Proyecto AMP: hará que sus sitios sean más rápidos", descubrí que en una conexión móvil simulada tardó 26 segundos en cargar una página con cinco imágenes de 500Kb. Con una versión AMP del mismo sitio, el tiempo de carga se redujo a 16 segundos.
Una de las principales ventajas del uso de AMP es que evita el problema de que el diseño de la página se "repita" varias veces..
Mientras se está sirviendo una página, los elementos de los medios descargados inicialmente no tienen altura ni ancho. Por lo tanto, el navegador expone las cosas como si dichos medios no formaran parte de la página. Luego, cuando una imagen termina de cargarse, el diseño debe recalcularse, con otros elementos movidos y redimensionados para que encajen alrededor de la imagen, algo que se llama reflejo. Si otros medios aún no se han cargado, la página debe volver a aparecer una y otra vez para cada elemento..
En particular, en los dispositivos móviles, los visitantes pueden enfrentarse a la frustración si ya están comprometidos y en lo que están enfocados se saltan de la vista debido al reflujo. Esto puede conducir muy fácilmente a una menor atención de los visitantes o al abandono del sitio, especialmente si ocurre varias veces.
Con AMP, el reflujo nunca ocurre. Esto se debe a que cada pieza de medios tiene un marcador de posición de tamaño correcto agregado al diseño desde Word Go. Una vez que se carga el medio, reemplaza el marcador de posición, no es necesario el reflujo.
El almacenamiento y el ancho de banda para grandes cantidades de medios pueden ser costosos bastante rápidamente, y elegir un host que pueda entregar rápidamente a los espectadores de todo el mundo no siempre es fácil.
Sin embargo, cuando utiliza AMP, obtiene acceso a un CDN proporcionado por Google de forma gratuita. Siempre que cree una página que pase la validación de AMP, Google guardará automáticamente en caché sus documentos HTML, archivos JS e imágenes en el CDN de AMP..
La verdad es que la mayoría de las cosas que AMP hace por usted también pueden hacerse de otras maneras a través de varios scripts y metodologías. Sin embargo, una de las ventajas del uso de AMP es que no es necesario que se familiarice íntimamente con los aspectos técnicos necesarios para configurar optimizaciones equivalentes..
Al utilizar AMP, puede evitar elegir, configurar y mantener manualmente múltiples scripts y procesos. En su lugar, solo usa AMP según lo prescrito y todo sucede en segundo plano sin necesidad de su participación práctica.
Antes de entrar en los detalles de uso
No hay necesidad de hacer el tutorial completo, así que si solo trabajas hasta el final de la sección titulada "Manejo de CSS en línea", estarás listo para regresar y continuar de nuevo aquí..
En una página AMP usarás
(Puede encontrar la documentación completa para
Al agregar un src atributo para especificar la ubicación de su imagen, y un alt atributo para establecer un texto de reserva.
También es un requisito en AMP que especifique altura y anchura cada vez. Esto se debe a que AMP utiliza los atributos de altura y anchura para establecer el tamaño de los marcadores de posición antes de que se cargue la imagen.
Si le preocupa cómo hacer que las imágenes se comporten de manera responsiva dado que está configurando dimensiones fijas, no se preocupe porque AMP tiene la funcionalidad incluida para manejar los ajustes de respuesta, que veremos más adelante..
Un ejemplo básico de la
los srcset atributo que se puede usar para especificar imágenes alternativas que se mostrarán a diferentes anchos o densidades de píxeles.
Se usa de la misma manera que en un regular.
Por ejemplo, para proporcionar diferentes imágenes a diferentes densidades de píxeles puede usar:
O para cargar diferentes imágenes dependiendo del ancho de la ventana gráfica que pueda usar:
Tenga en cuenta, si está utilizando valores que contienen w la src atributo será ignorado en los navegadores que soportan srcset.
Si necesita dar crédito a una imagen que puede usar atribución, por ejemplo:
Si desea controlar la apariencia de los marcadores de posición que aparecen en su página mientras se cargan las imágenes, puede hacerlo con CSS orientado a la amp-img elemento, por ejemplo:
amp-img color de fondo: gris;
En una página AMP usarás
(Una vez más, puede encontrar la documentación completa para
Al igual que con src es necesario para especificar la ubicación del video, y ambos altura y anchura son necesarios para que AMP pueda diseñar la página correctamente mientras carga.
Un ejemplo básico con atributos requeridos podría ser:
En caso de que el video no se cargue o se muestre por una razón u otra, es posible configurar un repliegue anidando un Por ejemplo: No se pudo cargar el video. Por favor, compruebe que su navegador soporta video HTML5. los Esto funciona de la misma manera que lo hace en un HTML5 regular Como ejemplo: No se pudo cargar el video. Por favor, compruebe que su navegador soporta video HTML5. Antes de que se inicie la reproducción de un video, el primer cuadro del video se mostrará de forma predeterminada. Sin embargo, si desea personalizar lo que se muestra, puede especificar una imagen utilizando el atributo Por ejemplo: Además de lo que hemos discutido anteriormente, hay algunos atributos adicionales que puede usar con el Por defecto los videos no se reproducirán automáticamente. Para anular esto incluye el atributo Los controles en un video no aparecerán a menos que agregue el atributo Para hacer un video repite infinitamente incluye el atributo. Para apagar el sonido en un video agregue el atributo AMP Echemos un vistazo rápido a lo que hace cada uno.. (Encuentre los documentos completos de diseño aquí: https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md) Tu configuración de diseño "ir a" debe ser La capacidad de agregar este atributo es la razón por la que no tiene que preocuparse por garantizar la capacidad de respuesta a pesar de establecer explícitamente los Usando un Con el Si has aplicado el CSS los Eso cubre todo lo esencial de trabajar con la costumbre de AMP. AMP proporciona una forma consolidada y de manos libres para optimizar los sitios pesados de los medios de comunicación, lo que permite una experiencia móvil mucho mejor, al tiempo que mejora la experiencia de escritorio al mismo tiempo.. Para más información revisa los enlaces de abajo.retroceder.Añadiendo múltiples fuentes
elemento para obtener todos los detalles, visite: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sourceConfiguración de un "cartel"
póster.Atributos extra
Auto-reproducción
auto-reproducción:Controles
controles:Lazo
lazo:Apagado
apagado:El atributo "layout"
diseño establecido en uno de los seis valores, cada uno de los cuales hace que el elemento se comporte de manera diferente:
sensible
sensible en la mayoría de los casos, úselo si no está seguro de qué elegir. Hará que el elemento se expanda al ancho máximo de su elemento principal mientras mantiene su relación de aspecto.altura y ancho valores en elementos.llenar
llenar el ajuste es casi el mismo que sensible, sin embargo, el elemento se expandirá tanto al ancho máximo y altura de su padre, independientemente de la relación de aspecto.fijo
fijo El diseño mantendrá el elemento en su altura y anchura especificadas sin posibilidad de cambiar el tamaño.altura fija
altura fija establecer un elemento estirará su ancho para ajustarse al elemento padre pero mantendrá su altura igual. elemento flexible
pantalla: flexión; al padre de un elemento, puedes usar el elemento flexible valor de diseño para que llene todo el espacio disponible dentro del elemento padre. Si varios hijos del mismo padre usan el elemento flexible diseño que compartirán el espacio por igual.sin pantalla
sin pantalla La configuración se utiliza para ocultar un elemento. Su propósito es permitir que el contenido se muestre en la acción de un usuario, como en conjunto con el Terminando
Enlaces relacionados:
