Mejorar la experiencia y comportamiento de usuario <\/strong><\/h3>\n\n\n\nAlgunos estudios<\/strong><\/a> han demostrado la importancia de optimizar la velocidad de carga en un sitio web, en relaci\u00f3n con la mejora del comportamiento y la experiencia de usuario ofrecida.<\/p>\n\n\n\nLa cantidad de tiempo que un usuario esperar\u00e1 antes de perder el inter\u00e9s en un sitio web, es aproximadamente entre 0,3 y 3 segundos. Pasado ese tiempo, el usuario perder\u00e1 el foco de inter\u00e9s sobre el sitio y posiblemente cierre la ventana del navegador o realice otra b\u00fasqueda.<\/p>\n\n\n\n
Por el contrario, las web m\u00e1s r\u00e1pidas ofrecen tasas de rebote m\u00e1s bajas y tasas de conversi\u00f3n m\u00e1s altas, fruto de una \u00f3ptima experiencia de usuario.<\/p>\n\n\n\n
Mejorar el posicionamiento SEO en los motores de b\u00fasqueda<\/strong><\/h3>\n\n\n\nMejorar la experiencia de usuario y los tiempos de carga, son factores muy importantes para una buena clasificaci\u00f3n org\u00e1nica en los motores de b\u00fasqueda como Google<\/a>. Cuanto m\u00e1s r\u00e1pido y de mejor modo se resuelva la intenci\u00f3n b\u00fasqueda<\/strong> del usuario, mejor.<\/p>\n\n\n\nContar con una p\u00e1gina web con un rendimiento \u00f3ptimo tiene un impacto positivo, en el tr\u00e1fico, la retenci\u00f3n de usuario y la generaci\u00f3n de oportunidades de venta.<\/p>\n\n\n\n
\u00bfQu\u00e9 factores influyen en la velocidad de carga de un sitio web?<\/strong><\/h2>\n\n\n\nExisten diversos factores y razones por las que una p\u00e1gina web no carga de forma r\u00e1pida. Los m\u00e1s comunes son:<\/p>\n\n\n\n
- El contenido CSS y JavaScript sin uso<\/li>
- Recursos que bloquean el renderizado<\/li>
- No usar la cach\u00e9 del navegador<\/li>
- Demasiados complementos<\/li>
- Uso de im\u00e1genes en formatos pesados o con un tama\u00f1o adecuado<\/li>
- Problemas de codificaci\u00f3n de las im\u00e1genes<\/li>
- Hotlinking de im\u00e1genes<\/strong><\/a> y otros recursos de servidores lentos<\/li>
- Plan de alojamiento con pocos recursos o servidor con bajo nivel:
- Altos vol\u00famenes de tr\u00e1fico pueden hacer que el servidor sufra<\/li>
- No contar con el espacio suficiente de memoria puede afectar al desempe\u00f1o del sitio web, entre otros.<\/li><\/ul><\/li>
- Visualizaci\u00f3n del sitio web en navegadores m\u00e1s antiguos<\/li>
- Conexi\u00f3n de red lenta en dispositivos m\u00f3viles<\/li>
- Etc.<\/li><\/ul>\n\n\n\n
Como puedes ver, existen una amplia gama de razones y factores que pueden influir negativamente en la velocidad de carga del sitio. Sin embargo, antes de empezar e intentar solucionar estos problemas, se debe medir y comprobar el tiempo de carga. <\/p>\n\n\n\n
\u00bfC\u00f3mo comprobar el nivel de rendimiento de una p\u00e1gina web?<\/strong><\/h2>\n\n\n\nAntes de llevar a cabo alg\u00fan ajuste, es importante determinar primero el rendimiento del sitio web y su estado actual para poder evaluar la situaci\u00f3n en la que se encuentra y determinar qu\u00e9 cambios pueden ser precisos. <\/p>\n\n\n\n
- Comprobar velocidad de carga<\/strong><\/a> <\/strong><\/li>
- Comprobar errores <\/li><\/ul>\n\n\n\n
Medir el rendimiento requiere herramientas espec\u00edficas para su monitoreo continuo, as\u00ed como de un enfoque espec\u00edfico de an\u00e1lisis (monitoreo sint\u00e9tico<\/strong><\/a> y monitoreo de usuarios reales<\/strong><\/a>).<\/p>\n\n\n\nLa medici\u00f3n a trav\u00e9s de herramientas anal\u00edticas de prueba o testeo<\/strong><\/a>, como Google PageSpeed Insights, Search Console<\/strong><\/a> o Chrome UX Report<\/strong><\/a> y el an\u00e1lisis de m\u00e9tricas espec\u00edficas, permite comparar el rendimiento del sitio web antes y despu\u00e9s de hacer cambios.<\/p>\n\n\n\nDe este modo podemos contrastar si esos ajustes han sido realmente efectivos.<\/p>\n\n\n\n
\u00bfCu\u00e1l es la velocidad de carga \u00f3ptima?<\/strong><\/h2>\n\n\n\nPor norma general, se debe de mostrar el sitio web de forma completa y totalmente cargado al usuario en menos de 3 segundos como m\u00e1ximo, para lograr una velocidad web \u00f3ptima.<\/p>\n\n\n\n
Si empleas las m\u00e9tricas de Core Web Vitals <\/a>, estos son los umbrales recomendados de velocidad que se deber\u00edan de conseguir, y as\u00ed lograr un rendimiento \u00f3ptimo de la p\u00e1gina.<\/p>\n\n\n\n![\"\"](\"https:\/\/tusclicks.com\/blog\/wp-content\/uploads\/image-66.png\")
<\/figure><\/div>\n\n\n\nGoogle utiliz\u00f3 diferentes criterios para llegar a estos umbrales<\/strong>, en este articulo podr\u00e1s aprender<\/a> m\u00e1s sobre este tema. De todas maneras te recomendamos que cualquier acci\u00f3n o cambio que quieras hacer, primero la discutas con tu programador web.<\/p>\n\n\n\n13 t\u00e9cnicas y consejos para mejorar el rendimiento de tu web<\/strong><\/h2>\n\n\n\nMejorar el rendimiento de un sitio web puede ser un desaf\u00edo, especialmente con las grandes diferencias existentes entre los distintos tipos de dispositivos, navegadores y sistemas operativos empleados por los usuarios, as\u00ed como su nivel de conectividad.<\/p>\n\n\n\n
Pero como recompensa, se obtiene un impacto significativo en el negocio y en la confianza por parte de los visitantes.<\/p>\n\n\n\n
Para ello, algunas t\u00e9cnicas y consejos para mejorar y optimizar la velocidad de carga de una web<\/strong><\/a>, adem\u00e1s de su rendimiento general, son los siguientes:<\/p>\n\n\n\n1. Reduce la cantidad de solicitudes HTTP<\/strong><\/h3>\n\n\n\nLos navegadores web emplean las solicitudes HTTP (protocolo para comunicarse con un servidor web remoto) para obtener los diferentes elementos de un sitio como: textos, im\u00e1genes, hojas de estilo y archivos JavaScript del servidor donde est\u00e1 alojada la web. <\/p>\n\n\n\n
Cada solicitud genera una cierta sobrecarga (especialmente si se utiliza HTTP\/1.1) al establecer la conexi\u00f3n entre el servidor del sitio web y el navegador (aplican l\u00edmites en la cantidad de solicitudes; si existen muchas solicitudes en cola, algunas pueden bloquearse).<\/p>\n\n\n\n
Para evitar una sobrecarga innecesaria, sigue estos pasos para reducir la cantidad de solicitudes HTTP<\/strong><\/a>:<\/p>\n\n\n\n- Elimina las solicitudes innecesarias y el contenido sin uso: ser\u00e1 necesario determinar cu\u00e1l es el tiempo m\u00ednimo de renderizado requerido del sitio, para cargar s\u00f3lo los recursos externos necesarios. Para ello debes eliminar:
- Im\u00e1genes innecesarias<\/li>
- Archivos JavaScript<\/li>
- Hojas de estilo<\/li>
- Fuentes<\/li>
- Si emplea un CMS como WordPress, se deben eliminar los plugins y complementos innecesarios (suelen cargar archivos adicionales en cada p\u00e1gina).<\/li><\/ol><\/li>
- Optimiza las solicitudes y contenido en uso:
- Comprime archivos CSS y JavaScript. Generalmente, para optimizar un sitio web se suele cargar todo el CSS y Javascript necesarios en una sola solicitud para cada uno.<\/li>
- Optimiza el peso de otros recursos que puedan estar carg\u00e1ndose lentamente. <\/li><\/ol><\/li><\/ol>\n\n\n\n
2. Cambia a HTTP\/2<\/strong><\/h3>\n\n\n\nComo mencionamos previamente, la sobrecarga de enviar muchas solicitudes a trav\u00e9s de HTTP\/1.1 puede generar problemas de velocidad de carga. Por ello, una forma de solucionar esto, es reducir el n\u00famero de solicitudes. <\/p>\n\n\n\n
Menos recursos requeridos para renderizar el sitio web supondr\u00e1n tiempos de carga m\u00e1s r\u00e1pidos, pero existe otra manera de evitar el inconveniente de la sobrecarga. <\/p>\n\n\n\n
Puedes cambiar la web de HTTP\/1.1. a HTTP\/2<\/strong><\/a> (c\u00f3mo hacer esto, depender\u00e1 del proveedor de alojamiento que tengas contratado). <\/p>\n\n\n\nSu gran ventaja, es la capacidad de enviar varios archivos al mismo tiempo, a trav\u00e9s de una misma conexi\u00f3n, evitando o mitigando en cierto modo la sobrecarga por m\u00faltiples solicitudes.<\/p>\n\n\n\n
3. Optimiza el tama\u00f1o de las im\u00e1genes<\/strong><\/h3>\n\n\n\nSi el sitio web muestra muchos gr\u00e1ficos e im\u00e1genes con diferentes resoluciones (2x o 3x) y no est\u00e1n comprimidas, empeorar\u00e1 el rendimiento del sitio, ya que pueden no mostrarse en pantallas de alta densidad (HiDP)<\/strong><\/a>, como las pantallas retina. <\/p>\n\n\n\nEn cualquier caso, si los usuarios que se esperan conseguir en la web no emplean este tipo de pantallas, se estar\u00e1 desperdiciando ancho de banda y aumentando el tiempo de carga sin necesidad, especialmente en aquellos casos con conexiones de datos m\u00f3viles lentas.<\/p>\n\n\n\n
Por ello, se deben especificar varios tama\u00f1os de imagen<\/strong><\/a> para permitir que el navegador seleccione la imagen adecuada seg\u00fan la resoluci\u00f3n de la pantalla en cada caso (es aconsejable subirlas de inicio con un peso \u00f3ptimo siempre que sea posible). <\/p>\n\n\n\nEste proceso se puede hacer de forma manual o bien de forma autom\u00e1tica con herramientas<\/strong><\/a>.<\/p>\n\n\n\nTambi\u00e9n es importante el tipo de archivo que se emplea en cada caso:<\/p>\n\n\n\n
- JPEG: para im\u00e1genes con muchos colores como fotograf\u00edas<\/li>
- PNG: para gr\u00e1ficos m\u00e1s simples<\/li><\/ul>\n\n\n\n
![\"\"](\"https:\/\/tusclicks.com\/blog\/wp-content\/uploads\/blog-transparencia.png\")
<\/figure><\/div>\n\n\n\n4. Utilizar CDN o red de entrega de contenido<\/strong><\/h3>\n\n\n\nServir archivos est\u00e1ticos es una tarea complicada (si no dispones de una red para tal fin), pero existen servicios dise\u00f1ados especialmente para esto, denominados Content Delivery Networks o CDN<\/strong> que se pueden contratar de forma sencilla como Cloudflare<\/strong><\/a>.<\/strong><\/p>\n\n\n\nUna CDN es una red superpuesta de ordenadores los cuales contienen copias de datos situadas en varios puntos de una red (emplean servidores distribuidos geogr\u00e1ficamente), con el fin de maximizar el ancho de banda para el acceso a los datos de clientes por la red.<\/p>\n\n\n\n
Dicho de otro modo, las CDN optimizar\u00e1n la entrega de archivos est\u00e1ticos como CSS, im\u00e1genes, fuentes y JavaScript a los visitantes del sitio, desde el servidor m\u00e1s cercano de la red. <\/p>\n\n\n\n
Es por este motivo, que el tiempo de carga es igual, independientemente de donde se conecte el usuario. Para ello, es aconsejable monitorear el rendimiento de los archivos alojados en CDN para poder medir realmente si tiene sentido externalizar esta parte de la infraestructura. <\/p>\n\n\n\n
5. Programa tu sitio web primero para dispositivos m\u00f3viles<\/strong><\/h3>\n\n\n\nEs importante verificar el tipo de dispositivo que emplean los usuarios para visitar el sitio web con una herramienta de monitoreo real del usuario ( RUM)<\/strong><\/a>, o anal\u00edtica (como Google Analytics para el tr\u00e1fico general y Search Console para el tr\u00e1fico org\u00e1nico).<\/p>\n\n\n\nGeneralmente, los programadores web tienden a dise\u00f1ar y hacer pruebas de los sitios web en dispositivos de escritorio y luego optimizan el mismo para m\u00f3viles. Esto puede conllevar algunos problemas si no se plante\u00f3 adecuadamente de inicio.<\/p>\n\n\n\n
Por ello, es recomendable desarrollar la web primero para dispositivos m\u00f3viles, haciendo las pruebas oportunas en estos (Mobile-First Indexing<\/strong><\/a>). De este modo, la experiencia estar\u00eda por defecto optimizada para dispositivos m\u00f3viles.<\/p>\n\n\n\nAdem\u00e1s, ajustar el sitio web posteriormente para dispositivos de escritorio es un proceso generalmente menos tedioso. Se puede ir mejorando progresivamente la experiencia en los distintos dispositivos, ajustando los espacios en pantalla, acelerando la red y la CPU. <\/p>\n\n\n\n
6. Minimiza el TTFB<\/strong><\/h3>\n\n\n\nEl TTFB (Time To First Byte) o tiempo hasta el primer byte, es el tiempo que tarda el navegador en recibir el primer byte de datos del servidor web remoto. <\/p>\n\n\n\n
Se trata de un aspecto a mejorar en el servidor, puesto que juega un papel importante en el rendimiento general de una web.<\/p>\n\n\n\n
El principal factor para minimizar el TTFB<\/strong><\/a>, es el tiempo de procesamiento del servidor. Para optimizarlo, puedes seguir algunos de los siguientes consejos recomendados por Google:<\/p>\n\n\n\n- Actualiza el hardware del servidor para contar con m\u00e1s memoria o CPU<\/li>
- Optimiza la forma en que el servidor consulta las bases de datos o migra a otro sistema de base de datos m\u00e1s r\u00e1pido.<\/li>
- Optimiza la l\u00f3gica de la aplicaci\u00f3n del servidor para preparar las p\u00e1ginas m\u00e1s r\u00e1pidamente. Si empleas un framework del lado del servidor<\/strong><\/a>, generalmente ofrecer\u00e1 recomendaciones en cada caso sobre c\u00f3mo hacerlo.<\/li><\/ul>\n\n\n\n
Los rangos para evaluar si el TTFB del sitio es \u00f3ptimo son:<\/p>\n\n\n\n
- Menor de 200 ms = excelente. <\/li>
- Entre 200 ms y 500 ms = normal <\/li>
- Superior a 500 o 600 ms = poco \u00f3ptimo (ser\u00e1 necesario investigar y minimizar) <\/li><\/ul>\n\n\n\n
7. Elige el plan de alojamiento web adecuado<\/strong><\/h3>\n\n\n\nGuarda relaci\u00f3n con la reducci\u00f3n del TTFB. Esto se debe, a que si se emplea un plan de hosting bajo de recursos, es posible que el rendimiento general se resienta. <\/p>\n\n\n\n
Por ello, es importante determinar el rendimiento del hosting y las necesidades del sitio, as\u00ed analizar los recursos a contratar. Si el plan de hosting estuviese limitado por recursos, existen las siguientes alternativas:<\/p>\n\n\n\n
- Actualizar o ampliar el plan de alojamiento. <\/li>
- Utilizar un servicio administrado, estable y con alto rendimiento (muy pr\u00e1ctico en desarrollos para WordPress).<\/li>
- Cambiar de tipo de hospedaje: Existen diferentes opciones para hospedar un sitio web<\/strong><\/a> (sin hosting, hosting compartido, hosting VPS o hosting dedicado). <\/li><\/ul>\n\n\n\n
Aqu\u00ed puedes encontrar m\u00e1s informaci\u00f3n sobre c\u00f3mo elegir el hosting para tu sitio web<\/strong><\/a>.<\/p>\n\n\n\n![\"\"](\"https:\/\/tusclicks.com\/blog\/wp-content\/uploads\/image-67.png\")
<\/figure><\/div>\n\n\n\n8. Habilita la compresi\u00f3n Gzip<\/strong><\/h3>\n\n\n\nHabilitar la compresi\u00f3n Gzip<\/strong><\/a> minimiza el tama\u00f1o de las respuestas en los servidores HTTP para ciertos tipos de archivos, por lo que ayuda a reducir los tiempos de carga y ahorrar ancho de banda. Por lo general, se usa s\u00f3lo para respuestas textuales.<\/p>\n\n\n\n9. Minimiza y combina archivos CSS y JavaScript<\/strong><\/h3>\n\n\n\nComo planteamos previamente, se deber\u00eda intentar cargar tanto JavaScript como CSS en una sola solicitud para cada uno. <\/p>\n\n\n\n
Los navegadores tienen l\u00edmite en las solicitudes de red paralelas, por lo que si la p\u00e1gina necesita 2 solicitudes para poder cargar, ser\u00e1 m\u00e1s r\u00e1pida que si tuviera que cargar 20 recursos distintos. <\/p>\n\n\n\n
Para ello, hay que primero minificar y despu\u00e9s combinar los archivos JavaScript y CSS<\/strong><\/a> separados en paquetes \u00fanicos. <\/p>\n\n\n\n- Minificar archivos: proceso de optimizaci\u00f3n del tama\u00f1o de los archivos JavaScript y CSS, eliminando o acortando los s\u00edmbolos en el c\u00f3digo fuente. <\/li><\/ol>\n\n\n\n
- Combinar archivos: todos los archivos se copian en un solo archivo.<\/li><\/ol>\n\n\n\n
10. Carga de forma as\u00edncrona JavaScript<\/strong><\/h3>\n\n\n\nLa carga s\u00edncrona es cuando el navegador llega a un <script> (etiqueta que carga JavaScript desde una fuente remota) esperando que se cargue el archivo antes de continuar con el renderizado del sitio web. <\/p>\n\n\n\n
Es por ello, que si se establece el indicador as\u00edncrono en el <script> para que el navegador cargue el script de forma as\u00edncrona<\/strong><\/a>, este continuar\u00e1 analizando la p\u00e1gina mientras este carga.<\/p>\n\n\n\nTambi\u00e9n es recomendable reubicar las etiquetas de script a la parte inferior del sitio, cerca de la etiqueta de cierre <\/body>. De este modo, los navegadores m\u00e1s antiguos que no admitan el atributo as\u00edncrono cargar\u00e1n el script despu\u00e9s de analizar el resto de la p\u00e1gina.<\/p>\n\n\n\n
11. Almacena en cach\u00e9 el sitio<\/strong><\/h3>\n\n\n\n
La cantidad de tiempo que un usuario esperar\u00e1 antes de perder el inter\u00e9s en un sitio web, es aproximadamente entre 0,3 y 3 segundos. Pasado ese tiempo, el usuario perder\u00e1 el foco de inter\u00e9s sobre el sitio y posiblemente cierre la ventana del navegador o realice otra b\u00fasqueda.<\/p>\n\n\n\n
Por el contrario, las web m\u00e1s r\u00e1pidas ofrecen tasas de rebote m\u00e1s bajas y tasas de conversi\u00f3n m\u00e1s altas, fruto de una \u00f3ptima experiencia de usuario.<\/p>\n\n\n\n
Mejorar el posicionamiento SEO en los motores de b\u00fasqueda<\/strong><\/h3>\n\n\n\nMejorar la experiencia de usuario y los tiempos de carga, son factores muy importantes para una buena clasificaci\u00f3n org\u00e1nica en los motores de b\u00fasqueda como Google<\/a>. Cuanto m\u00e1s r\u00e1pido y de mejor modo se resuelva la intenci\u00f3n b\u00fasqueda<\/strong> del usuario, mejor.<\/p>\n\n\n\nContar con una p\u00e1gina web con un rendimiento \u00f3ptimo tiene un impacto positivo, en el tr\u00e1fico, la retenci\u00f3n de usuario y la generaci\u00f3n de oportunidades de venta.<\/p>\n\n\n\n
\u00bfQu\u00e9 factores influyen en la velocidad de carga de un sitio web?<\/strong><\/h2>\n\n\n\nExisten diversos factores y razones por las que una p\u00e1gina web no carga de forma r\u00e1pida. Los m\u00e1s comunes son:<\/p>\n\n\n\n
- El contenido CSS y JavaScript sin uso<\/li>
- Recursos que bloquean el renderizado<\/li>
- No usar la cach\u00e9 del navegador<\/li>
- Demasiados complementos<\/li>
- Uso de im\u00e1genes en formatos pesados o con un tama\u00f1o adecuado<\/li>
- Problemas de codificaci\u00f3n de las im\u00e1genes<\/li>
- Hotlinking de im\u00e1genes<\/strong><\/a> y otros recursos de servidores lentos<\/li>
- Plan de alojamiento con pocos recursos o servidor con bajo nivel:
- Altos vol\u00famenes de tr\u00e1fico pueden hacer que el servidor sufra<\/li>
- No contar con el espacio suficiente de memoria puede afectar al desempe\u00f1o del sitio web, entre otros.<\/li><\/ul><\/li>
- Visualizaci\u00f3n del sitio web en navegadores m\u00e1s antiguos<\/li>
- Conexi\u00f3n de red lenta en dispositivos m\u00f3viles<\/li>
- Etc.<\/li><\/ul>\n\n\n\n
Como puedes ver, existen una amplia gama de razones y factores que pueden influir negativamente en la velocidad de carga del sitio. Sin embargo, antes de empezar e intentar solucionar estos problemas, se debe medir y comprobar el tiempo de carga. <\/p>\n\n\n\n
\u00bfC\u00f3mo comprobar el nivel de rendimiento de una p\u00e1gina web?<\/strong><\/h2>\n\n\n\nAntes de llevar a cabo alg\u00fan ajuste, es importante determinar primero el rendimiento del sitio web y su estado actual para poder evaluar la situaci\u00f3n en la que se encuentra y determinar qu\u00e9 cambios pueden ser precisos. <\/p>\n\n\n\n
- Comprobar velocidad de carga<\/strong><\/a> <\/strong><\/li>
- Comprobar errores <\/li><\/ul>\n\n\n\n
Medir el rendimiento requiere herramientas espec\u00edficas para su monitoreo continuo, as\u00ed como de un enfoque espec\u00edfico de an\u00e1lisis (monitoreo sint\u00e9tico<\/strong><\/a> y monitoreo de usuarios reales<\/strong><\/a>).<\/p>\n\n\n\nLa medici\u00f3n a trav\u00e9s de herramientas anal\u00edticas de prueba o testeo<\/strong><\/a>, como Google PageSpeed Insights, Search Console<\/strong><\/a> o Chrome UX Report<\/strong><\/a> y el an\u00e1lisis de m\u00e9tricas espec\u00edficas, permite comparar el rendimiento del sitio web antes y despu\u00e9s de hacer cambios.<\/p>\n\n\n\nDe este modo podemos contrastar si esos ajustes han sido realmente efectivos.<\/p>\n\n\n\n
\u00bfCu\u00e1l es la velocidad de carga \u00f3ptima?<\/strong><\/h2>\n\n\n\nPor norma general, se debe de mostrar el sitio web de forma completa y totalmente cargado al usuario en menos de 3 segundos como m\u00e1ximo, para lograr una velocidad web \u00f3ptima.<\/p>\n\n\n\n
Si empleas las m\u00e9tricas de Core Web Vitals <\/a>, estos son los umbrales recomendados de velocidad que se deber\u00edan de conseguir, y as\u00ed lograr un rendimiento \u00f3ptimo de la p\u00e1gina.<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\nGoogle utiliz\u00f3 diferentes criterios para llegar a estos umbrales<\/strong>, en este articulo podr\u00e1s aprender<\/a> m\u00e1s sobre este tema. De todas maneras te recomendamos que cualquier acci\u00f3n o cambio que quieras hacer, primero la discutas con tu programador web.<\/p>\n\n\n\n13 t\u00e9cnicas y consejos para mejorar el rendimiento de tu web<\/strong><\/h2>\n\n\n\nMejorar el rendimiento de un sitio web puede ser un desaf\u00edo, especialmente con las grandes diferencias existentes entre los distintos tipos de dispositivos, navegadores y sistemas operativos empleados por los usuarios, as\u00ed como su nivel de conectividad.<\/p>\n\n\n\n
Pero como recompensa, se obtiene un impacto significativo en el negocio y en la confianza por parte de los visitantes.<\/p>\n\n\n\n
Para ello, algunas t\u00e9cnicas y consejos para mejorar y optimizar la velocidad de carga de una web<\/strong><\/a>, adem\u00e1s de su rendimiento general, son los siguientes:<\/p>\n\n\n\n1. Reduce la cantidad de solicitudes HTTP<\/strong><\/h3>\n\n\n\nLos navegadores web emplean las solicitudes HTTP (protocolo para comunicarse con un servidor web remoto) para obtener los diferentes elementos de un sitio como: textos, im\u00e1genes, hojas de estilo y archivos JavaScript del servidor donde est\u00e1 alojada la web. <\/p>\n\n\n\n
Cada solicitud genera una cierta sobrecarga (especialmente si se utiliza HTTP\/1.1) al establecer la conexi\u00f3n entre el servidor del sitio web y el navegador (aplican l\u00edmites en la cantidad de solicitudes; si existen muchas solicitudes en cola, algunas pueden bloquearse).<\/p>\n\n\n\n
Para evitar una sobrecarga innecesaria, sigue estos pasos para reducir la cantidad de solicitudes HTTP<\/strong><\/a>:<\/p>\n\n\n\n- Elimina las solicitudes innecesarias y el contenido sin uso: ser\u00e1 necesario determinar cu\u00e1l es el tiempo m\u00ednimo de renderizado requerido del sitio, para cargar s\u00f3lo los recursos externos necesarios. Para ello debes eliminar:
- Im\u00e1genes innecesarias<\/li>
- Archivos JavaScript<\/li>
- Hojas de estilo<\/li>
- Fuentes<\/li>
- Si emplea un CMS como WordPress, se deben eliminar los plugins y complementos innecesarios (suelen cargar archivos adicionales en cada p\u00e1gina).<\/li><\/ol><\/li>
- Optimiza las solicitudes y contenido en uso:
- Comprime archivos CSS y JavaScript. Generalmente, para optimizar un sitio web se suele cargar todo el CSS y Javascript necesarios en una sola solicitud para cada uno.<\/li>
- Optimiza el peso de otros recursos que puedan estar carg\u00e1ndose lentamente. <\/li><\/ol><\/li><\/ol>\n\n\n\n
2. Cambia a HTTP\/2<\/strong><\/h3>\n\n\n\nComo mencionamos previamente, la sobrecarga de enviar muchas solicitudes a trav\u00e9s de HTTP\/1.1 puede generar problemas de velocidad de carga. Por ello, una forma de solucionar esto, es reducir el n\u00famero de solicitudes. <\/p>\n\n\n\n
Menos recursos requeridos para renderizar el sitio web supondr\u00e1n tiempos de carga m\u00e1s r\u00e1pidos, pero existe otra manera de evitar el inconveniente de la sobrecarga. <\/p>\n\n\n\n
Puedes cambiar la web de HTTP\/1.1. a HTTP\/2<\/strong><\/a> (c\u00f3mo hacer esto, depender\u00e1 del proveedor de alojamiento que tengas contratado). <\/p>\n\n\n\nSu gran ventaja, es la capacidad de enviar varios archivos al mismo tiempo, a trav\u00e9s de una misma conexi\u00f3n, evitando o mitigando en cierto modo la sobrecarga por m\u00faltiples solicitudes.<\/p>\n\n\n\n
3. Optimiza el tama\u00f1o de las im\u00e1genes<\/strong><\/h3>\n\n\n\nSi el sitio web muestra muchos gr\u00e1ficos e im\u00e1genes con diferentes resoluciones (2x o 3x) y no est\u00e1n comprimidas, empeorar\u00e1 el rendimiento del sitio, ya que pueden no mostrarse en pantallas de alta densidad (HiDP)<\/strong><\/a>, como las pantallas retina. <\/p>\n\n\n\nEn cualquier caso, si los usuarios que se esperan conseguir en la web no emplean este tipo de pantallas, se estar\u00e1 desperdiciando ancho de banda y aumentando el tiempo de carga sin necesidad, especialmente en aquellos casos con conexiones de datos m\u00f3viles lentas.<\/p>\n\n\n\n
Por ello, se deben especificar varios tama\u00f1os de imagen<\/strong><\/a> para permitir que el navegador seleccione la imagen adecuada seg\u00fan la resoluci\u00f3n de la pantalla en cada caso (es aconsejable subirlas de inicio con un peso \u00f3ptimo siempre que sea posible). <\/p>\n\n\n\nEste proceso se puede hacer de forma manual o bien de forma autom\u00e1tica con herramientas<\/strong><\/a>.<\/p>\n\n\n\nTambi\u00e9n es importante el tipo de archivo que se emplea en cada caso:<\/p>\n\n\n\n
- JPEG: para im\u00e1genes con muchos colores como fotograf\u00edas<\/li>
- PNG: para gr\u00e1ficos m\u00e1s simples<\/li><\/ul>\n\n\n\n
<\/figure><\/div>\n\n\n\n4. Utilizar CDN o red de entrega de contenido<\/strong><\/h3>\n\n\n\nServir archivos est\u00e1ticos es una tarea complicada (si no dispones de una red para tal fin), pero existen servicios dise\u00f1ados especialmente para esto, denominados Content Delivery Networks o CDN<\/strong> que se pueden contratar de forma sencilla como Cloudflare<\/strong><\/a>.<\/strong><\/p>\n\n\n\nUna CDN es una red superpuesta de ordenadores los cuales contienen copias de datos situadas en varios puntos de una red (emplean servidores distribuidos geogr\u00e1ficamente), con el fin de maximizar el ancho de banda para el acceso a los datos de clientes por la red.<\/p>\n\n\n\n
Dicho de otro modo, las CDN optimizar\u00e1n la entrega de archivos est\u00e1ticos como CSS, im\u00e1genes, fuentes y JavaScript a los visitantes del sitio, desde el servidor m\u00e1s cercano de la red. <\/p>\n\n\n\n
Es por este motivo, que el tiempo de carga es igual, independientemente de donde se conecte el usuario. Para ello, es aconsejable monitorear el rendimiento de los archivos alojados en CDN para poder medir realmente si tiene sentido externalizar esta parte de la infraestructura. <\/p>\n\n\n\n
5. Programa tu sitio web primero para dispositivos m\u00f3viles<\/strong><\/h3>\n\n\n\nEs importante verificar el tipo de dispositivo que emplean los usuarios para visitar el sitio web con una herramienta de monitoreo real del usuario ( RUM)<\/strong><\/a>, o anal\u00edtica (como Google Analytics para el tr\u00e1fico general y Search Console para el tr\u00e1fico org\u00e1nico).<\/p>\n\n\n\nGeneralmente, los programadores web tienden a dise\u00f1ar y hacer pruebas de los sitios web en dispositivos de escritorio y luego optimizan el mismo para m\u00f3viles. Esto puede conllevar algunos problemas si no se plante\u00f3 adecuadamente de inicio.<\/p>\n\n\n\n
Por ello, es recomendable desarrollar la web primero para dispositivos m\u00f3viles, haciendo las pruebas oportunas en estos (Mobile-First Indexing<\/strong><\/a>). De este modo, la experiencia estar\u00eda por defecto optimizada para dispositivos m\u00f3viles.<\/p>\n\n\n\nAdem\u00e1s, ajustar el sitio web posteriormente para dispositivos de escritorio es un proceso generalmente menos tedioso. Se puede ir mejorando progresivamente la experiencia en los distintos dispositivos, ajustando los espacios en pantalla, acelerando la red y la CPU. <\/p>\n\n\n\n
6. Minimiza el TTFB<\/strong><\/h3>\n\n\n\nEl TTFB (Time To First Byte) o tiempo hasta el primer byte, es el tiempo que tarda el navegador en recibir el primer byte de datos del servidor web remoto. <\/p>\n\n\n\n
Se trata de un aspecto a mejorar en el servidor, puesto que juega un papel importante en el rendimiento general de una web.<\/p>\n\n\n\n
El principal factor para minimizar el TTFB<\/strong><\/a>, es el tiempo de procesamiento del servidor. Para optimizarlo, puedes seguir algunos de los siguientes consejos recomendados por Google:<\/p>\n\n\n\n- Actualiza el hardware del servidor para contar con m\u00e1s memoria o CPU<\/li>
- Optimiza la forma en que el servidor consulta las bases de datos o migra a otro sistema de base de datos m\u00e1s r\u00e1pido.<\/li>
- Optimiza la l\u00f3gica de la aplicaci\u00f3n del servidor para preparar las p\u00e1ginas m\u00e1s r\u00e1pidamente. Si empleas un framework del lado del servidor<\/strong><\/a>, generalmente ofrecer\u00e1 recomendaciones en cada caso sobre c\u00f3mo hacerlo.<\/li><\/ul>\n\n\n\n
Los rangos para evaluar si el TTFB del sitio es \u00f3ptimo son:<\/p>\n\n\n\n
- Menor de 200 ms = excelente. <\/li>
- Entre 200 ms y 500 ms = normal <\/li>
- Superior a 500 o 600 ms = poco \u00f3ptimo (ser\u00e1 necesario investigar y minimizar) <\/li><\/ul>\n\n\n\n
7. Elige el plan de alojamiento web adecuado<\/strong><\/h3>\n\n\n\nGuarda relaci\u00f3n con la reducci\u00f3n del TTFB. Esto se debe, a que si se emplea un plan de hosting bajo de recursos, es posible que el rendimiento general se resienta. <\/p>\n\n\n\n
Por ello, es importante determinar el rendimiento del hosting y las necesidades del sitio, as\u00ed analizar los recursos a contratar. Si el plan de hosting estuviese limitado por recursos, existen las siguientes alternativas:<\/p>\n\n\n\n
- Actualizar o ampliar el plan de alojamiento. <\/li>
- Utilizar un servicio administrado, estable y con alto rendimiento (muy pr\u00e1ctico en desarrollos para WordPress).<\/li>
- Cambiar de tipo de hospedaje: Existen diferentes opciones para hospedar un sitio web<\/strong><\/a> (sin hosting, hosting compartido, hosting VPS o hosting dedicado). <\/li><\/ul>\n\n\n\n
Aqu\u00ed puedes encontrar m\u00e1s informaci\u00f3n sobre c\u00f3mo elegir el hosting para tu sitio web<\/strong><\/a>.<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n8. Habilita la compresi\u00f3n Gzip<\/strong><\/h3>\n\n\n\nHabilitar la compresi\u00f3n Gzip<\/strong><\/a> minimiza el tama\u00f1o de las respuestas en los servidores HTTP para ciertos tipos de archivos, por lo que ayuda a reducir los tiempos de carga y ahorrar ancho de banda. Por lo general, se usa s\u00f3lo para respuestas textuales.<\/p>\n\n\n\n9. Minimiza y combina archivos CSS y JavaScript<\/strong><\/h3>\n\n\n\nComo planteamos previamente, se deber\u00eda intentar cargar tanto JavaScript como CSS en una sola solicitud para cada uno. <\/p>\n\n\n\n
Los navegadores tienen l\u00edmite en las solicitudes de red paralelas, por lo que si la p\u00e1gina necesita 2 solicitudes para poder cargar, ser\u00e1 m\u00e1s r\u00e1pida que si tuviera que cargar 20 recursos distintos. <\/p>\n\n\n\n
Para ello, hay que primero minificar y despu\u00e9s combinar los archivos JavaScript y CSS<\/strong><\/a> separados en paquetes \u00fanicos. <\/p>\n\n\n\n- Minificar archivos: proceso de optimizaci\u00f3n del tama\u00f1o de los archivos JavaScript y CSS, eliminando o acortando los s\u00edmbolos en el c\u00f3digo fuente. <\/li><\/ol>\n\n\n\n
- Combinar archivos: todos los archivos se copian en un solo archivo.<\/li><\/ol>\n\n\n\n
10. Carga de forma as\u00edncrona JavaScript<\/strong><\/h3>\n\n\n\nLa carga s\u00edncrona es cuando el navegador llega a un <script> (etiqueta que carga JavaScript desde una fuente remota) esperando que se cargue el archivo antes de continuar con el renderizado del sitio web. <\/p>\n\n\n\n
Es por ello, que si se establece el indicador as\u00edncrono en el <script> para que el navegador cargue el script de forma as\u00edncrona<\/strong><\/a>, este continuar\u00e1 analizando la p\u00e1gina mientras este carga.<\/p>\n\n\n\nTambi\u00e9n es recomendable reubicar las etiquetas de script a la parte inferior del sitio, cerca de la etiqueta de cierre <\/body>. De este modo, los navegadores m\u00e1s antiguos que no admitan el atributo as\u00edncrono cargar\u00e1n el script despu\u00e9s de analizar el resto de la p\u00e1gina.<\/p>\n\n\n\n
11. Almacena en cach\u00e9 el sitio<\/strong><\/h3>\n\n\n\n
Contar con una p\u00e1gina web con un rendimiento \u00f3ptimo tiene un impacto positivo, en el tr\u00e1fico, la retenci\u00f3n de usuario y la generaci\u00f3n de oportunidades de venta.<\/p>\n\n\n\n
\u00bfQu\u00e9 factores influyen en la velocidad de carga de un sitio web?<\/strong><\/h2>\n\n\n\nExisten diversos factores y razones por las que una p\u00e1gina web no carga de forma r\u00e1pida. Los m\u00e1s comunes son:<\/p>\n\n\n\n
- El contenido CSS y JavaScript sin uso<\/li>
- Recursos que bloquean el renderizado<\/li>
- No usar la cach\u00e9 del navegador<\/li>
- Demasiados complementos<\/li>
- Uso de im\u00e1genes en formatos pesados o con un tama\u00f1o adecuado<\/li>
- Problemas de codificaci\u00f3n de las im\u00e1genes<\/li>
- Hotlinking de im\u00e1genes<\/strong><\/a> y otros recursos de servidores lentos<\/li>
- Plan de alojamiento con pocos recursos o servidor con bajo nivel:
- Altos vol\u00famenes de tr\u00e1fico pueden hacer que el servidor sufra<\/li>
- No contar con el espacio suficiente de memoria puede afectar al desempe\u00f1o del sitio web, entre otros.<\/li><\/ul><\/li>
- Visualizaci\u00f3n del sitio web en navegadores m\u00e1s antiguos<\/li>
- Conexi\u00f3n de red lenta en dispositivos m\u00f3viles<\/li>
- Etc.<\/li><\/ul>\n\n\n\n
Como puedes ver, existen una amplia gama de razones y factores que pueden influir negativamente en la velocidad de carga del sitio. Sin embargo, antes de empezar e intentar solucionar estos problemas, se debe medir y comprobar el tiempo de carga. <\/p>\n\n\n\n
\u00bfC\u00f3mo comprobar el nivel de rendimiento de una p\u00e1gina web?<\/strong><\/h2>\n\n\n\nAntes de llevar a cabo alg\u00fan ajuste, es importante determinar primero el rendimiento del sitio web y su estado actual para poder evaluar la situaci\u00f3n en la que se encuentra y determinar qu\u00e9 cambios pueden ser precisos. <\/p>\n\n\n\n
- Comprobar velocidad de carga<\/strong><\/a> <\/strong><\/li>
- Comprobar errores <\/li><\/ul>\n\n\n\n
Medir el rendimiento requiere herramientas espec\u00edficas para su monitoreo continuo, as\u00ed como de un enfoque espec\u00edfico de an\u00e1lisis (monitoreo sint\u00e9tico<\/strong><\/a> y monitoreo de usuarios reales<\/strong><\/a>).<\/p>\n\n\n\nLa medici\u00f3n a trav\u00e9s de herramientas anal\u00edticas de prueba o testeo<\/strong><\/a>, como Google PageSpeed Insights, Search Console<\/strong><\/a> o Chrome UX Report<\/strong><\/a> y el an\u00e1lisis de m\u00e9tricas espec\u00edficas, permite comparar el rendimiento del sitio web antes y despu\u00e9s de hacer cambios.<\/p>\n\n\n\nDe este modo podemos contrastar si esos ajustes han sido realmente efectivos.<\/p>\n\n\n\n
\u00bfCu\u00e1l es la velocidad de carga \u00f3ptima?<\/strong><\/h2>\n\n\n\nPor norma general, se debe de mostrar el sitio web de forma completa y totalmente cargado al usuario en menos de 3 segundos como m\u00e1ximo, para lograr una velocidad web \u00f3ptima.<\/p>\n\n\n\n
Si empleas las m\u00e9tricas de Core Web Vitals <\/a>, estos son los umbrales recomendados de velocidad que se deber\u00edan de conseguir, y as\u00ed lograr un rendimiento \u00f3ptimo de la p\u00e1gina.<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\nGoogle utiliz\u00f3 diferentes criterios para llegar a estos umbrales<\/strong>, en este articulo podr\u00e1s aprender<\/a> m\u00e1s sobre este tema. De todas maneras te recomendamos que cualquier acci\u00f3n o cambio que quieras hacer, primero la discutas con tu programador web.<\/p>\n\n\n\n13 t\u00e9cnicas y consejos para mejorar el rendimiento de tu web<\/strong><\/h2>\n\n\n\nMejorar el rendimiento de un sitio web puede ser un desaf\u00edo, especialmente con las grandes diferencias existentes entre los distintos tipos de dispositivos, navegadores y sistemas operativos empleados por los usuarios, as\u00ed como su nivel de conectividad.<\/p>\n\n\n\n
Pero como recompensa, se obtiene un impacto significativo en el negocio y en la confianza por parte de los visitantes.<\/p>\n\n\n\n
Para ello, algunas t\u00e9cnicas y consejos para mejorar y optimizar la velocidad de carga de una web<\/strong><\/a>, adem\u00e1s de su rendimiento general, son los siguientes:<\/p>\n\n\n\n1. Reduce la cantidad de solicitudes HTTP<\/strong><\/h3>\n\n\n\nLos navegadores web emplean las solicitudes HTTP (protocolo para comunicarse con un servidor web remoto) para obtener los diferentes elementos de un sitio como: textos, im\u00e1genes, hojas de estilo y archivos JavaScript del servidor donde est\u00e1 alojada la web. <\/p>\n\n\n\n
Cada solicitud genera una cierta sobrecarga (especialmente si se utiliza HTTP\/1.1) al establecer la conexi\u00f3n entre el servidor del sitio web y el navegador (aplican l\u00edmites en la cantidad de solicitudes; si existen muchas solicitudes en cola, algunas pueden bloquearse).<\/p>\n\n\n\n
Para evitar una sobrecarga innecesaria, sigue estos pasos para reducir la cantidad de solicitudes HTTP<\/strong><\/a>:<\/p>\n\n\n\n- Elimina las solicitudes innecesarias y el contenido sin uso: ser\u00e1 necesario determinar cu\u00e1l es el tiempo m\u00ednimo de renderizado requerido del sitio, para cargar s\u00f3lo los recursos externos necesarios. Para ello debes eliminar:
- Im\u00e1genes innecesarias<\/li>
- Archivos JavaScript<\/li>
- Hojas de estilo<\/li>
- Fuentes<\/li>
- Si emplea un CMS como WordPress, se deben eliminar los plugins y complementos innecesarios (suelen cargar archivos adicionales en cada p\u00e1gina).<\/li><\/ol><\/li>
- Optimiza las solicitudes y contenido en uso:
- Comprime archivos CSS y JavaScript. Generalmente, para optimizar un sitio web se suele cargar todo el CSS y Javascript necesarios en una sola solicitud para cada uno.<\/li>
- Optimiza el peso de otros recursos que puedan estar carg\u00e1ndose lentamente. <\/li><\/ol><\/li><\/ol>\n\n\n\n
2. Cambia a HTTP\/2<\/strong><\/h3>\n\n\n\nComo mencionamos previamente, la sobrecarga de enviar muchas solicitudes a trav\u00e9s de HTTP\/1.1 puede generar problemas de velocidad de carga. Por ello, una forma de solucionar esto, es reducir el n\u00famero de solicitudes. <\/p>\n\n\n\n
Menos recursos requeridos para renderizar el sitio web supondr\u00e1n tiempos de carga m\u00e1s r\u00e1pidos, pero existe otra manera de evitar el inconveniente de la sobrecarga. <\/p>\n\n\n\n
Puedes cambiar la web de HTTP\/1.1. a HTTP\/2<\/strong><\/a> (c\u00f3mo hacer esto, depender\u00e1 del proveedor de alojamiento que tengas contratado). <\/p>\n\n\n\nSu gran ventaja, es la capacidad de enviar varios archivos al mismo tiempo, a trav\u00e9s de una misma conexi\u00f3n, evitando o mitigando en cierto modo la sobrecarga por m\u00faltiples solicitudes.<\/p>\n\n\n\n
3. Optimiza el tama\u00f1o de las im\u00e1genes<\/strong><\/h3>\n\n\n\nSi el sitio web muestra muchos gr\u00e1ficos e im\u00e1genes con diferentes resoluciones (2x o 3x) y no est\u00e1n comprimidas, empeorar\u00e1 el rendimiento del sitio, ya que pueden no mostrarse en pantallas de alta densidad (HiDP)<\/strong><\/a>, como las pantallas retina. <\/p>\n\n\n\nEn cualquier caso, si los usuarios que se esperan conseguir en la web no emplean este tipo de pantallas, se estar\u00e1 desperdiciando ancho de banda y aumentando el tiempo de carga sin necesidad, especialmente en aquellos casos con conexiones de datos m\u00f3viles lentas.<\/p>\n\n\n\n
Por ello, se deben especificar varios tama\u00f1os de imagen<\/strong><\/a> para permitir que el navegador seleccione la imagen adecuada seg\u00fan la resoluci\u00f3n de la pantalla en cada caso (es aconsejable subirlas de inicio con un peso \u00f3ptimo siempre que sea posible). <\/p>\n\n\n\nEste proceso se puede hacer de forma manual o bien de forma autom\u00e1tica con herramientas<\/strong><\/a>.<\/p>\n\n\n\nTambi\u00e9n es importante el tipo de archivo que se emplea en cada caso:<\/p>\n\n\n\n
- JPEG: para im\u00e1genes con muchos colores como fotograf\u00edas<\/li>
- PNG: para gr\u00e1ficos m\u00e1s simples<\/li><\/ul>\n\n\n\n
<\/figure><\/div>\n\n\n\n4. Utilizar CDN o red de entrega de contenido<\/strong><\/h3>\n\n\n\nServir archivos est\u00e1ticos es una tarea complicada (si no dispones de una red para tal fin), pero existen servicios dise\u00f1ados especialmente para esto, denominados Content Delivery Networks o CDN<\/strong> que se pueden contratar de forma sencilla como Cloudflare<\/strong><\/a>.<\/strong><\/p>\n\n\n\nUna CDN es una red superpuesta de ordenadores los cuales contienen copias de datos situadas en varios puntos de una red (emplean servidores distribuidos geogr\u00e1ficamente), con el fin de maximizar el ancho de banda para el acceso a los datos de clientes por la red.<\/p>\n\n\n\n
Dicho de otro modo, las CDN optimizar\u00e1n la entrega de archivos est\u00e1ticos como CSS, im\u00e1genes, fuentes y JavaScript a los visitantes del sitio, desde el servidor m\u00e1s cercano de la red. <\/p>\n\n\n\n
Es por este motivo, que el tiempo de carga es igual, independientemente de donde se conecte el usuario. Para ello, es aconsejable monitorear el rendimiento de los archivos alojados en CDN para poder medir realmente si tiene sentido externalizar esta parte de la infraestructura. <\/p>\n\n\n\n
5. Programa tu sitio web primero para dispositivos m\u00f3viles<\/strong><\/h3>\n\n\n\nEs importante verificar el tipo de dispositivo que emplean los usuarios para visitar el sitio web con una herramienta de monitoreo real del usuario ( RUM)<\/strong><\/a>, o anal\u00edtica (como Google Analytics para el tr\u00e1fico general y Search Console para el tr\u00e1fico org\u00e1nico).<\/p>\n\n\n\nGeneralmente, los programadores web tienden a dise\u00f1ar y hacer pruebas de los sitios web en dispositivos de escritorio y luego optimizan el mismo para m\u00f3viles. Esto puede conllevar algunos problemas si no se plante\u00f3 adecuadamente de inicio.<\/p>\n\n\n\n
Por ello, es recomendable desarrollar la web primero para dispositivos m\u00f3viles, haciendo las pruebas oportunas en estos (Mobile-First Indexing<\/strong><\/a>). De este modo, la experiencia estar\u00eda por defecto optimizada para dispositivos m\u00f3viles.<\/p>\n\n\n\nAdem\u00e1s, ajustar el sitio web posteriormente para dispositivos de escritorio es un proceso generalmente menos tedioso. Se puede ir mejorando progresivamente la experiencia en los distintos dispositivos, ajustando los espacios en pantalla, acelerando la red y la CPU. <\/p>\n\n\n\n
6. Minimiza el TTFB<\/strong><\/h3>\n\n\n\nEl TTFB (Time To First Byte) o tiempo hasta el primer byte, es el tiempo que tarda el navegador en recibir el primer byte de datos del servidor web remoto. <\/p>\n\n\n\n
Se trata de un aspecto a mejorar en el servidor, puesto que juega un papel importante en el rendimiento general de una web.<\/p>\n\n\n\n
El principal factor para minimizar el TTFB<\/strong><\/a>, es el tiempo de procesamiento del servidor. Para optimizarlo, puedes seguir algunos de los siguientes consejos recomendados por Google:<\/p>\n\n\n\n- Actualiza el hardware del servidor para contar con m\u00e1s memoria o CPU<\/li>
- Optimiza la forma en que el servidor consulta las bases de datos o migra a otro sistema de base de datos m\u00e1s r\u00e1pido.<\/li>
- Optimiza la l\u00f3gica de la aplicaci\u00f3n del servidor para preparar las p\u00e1ginas m\u00e1s r\u00e1pidamente. Si empleas un framework del lado del servidor<\/strong><\/a>, generalmente ofrecer\u00e1 recomendaciones en cada caso sobre c\u00f3mo hacerlo.<\/li><\/ul>\n\n\n\n
Los rangos para evaluar si el TTFB del sitio es \u00f3ptimo son:<\/p>\n\n\n\n
- Menor de 200 ms = excelente. <\/li>
- Entre 200 ms y 500 ms = normal <\/li>
- Superior a 500 o 600 ms = poco \u00f3ptimo (ser\u00e1 necesario investigar y minimizar) <\/li><\/ul>\n\n\n\n
7. Elige el plan de alojamiento web adecuado<\/strong><\/h3>\n\n\n\nGuarda relaci\u00f3n con la reducci\u00f3n del TTFB. Esto se debe, a que si se emplea un plan de hosting bajo de recursos, es posible que el rendimiento general se resienta. <\/p>\n\n\n\n
Por ello, es importante determinar el rendimiento del hosting y las necesidades del sitio, as\u00ed analizar los recursos a contratar. Si el plan de hosting estuviese limitado por recursos, existen las siguientes alternativas:<\/p>\n\n\n\n
- Actualizar o ampliar el plan de alojamiento. <\/li>
- Utilizar un servicio administrado, estable y con alto rendimiento (muy pr\u00e1ctico en desarrollos para WordPress).<\/li>
- Cambiar de tipo de hospedaje: Existen diferentes opciones para hospedar un sitio web<\/strong><\/a> (sin hosting, hosting compartido, hosting VPS o hosting dedicado). <\/li><\/ul>\n\n\n\n
Aqu\u00ed puedes encontrar m\u00e1s informaci\u00f3n sobre c\u00f3mo elegir el hosting para tu sitio web<\/strong><\/a>.<\/p>\n\n\n\n<\/figure><\/div>\n\n\n\n8. Habilita la compresi\u00f3n Gzip<\/strong><\/h3>\n\n\n\nHabilitar la compresi\u00f3n Gzip<\/strong><\/a> minimiza el tama\u00f1o de las respuestas en los servidores HTTP para ciertos tipos de archivos, por lo que ayuda a reducir los tiempos de carga y ahorrar ancho de banda. Por lo general, se usa s\u00f3lo para respuestas textuales.<\/p>\n\n\n\n9. Minimiza y combina archivos CSS y JavaScript<\/strong><\/h3>\n\n\n\nComo planteamos previamente, se deber\u00eda intentar cargar tanto JavaScript como CSS en una sola solicitud para cada uno. <\/p>\n\n\n\n
Los navegadores tienen l\u00edmite en las solicitudes de red paralelas, por lo que si la p\u00e1gina necesita 2 solicitudes para poder cargar, ser\u00e1 m\u00e1s r\u00e1pida que si tuviera que cargar 20 recursos distintos. <\/p>\n\n\n\n
Para ello, hay que primero minificar y despu\u00e9s combinar los archivos JavaScript y CSS<\/strong><\/a> separados en paquetes \u00fanicos. <\/p>\n\n\n\n- Minificar archivos: proceso de optimizaci\u00f3n del tama\u00f1o de los archivos JavaScript y CSS, eliminando o acortando los s\u00edmbolos en el c\u00f3digo fuente. <\/li><\/ol>\n\n\n\n
- Combinar archivos: todos los archivos se copian en un solo archivo.<\/li><\/ol>\n\n\n\n
10. Carga de forma as\u00edncrona JavaScript<\/strong><\/h3>\n\n\n\nLa carga s\u00edncrona es cuando el navegador llega a un <script> (etiqueta que carga JavaScript desde una fuente remota) esperando que se cargue el archivo antes de continuar con el renderizado del sitio web. <\/p>\n\n\n\n
Es por ello, que si se establece el indicador as\u00edncrono en el <script> para que el navegador cargue el script de forma as\u00edncrona<\/strong><\/a>, este continuar\u00e1 analizando la p\u00e1gina mientras este carga.<\/p>\n\n\n\nTambi\u00e9n es recomendable reubicar las etiquetas de script a la parte inferior del sitio, cerca de la etiqueta de cierre <\/body>. De este modo, los navegadores m\u00e1s antiguos que no admitan el atributo as\u00edncrono cargar\u00e1n el script despu\u00e9s de analizar el resto de la p\u00e1gina.<\/p>\n\n\n\n
11. Almacena en cach\u00e9 el sitio<\/strong><\/h3>\n\n\n\n
- Altos vol\u00famenes de tr\u00e1fico pueden hacer que el servidor sufra<\/li>
- No contar con el espacio suficiente de memoria puede afectar al desempe\u00f1o del sitio web, entre otros.<\/li><\/ul><\/li>
- Visualizaci\u00f3n del sitio web en navegadores m\u00e1s antiguos<\/li>
- Conexi\u00f3n de red lenta en dispositivos m\u00f3viles<\/li>
- Etc.<\/li><\/ul>\n\n\n\n
Como puedes ver, existen una amplia gama de razones y factores que pueden influir negativamente en la velocidad de carga del sitio. Sin embargo, antes de empezar e intentar solucionar estos problemas, se debe medir y comprobar el tiempo de carga. <\/p>\n\n\n\n
\u00bfC\u00f3mo comprobar el nivel de rendimiento de una p\u00e1gina web?<\/strong><\/h2>\n\n\n\n
Antes de llevar a cabo alg\u00fan ajuste, es importante determinar primero el rendimiento del sitio web y su estado actual para poder evaluar la situaci\u00f3n en la que se encuentra y determinar qu\u00e9 cambios pueden ser precisos. <\/p>\n\n\n\n
- Comprobar velocidad de carga<\/strong><\/a> <\/strong><\/li>
- Comprobar errores <\/li><\/ul>\n\n\n\n
Medir el rendimiento requiere herramientas espec\u00edficas para su monitoreo continuo, as\u00ed como de un enfoque espec\u00edfico de an\u00e1lisis (monitoreo sint\u00e9tico<\/strong><\/a> y monitoreo de usuarios reales<\/strong><\/a>).<\/p>\n\n\n\n
La medici\u00f3n a trav\u00e9s de herramientas anal\u00edticas de prueba o testeo<\/strong><\/a>, como Google PageSpeed Insights, Search Console<\/strong><\/a> o Chrome UX Report<\/strong><\/a> y el an\u00e1lisis de m\u00e9tricas espec\u00edficas, permite comparar el rendimiento del sitio web antes y despu\u00e9s de hacer cambios.<\/p>\n\n\n\n
De este modo podemos contrastar si esos ajustes han sido realmente efectivos.<\/p>\n\n\n\n
\u00bfCu\u00e1l es la velocidad de carga \u00f3ptima?<\/strong><\/h2>\n\n\n\n
Por norma general, se debe de mostrar el sitio web de forma completa y totalmente cargado al usuario en menos de 3 segundos como m\u00e1ximo, para lograr una velocidad web \u00f3ptima.<\/p>\n\n\n\n
Si empleas las m\u00e9tricas de Core Web Vitals <\/a>, estos son los umbrales recomendados de velocidad que se deber\u00edan de conseguir, y as\u00ed lograr un rendimiento \u00f3ptimo de la p\u00e1gina.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\nGoogle utiliz\u00f3 diferentes criterios para llegar a estos umbrales<\/strong>, en este articulo podr\u00e1s aprender<\/a> m\u00e1s sobre este tema. De todas maneras te recomendamos que cualquier acci\u00f3n o cambio que quieras hacer, primero la discutas con tu programador web.<\/p>\n\n\n\n
13 t\u00e9cnicas y consejos para mejorar el rendimiento de tu web<\/strong><\/h2>\n\n\n\n
Mejorar el rendimiento de un sitio web puede ser un desaf\u00edo, especialmente con las grandes diferencias existentes entre los distintos tipos de dispositivos, navegadores y sistemas operativos empleados por los usuarios, as\u00ed como su nivel de conectividad.<\/p>\n\n\n\n
Pero como recompensa, se obtiene un impacto significativo en el negocio y en la confianza por parte de los visitantes.<\/p>\n\n\n\n
Para ello, algunas t\u00e9cnicas y consejos para mejorar y optimizar la velocidad de carga de una web<\/strong><\/a>, adem\u00e1s de su rendimiento general, son los siguientes:<\/p>\n\n\n\n
1. Reduce la cantidad de solicitudes HTTP<\/strong><\/h3>\n\n\n\n
Los navegadores web emplean las solicitudes HTTP (protocolo para comunicarse con un servidor web remoto) para obtener los diferentes elementos de un sitio como: textos, im\u00e1genes, hojas de estilo y archivos JavaScript del servidor donde est\u00e1 alojada la web. <\/p>\n\n\n\n
Cada solicitud genera una cierta sobrecarga (especialmente si se utiliza HTTP\/1.1) al establecer la conexi\u00f3n entre el servidor del sitio web y el navegador (aplican l\u00edmites en la cantidad de solicitudes; si existen muchas solicitudes en cola, algunas pueden bloquearse).<\/p>\n\n\n\n
Para evitar una sobrecarga innecesaria, sigue estos pasos para reducir la cantidad de solicitudes HTTP<\/strong><\/a>:<\/p>\n\n\n\n
- Elimina las solicitudes innecesarias y el contenido sin uso: ser\u00e1 necesario determinar cu\u00e1l es el tiempo m\u00ednimo de renderizado requerido del sitio, para cargar s\u00f3lo los recursos externos necesarios. Para ello debes eliminar:
- Im\u00e1genes innecesarias<\/li>
- Archivos JavaScript<\/li>
- Hojas de estilo<\/li>
- Fuentes<\/li>
- Si emplea un CMS como WordPress, se deben eliminar los plugins y complementos innecesarios (suelen cargar archivos adicionales en cada p\u00e1gina).<\/li><\/ol><\/li>
- Optimiza las solicitudes y contenido en uso:
- Comprime archivos CSS y JavaScript. Generalmente, para optimizar un sitio web se suele cargar todo el CSS y Javascript necesarios en una sola solicitud para cada uno.<\/li>
- Optimiza el peso de otros recursos que puedan estar carg\u00e1ndose lentamente. <\/li><\/ol><\/li><\/ol>\n\n\n\n
2. Cambia a HTTP\/2<\/strong><\/h3>\n\n\n\n
Como mencionamos previamente, la sobrecarga de enviar muchas solicitudes a trav\u00e9s de HTTP\/1.1 puede generar problemas de velocidad de carga. Por ello, una forma de solucionar esto, es reducir el n\u00famero de solicitudes. <\/p>\n\n\n\n
Menos recursos requeridos para renderizar el sitio web supondr\u00e1n tiempos de carga m\u00e1s r\u00e1pidos, pero existe otra manera de evitar el inconveniente de la sobrecarga. <\/p>\n\n\n\n
Puedes cambiar la web de HTTP\/1.1. a HTTP\/2<\/strong><\/a> (c\u00f3mo hacer esto, depender\u00e1 del proveedor de alojamiento que tengas contratado). <\/p>\n\n\n\n
Su gran ventaja, es la capacidad de enviar varios archivos al mismo tiempo, a trav\u00e9s de una misma conexi\u00f3n, evitando o mitigando en cierto modo la sobrecarga por m\u00faltiples solicitudes.<\/p>\n\n\n\n
3. Optimiza el tama\u00f1o de las im\u00e1genes<\/strong><\/h3>\n\n\n\n
Si el sitio web muestra muchos gr\u00e1ficos e im\u00e1genes con diferentes resoluciones (2x o 3x) y no est\u00e1n comprimidas, empeorar\u00e1 el rendimiento del sitio, ya que pueden no mostrarse en pantallas de alta densidad (HiDP)<\/strong><\/a>, como las pantallas retina. <\/p>\n\n\n\n
En cualquier caso, si los usuarios que se esperan conseguir en la web no emplean este tipo de pantallas, se estar\u00e1 desperdiciando ancho de banda y aumentando el tiempo de carga sin necesidad, especialmente en aquellos casos con conexiones de datos m\u00f3viles lentas.<\/p>\n\n\n\n
Por ello, se deben especificar varios tama\u00f1os de imagen<\/strong><\/a> para permitir que el navegador seleccione la imagen adecuada seg\u00fan la resoluci\u00f3n de la pantalla en cada caso (es aconsejable subirlas de inicio con un peso \u00f3ptimo siempre que sea posible). <\/p>\n\n\n\n
Este proceso se puede hacer de forma manual o bien de forma autom\u00e1tica con herramientas<\/strong><\/a>.<\/p>\n\n\n\n
Tambi\u00e9n es importante el tipo de archivo que se emplea en cada caso:<\/p>\n\n\n\n
- JPEG: para im\u00e1genes con muchos colores como fotograf\u00edas<\/li>
- PNG: para gr\u00e1ficos m\u00e1s simples<\/li><\/ul>\n\n\n\n<\/figure><\/div>\n\n\n\n
4. Utilizar CDN o red de entrega de contenido<\/strong><\/h3>\n\n\n\n
Servir archivos est\u00e1ticos es una tarea complicada (si no dispones de una red para tal fin), pero existen servicios dise\u00f1ados especialmente para esto, denominados Content Delivery Networks o CDN<\/strong> que se pueden contratar de forma sencilla como Cloudflare<\/strong><\/a>.<\/strong><\/p>\n\n\n\n
Una CDN es una red superpuesta de ordenadores los cuales contienen copias de datos situadas en varios puntos de una red (emplean servidores distribuidos geogr\u00e1ficamente), con el fin de maximizar el ancho de banda para el acceso a los datos de clientes por la red.<\/p>\n\n\n\n
Dicho de otro modo, las CDN optimizar\u00e1n la entrega de archivos est\u00e1ticos como CSS, im\u00e1genes, fuentes y JavaScript a los visitantes del sitio, desde el servidor m\u00e1s cercano de la red. <\/p>\n\n\n\n
Es por este motivo, que el tiempo de carga es igual, independientemente de donde se conecte el usuario. Para ello, es aconsejable monitorear el rendimiento de los archivos alojados en CDN para poder medir realmente si tiene sentido externalizar esta parte de la infraestructura. <\/p>\n\n\n\n
5. Programa tu sitio web primero para dispositivos m\u00f3viles<\/strong><\/h3>\n\n\n\n
Es importante verificar el tipo de dispositivo que emplean los usuarios para visitar el sitio web con una herramienta de monitoreo real del usuario ( RUM)<\/strong><\/a>, o anal\u00edtica (como Google Analytics para el tr\u00e1fico general y Search Console para el tr\u00e1fico org\u00e1nico).<\/p>\n\n\n\n
Generalmente, los programadores web tienden a dise\u00f1ar y hacer pruebas de los sitios web en dispositivos de escritorio y luego optimizan el mismo para m\u00f3viles. Esto puede conllevar algunos problemas si no se plante\u00f3 adecuadamente de inicio.<\/p>\n\n\n\n
Por ello, es recomendable desarrollar la web primero para dispositivos m\u00f3viles, haciendo las pruebas oportunas en estos (Mobile-First Indexing<\/strong><\/a>). De este modo, la experiencia estar\u00eda por defecto optimizada para dispositivos m\u00f3viles.<\/p>\n\n\n\n
Adem\u00e1s, ajustar el sitio web posteriormente para dispositivos de escritorio es un proceso generalmente menos tedioso. Se puede ir mejorando progresivamente la experiencia en los distintos dispositivos, ajustando los espacios en pantalla, acelerando la red y la CPU. <\/p>\n\n\n\n
6. Minimiza el TTFB<\/strong><\/h3>\n\n\n\n
El TTFB (Time To First Byte) o tiempo hasta el primer byte, es el tiempo que tarda el navegador en recibir el primer byte de datos del servidor web remoto. <\/p>\n\n\n\n
Se trata de un aspecto a mejorar en el servidor, puesto que juega un papel importante en el rendimiento general de una web.<\/p>\n\n\n\n
El principal factor para minimizar el TTFB<\/strong><\/a>, es el tiempo de procesamiento del servidor. Para optimizarlo, puedes seguir algunos de los siguientes consejos recomendados por Google:<\/p>\n\n\n\n
- Actualiza el hardware del servidor para contar con m\u00e1s memoria o CPU<\/li>
- Optimiza la forma en que el servidor consulta las bases de datos o migra a otro sistema de base de datos m\u00e1s r\u00e1pido.<\/li>
- Optimiza la l\u00f3gica de la aplicaci\u00f3n del servidor para preparar las p\u00e1ginas m\u00e1s r\u00e1pidamente. Si empleas un framework del lado del servidor<\/strong><\/a>, generalmente ofrecer\u00e1 recomendaciones en cada caso sobre c\u00f3mo hacerlo.<\/li><\/ul>\n\n\n\n
Los rangos para evaluar si el TTFB del sitio es \u00f3ptimo son:<\/p>\n\n\n\n
- Menor de 200 ms = excelente. <\/li>
- Entre 200 ms y 500 ms = normal <\/li>
- Superior a 500 o 600 ms = poco \u00f3ptimo (ser\u00e1 necesario investigar y minimizar) <\/li><\/ul>\n\n\n\n
7. Elige el plan de alojamiento web adecuado<\/strong><\/h3>\n\n\n\n
Guarda relaci\u00f3n con la reducci\u00f3n del TTFB. Esto se debe, a que si se emplea un plan de hosting bajo de recursos, es posible que el rendimiento general se resienta. <\/p>\n\n\n\n
Por ello, es importante determinar el rendimiento del hosting y las necesidades del sitio, as\u00ed analizar los recursos a contratar. Si el plan de hosting estuviese limitado por recursos, existen las siguientes alternativas:<\/p>\n\n\n\n
- Actualizar o ampliar el plan de alojamiento. <\/li>
- Utilizar un servicio administrado, estable y con alto rendimiento (muy pr\u00e1ctico en desarrollos para WordPress).<\/li>
- Cambiar de tipo de hospedaje: Existen diferentes opciones para hospedar un sitio web<\/strong><\/a> (sin hosting, hosting compartido, hosting VPS o hosting dedicado). <\/li><\/ul>\n\n\n\n
Aqu\u00ed puedes encontrar m\u00e1s informaci\u00f3n sobre c\u00f3mo elegir el hosting para tu sitio web<\/strong><\/a>.<\/p>\n\n\n\n
<\/figure><\/div>\n\n\n\n8. Habilita la compresi\u00f3n Gzip<\/strong><\/h3>\n\n\n\n
Habilitar la compresi\u00f3n Gzip<\/strong><\/a> minimiza el tama\u00f1o de las respuestas en los servidores HTTP para ciertos tipos de archivos, por lo que ayuda a reducir los tiempos de carga y ahorrar ancho de banda. Por lo general, se usa s\u00f3lo para respuestas textuales.<\/p>\n\n\n\n
9. Minimiza y combina archivos CSS y JavaScript<\/strong><\/h3>\n\n\n\n
Como planteamos previamente, se deber\u00eda intentar cargar tanto JavaScript como CSS en una sola solicitud para cada uno. <\/p>\n\n\n\n
Los navegadores tienen l\u00edmite en las solicitudes de red paralelas, por lo que si la p\u00e1gina necesita 2 solicitudes para poder cargar, ser\u00e1 m\u00e1s r\u00e1pida que si tuviera que cargar 20 recursos distintos. <\/p>\n\n\n\n
Para ello, hay que primero minificar y despu\u00e9s combinar los archivos JavaScript y CSS<\/strong><\/a> separados en paquetes \u00fanicos. <\/p>\n\n\n\n
- Minificar archivos: proceso de optimizaci\u00f3n del tama\u00f1o de los archivos JavaScript y CSS, eliminando o acortando los s\u00edmbolos en el c\u00f3digo fuente. <\/li><\/ol>\n\n\n\n
- Combinar archivos: todos los archivos se copian en un solo archivo.<\/li><\/ol>\n\n\n\n
10. Carga de forma as\u00edncrona JavaScript<\/strong><\/h3>\n\n\n\n
La carga s\u00edncrona es cuando el navegador llega a un <script> (etiqueta que carga JavaScript desde una fuente remota) esperando que se cargue el archivo antes de continuar con el renderizado del sitio web. <\/p>\n\n\n\n
Es por ello, que si se establece el indicador as\u00edncrono en el <script> para que el navegador cargue el script de forma as\u00edncrona<\/strong><\/a>, este continuar\u00e1 analizando la p\u00e1gina mientras este carga.<\/p>\n\n\n\n
Tambi\u00e9n es recomendable reubicar las etiquetas de script a la parte inferior del sitio, cerca de la etiqueta de cierre <\/body>. De este modo, los navegadores m\u00e1s antiguos que no admitan el atributo as\u00edncrono cargar\u00e1n el script despu\u00e9s de analizar el resto de la p\u00e1gina.<\/p>\n\n\n\n
11. Almacena en cach\u00e9 el sitio<\/strong><\/h3>\n\n\n\n
- Combinar archivos: todos los archivos se copian en un solo archivo.<\/li><\/ol>\n\n\n\n
- Minificar archivos: proceso de optimizaci\u00f3n del tama\u00f1o de los archivos JavaScript y CSS, eliminando o acortando los s\u00edmbolos en el c\u00f3digo fuente. <\/li><\/ol>\n\n\n\n
- Comprobar errores <\/li><\/ul>\n\n\n\n
- Comprobar velocidad de carga<\/strong><\/a> <\/strong><\/li>