{"id":5760,"date":"2021-10-15T12:23:44","date_gmt":"2021-10-15T17:23:44","guid":{"rendered":"https:\/\/giovanirodriguez.dev\/?p=5760"},"modified":"2021-10-15T12:23:44","modified_gmt":"2021-10-15T17:23:44","slug":"por-que-necesitas-una-pagina-movil-acelerada-amp","status":"publish","type":"post","link":"https:\/\/giovanirodriguez.dev\/es\/por-que-necesitas-una-pagina-movil-acelerada-amp\/","title":{"rendered":"\u00bfPor qu\u00e9 necesitas una p\u00e1gina m\u00f3vil acelerada (AMP)?"},"content":{"rendered":"\n<p>La actividad web en el m\u00f3vil ha superado constantemente la del escritorio. Este cambio ha sido gradual, pero sustancial. De hecho, el uso m\u00f3vil representa m\u00e1s del 50% de todo el tr\u00e1fico de Internet, superando el uso de escritorio en 45% desde 2018. El deseo de Google de optimizar los sitios web para la navegaci\u00f3n m\u00f3vil los llev\u00f3 a construir el proyecto p\u00e1gina m\u00f3vil acelerada (AMP, accelerated mobile page en ingl\u00e9s), una iniciativa de c\u00f3digo abierto para mejorar el rendimiento de los sitios web.<\/p>\n\n\n\n<p>Un AMP es una p\u00e1gina de contenido que utiliza un marco muy espec\u00edfico basado en el HTML existente para que la informaci\u00f3n pueda intercambiarse con los navegadores de manera m\u00e1s eficiente, lo que resulta en una experiencia sin problemas, m\u00e1s r\u00e1pida y m\u00e1s fiable. El resultado es la carga casi instant\u00e1nea de p\u00e1ginas web.<\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-8789912029337488\" data-ad-slot=\"9182886459\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script<\/script>\n\n\n\n<p>Funciona con todos los navegadores disponibles en la actualidad y se integra con plataformas de gesti\u00f3n de contenido (CMS) como WordPress y Drupal, por lo que es una alternativa viable para las <a href=\"https:\/\/www.rootstack.com\/es\/blog\/que-es-amp-lo-necesito-en-mi-empresa\/\">empresas que buscan hacer sus sitios web amigables para dispositivos m\u00f3viles<\/a>. Es gratuito y desarrollado por una gran comunidad de profesionales.<\/p>\n\n\n\n<p>Al reconocer el uso generalizado de los tel\u00e9fonos inteligentes, considera usar un AMP (p\u00e1gina m\u00f3vil acelerada) para que tu sitio web mejore dr\u00e1sticamente los niveles de tr\u00e1fico y la retenci\u00f3n de visitantes.<\/p>\n\n\n\n<p>Las AMP deber\u00edan aplicarse en 2021 por estas razones:<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. <a href=\"https:\/\/www.antevenio.com\/blog\/2016\/05\/5-formas-acelerar-velocidad-de-carga-de-tu-pagina-web\/\">Carga m\u00e1s r\u00e1pida<\/a><\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1584438784894-089d6a62b8fa?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80\" alt=\"Persona usando su celular. En una p\u00e1gina m\u00f3vil acelerada (amp) es posible usar diferentes cuadros de textos.\"\/><\/figure>\n\n\n\n<p>La velocidad es la clave de una p\u00e1gina m\u00f3vil acelerada. Para asegurarnos de que la p\u00e1gina m\u00f3vil se cargue a velocidades \u00f3ptimas, dise\u00f1amos todo el proyecto para responder a las demandas de los usuarios m\u00f3viles. Se deduce que algunas de las piezas m\u00e1s complejas de codificaci\u00f3n de fondo tuvieron que ser recortadas para hacer el sistema m\u00e1s eficiente.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Un AMP puede hacer que una p\u00e1gina se cargue m\u00e1s r\u00e1pido&nbsp;<\/h2>\n\n\n\n<p>Hay varias razones por las que el renderizado de contenido no se detiene. Normalmente, el navegador mostrar\u00e1 cada parte de una p\u00e1gina en orden, siguiendo el orden de carga especificado en el c\u00f3digo subyacente. Esto significa que el siguiente art\u00edculo no se mostrar\u00e1 hasta que se cumplan ciertos requisitos de carga. Los scripts de terceros (como los anuncios) podr\u00edan, por ejemplo, detener todo el proceso de renderizaci\u00f3n al tomar demasiado tiempo para cargar. El resultado es un proceso m\u00e1s lento.<\/p>\n\n\n\n<p>Este problema se soluciona con el renderizado paralelo de AMP, al hacer que sus propios componentes se carguen simult\u00e1neamente sin permitir ning\u00fan script que pudiera restringirlo. Los elementos AMP personalizados se encargar\u00e1n de todos los componentes interactivos de la p\u00e1gina sin afectar el rendimiento.<\/p>\n\n\n\n<p>Sin embargo, puedes usar Javascript en tus p\u00e1ginas. Si bien AMP ofrece muchas oportunidades de contenido din\u00e1mico e interactivo, tales t\u00e9cnicas deben manejarse cuidadosamente.<\/p>\n\n\n\n<ul><li>Este dise\u00f1o no depende de ning\u00fan activo en particular. Un navegador tiene que cargar todos los activos en la p\u00e1gina antes de que pueda ver c\u00f3mo se ver\u00e1. Los dise\u00f1os a menudo incluyen im\u00e1genes, elementos multimedia y scripts que deben ser cargados primero para que el tama\u00f1o y el efecto del contenido pueda ser evaluado.&nbsp;<\/li><li>Como explica el HTML para AMP, todos estos elementos se manejan en HTML, por lo que incluso antes de cargar, el navegador ya puede montar el dise\u00f1o porque el tama\u00f1o ya se ha determinado. Las p\u00e1ginas pueden cargarse a la vez usando layouting est\u00e1tico sin tener que cargar los recursos primero.<\/li><li>El CSS est\u00e1 en l\u00ednea y sujeto a tama\u00f1o.&nbsp; S\u00f3lo puede haber una hoja de estilos en un AMP. CSS limita el n\u00famero de peticiones HTTP, lo que acelera el proceso. Adem\u00e1s, el tama\u00f1o de CSS est\u00e1 limitado a 50 kilobytes, por lo que obtenemos un buen grado de dise\u00f1o mientras que todav\u00eda obliga a los desarrolladores a escribir c\u00f3digo eficiente y limpio.<\/li><li>Optimizar la fuente. Las fuentes bastante grandes utilizadas en las p\u00e1ginas web se suelen descargar despu\u00e9s de que todos los otros elementos se han cargado. Se requiere un m\u00e1ximo de una petici\u00f3n HTTP hasta que se descargue la fuente porque un AMP limita CSS y el uso de scripts externos.<\/li><\/ul>\n\n\n\n<p>El nuevo c\u00e1lculo de la disposici\u00f3n y el estilo fue m\u00ednimo. Como se mencion\u00f3, los scripts din\u00e1micos en sitios web est\u00e1ndar pueden afectar el aspecto del dise\u00f1o de la p\u00e1gina, as\u00ed como cambiar el dise\u00f1o dependiendo de las interacciones que el usuario hace. Esto obliga al navegador a recalcular c\u00f3mo se mostrar\u00e1 el contenido. Este tipo de c\u00e1lculo es minimizado por las limitaciones del marco AMP.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1615494488092-b13b68fe0eb5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80\" alt=\"Samsung en una p\u00e1gina m\u00f3vil.\"\/><\/figure>\n\n\n\n<p>Aceleraci\u00f3n de im\u00e1genes utilizando CPU y GPU. Las CPUs usan capas para renderizar p\u00e1ginas, y el medio se env\u00eda a las GPUs (tarjetas gr\u00e1ficas) para su posterior renderizaci\u00f3n. La \u00fanica manera de lograr tiempos de carga m\u00e1s r\u00e1pidos con AMP (p\u00e1gina m\u00f3vil acelerada) es utilizar la GPU para el procesamiento de im\u00e1genes.<\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-8789912029337488\" data-ad-slot=\"9182886459\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script<\/script>\n\n\n\n<p>Poner los recursos en la parte superior de la lista de prioridades. Como resultado de AMP (p\u00e1gina m\u00f3vil acelerada), los recursos populares a menudo se muestran primero. Debido a que el layouting est\u00e1tico permite que todo lo que est\u00e1 por encima del pliegue sea pre-recuperado antes de cargar, as\u00ed como los recursos predichos para ser importantes. Esencialmente no hay diferencia entre la informaci\u00f3n cuando est\u00e1 all\u00ed y cuando es renderizada por el usuario.<\/p>\n\n\n\n<p>La velocidad es una parte importante de un AMP. Es decir, el rendimiento viene antes que todo lo dem\u00e1s. Un AMP puede requerir algunos ajustes que consumen tiempo en tu dise\u00f1o web, pero pueden aumentar bastante la velocidad de la p\u00e1gina.&nbsp;<\/p>\n\n\n\n<p>Es posible que desees considerar si tus visitantes m\u00f3viles prefieren una p\u00e1gina que se carga casi al instante en lugar de una p\u00e1gina con todas las campanas y silbatos que desees. A medida que nuestro mundo m\u00f3vil se hace m\u00e1s frecuente, la satisfacci\u00f3n del cliente podr\u00eda estar m\u00e1s influenciada por una gratificaci\u00f3n m\u00e1s r\u00e1pida.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Tasa de rebote reducida<\/h2>\n\n\n\n<p>La investigaci\u00f3n de Google encuentra que no s\u00f3lo los usuarios m\u00f3viles esperan tiempos de carga r\u00e1pidos, sino que tambi\u00e9n consideran sus expectativas al elegir si quedarse o no.<\/p>\n\n\n\n<p>M\u00e1s del 30% de los visitantes rebotan despu\u00e9s de esperar hasta tres segundos para que una p\u00e1gina se cargue. En aproximadamente cinco segundos, los aumentos de rebote alcanzan un asombroso 90%. Unos segundos despu\u00e9s, super\u00f3 el 100%.<\/p>\n\n\n\n<p>La conclusi\u00f3n aqu\u00ed es que la optimizaci\u00f3n m\u00f3vil es crucial para mantener la competitividad en el mercado. Esta l\u00f3gica explica por qu\u00e9 los sitios web amigables con dispositivos m\u00f3viles son cruciales para las empresas, dada la cuota de mercado de navegaci\u00f3n m\u00f3vil. La p\u00e1gina m\u00f3vil de una compa\u00f1\u00eda puede diferenciarse de sus competidores haciendo tiempos de carga casi instant\u00e1neos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Mayor flexibilidad y rendimiento<\/h2>\n\n\n\n<p>Adem\u00e1s de un AMP, hay otros marcos que mejoran el rendimiento de los sitios web m\u00f3viles. Sin embargo, debido a que se construye alrededor de la idea de que los usuarios m\u00f3viles quieren su contenido de inmediato, es, con mucho, el m\u00e1s flexible y el mejor rendimiento en t\u00e9rminos de velocidad.<\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-8789912029337488\" data-ad-slot=\"9182886459\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script<\/script>\n\n\n\n<p>Aunque esto no debe significar que otras soluciones, como el dise\u00f1o web sensible o aplicaciones web progresivas, deben ser descartadas, vale la pena se\u00f1alar lo importante que puede ser considerar seriamente esta opci\u00f3n muy factible.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. (AMP SEO) se especializa en la optimizaci\u00f3n de motores de b\u00fasqueda para dispositivos m\u00f3viles<\/h2>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1586329501141-c0a435d6c0bb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80\" alt=\"Celular en YouTube, quien cuenta con una p\u00e1gina m\u00f3vil acelerada (amp)\"\/><\/figure>\n\n\n\n<p>El rendimiento de tu sitio web y su velocidad sin duda afectar\u00e1 a la retenci\u00f3n de visitantes y la conversi\u00f3n, pero tambi\u00e9n es esencial que se clasifique bien en los motores de b\u00fasqueda para conducir el tr\u00e1fico a tu sitio web.<\/p>\n\n\n\n<p>Basado en las tendencias de navegaci\u00f3n m\u00f3vil, Google apoya el Proyecto AMP (p\u00e1gina m\u00f3vil acelerada), lo que significa que conceden una gran importancia a este tema en particular. La indexaci\u00f3n de Mobile-first de Google se introdujo en 2018, lo que significa que los rankings se asignan en funci\u00f3n de lo \u00fatiles que son las p\u00e1ginas para los usuarios m\u00f3viles.<\/p>\n\n\n\n<p>En el moderno entorno de marketing digital, las mejores pr\u00e1cticas habituales de SEO no son suficientes para garantizar un SEO eficiente. El Sitio web de tu empresa se clasificar\u00e1 m\u00e1s alto en los resultados de b\u00fasqueda si haces que el sitio m\u00f3vil y optimizarlo mediante el uso de marco de Google.<\/p>\n\n\n\n<p>Los resultados ricos en el carrusel Top stories, el carrusel host de historias visuales y los resultados ricos durante la b\u00fasqueda m\u00f3vil se pueden mostrar en p\u00e1ginas con datos estructurados. Adem\u00e1s de im\u00e1genes, logotipos de p\u00e1gina y otras caracter\u00edsticas interesantes, esta b\u00fasqueda puede devolver resultados interesantes tambi\u00e9n.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Por supuesto, <a href=\"https:\/\/emma.io\/blog\/vale-la-pena-usar-amp\/\">una AMP tiene sus defectos<\/a> <\/h2>\n\n\n\n<p>Si tu dise\u00f1o web es demasiado complejo y contiene elementos din\u00e1micos, puede que no sea posible duplicarlo completamente. Un programa inteligente puede manejar este problema, pero se requerir\u00e1 creatividad y paciencia.<\/p>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-8789912029337488\" data-ad-slot=\"9182886459\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script<\/script>\n\n\n\n<p>Como resultado de su gran dependencia de la informaci\u00f3n en cach\u00e9, el marco tampoco admite autom\u00e1ticamente el seguimiento de Google Analytics, pero afortunadamente, este problema es f\u00e1cil de solucionar con soluciones disponibles.<\/p>\n\n\n\n<p>Si bien estos pueden ser argumentos v\u00e1lidos contra un AMP, el simple hecho es que los usuarios est\u00e1n ahora mucho m\u00e1s inclinados a favorecer la velocidad sobre todos los dem\u00e1s atributos, por lo que puede muy bien ser mejor elegir el pragmatismo sobre la est\u00e9tica como un medio para equilibrar las cosas.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/images.unsplash.com\/photo-1458748600212-a4c65493cbfd?ixlib=rb-1.2.1&amp;ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;auto=format&amp;fit=crop&amp;w=1000&amp;q=80\" alt=\"Persona tomando fotos en dos celulares. Suelen subir estas fotos a una p\u00e1gina m\u00f3vil.\"\/><\/figure>\n\n\n\n<p>El dise\u00f1o web debe incluir compatibilidad m\u00f3vil. Tu negocio se beneficiar\u00e1 de una p\u00e1gina m\u00f3vil acelerada, no s\u00f3lo porque te mantiene al d\u00eda con las tendencias, sino que tambi\u00e9n ayudar\u00e1 para mantenerte por delante de otras empresas.<\/p>\n\n\n\n<p>Puedes leer otros blogs a continuaci\u00f3n:<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/giovanirodriguez.dev\/es\/anuncios-de-google-vs-anuncios-de-facebook-invertir-en-el-costo-por-clic-cpc\/\">Anuncios de Google vs anuncios de Facebook | Invertir en el costo por clic (CPC)<\/a><\/li><li><a href=\"https:\/\/giovanirodriguez.dev\/es\/copywriting-convierte-tus-visitas-en-clientes-a-traves-de-texto\/\">Copywriting: Convierte tus visitas en clientes a trav\u00e9s de texto<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>El dise\u00f1o web debe incluir compatibilidad m\u00f3vil. Tu negocio se beneficiar\u00e1 de una p\u00e1gina m\u00f3vil acelerada (AMP), no s\u00f3lo porque te mantiene al d\u00eda con las tendencias, sino que tambi\u00e9n te ayudar\u00e1 a mantenerte por delante de otras empresas. Comprueba si esto se aplica a tu caso.<\/p>\n","protected":false},"author":6,"featured_media":5761,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","wds_primary_category":0},"categories":[335],"tags":[300,326],"_links":{"self":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/posts\/5760"}],"collection":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/comments?post=5760"}],"version-history":[{"count":0,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/posts\/5760\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/media\/5761"}],"wp:attachment":[{"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/media?parent=5760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/categories?post=5760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/giovanirodriguez.dev\/wp-json\/wp\/v2\/tags?post=5760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}