{"id":31625,"date":"2024-11-12T12:40:18","date_gmt":"2024-11-12T12:40:18","guid":{"rendered":"https:\/\/www.seobility.net\/?post_type=wiki&p=31625"},"modified":"2025-03-23T12:37:47","modified_gmt":"2025-03-23T12:37:47","slug":"Velocidad_de_carga_web","status":"publish","type":"wiki","link":"https:\/\/www.seobility.net\/es\/wiki\/Velocidad_de_carga_web","title":{"rendered":"Velocidad de carga web"},"content":{"rendered":"

\u00bfQu\u00e9 es la velocidad de carga web o Page Speed?<\/span><\/h2>\n

El t\u00e9rmino velocidad de carga web se refiere al tiempo que tarda una p\u00e1gina web en cargar, el cual est\u00e1 compuesto por tres intervalos de tiempo diferentes: 1. el tiempo de respuesta del servidor (= tiempo de espera hasta el primer byte o tiempo hasta el primer byte (TTFB), as\u00ed como 2. el tiempo de descarga de una p\u00e1gina HTML (= tiempo de transferencia) y 3. la duraci\u00f3n de la representaci\u00f3n o renderizaci\u00f3n<\/a> de la p\u00e1gina en el navegador.\n<\/p>\n

Por lo tanto, el t\u00e9rmino velocidad de carga web abarca el tiempo completo desde el env\u00edo de una petici\u00f3n HTTP a un servidor hasta la visualizaci\u00f3n completa del sitio web en el browser.\n<\/p>\n

\n
\n

Comprueba la velocidad de carga<\/h3>\n

Comprueba la velocidad de tu p\u00e1gina web<\/p>\n<\/div>\n

\n
\n<\/form>\n<\/div>\n

Importancia para la experiencia de usabilidad y el SEO<\/span><\/h2>\n

Un tiempo de carga web muy lento provoca una mala experiencia de usabilidad y hace que las y los internautas abandonen el sitio r\u00e1pidamente.\n<\/p>\n

Especialmente cuando se navega a trav\u00e9s de un dispositivo m\u00f3vil, es esencial que las usuarias y usuarios puedan acceder al contenido deseado sin demoras. De hecho, la velocidad de carga es a\u00fan m\u00e1s importante en estos casos, ya que la rapidez de transmisi\u00f3n en los dispositivos m\u00f3viles es muy baja.\n<\/p>\n

Si un portal tarda demasiado en cargarse, ya sea en el escritorio o en los m\u00f3viles, la mayor\u00eda de las personas se sentir\u00e1n frustradas y lo abandonar\u00e1n r\u00e1pidamente, aumentando as\u00ed la tasa de rebote<\/a>.\n<\/p>\n

De todos modos, la velocidad de carga no solo influye indirectamente en la optimizaci\u00f3n de los buscadores, sino que tambi\u00e9n es un factor importante de clasificaci\u00f3n directa para Google. De hecho, sus ara\u00f1as rastrean las p\u00e1ginas lentas con menos frecuencia que las r\u00e1pidas porque requieren m\u00e1s presupuesto de rastreo y Google prefiere utilizar este presupuesto de la manera m\u00e1s eficiente posible.\n<\/p>\n

Como consecuencia de esto, si Google Bot visita una web con menos frecuencia, su estado de indexaci\u00f3n se ver\u00e1 afectado negativamente.
\nPor lo tanto, la velocidad de carga es un punto de partida importante para mejorar la experiencia de usabilidad y optimizar el SEO de una p\u00e1gina.\n<\/p>\n

\u00bfC\u00f3mo mejorar la velocidad de carga web?<\/span><\/h2>\n
\n
\"Optimizaci\u00f3n<\/a> <\/p>\n
Imagen:<\/b> Optimizaci\u00f3n de la velocidad de carga web – Autor: Seobility – Licencia: CC BY-SA 4.0<\/a><\/div>\n<\/div>\n<\/div>\n

Compresi\u00f3n de archivos HTML, CSS y JavaScript<\/span><\/h3>\n

Cuanto m\u00e1s peque\u00f1os sean los archivos necesarios para cargar una p\u00e1gina web, m\u00e1s r\u00e1pido se podr\u00e1 cargar la p\u00e1gina completa. Por este motivo es que, comprimir los archivos HTML, CSS y JavaScript resulta una medida \u00fatil para mejorar la velocidad de las p\u00e1ginas.\n<\/p>\n

La compresi\u00f3n de estos archivos es posible acortando el c\u00f3digo, por ejemplo, eliminando comentarios, saltos de l\u00ednea, caracteres innecesarios y espacios. Adem\u00e1s, el tama\u00f1o de los archivos puede comprimirse para su transferencia del lado del servidor utilizando gzip<\/a>. Esto es est\u00e1ndar en los servidores web Apache y Nginx.\n<\/p>\n

Minimizar las peticiones HTTP<\/span><\/h3>\n

Cuando se solicita una p\u00e1gina web, se env\u00eda una petici\u00f3n HTTP al servidor por cada archivo, sea HTML, CSS, JavaScript o una imagen. Sin embargo, un navegador solo puede enviar un determinado n\u00famero de peticiones por dominio a la vez. Si se requiere un gran n\u00famero de peticiones para una p\u00e1gina web, el navegador no puede enviar todas las peticiones juntas, por lo que tardar\u00e1 m\u00e1s tiempo en cargar el sitio por completo.\n<\/p>\n

Se puede minimizar el n\u00famero de peticiones HTTP combinando varios archivos de un mismo tipo en uno solo (por ejemplo, agrupando en un solo archivo varios archivos CSS).\n<\/p>\n

Uso de subdominios<\/span><\/h3>\n

Seg\u00fan lo ya comentado, los navegadores solamente pueden enviar un cierto n\u00famero de peticiones HTTP por dominio a la vez. El uso de subdominios adicionales aumenta la cantidad de peticiones disponibles, lo que tiene un efecto positivo en el tiempo de carga si su sitio contiene un gran n\u00famero de archivos.\n<\/p>\n

Reducir los redireccionamientos<\/span><\/h3>\n

Cada redirecci\u00f3n<\/a> requiere una nueva petici\u00f3n y respuesta HTTP y, por lo tanto, necesita de un tiempo de carga adicional. Las cadenas de redirecciones aumentan innecesariamente el tiempo de carga, por lo que se deben reducir las cadenas de redirecciones todo lo posible.\n<\/p>\n

Cach\u00e9 del servidor<\/span><\/h3>\n

El caching<\/a> del servidor informa que el resultado de la consulta de una p\u00e1gina se almacena en la cach\u00e9 del servidor. Si se vuelve a solicitar esta p\u00e1gina, los navegadores pueden acceder a esta cach\u00e9 y no tienen que repetir la solicitud.\n<\/p>\n

Adem\u00e1s, el servidor necesita recuperar menos datos de su base de datos, lo que permite ahorrar valiosos recursos. Sin embargo, es importante recordar que hay que borrar la cach\u00e9 despu\u00e9s de haber editado el sitio.\n<\/p>\n

Cach\u00e9 del navegador<\/span><\/h3>\n

El almacenamiento en cach\u00e9 del navegador indica que los elementos est\u00e1ticos del sitio como im\u00e1genes, archivos JavaScript y CSS se almacenan en el navegador del dispositivo de la usuaria o usuario. As\u00ed, estos archivos no tienen que volver a cargarse cuando se solicita de nuevo la p\u00e1gina.\n<\/p>\n

Sin embargo, hay que asegurarse de que la cabecera de caducidad es correcta. Se trata de una informaci\u00f3n que indica a los navegadores cu\u00e1ndo va a caducar la cach\u00e9 de los respectivos archivos para que estos tengan que volver a cargarse desde el servidor. Esto asegura que a las y los usuarios\/as se les muestre siempre la \u00faltima versi\u00f3n del sitio en sus navegadores.\n<\/p>\n

Redes de distribuci\u00f3n de contenidos (CDN)<\/span><\/h3>\n

Una CDN<\/a> es una red de servidores utilizada para distribuir el contenido de un sitio web que almacena copias del website en servidores repartidos geogr\u00e1ficamente. Si se desea acceder al sitio web, este es entregado por el servidor m\u00e1s cercano a la o el internauta.\n<\/p>\n

De este modo, las CDNs reducen la carga del servidor, pues procesan menos peticiones HTTP. Adem\u00e1s, las CDNs suelen ser regionales, lo que reduce a\u00fan m\u00e1s el tiempo de carga debido a que las rutas de transmisi\u00f3n son m\u00e1s cortas.\n<\/p>\n

Carga v\u00eda AJAX<\/span><\/h3>\n

AJAX es una t\u00e9cnica que permite cargar el contenido del sitio sin tener que enviar una nueva petici\u00f3n HTTP al servidor. Con este m\u00e9todo, no es necesario cargar todo el contenido de un sitio web a la vez, sino que solo ocurre cuando las personas recorren el sitio.\n<\/p>\n

Esto es especialmente recomendable para la visualizaci\u00f3n de un sitio web en dispositivos m\u00f3viles, donde las velocidades de transferencia de datos suelen ser menores. Incluso un sitio que se carga en segundos en un ordenador de sobremesa podr\u00eda causar problemas en los smartphones.\n<\/p>\n

Con todo, hay que tener cuidado con la implementaci\u00f3n de AJAX porque todav\u00eda no est\u00e1 claro si Google indexa correctamente las p\u00e1ginas AJAX y si las usuarias y usuarios pueden encontrar ese contenido a trav\u00e9s del buscador. Lo mejor es asegurarse que el contenido de las p\u00e1ginas AJAX (tambi\u00e9n sea relevante para Google) sea accesible para las ara\u00f1as web<\/a>.\n<\/p>\n

Carga as\u00edncrona<\/span><\/h3>\n

Cuando se cargan p\u00e1ginas web de forma sincr\u00f3nica, los archivos y elementos de la p\u00e1gina son cargados en el mismo orden en que aparecen en el archivo HTML. De este modo se asegura de que no se cargue un archivo hasta que no se haya completado la carga del archivo anterior. Por lo tanto, si la carga de un archivo en particular demora mucho tiempo, esto puede ralentizar toda la p\u00e1gina web.\n<\/p>\n

Una soluci\u00f3n a este problema es la carga as\u00edncrona. Con la misma, los archivos como los de JavaScript o CSS incrustados se siguen cargando en segundo plano mientras el proceso de carga del siguiente archivo ya ha comenzado.\n<\/p>\n

Optimizaci\u00f3n del tiempo de respuesta del servidor (TTFB)<\/span><\/h3>\n

Cuanto m\u00e1s r\u00e1pido responda un servidor a una solicitud entrante, o sea que, cuanto m\u00e1s corto sea el tiempo hasta el primer byte (TTFB), m\u00e1s r\u00e1pido se podr\u00e1 cargar un sitio. El tiempo de respuesta de un servidor depende del tr\u00e1fico web<\/a>, los recursos necesarios para una p\u00e1gina, el software del servidor y el proveedor de hosting<\/a>.\n<\/p>\n

El resultado total no deber\u00eda superar los 200 ms, de lo contrario, el robot de Google dejar\u00e1 de rastrear la URL con regularidad, lo que puede tener un efecto negativo en la indexaci\u00f3n. Es posible optimizar el tiempo de respuesta identificando y eliminando las vulnerabilidades del servidor como las consultas lentas a la base de datos.\n<\/p>\n

Im\u00e1genes<\/span><\/h3>\n

El manejo correcto de las im\u00e1genes en una p\u00e1gina web puede ser un factor importante para mejorar la velocidad de carga del site.\n<\/p>\n

Por ejemplo, se recomienda no cargar gr\u00e1ficos como botones, iconos o fondos como archivos de imagen, sino crearlos mediante CSS. Esto no solo requiere menos c\u00f3digo y peticiones HTTP, sino que tambi\u00e9n garantiza que estos gr\u00e1ficos se muestren con nitidez en todos los tama\u00f1os de pantalla.\n<\/p>\n

Otro aspecto relevante es el tama\u00f1o de los archivos de imagen. Debe mantenerse al m\u00ednimo para reducir el tiempo de carga de las im\u00e1genes. Adem\u00e1s, se puede utilizar el elemento HTML5<\/a> <picture> para proporcionar diferentes versiones de una imagen que se adec\u00faen a los diferentes tama\u00f1os de pantalla.\n<\/p>\n

Esto evita que las im\u00e1genes con un tama\u00f1o de archivo muy grande se carguen en los dispositivos m\u00f3viles, lo que aumenta innecesariamente el tiempo de carga.\n<\/p>\n

Adem\u00e1s, las im\u00e1genes pueden comprimirse mediante numerosos servicios en l\u00ednea, como kraken.io<\/a>: herramienta que permite reducir el tama\u00f1o del archivo sin que pierda su calidad.\n<\/p>\n

Tambi\u00e9n hay que asegurarse de emplear el formato de archivo correcto. Mientras JPG es adecuado para fotos, PNG debe elegirse para gr\u00e1ficos con menos matices de color como las capturas de pantalla.\n<\/p>\n

Comprobar la velocidad de una p\u00e1gina con Google PageSpeed Insights<\/span><\/h2>\n

Se puede analizar f\u00e1cilmente la velocidad de la p\u00e1gina de un sitio web con Google PageSpeed Insights<\/a>.\n<\/p>\n

Esta herramienta de Google recupera el sitio web tanto con el user agent<\/a> para m\u00f3viles como tambi\u00e9n para ordenadores y, a continuaci\u00f3n, proporciona una puntuaci\u00f3n total de la velocidad de carga. Adem\u00e1s, brinda consejos concretos de optimizaci\u00f3n para mejorar la puntuaci\u00f3n de Google PageSpeed del sitio.\n<\/p>\n

\"PageSpeed\n<\/p>\n

Captura de pantalla con un resultado de an\u00e1lisis de Google PageSpeed Insights<\/a>\n<\/p>\n

Ampliar conocimientos<\/span><\/h2>\n