Por regla general, queremos que las páginas de nuestro WordPress se sirvan deprisa principalmente para que la experiencia de usuario sea satisfactoria. Una web lenta hará que nuestros lectores o posibles compradores abandonen nuestra web. Tener un buen hosting es fundamental, pero desde el punto de vista de WordPress podemos actuar.
En general se considera que una web que tarda en verse más de 3 segundos sufre más abandonos de sus usuarios.
Cuando hablamos de este tiempo de carga, hablamos del tiempo total desde que se hace la petición en el navegador hasta que se ha terminado totalmente la carga del ultimo archivo que recibe el navegador. Esto no tiene nada que ver con la sensación general de que la página sea lenta o rápida y para eso entra el concepto, que tal vez hayas leído, y que en inglés se llama above the fold. Imagina tu página web como si fuera un folio con todo el contenido y que la ventana de tu navegador es una cuadricula que va desplazándose por ese folio. Como puedes imaginarte lo importante es que esa primera cuadrícula que carga es decir, por encima de la línea inferior de esa cuadrícula (o above the fold) sea lo más rápida posible. Que el resto de contenidos que tu no ves debajo de esa línea tarden más en cargarse en realidad te da igual, porque salvo que sea mucho tiempo al usuario no le va a dar tiempo a bajar con el ratón e intentar verlos.
Es por tanto fundamental para que la sensación de velocidad sea mayor, que se empiecen a mostrarse elementos de tu web al cuanto antes.
Lo primero que recomiendo siempre que hace uno una optimización es tomar una base de referencia, baseline o como lo queramos llamar. Básicamente ver de donde partimos en la situación actual.
Para eso es muy conveniente poder usar herramientas de medición, que nos permitan ver lo lenta que es nuestra web y nos de información de que podemos cambiar.
Principalmente utilizo tres páginas web, pero existen muchas más:
En general me gusta observar que resultados dan todas las páginas porque los resultados son complementarios.
Por ejemplo si ponemos nuestra web en tools.pingdom.com nos mostrará la siguiente información:
Nos dice que en 61 peticiones el tiempo de carga medio ha sido de 6.60 segundos y que el tamaño total de la página son 436,8 kb. En general este es bastante tiempo para una página que no descarga apenas medio mega.
Si desplegamos más abajo la información que nos proporciona simplemente posando nuestro ratón encima, obtendremos la siguiente información
Esto nos indica que del tiempo total, tardó 264 ms en resolver el nombre de la web a su IP correspondiente, 402 ms en conectarse al servidor y que estuvo 3.88 segundos esperando a que el servidor le mandará algún dato y que tardó 41 ms en mandarle 5.6 kB que es fichero que hemos pulsado con el ratón.
Como podemos ver los tiempos son bastante razonables salvo el tiempo de espera, en el que el servidor estará generando el fichero que le tiene que enviar al navegador (un fichero html generado por PHP p.ej.).
Ahora podemos utilizar la información que nos proporciona www.webpagetest.org
Mi recomendación es que elijamos una ubicación lo más cercana posible a donde estén la mayoría de nuestros lectores, si están en Europa, no tiene sentido hacer el test desde los EEUU, los resultados van a variar bastante.
Lo primero en lo que nos vamos a fijar es que el tiempo de respuesta que indica esta web varía. No debemos ser muy quisquillosos con este tema, porque cada test puede variar. Pero estos resultados nos pueden permitir ver tendencias, una vez que hayamos realizado optimizaciones y ver que realmente estamos mejorando.
Uno de los datos más importantes y que en muchos foros insisten es el First Byte. Este es el tiempo que tarda el servidor en empezar a mandar información al navegador. Todo lo que sea por encima de 1 segundo, es anormalmente lento. Puede ser debido a que el servidor esté lejos del cliente, o que tenga algún cuello de botella.
Una pista nos la da la parte derecha de la página, donde nos gradua los resultados de nuestro test
Como podemos ver en general la puntuación es alta para el dato First Byte Time, ya que está por debajo de 1 segundo.
¿Qué podemos hacer para mejorar la velocidad de nuestro WordPress?
- Comprimir imagenes:. Puedes utilizar plugins como EWWW optimizer, Imagify o wp-smushit
- Desactivar elementos dependiendo de la página: Lo más frecuente es desactivar los elementos del formulario o de woocommerce dependiendo de la páginas. Puedes usar wp-asset-cleanup
- Javascript:.Se recomienda cargar los Javascripts al final para que la carga sea más rápida. Puedes utilizar plugins como wp deferred javascripts o async javascript.
- Cache navegador. En está parte es la información que el servidor le envía al navegador sobre lo que puede mantener en su caché. Los navegadores guardan una copia de los archivos que descargas de manera local, de manera que en la siguiente vez que entremos en dicha web, no descargará esos archivos en caso de que estemos dentro del tiempo de no expiración de ese archivo. El servidor le puede indicar p.ej. que en principio las imagenes no expiren en unas horas o un día y que no las vuelva a descargar hasta que pase ese tiempo. Esto se maneja dentro del modulo mod_expire y se puede poner en el .htaccess definiendo por cada tipo de archivo cuanto tiempo queremos que use la copia local.
ExpiresActive On ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType 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/x-icon "access 1 year" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresDefault "access 1 month"
Existen servicios de optimización de WordPress. ¿Y tú que problemas tienes de velocidad con tu web?
Un tema muy importante, sobre todo en lo relativo a la optimización para móviles y tabletas, ya que cada vez se accede más desde estos dispositivos y por lo tanto, es fundamental cuidar que el acceso desde estos dispositivos sea ágil.
Muy buena aportación.
Sólo me gustaría agregar que una buena práctica consiste en subir las imágenes comprimidas a nuestro sitio web, desde el diseño se pueden optimizar tamaño en Kb y resolución; esto favorece el tiempo de carga y al SEO.
¡Saludos!
Efectivamente Ignacio, es mejor subirla ya optimizada, pero si no lo haces los plugins de optimización son una buena alternativa.
Es un tema fundamental que hay que tener en cuenta, y que muchos sitios web no les dan la importancia que se merece. Recomiendo este artículo como información de consulta y para su aplicación. Felicidades.
Nice article Ibertrix 🙂
Súper imprescindible tener una velocidad de carga decente en una web.
Es una de las cosas más importantes para tener una buena usabilidad web 😉
Excelente artículo.
Es una buena idea combinar varias herramientas para analizar la velocidad de un sitio web.
Si ya es importante, a partir de ahora más ya que Google parece ser que en nada lo va considerar como factor de posicionamiento.
Quien tenga una web lenta se tiene que poner las pilas
Muy buen post!
Creo que sobre todo google ahora le da mas valor a ka version movil que al propio pc .
Saludos.
Toñi Rodriguez
Vatoel Social Media
Buenos aporte para una buena optimización, esta claro que hay que testear la velocidad de tu sitio, también es importante comprobarla en los dispositivos móviles. La mayoría de los visitantes se pierden mientras carga la web.
Saludos, geckografix
¡Hola!
Me parece un tema muy interesante y unos consejos muy prácticos para hacer agradable la experiencia de usuario y por lo tanto mejorar el posicionamiento.
Hay que tener en cuenta que no todo el mundo tiene la misma calidad en la conexión ni el mismo hardware, por lo que lo que para unos puede ser una leve molestia, para otros puede resultar una experiencia lamentable que les haga huir para siempre de nuestro sitio.
Así que todo lo que esté en nuestra mano para mejorar la velocidad de carga redundará en el beneficio de nuestros visitantes y por lo tanto, en el nuestro propio.
¡Un saludo!