Como mejorar la velocidad de carga de tu sitio web
La velocidad de carga de tu sitio web es un factor muy importante a la hora de atraer visitantes. Este factor te ayuda a tener mejores rankings en los resultados de búsqueda de Google y te ayuda a hacer que los visitantes de tu sitio permanezcan más tiempo en él.
Actualmente Google tiene en cuenta la velocidad de carga de un sitio en su versión móvil y anunció que su estrategia de “Mobile-first Indexing” estará habilitada por defecto para toda la web, lo que significa que debes tener una muy buena velocidad de carga en dispositivos móviles y hacer que tu sitio se vea bien en éstos para que puedas aparecer muy alto en los resultados de búsqueda de Google.
Como resultado, la experiencia de los usuarios de un sitio web en dispositivos móviles tendrá un papel más importante en los resultados de búsquedas, incluso en los resultados de búsqueda realizadas desde la página web de escritorio de Google.
Desafortunadamente, muy pocas personas le ponen el suficiente cuidado a mejorar la velocidad de carga de su sitio web, lo cual genera un impacto negativo en su tráfico web, sus conversiones o ventas.
Hay varios aspectos de tu sitio que pueden afectar negativamente la velocidad de carga, puedes ser aspectos del servidor web, aspectos del propio diseño y código de tu sitio web.
En este artículo te enseño varios aspectos a tener en cuenta en tu sitio web para poder mejorar la velocidad de carga de éste y lograr que tu sitio web pueda así estar mejor posicionado en los resultados de búsqueda de Google.
Mide periódicamente la velocidad de carga de tu sitio web
Antes de empezar a optimizar tu sitio web es muy importante saber cuál es el estado actual de éste. Además con cada cambio que hagas es importante volver a medir a ver si dicho cambio tuvo resultados positivos en la velocidad de carga.
Aquí te presento algunas de las herramientas online donde puedes medir la velocidad de carga de tu sitio web:
Elige un buen hosting
Cuando se trata de la velocidad de un sitio web, muchas personas simplemente comienzan a trabajar en su código fuente, diseño web o elementos internos de su página web, sin embargo, el culpable de una carga lenta no siempre es obvio de inmediato.
De hecho, el servicio de hosting que estés usando en tu sitio web es muy importante para hacer que tu sitio cargue rápidamente. Debes saber escoger muy bien el servicio de hosting de tu sitio web, pues hay servicios que ofrecen más de lo que en realidad pueden soportar y hay servicios de hosting lentos.
De acuerdo al sitio Hosting Facts, los servicios de hosting más rápidos en la actualidad son:
- A2 Hosting – Velocidad: 320ms
- Hostinger – Velocidad: 363ms
- Bluehost – Velocidad: 380ms
Optimiza tus imágenes
Es importante optimizar las imágenes para la web. Debes escoger un formato como JPEG, PNG o WebP en el cuál la imagen tenga un tamaño del archivo mínimo sin perder la calidad de ésta.
Debes reducir el tamaño del archivo de imagen. Una de las formas más fáciles es reducir el tamaño de la imagen para que se adecue exactamente al lugar donde va a aparecer. Por ejemplo, si el ancho máximo de la imagen que va a aparecer en tu sitio web es de 600px, sube un archivo de máximo 600 pixéles de ancho en vez de subir uno más grande.
Otra forma de reducir el tamaño de los archivos de imagen es comprimir dichos archivos con alguna utilidad de compresión de imágenes.
Aplica lazy loading a las imágenes
Lazy loading es una técnica para mejorar la velocidad de carga de tu sitio web, la cual consiste en retrasar la carga de las imágenes en el navegador hasta que el usuario realmente vaya a verlas.
De esta forma te aseguras que el usuario solo vea las imágenes que va explorando en el navegador, y el sitio web no cargue todas las imágenes por defecto al entrar a una página.
Existen bastantes técnicas para aplicar esto en los sitios web, y actualmente existe la opción de añadir una simple etiqueta en las imágenes para hacer que su carga sea de forma ‘lazy‘.
El código de una imagen se vería así:
<img src="perezoso.jpg" alt="Un Perezoso" loading="lazy"> |
Como puedes ver se añadió la etiqueta loading="lazy", la cual actualmente está en pruebas y no es totalmente compatible con todos los navegadores.
En este gran artículo te explican como aplicar con éxito esta nueva técnica de lazy loading de forma híbrida, o sea, utilizando la etiqueta nativa, si está disponible, o de lo contrario utilizar un código en JavaScript: Hybrid Lazy Loading: A Progressive Migration To Native Lazy Loading.
Optimiza tus archivos CSS
Debes optimizar tus archivos CSS de tal forma que el código no ocupe mucho espacio en el archivo. Utilizar menos líneas de código en el archivo CSS significa que el navegador va a procesar menos tiempo tu sitio y la velocidad mejorará.
También debes eliminar código CSS que no estés usando actualmente, no debes importar otros estilos usando el parámetro @import, no debes insertar CSS en línea en etiquetas HTML, y si vas a insertar CSS en línea, éste código debe ser pequeño.
Recuerda que todo el código CSS, sea en línea o en archivo, se debe incluir dentro de las etiquetas <head></head> de la página web.
De igual manera, debe tratar de combinar todos los archivos CSS en uno solo, para realizar menos peticiones HTTP.
Comprime tus archivos CSS, JavaScript y HTML
Al comprimir los archivos CSS, JavaScript y HTML de tu sitio web, reducirás el tamaño de dichos archivos lo que reducirá el tiempo de descarga de esos archivos en el navegador.
Existen métodos en los cuales solo es necesario eliminar espacios en blanco, saltos de línea, tabulaciones, comentarios y código que nos vas a usar para crear archivos mucho más compactos mucho más pequeños.
Otro método consiste en modificar el código de tal forma que esté escrito de una forma más corta y resumida sin cambiar el comportamiento de éste. De esta manera el código quedará muchísimo más comprimido, no quedará muy fácil de leer para un humano, pero el navegador lo entenderá y ejecutará exitosamente.
Según Google, las herramientas recomendadas para comprimir tus archivos son HTMLMinifier para HTML, CSSNano para CSS y UglifyJS para JavaScript.
Al comprimir estos archivos, se eliminan bytes adicionales que no afectan negativamente a tu página web, pero reducen bastante los tiempos de carga.
Carga los archivos JavaScript asíncronamente
Para evitar que la carga de los archivos JavaScript de tu sitio web bloqueen la carga de todo el contenido, es necesario que estos archivos se carguen asíncronamente en el sitio.
Si los scripts de JavaScript se cargan síncronamente, estos se cargan de uno a la vez, en el orden en el que aparecen en el código de la página. Por otro lado, si los scripts se cargan asíncronamente, algunos de ellos se cargaran simultáneamente sin bloquear el renderizado del DOM de la página.
Para logar la carga asíncrona de scripts de JavaScript solo es necesario añadir el atributo async a la llamada del código o archivo, así:
<script async src="mi-javascript.js"> |
Si deseas puedes configurar para que un archivo de JavaScript solo se ejecute una vez que todo el código del sitio web haya cargado. Para ello solo añades el atributo defer, así:
<script defer src="mi-javascript.js"> |
Reduce las peticiones HTTP
Cada archivo de CSS, JavaScript, HTML, tipografía o imagen que sea necesario para que un sitio web sea procesado requiere una petición HTTP por separado. Cuantas más peticiones se realicen, más lento cargará el sitio web.
Para poder minimizar la cantidad de peticiones HTTP que realiza una página, y así mejorar la velocidad de carga de ésta, puedes:
- Combinar varios archivos JavaScript en uno.
- Combinar varios archivos CSS en uno.
- Eliminar la carga de archivos que no se utilicen en la página.
Habilita el prefetching
El prefetching es una técnica en la cual se puede precargar un contenido antes de que sea requerido por el usuario, de esta forma cuando se vaya a cargar dicho contenido la carga se realizará de forma rápida.
Existen tres tipos de prefetching:
- Link Prefetching
- DNS Prefetching
- Prerendering (Pre-renderizar)
Al hacer prefetching las URL, imágenes, CSS, JavaScript son recopiladas incluso antes de que dejes la página web actual. Esto garantiza que los usuarios de tu página web pueden navegar por tu sitio con una mejor velocidad de carga.
Habilitar el prefetching es muy sencillo. Dependiendo del tipo de prefetching que quieras habilitar solo debes añadir el atributo rel="prefetch", rel="dns-prefetch", o rel="prerender" a la etiqueta <link> que desees dentro de tu sitio web.
En este enlace puedes aprender más sobre el Prefetching.
Habilita la compresión en tu sitio web
Cuanto más pequeños sean los archivos de tu sitio web, más rápido cargarán las páginas web de éste. Comprimir los archivos de tu web es una de las formas más fáciles de mejorar la velocidad de carga de tu sitio web.
Una de las tácticas estándar para comprimir es habilitar en el servidor la compresión mediante GZIP, de esta forma los archivos de texto del sitio web (CSS, HTML, JavaScript, tipografías, etc.) serán comprimidos antes de que los descargue el navegador.
Para habilitar la compresión en un servidor Apache, debes añadir el siguiente código en el archivo .htaccess de tu servidor:
<IfModule mod_deflate.c> 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 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> |
Si deseas habilitar la compresión GZIP en un servidor web NGINX, debes añadir el siguiente código en el archivo nginx.conf de tu servidor:
gzip on;gzip_disable "MSIE [1-6].(?!.*SV1)";gzip_vary on;gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript; |
Puedes verificar el estado de compresión de tu servidor utilizando esta herramienta online: GZIP Compression Test.
Habilita el almacenamiento en caché
El almacenamiento en caché un sitio web es una técnica usada para almacenar temporalmente una página web con el fin de reducir el ancho de banda y mejorar la velocidad de carga de un sitio web.
Cuando un usuario visita tu sitio y la página se encuentra almacenada en caché, la misma página en caché se mostrará al usuario cuando vuelva a visitarla, a menos que haya cambiado desde la última vez que fue almacenada en caché. Esto le ahorra al usuario tiempo pues no tiene que esperar a que se cargue la página y agiliza las cosas.
Puedes habilitar el almacenamiento en caché en tu sitio web añadiendo el siguiente código en el archivo .htaccess de tu servidor Apache:
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">Header set Cache-Control "max-age=84600, public"</filesMatch><IfModule mod_expires.c>ExpiresActive OnExpiresByType image/jpg "access 1 year"ExpiresByType image/jpeg "access 1 year"ExpiresByType image/gif "access 1 year"ExpiresByType image/png "access 1 year"ExpiresByType image/svg "access 1 year"ExpiresByType text/css "access 1 month"ExpiresByType application/pdf "access 1 month"ExpiresByType application/javascript "access 1 month"ExpiresByType application/x-javascript "access 1 month"ExpiresByType application/x-shockwave-flash "access 1 month"ExpiresByType image/x-icon "access 1 year"ExpiresDefault "access 2 days"</IfModule> |
Si tienes un servidor con NGINX, debes añadir el siguiente código en el archivo de tu servidor, generalmente ubicado en /etc/nginx/site-enabled/default:
location ~* .(png|jpg|jpeg|gif)$ { expires 365d; add_header Cache-Control "public, no-transform";}location ~* .(js|css|pdf|html|swf)$ { expires 30d; add_header Cache-Control "public, no-transform";}location ~* .(jpg|jpeg|gif|png)$ { expires 365d;}location ~* .(pdf|css|html|js|swf)$ { expires 30d;} |
Utiliza un CDN
Un CDN es una red de distribución de contenido (Content Delivery Network, por sus siglas en inglés). Estas redes te ayudan a cargar tu sitio web en una red de servidores alrededor del mundo, para hacer que un usuario pueda cargar tu página web desde el servidor más cercano a su ubicación.
Por lo general, al utilizar un CDN todos los archivos estáticos (HTML, CSS, tipografías, JavaScript) del sitio web son comprimidos por defecto.
En la actualidad el servicio de CDN más sencillo de habilitar en tu sitio web, es el CDN ofrecido por CloudFlare. Además CloudFlare también te habilita varias opciones de optimización como comprimir archivos estáticos, habilitar HTTP/2, la compresión mediante Brotli, mitigación contra ataques DDoS, y mucho más.
Conclusión
Al aplicar todos los consejos dados anteriormente podrás mejorar notablemente la velocidad de carga de tu sitio web y podrás mejorar la experiencia de tus usuarios, lo que en la actualidad se está volviendo bastante importante para mejorar los rankings de los resultados de búsqueda de Google.
Ten en cuenta que no es necesario aplicar todos los consejos de una sola vez, es mejor ir aplicando de un consejo a la vez e ir probando su impacto en la velocidad de carga de tu sitio web.
Tómate tu tiempo en probar y medir los resultados de aplicar cada uno de los consejos dados en este artículo. Revisa cuales son los problemas más críticos de tu sitio web que afecta la velocidad de carga y ataca esos problemas de primero.