{"id":263471,"date":"2023-08-21T09:47:00","date_gmt":"2023-08-21T06:47:00","guid":{"rendered":"https:\/\/inform.click\/adaptacion-a-dispositivos-moviles-y-velocidad-del-sitio-dos-elementos-importantes-a-tener-en-cuenta-al-disenar-un-sitio-web\/"},"modified":"2023-08-21T10:05:00","modified_gmt":"2023-08-21T07:05:00","slug":"adaptacion-a-dispositivos-moviles-y-velocidad-del-sitio-dos-elementos-importantes-a-tener-en-cuenta-al-disenar-un-sitio-web","status":"publish","type":"post","link":"https:\/\/inform.click\/es\/adaptacion-a-dispositivos-moviles-y-velocidad-del-sitio-dos-elementos-importantes-a-tener-en-cuenta-al-disenar-un-sitio-web\/","title":{"rendered":"Adaptaci\u00f3n a dispositivos m\u00f3viles y velocidad del sitio: \u00bfdos elementos importantes a tener en cuenta al dise\u00f1ar un sitio web?"},"content":{"rendered":"<p>\n  En el mundo actual de la web 2.0 todo gira en torno a Internet. Si buscas un fontanero te vas a la web. Si buscas restaurante local vas a la web. Si quieres comprar una casa, \u00bfadivina qu\u00e9? Vas a la web.\n<\/p>\n<p>\n  Ya no hay personas que utilicen las p\u00e1ginas amarillas para encontrar un negocio para una necesidad o un deseo. Van a la web, ya que proporciona la informaci\u00f3n m\u00e1s precisa y r\u00e1pida.\n<\/p>\n<p>\n  Para obtener esta informaci\u00f3n hace cinco o siete a\u00f1os, una persona ir\u00eda a la computadora de escritorio o port\u00e1til de su hogar o negocio, abrir\u00eda un navegador web y un motor de b\u00fasqueda y realizar\u00eda una b\u00fasqueda.\n<\/p>\n<p>\n  Hoy en d\u00eda, el panorama ha cambiado por completo, ya que las personas no solo van a las computadoras port\u00e1tiles y de escritorio para obtener informaci\u00f3n, sino que usan dispositivos m\u00f3viles, incluidos tel\u00e9fonos inteligentes y tabletas.\n<\/p>\n<h5>\n  \u00bfEs su sitio web compatible con dispositivos m\u00f3viles?<br \/>\n<\/h5>\n<p>\n  Eso significa que un sitio web que se ve muy bien en una computadora de escritorio o port\u00e1til probablemente no se vea muy bien cuando se ve a trav\u00e9s de un dispositivo m\u00f3vil de mano. La copia es demasiado peque\u00f1a, los enlaces son peque\u00f1os y tienes que desplazarte hacia los lados para ver todo el contenido. El sitio no solo no es f\u00e1cil de usar, sino que ahora tambi\u00e9n podr\u00eda tener un impacto (un impacto muy importante, potencialmente extremadamente negativo) con los motores de b\u00fasqueda, especialmente Google.\n<\/p>\n<p>\n  \u00bfQu\u00e9 se traduce exactamente eso tambi\u00e9n? B\u00e1sicamente, si su sitio web no se adapta a un dispositivo m\u00f3vil, puede perder clasificaciones org\u00e1nicas con los motores de b\u00fasqueda. Eso significa que cuando alguien visita Google en su tel\u00e9fono o tableta y busca un plomero, es muy probable que no aparezca y, si lo hace, lo m\u00e1s probable es que no est\u00e9 en la primera p\u00e1gina de los resultados.\n<\/p>\n<p>\n  Adem\u00e1s, Google ahora est\u00e1 colocando una etiqueta \u00aboptimizado para dispositivos m\u00f3viles\u00bb en sus resultados de b\u00fasqueda para dispositivos m\u00f3viles. Un sitio web es elegible para esta etiqueta si cumple con los siguientes criterios detectados por el algoritmo de Google:\n<\/p>\n<ul>\n<li>Evite software que no sea com\u00fan en dispositivos m\u00f3viles como Adobe Flash.\n  <\/li>\n<li>Utilice tama\u00f1os de texto que se puedan leer sin hacer zoom.\n  <\/li>\n<li>Los enlaces se colocan lo suficientemente separados para que el usuario pueda tocar f\u00e1cilmente el correcto.\n  <\/li>\n<li>El contenido se ajusta a la pantalla, por lo que no es necesario desplazarse horizontalmente para verlo.\n  <\/li>\n<\/ul>\n<h5>\n  La prueba de compatibilidad con dispositivos m\u00f3viles<br \/>\n<\/h5>\n<p>\n  Un webmaster o propietario de una empresa puede comprobar la compatibilidad de su sitio con dispositivos m\u00f3viles visitando <a href=\"https:\/\/www.google.com\/webmasters\/tools\/mobile-friendly\/\" target=\"_blank\" rel=\"noopener\">la p\u00e1gina de prueba de compatibilidad con dispositivos m\u00f3viles de Google<\/a>. Si el sitio no pasa la prueba, Google le proporcionar\u00e1 informaci\u00f3n y consejos sobre c\u00f3mo hacer que el sitio sea compatible con dispositivos m\u00f3viles.\n<\/p>\n<p>\n  Muchos sistemas de administraci\u00f3n de contenido (CMS) como WordPress, Drupal y Joomla ahora ofrecen asistencia sobre c\u00f3mo migrar su sitio web compatible con computadoras de escritorio a un sitio adaptable y compatible con dispositivos m\u00f3viles.\n<\/p>\n<p>\n  Sin embargo, antes de hacer esto, querr\u00e1 asegurarse de hacer una copia de seguridad de su sitio actual y actualizar su CMS actual a la \u00faltima versi\u00f3n. En algunas situaciones, una actualizaci\u00f3n a la \u00faltima versi\u00f3n aplicar\u00e1 autom\u00e1ticamente las actualizaciones de seguridad necesarias y har\u00e1 que su sitio sea compatible con dispositivos m\u00f3viles. Si el proceso no se activa autom\u00e1ticamente, aseg\u00farese de enviar la actualizaci\u00f3n manualmente para evitar infracciones de seguridad.\n<\/p>\n<p>\n  Si el CMS que utiliza ofrece temas personalizados, aseg\u00farese de que la versi\u00f3n que elija sea compatible con dispositivos m\u00f3viles. Si no, puede que tenga que empezar de nuevo.\n<\/p>\n<h5>\n  \u00bfQu\u00e9 tan r\u00e1pido se carga su sitio web?<br \/>\n<\/h5>\n<p>\n  Adem\u00e1s de hacer que su sitio sea compatible con dispositivos m\u00f3viles, otro elemento importante a considerar al dise\u00f1ar su sitio web es la velocidad del sitio. Si un sitio web tarda mucho en cargarse, es muy posible que el usuario rebote y vaya a uno que cargue m\u00e1s r\u00e1pido. De hecho, seg\u00fan numerosas encuestas y estudios, casi la mitad de los usuarios de Internet esperan que un sitio se cargue en dos segundos o menos. Esas mismas personas abandonar\u00e1n un sitio que no se carga en tres segundos. Para empeorar a\u00fan m\u00e1s las cosas, el 79% de los compradores web que tienen problemas con el rendimiento del sitio web dicen que no volver\u00e1n al sitio para comprar de nuevo y alrededor del 44% de ellos le dir\u00edan a un amigo si tuvieron una mala experiencia de compra en l\u00ednea.\n<\/p>\n<p>\n  Adem\u00e1s de perder clientes potenciales porque su tiempo de carga es largo, un sitio web lento tambi\u00e9n puede da\u00f1ar su clasificaci\u00f3n con Google. Esto se debe a que Google ha indicado que la velocidad del sitio es una de las se\u00f1ales que utiliza su algoritmo para clasificar las p\u00e1ginas. Una velocidad lenta de la p\u00e1gina web tambi\u00e9n significa que el motor de b\u00fasqueda puede rastrear menos p\u00e1ginas, lo que podr\u00eda significar que Google indexa menos p\u00e1ginas. Esencialmente, todo esto significa que est\u00e1 perdiendo negocios si su sitio web se carga lentamente.\n<\/p>\n<h5>\n  Prueba de informaci\u00f3n sobre la velocidad de la p\u00e1gina de Google<br \/>\n<\/h5>\n<p>\n  De manera similar a la prueba para dispositivos m\u00f3viles, Google ofrece una herramienta gratuita <a href=\"https:\/\/developers.google.com\/speed\/pagespeed\/insights\/\" target=\"_blank\" rel=\"noopener\">Page Speed \u200b\u200bInsights Tool<\/a>. Esta herramienta mide el rendimiento de una p\u00e1gina web tanto para escritorio como para dispositivos m\u00f3viles.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f6fe8cd79.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f6fe8cd79.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Una vez que copie y pegue la URL en la herramienta, aparecer\u00e1 una puntuaci\u00f3n entre cero y cien puntos. Cuanto m\u00e1s alto sea el puntaje, mejor ser\u00e1 su sitio para el algoritmo de Google y un puntaje de 85 o m\u00e1s indica que la p\u00e1gina est\u00e1 funcionando bien.\n<\/p>\n<p>\n  Con Page Speed \u200b\u200bInsights, aprender\u00e1 c\u00f3mo su sitio web puede mejorar en varios aspectos clave, incluido el tiempo transcurrido desde el momento en que un usuario solicita una nueva p\u00e1gina hasta el momento en que el navegador muestra el contenido de la p\u00e1gina anterior. Tambi\u00e9n mide el tiempo transcurrido desde el momento en que un usuario solicita una nueva p\u00e1gina hasta el momento en que el navegador procesa completamente la p\u00e1gina.\n<\/p>\n<p>\n  Dado que la red de los usuarios podr\u00eda tener un gran impacto en esta velocidad, Page Speed \u200b\u200bInsights solo considera los aspectos independientes de la red del rendimiento de la p\u00e1gina. Eso incluye la configuraci\u00f3n del servidor, la estructura HTML y el uso de recursos externos como im\u00e1genes, CSS y JavaScript.\n<\/p>\n<p>\n  Por ejemplo, al optimizar su c\u00f3digo (incluida la eliminaci\u00f3n de espacios, comas y otros caracteres innecesarios), puede <a href=\"https:\/\/inform.click\/es\/como-mejorar-la-velocidad-del-sitio-web-de-wordpress-8-consejos-simples-pero-efectivos\/\" title=\"aumentar dr\u00e1sticamente la velocidad de su p\u00e1gina.\">aumentar dr\u00e1sticamente la velocidad de su p\u00e1gina.<\/a> Tambi\u00e9n elimine los comentarios de c\u00f3digo, el formato y el c\u00f3digo no utilizado. Google recomienda usar <a href=\"https:\/\/developer.yahoo.com\/yui\/compressor\/\" target=\"_blank\" rel=\"noopener\">YUI Compressor<\/a> tanto para CSS como para JavaScript.\n<\/p>\n<p>\n  La reducci\u00f3n de redireccionamientos tambi\u00e9n mejorar\u00e1 la velocidad del sitio. Esto se debe a que cada vez que una p\u00e1gina se redirige a otra p\u00e1gina, el visitante se enfrenta a un tiempo adicional de espera para que se complete el ciclo de solicitud-respuesta de HTTP. Por ejemplo, si su patr\u00f3n de redireccionamiento m\u00f3vil se ve as\u00ed: \u00abABC.com -&gt; www.ABC.com -&gt; m.ABC.com -&gt; m.ABC.com\/home\u00bb, cada uno de esos dos redireccionamientos adicionales hace que su p\u00e1gina cargar m\u00e1s lento.\n<\/p>\n<p>\n  Los webmasters siempre deben aprovechar el almacenamiento en cach\u00e9 del navegador. Eso incluye elementos como im\u00e1genes, hojas de estilo y otros. Esto ocurre para que un visitante que regresa a su sitio web no tenga que volver a cargar la p\u00e1gina completa. Al usar una herramienta como <a href=\"https:\/\/addons.mozilla.org\/en-US\/firefox\/addon\/YSlow\/\" target=\"_blank\" rel=\"noopener\">YSlow<\/a>, puede ver si ya tiene una fecha de vencimiento establecida para su cach\u00e9. Una vez que se averig\u00fce, puede establecer un encabezado de \u00abcaducidad\u00bb para el tiempo que desea que esa informaci\u00f3n se almacene en cach\u00e9. A menos que su sitio cambie con frecuencia, un a\u00f1o es un tiempo razonable para establecerlo.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f7009187a.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f7009187a.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Busque siempre formas de mejorar el tiempo de respuesta de su servidor. Para hacer esto, observe varios cuellos de botella de rendimiento, como consultas lentas a la base de datos, enrutamiento lento o falta de memoria adecuada. Los tiempos de respuesta \u00f3ptimos del servidor deben ser inferiores a 200 milisegundos.\n<\/p>\n<h5>\n  Las im\u00e1genes tambi\u00e9n pueden desempe\u00f1ar un papel importante en la velocidad de su sitio web.<br \/>\n<\/h5>\n<p>\n  Los PNG suelen ser el mejor formato de archivo para gr\u00e1ficos con menos de 16 colores. Los archivos JPEG son generalmente el formato ideal para las fotos. Aseg\u00farese de que tambi\u00e9n est\u00e9n comprimidos para la web y no es necesario cargar fotos de 200 y 300 DPI.\n<\/p>\n<p><a href=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f7028727e.webp\" data-rel=\"lightbox\"><img decoding=\"async\" class=\"SDStudio-light-box-enable SDStudio-editor-tools-md-imp\" src=\"https:\/\/inform.click\/wp-content\/uploads\/2022\/11\/post-236276-6381f7028727e.webp\" alt=\"\" \/><\/a><\/p>\n<p>\n  Un consejo que puede probar es usar <a href=\"http:\/\/csssprites.com\/\" target=\"_blank\" rel=\"noopener\">sprites de CSS<\/a> para crear una plantilla para las im\u00e1genes que usa con frecuencia, como iconos, su logotipo y otros botones de uso com\u00fan. Los sprites de CSS combinar\u00e1n sus im\u00e1genes en una imagen m\u00e1s grande que se cargar\u00e1 toda a la vez. Eso significa menos solicitudes HTTP, lo que equivale a ahorrar tiempo de carga al no obligar a los usuarios a esperar a que se carguen varias im\u00e1genes.\n<\/p>\n<p>\n  Por \u00faltimo, otra opci\u00f3n para aumentar la velocidad de carga de sus sitios es utilizar una red de distribuci\u00f3n de contenido o CDN. Esta red de servidores se utiliza para distribuir la carga de entrega de contenido. B\u00e1sicamente, esto significa que las copias de su sitio web se almacenan en m\u00faltiples centros de datos geogr\u00e1ficamente diversos para que los usuarios tengan un acceso m\u00e1s r\u00e1pido y confiable al sitio web en cualquier lugar del mundo en el que se encuentren f\u00edsicamente.\n<\/p>\n<p>\n  Si bien la creaci\u00f3n de un excelente sitio web puede ser emocionante y gratificante, querr\u00e1 asegurarse de que est\u00e9 correctamente optimizado. Eso incluye asegurarse de que sea compatible con dispositivos m\u00f3viles y con la velocidad del sitio. Si no, existe una gran posibilidad de que pueda perder negocios potencialmente nuevos y repetidos.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  Fuente de grabaci\u00f3n: <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2015\/09\/09\/mobile-friendly-site-speed\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>En el mundo actual de la web 2.0 todo gira en torno a Internet. Si buscas un fontanero te vas a la web. Si buscas restaurante local vas a la web. Si quieres comprar una casa, \u00bfadivina qu\u00e9? Vas a la web. Ya no hay personas que utilicen las p\u00e1ginas amarillas para encontrar un negocio para una necesidad o un deseo. Van a la web, ya que proporciona la informaci\u00f3n m\u00e1s precisa y r\u00e1pida. Para obtener esta informaci\u00f3n hace cinco o siete a\u00f1os, una persona ir\u00eda al escritorio de su hogar o negocio o&#8230;<\/p>\n","protected":false},"author":1,"featured_media":155657,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[151,203,125,60],"tags":[],"class_list":["post-263471","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-consejos-y-trucos-web","category-diseno-web","category-herramientas-web","category-web-y-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/263471","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/comments?post=263471"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/posts\/263471\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media\/155657"}],"wp:attachment":[{"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/media?parent=263471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/categories?post=263471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/es\/wp-json\/wp\/v2\/tags?post=263471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}