Últimamente estamos todos revolucionados con la nueva tecnología AMP para ofrecer páginas aceleradas para móviles (de ahí el nombre) pero ¿por qué es más rápido AMP?
Principalmente debes tener en cuenta que AMP es un HTML optimizado para móviles, con unas reglas muy estrictas que, lógicamente, están orientadas a ofrecer visualizaciones de páginas realmente rápidas, y esto pasa por comprometer algunas funcionalidades a las que estamos acostumbrados.
Piensa que el objetivo de AMP es ofrecer contenidos adaptados a móviles y todo lo que esto supone:
- Lectura rápida
- Eliminación de distracciones
- Aprovechar al máximo las (cada vez menos) pequeñas pantallas
Índice de contenidos
Por qué AMP es tan rápido
Así que vamos a ver los principios en los que se basa AMP, para entender por qué AMP es más rápido:
- Solo se permiten scripts asíncronos. Los scripts no asíncronos bloquean la construcción DOM y retrasan la carga de la página.De hecho AMP restringe el uso de todo JavaScript. Solo se permiten scripts dentro de elementos personalizados AMP que estén específicamente diseñados para un rendimiento óptimo. Ejemplos de scripts AMP son Google Analytics, Facebook, Twitter y YouTube.Otros scripts, como anuncios de otros servicios por ejemplo, de momento quedan fuera, y solo se les permite cargar dentro de iframes. El objetivo final es que no bloqueen la carga de la página.
- Los recursos externos deben tener definidas las dimensiones. Imágenes e iframes tienen que tener los tamaños explícitamente definidos para asegurar que AMP conozca el tamaño de los elementos antes de descargarlos.
- No se permite la carga en bloque de nada. El principio básico es que nada frene la carga de AMP. Los elementos externos se incluyen en iframes. AMP creará la caja del iframe sin importar lo que contenga.
- El CSS debe estar incluido y los tamaños especificados. AMP nos cambia de nuevo el modo de trabajar, por el que habitualmente enlazamos el CSS desde un archivo externo. Ahora AMP obliga al CSS inline, y es por el mismo motivo que con los scripts: para evitar que el CSS bloquee la carga de la página.Se permite un máximo de 50 Kb de CSS inline para asegurar su eficiencia, así que si tu CSS pesa más te toca tarea de adelgazamiento y limpieza.
- La carga de las fuentes debe ser lo más eficaz posible. Las fuentes web en ocasiones son demasiado pesadas y pueden comprometer de manera importante el rendimiento. Como sabrás, en circunstancias normales los navegadores impide que se descarguen fuentes hasta que no se hayan descargado y cargado los estilos y scripts. Esto genera un tiempo de espera inicial elevado hasta que se empiecen a cargar las fuentes.En AMP el CSS es inline y los scripts son asíncronos, así que el navegador no tiene que esperarlos para empezar a descargar las fuentes.
- Las animaciones solo se ejecutan en la GPU. Hay animaciones que requieren refrescos de página, normalmente realizados por el navegador, no por la GPU. AMP limita las animacionesa
transformyopacitypara que no hagan falta refrescos de página y así todas las animaciones las ejecute la GPU, mucho más rápida. - Se establecen prioridades de carga de recursos. AMP optimiza la descarga de recursos para que se descarguen primero los recursos más importantes. Por ejamplo, las imágenes se descargarán solo si las va a ver el usuario.
- Las páginas se cargan en un instante. Se usa la API PreConnect para hacer la precarga (prefetch), carga y descarga de los recursos que utilizará el usuario. Además esto se hace de un modo eficaz: se precarga el contenido y se descarga solo si va a ser solicitado por el usuario.
Como puedes ver la cosa es seria, pero no es por fastidiar sino para ofrecer una mejor experiencia de navegación móvil, pues no olvides que en muchos países ya se navega más desde el móvil que desde ordenadores de escritorio.
Ya se navega más desde el móvil que desde ordenadores de escritorio. AMP es una obligación, no una opción Clic para tuitear¿Consecuencias? Nos toca actualizarnos y adaptarnos a los nuevos tiempos, y de momento parece que todo pasa por AMP.
Por si acabas de descubrir AMP aquí tienes unos recursos imprescindibles:
- GitHub oficial de AMP Project.
- AMP HTML, WordPress y el futuro de la Web ¿estás preparado? ¡Corre!
- AMP, SEO y WordPress
- Personalizar AMP
Como suelo decir … ¡Ya tardas!
¿Falta algo?
He tratado de hacer un resumen de los principales fundamentos de AMP, que hacen que cargue tan rápido, pero si crees que hay algo más (esto se actualiza casi cada día) es tu turno, cuéntanoslo en los comentarios. Todos estamos deseando aprender.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Hola Fernando, necesito ayuda con la plantilla Divi, de pronto al actualizar el backend de la pagina de inicio toda la estructura (secciones, módulos, etc) han desaparecido. El backend está como bloqueado y no puedo hacer nada. Lo curiosos es que si entro en el frontend la página se ve correctamente.
Esto mismo me pasó hace unos días y lo solucioné desactivando jetpack pero ahora ni con eso.
Gracias.
pueden ser mil cosas, y sinceramente así a ciegas es prácticamente imposible adivinar qué puede ser
Efectivamente pueden ser mil cosas. La última vez que me pasó a mi fue ayer al actualizar el theme Impreza. Previamente hice copias de seguridad y al restaurar todo fue bien.
Muchas gracias por vuestra ayuda. He llegado a la conclusión que es la memoria php del server. El cliente tiene el hosting en 1and1 con el plan básico tiene 60M. Según el SAT de DIVI es recomendable 128M.
Ahora he reinstalado copia y todo va bien, pero con precaución de instalar plugns.
Buffff… yo (quizás me llaméis elitista) me he negado a trabajar en Hosting de 1and1. A los clientes que los tenían les he dicho que tenían que cambiarse (donde sea) pero que yo no desarrollaría en sus servers nunca más. 🙁
Aquí tienes un fan 😀
¿De 1and1? O_o anonadado me dejas 😀
Tengo una pregunta Fernando. Uso templates de Themeforest por lo que entiendo que debo esperar a que los autores adapten el template para dar soporte a AMP. ¿Es correcto?
Además de los templates, ¿el uso de algunos plugins puede hacer que la web no soporte correctamente AMP?
AMP lo puedes activar con un par de plugins que hay por ahí
En principio los temas no tienen porqué ser compatibles o no ni nada parecido. Lo suyo es que poco a poco vayan incorporando una plantilla propia para AMP pero de momento con los plugins que hay se puede poner en marcha
AMP – Yoast SEO, acaba de incorporar una pestaña de Setings usando su plugin junto con Glue for Yoast SEO & AMP, todo este asunto promete.
ahora me preocupan los conflictos con PageFrog (plugin que instalé por recomendación de Yoast) incorpora prácticamente las mismas opciones en diseño, salvo la posibilidad de incluir una imagen genérica para post sin imagen destacada. La opción de Analytics vía código no la he activado, ya la tenía operatíava vía PageFrog.
En esto como en todo lo mejor es decidirse y no tener 2 plugins que hagan casi lo mismo para que se den de tortas entre ellos.
Yo de momento pasaría de Yoast, para ellos es un addon menor y no lo están actualizando a la medida de lo deprisa que va esto, mientras que PageFrog se lo ha tomado en serio y actualiza casi cada día, un coñazo pero ahora es lo que toca
Si de momento no estoy tocando las opciones de estilo, ni de Analytics en Yoast, pero mantengo activo el plugin Glue for Yoast SEO & AMP porque soluciona incompatiblidades de Yoast con AMP. hace un par de días que Google Search comenzó a indexar mis 11mil artículos, lleva apenas 500 encontrados, con unos 20 errores reportados, que en su mayoría se deben a artículos muy viejos sin imágenes, o con alguna tabla en el post. Lo que no tengo claro es cuando o como, se direccionará a mis páginas AMP de forma automática desde dispositivos móviles.
Eso ya es cosa de Google
No me puedo creer que AMP no permita el atributo ‘ref’ 🙁
Creo que es por el efecto lighbox de las imágenes. Ofú que pelea con el código
Yo entiendo que es estricto, pero ¿hasta ese punto?
pero si activo el AMP todos mis post con imágenes y vídeos (youtube) no se ven , al final solo me muestra el texto esto tiene alguna solución?
Los videos de Youtube se deberían de ver sin problema. SI Instalas PageFrog tienes opciones para ver la imágen destacada, configurar tu logo y algunas opciones tipográficas. Además de configurar Adsense y Analytics, pero esto lo que busca es velocidad y eficiencia, va en la onda minimalista extremo.
Pero uso el plugin youtube-embed-plus para los videos y al activar AMP no se ven.
Disculpa ¿y por qué lo usas? Publicas listas o galerías? si es el caso no se me ocurre como incorporarlas de momento en tus paginas AMP pero si publicas vídeos sueltos, podrías prescindir de él.
Lo uso para formatiar el vídeo , no muestre el nombre , los vídeos relacionados , las anotaciones , etc. , pero por ejemplo también pongo embed de twitter y hice la prueba y en AMP tampoco se ve .
Yo también utilizo embed para los vídeos y no se ven. Se me ocurre poner un enlace al final del texto con la dirección web del video y de esta forma puedes mostrarlo de las dos maneras.