3 sencillos pasos para optimizar el tiempo de carga de tu web

¿Cuáles son las motivos para optimizar el tiempo de carga de tu web?. A nadie le gusta visitar una página y que tarde mil años en cargar. Una carga lenta puede significar perder visitas a tu web, y si tu medio de vida es un negocio online no puedes permitirte el lujo de perder visitas. Además, también debes de tener en cuenta que hoy en día se accede a Internet a través de dispositivos móviles. La conexión de datos y la potencia de estos terminales no es tan elevada como la de un ordenador, razón de más para optimizar la velocidad de carga de tu web y no entorpecer la navegación de los usuarios. Otro motivo es el SEO (posicionamiento en buscadores). A Google no le gustan las páginas web lentas y lo tendrá en cuenta a la hora de evaluar la posición de tu web en su buscador.

Por ese motivo he preparado un vídeo para que apliques 3 sencillos pasos y puedas optimizar el tiempo de carga de tu web. Ir al vídeo.

Si eres primerizo en estos temas o te apetece indagar un poco más, estaría bien que entendieses cuáles son las causas de una web lenta y cómo se solucionan, te lo explico a continuación.

Por qué una web tarda en cargar

Una página web está compuesta por un conjunto de archivos, la suma de los cuales determinará el tamaño total y el tiempo que tardará en descargarla el navegador. Tardará más en cargar una página de 1Mb que una de 0,512Mb. A más cantidad de archivos, más peticiones tiene que atender el servidor y más procesos tendrá que realizar el navegador para completar las piezas del puzzle que forman la página.

Cómo optimizar el tiempo de carga de tu web

1. Activar la compresión de archivos

Reducir el tamaño de los archivos que el navegador necesita descargar mejorará considerablemente el tiempo de respuesta. Para ello debes activar la compresión gzip o deflate en el servidor (son dos métodos distintos de compresión). Este método no se aplicará a las imágenes. Para la compresión de las imágenes deberás utilizar otro sistema, te lo explico más adelante.

2. Activar el control de cache

La primera vez que un usuario accede a una página web, el navegador descarga en el disco duro gran parte de los archivos que la componen. El control de cache del servidor asigna un período de validez (1m, 1h, 1mes…) a cada tipo de archivo, de esta forma el navegador utilizará los archivos descargados durante el período asignado sin tener que volverlos a descargar en cada acceso. A su vez, el navegador también se encarga de preguntarle al servidor si se han realizado cambios para descargarlos en caso afirmativo.

3. Unir y compactar los archivos del mismo tipo

optimizar el tiempo de carga de tu web

Este método consiste en juntar los archivos de programación escritos con el mismo lenguaje y a su vez compactarlos. Al unir los archivos en uno solo, las peticiones al servidor se reducen. Su contenido se compacta eliminando los espacios y los saltos de carro (entre otros) reduciendo de esta forma su tamaño.

4. Comprimir las imágenes

Reduce las dimensiones de las imágenes: si tienes una fotografía que mide 3000px de ancho y tu página web tiene un ancho máximo de 1000px, no tiene sentido que utilices unas proporciones tan grandes. Edita la imagen para que mida como máximo 1000px. Conseguirás rebajar el peso de la imagen y agilizar la carga de tu web.

Utiliza el formato adecuado: los formatos más comunes utilizados en Internet son el JPG, PNG y GIF. Cada formato está diseñado para un propósito. Para las fotografías el formato más adecuado es el JPG, hará que ocupen menos sin perder la calidad. Para los logos, los iconos y gráficos con pocos colores guarda las imágenes en formato PNG. Además, PNG soporta los canales alpha (fondo transparente). El formato GIF se suele utilizar para las imágenes animadas, aunque este formato va a ser remplazado en un futuro por el formato APNG, que además de tener las ventajas de PNG, permite fotografías animadas.

Comprime las imágenes utilizando herramientas de compresión: estas herramientas y/o aplicaciones permiten reducir el tamaño de las imágenes entre un 70% y un 80% sin afectar a la calidad. Existe un plugin para WordPress que comprime imágenes llamado TinyPNG. Para hacerlo desde el ordenador puedes utilizar la aplicación ImageOptim (Mac y Windows).

Pedro Suárez de www.pedrosuarezweb.com escribió un artículo extenso sobre optimización de imágenes en el blog de hormigasenlanube.com como autor invitado. Te recomiendo su lectura: hormigasenlanube.com/optimizar-imagenes.

Otros factores que influyen en la carga de tu web

Hay otros aspectos que también afectarán en la velocidad de carga de tu página web. Deberás tener en cuenta lo siguiente:

1. El hosting

La elección del hosting es uno de los factores más importantes antes de montar tu página web. Los hostings baratos son una opción muy tentadora (¡si, ése que anuncian en televisión!), pero créeme si te digo que a la larga salen caros. Te lo digo por experiencia. Yo te recomiendo Webempresa, es una empresa española con muy buena reputación. Te expongo varias razones por las que utilizar este proveedor de hosting:

  • Dispone de servidores rápidos y optimizados para WordPress.
  • Sus servidores utilizan discos duros SSD, son más rápidos que los discos duros convencionales.
  • Emplean cPanel para el panel de administración del sitio. Es fácil de utilizar y prácticamente un estándar en los proveedores de hosting.
  • Tienen un foro muy activo donde encontrar ayuda de otros usuarios además del soporte oficial.
  • Al tratarse de una empresa española, la documentación esta totalmente en castellano.

2. Un tema sobrecargado

La calidad del código de los temas influye en el tiempo de carga de tu página. Antes de comprar un tema te recomiendo que realices un test de velocidad utilizando alguna de las herramientas que te he dejado un poco más abajo.

A la hora de comprar plantillas te puedes volver loco, hay cientos de páginas donde escoger, pero no es oro todo lo que reluce. Si quieres mi recomendación a la hora de adquirir temas de calidad te recomiendo los de Creativemarket y de Studiopress. En Creativemarket puedes encontrar temas tan profesionales como los de Studiopress pero a un precio menor. Yo recurro bastante a esta página para comprar recursos gráficos.

3. El uso indiscriminado de plugins

A todos nos gustan los plugins, son una maravilla, y los hay para casi cualquier cosa. ¡Pero ojo! no te pases instalando muchos. Cuantos más plugins instales más pesado será tu WordPress. Instala sólo aquellos que realmente necesites y desinstala el resto. Siempre que puedas lograr algo sin un plugin opta por esa opción. En el vídeo te enseño a comprimir y cachear tu web añadiendo un poco de código en el archivo de configuración de tu .htaccess sin necesidad de instalar un plugin. También te muestro cómo optimizar el tamaño de las imágenes con un programa en el ordenador. Si eres constante y optimizas siempre las imágenes con este programa antes de subirlas puedes prescindir del plugin TinyPNG y eso que te ahorras.

Ya sabes cuáles son las causas de que tu web cargue de forma ralentizada y cómo atajar el problema. Antes de ver el vídeo en el que te explico cómo aplicar estas técnicas, puedes hacer un test de velocidad de tu página web para que puedas comparar más adelante la diferencia.

Test de velocidad

Entra en esta página, introduce la dirección de tu página web en el campo URL y haz clic en Start test.

Test de velocidad

Una vez terminado el test verás un resultado parecido a éste:

optimizar el tiempo de carga de tu web

Este resultado pertenece al de mi página web (ya optimizada).

Te recomiendo anotar el resultado del primer test o hacer una captura de pantalla. Cuando apliques los cambios prueba a realizar de nuevo varios tests y observa la diferencia.

Aquí tienes más herramientas para realizar tests de velocidad a tu página web:

Vídeo explicativo: 3 pasos para que tu web vuele

Los pasos que voy a explicar en el vídeo son los siguientes:

  1. Activar la compresión de archivos y la cache en tu servidor.
  2. Unir y compactar los archivos del mismo tipo.
  3. Reducción de tamaño y peso de la imágenes.

A continuación te dejo el listado de los recursos utilizados en el vídeo:

  • Plugin para concatenar, reducir y comprimir archivos: Autoptimize
  • Extensión para Google Chrome: Image Size Info
  • Plugin para optimizar imágenes: TinyPNG
  • Programa para optimizar imágenes: ImageOptim
  • Aquí tienes el código que tienes que incluir en el archivo .htaccess:
<IfModule mod_deflate.c>
# Insert filters / compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/vtt
AddOutputFilterByType DEFLATE text/x-component
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/js
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/atom+xml
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/ld+json
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-web-app-manifest+json
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon

# Exception: Images
SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png)$ no-gzip dont-vary

# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Make sure proxies don't deliver the wrong content
<IfModule mod_headers.c>
Header append Vary User-Agent env=!dont-vary
</IfModule>
</IfModule>

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 week"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/html "access plus 1 minute"
ExpiresByType text/plain "access plus 1 month"
ExpiresByType text/x-component "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/javascript "access plus 1 months"
ExpiresByType application/x-javascript "access plus 1 months"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/ld+json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds"
ExpiresByType text/cache-manifest "access plus 0 seconds"
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
ExpiresByType application/font-woff "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
</IfModule>
## EXPIRES CACHING ##

#Alternative caching using Apache's "mod_headers", if it's installed.
#Caching of common files - ENABLED
<IfModule mod_headers.c>
<FilesMatch "\.(ico|pdf|flv|swf|js|css|gif|png|jpg|jpeg|txt|html|htm)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>
</IfModule>

<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary Accept-Encoding
  </FilesMatch>
</IfModule>

<IfModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

# Set Keep Alive Header
# This *just* sets the header - maybe your hoster is not allowing this feature
# Please check if it is working with tools like http://www.webpagetest.org
<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>

# If your server don't support ETags deactivate with "None" (and remove header)
<IfModule mod_expires.c>
  <IfModule mod_headers.c>
    Header unset ETag
  </IfModule>
  FileETag None
</IfModule>

Y hasta aquí el artículo de hoy. Si te ha gustado no olvides compartirlo con tus amigos, te estaré muy agradecido.

¿Has aplicado estos consejos para optimizar el tiempo de carga de tu web? ¿Has notado la diferencia? Cuéntame tu experiencia en los comentarios o pregúntame si tienes alguna duda. Saludos y hasta el próximo post!

6 comentarios en “3 sencillos pasos para optimizar el tiempo de carga de tu web

  1. Hola Pedro,

    Me alegro mucho que te haya sido útil el post. Es el primero que escribo y la verdad es que agradezco verte por aquí comentando. Hace tiempo que sigo tu blog y me parece muy interesante.

    Muchos ánimos a ti también con tu proyecto.

    Un abrazo y hasta pronto.

  2. Hola Víctor!

    Me ha gustado mucho tu post. Muy completo y me has aportado bastantes cosas útiles como por ejemplo la implementación de código vía el archivo .htaccess.

    Muchos ánimos y seguimos en contacto.

    Abrazos,

    Pedro

  3. Hola Victor,

    Este articulo me ha venido muy bien. Hace un tiempo habia escrito uno similar sin embargo este punto de: Unir y compactar los archivos del mismo tipo lo habia pasado por alto.
    y ahora mismo que estoy refrescando mi blog lo he utilizado para organizar todo.

    Muchas gracias! Ademas ya lo voy a compartir

    Saludos

  4. Hola Joel:

    Me reconforta leer que este artículo te ha servido de ayuda para mejorar la velocidad de carga. Esta técnica de unir archivos y comprimirlos se utiliza mucho en el mundo del desarrollo web, se le conoce como minify. Gracias por comentar y compartir.

    Saludos. ✋

Deja un comentario


Uso de los datos de los comentarios


Responsable del fichero: Víctor Rico Penalba. La finalidad: moderar los comentarios del blog. La legitimación: consentimiento del interesado. Destinatarios: tus datos se encuentran alojados en mi proveedor de hosting, Raiolanetworks, empresa de servidores Española ubicada en Lugo. Podrás ejercer tus derechos de acceso, rectificación, limitación o suprimir tus datos enviando un email a o ante la Autoridad de Control. Encontrarás más información en la Política de Privacidad.


Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.