La velocidad de carga de un sitio web tiene impacto en cada «rendimiento» del sitio web. La velocidad afecta la clasificación, afecta las conversiones y al promedio de páginas vistas. No trabajar en la velocidad de un sitio web significa que está perdiendo dinero.
Siempre tenemos que tener en cuenta la experiencia del usuario cuando navega por nuestra web, y todos tenemos muy claro que la experiencia en una web rápida es mucho mejor que una lenta. Los estudios de investigación han demostrado que las webs rápidas generan mucho más tráfico y beneficios que las lentas. Eso ya de por sí debería ser un motivo principal de su importancia para no tener pérdida de clientes y ventas.
Más allá de ser mejor para los usuarios, las webs rápidas son mucho más fáciles de rastrear, procesar e indexar. Esto significa que tardarán menos tiempo en aparecer en los resultados de búsqueda, y por tanto posicionarse mucho mejor.
Resumen del Contenido
Cómo medir la velocidad de tu web
El primer paso que debes dar es medir la velocidad de tu web y conocer el punto de partida. Tendremos que hacer un test de velocidad de nuestra web. Existen multitud de herramientas a nuestra disposición, pero los tests de velocidad pueden variar según que test realices, de las influencias externas (como el día o la hora), y más factores. Por este motivo al repetir un test no siempre dan los mismos resultados. Cada herramienta suele medir la velocidad a su manera, y pueden usar métricas completamente distintas.
Por ello recomendamos utilizar estas herramientas para hacer el test de velocidad, y no solo una de ellas (si haces una búsqueda verás mas herramientas, aquí solamente indicamos las «mas importantes»)
Cada una de estas herramientas tiene su propia forma a la hora de medir, informar y hacer sugerencias para las mejoras. Para sacar el máximo rendimiento de ellas necesitarás entender las métricas que usan y cómo lo hacen. De esta forma podrás interpretar los resultados correctamente.
Factores que influyen en la velocidad de carga
Dependiendo del tipo de web, ya sea un blog, una tienda online, los factores que influyen en la velocidad de carga principalmente podemos considerar los siguientes, que no son los únicos pero si por donde empezar
- Hosting contratado
- Minimizar HTML, CSS y JavaScript
- Optimización y compresión de imágenes
- Habilitar la compresión GZIP
- Utilización de CDN
1. Hosting contratado
Tener un hosting lento puede paralizar la velocidad de la web, incluso si usas el almacenamiento en caché. Para evitarlo, puedes actualizarlo o, si prefieres, elegir uno nuevo para un mayor impacto positivo en la velocidad de carga.
De forma habitual tendemos a comprar los mas económico del mercado sin dar importancia al servicio de hosting que necesitamos. Cada web necesitas unas determinadas necesidades y el hosting tiene que ser adecuadas a ellas.
Tienes muchas opciones desde un servidor dedicado (que sería la mejor pero el precio no tanto) o un servidor virtual, VPS. Tu eliges, pero que sea adecuado a las necesidades de tu web. Un hosting rápido es un factor para que tu web gane velocidad.
2. Minimizar HTML, CSS y JavaScript
A la hora de programar código siempre se busca que sea de fácil lectura, con espacios en blanco, utilización de tabuladores entre otras cosas. Esto hace que los ficheros tengan mas peso y realmente a los navegadores no les hace falta. Por ello, eliminar todo este código hará que tu web pese menos y por ello sea mucho más rápida.
Hacer esto a mano, no quiero ni pensarlo, mejor utilizar las herramientas que tenemos disponibles como HTMLMinifier o CSS and JavaScript minifier. Todo será mucho más rápido y tendrás menos problemas.
Un consejo, mucha cuidado cuando estés minimizando los ficheros de JavaScript, prueba todo desde, todo, todo, todo y vuelve a comprobarlo.
3. Optimización y compresión de imágenes
Aunque lo hemos puesto en tercer lugar de forma habitual será lo primero a realizar. Las imágenes es uno de los factores mas importantes en el peso de una web. Hablamos hace unos meses como optimizar imágenes para la web para mejorar el rendimiento y de las distintas opciones disponibles. Siempre tienes que llegar a un «acuerdo» entre la calidad y peso de una imagen.
Como puntualización, tienes que poner especial interés en las imágenes que mas veces se cargan en tu web. Por experiencia, cuando revisamos la web de un cliente la mayoría de las veces se olvidan de comprimir el logotipo al tamaño correcto. No tiene sentido subir un fichero de 300px de alto cuando en la web estamos mostrando el logotipo con un alto de 80px.
Las imágenes tienen que tener el tamaño adecuado para el lugar que ocupen. No es aconsejable redimensionar con CSS cuando puedes tener el tamaño real necesario.
4. Habilitar la compresión GZIP
La compresión con GZIP nos permite comprimir los recursos en el servidor, antes de ser servidos a los navegadores de los visitantes. En el caso de textos es una maravilla consiguiendo hasta un 80% de compresión, que es mucho. En el caso de las imágenes no se nota tanto este tipo de compresión ya que estas suelen utilizar un tipo de compresión propio.
La compresión GZIP puedes realizara directamente modificando tu fichero .htaccess con el siguiente código.
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>
5. Utilización de CDN
Un CDN (content delivery network o red de entrega de contenido) es una excelente herramienta para mejorar la velocidad de carga de su sitio web. El CDN acerca físicamente el sitio web al visitante. Al agregar un CDN, puede servir su contenido desde una ubicación cercana al visitante y, por lo tanto, acelerar drásticamente sus tiempos de carga.
Un CDN almacena en caché el contenido estático. El contenido estático son archivos como HTML, CSS, JavaScript y archivos de imagen que permanecen igual para todos los usuarios. Estos archivos no tienen que generarse dinámicamente en función de un conjunto de reglas, es decir, contenido dinámico. Al hacer que estos archivos estáticos estén disponibles en un CDN con muchos servidores en todo el mundo, puede servirlos a sus visitantes mucho más rápido.
Conclusión
Cuando cada milisegundo puede marcar la diferencia entre que un visitante compre o se vaya, siempre hay más espacio para la optimización del rendimiento. Revisa periódicamente la configuración del alojamiento, CDN, plugins y tema si es un WordPress, tamaño de las imágenes, versión php del servidor… Es un trabajo constante que no debes olvidar y realizar cada cierto tiempo de forma habitual.
