¿Sabias que si tu web tarda más de tres segundos en cargar podrías estar perdiendo la mitad de los usuarios? Cerca del 47% de los usuarios espera que un sitio web tarde en cargar 2 segundos o menos.
En muchas ocasiones cuando construimos un sitio web, si vemos que todo funciona bien, se visualiza correctamente, y carga a una velocidad dentro de lo normal, no nos preocupamos en ir más allá y optimizarla al máximo. En mi opinión creo que es algo que debemos hacer siempre, pues si conseguimos reducir el tiempo de carga mejoraremos en muchos aspectos.
Se ha demostrado que un retraso de un segundo en el tiempo de carga de la página provoca una perdida del 7% en la conversión y un 11% menos de visitas a nuestra página web.
También sabemos que buscadores como Google o Bing tienen en cuenta, y cada vez más, la velocidad de carga a la hora del posicionamiento en buscadores (SEO).
El termino WPO hace referencia justamente a esto, significa Optimización del Rendimiento Web (Web Performance Optimization) y en resumen se trata de aplicar una serie de técnicas para mejorar la velocidad de carga de la web.
Así que si queremos mejorar nuestras posiciones en las SERPs (Search Engine Results Page), y perder menos visitas, una de las cosas que debemos hacer es mejorar la velocidad de carga de nuestra página web. Para ello te cuento a continuación algunas de las técnicas que yo utilizo:
Herramientas para analizar el rendimiento
Antes de hacer ningún cambio en la web lo aconsejable es analizar el rendimiento actual, para que, una vez hayamos finalizado, podamos compararlo con el rendimiento final. Para esto existen varias herramientas gratuitas:
GTmetrix. Es una de las herramientas mas conocidas, y analiza tu página con Google Page Speed y con Yahoo! YSlow. Te informa del tiempo de carga de la página, del tamaño total y del total de solicitudes. También te muestra el rendimiento de tu página en relación a la media de todas las páginas analizadas en GTmetrix.
PageSpeed Insights de Google. Obtiene la URL dos veces, una vez con un agente de usuario para móviles, y otra con un agente de usuario para ordenadores. La puntuación de PageSpeed va de 0 a 100 puntos
Pingdom Website Speed Test. Para mi gusto, de las mejores herramientas. Las pruebas se realizan con navegadores web reales, por lo que los resultados coinciden con la experiencia del usuario final. Utilizan el navegador Chrome desde servidores dedicados de Pingdom. Una de las cosas que mas me gustan es que puedes ordenar los resultados por varios criterios: por orden de carga, tamaño de fichero, tiempo de carga, etc.
Test My Site de Google. Orientada sobre todo a medir la velocidad en dispositivos móviles. En función del tiempo de carga te indica la pérdida estimada de visitantes. La herramienta te envía por email un informe bastante detallado.
Tener un buen hosting
Esta claro que cuanto más recursos tenga el servidor donde alojes tu sitio web, más rápido procesara las peticiones y antes servirá las páginas. Existen varios planes de hosting: hosting compartido, servidores cloud, servidores dedicados, etc. Si estas comenzando y aún no tienes muchas visitas puedes empezar con un hosting compartido y cuando vayas creciendo subir a un plan superior.
Independientemente del plan que escojas lo que si te recomiendo es que elijas un proveedor fiable, con un buen soporte. En mi caso, estoy encantado con Siteground. Cuentan con un soporte especializado 24×7. Las veces que lo he usado, por chat es inmediato y a través del sistema de tickets responden siempre en menos de 15min. ¡Una pasada!
Desde el punto de vista técnico tienen unas características muy interesantes. Una de las cosas que me gusta mucho es que cuentan con un sistema de caché que llaman Supercacher, que en el nivel 3 utiliza memcached. A modo de resumen, lo que hace es almacenar en la RAM las respuestas que tiene que dar el servidor, de tal manera que cuando alguien visita tu web, en lugar de tener que hacer las consultas a la base de datos, procesar los ficheros PHP, renderizar y devolverle el fichero html resultante, pues directamente devuelve el resultado desde la RAM. Imagínate la velocidad que se gana.
Elegir un tema ligero
A lo largo de todos estos años me he tenido que pelear con todo tipo de temas (o plantillas). Tengo decirte que no estoy en contra de las plantillas multiproposito que puedes encontrar en sitios como Themeforest. Como todo en esta vida las cosas no son solo blancas o negras, y el utilizar una cosa u otra depende de varias circunstancias, y siempre hay que estudiar cada caso.
Yo soy de la opinión que por norma general los temas o plantillas tienen que dar el diseño y los plugins la funcionalidad.
Dicho esto, si tu objetivo es conseguir que tu sitio web vuele entonces mi recomendación es que de base instales un tema lo más ligero posible, que no te instale por defecto plugins, ya instalarás tu los que necesites.
Dos temas que he probado y cargan bastante rápido, además de generar un código bastante limpio son Genesis Framework de StudioPress y GeneratePress. Genesis es uno de los temas con mayor comunidad. Es un tema con una serie de funcionalidades y lo instalas como padre, luego tu puede hacer o comprar temas hijos. Esta bastante orientado a desarrolladores, y por eso me gusta, pero si el usuario final del sitio va a ser tu cliente o un usuario sin unos conocimientos mínimos, entonces creo que le va a resultar difícil hacer cualquier cambio.
En este punto es donde aparece GeneratePress, un tema gratuito que puedes descargarte desde el repositorio oficial de WordPress y al que le puedes añadir una opción premium por algo menos de 40$ con funcionalidades tanto para principiantes como para usuarios más avanzados.
GeneratePress, con el paquete premium, es el tema que utilizo yo en mis proyectos y te aseguro que su código esta muy optimizado con lo que ayuda mucho en la velocidad de carga del sitio web.
Reducir el tiempo de carga del primer byte (TTFB)
El TTFB (Time To First Byte) es el tiempo que tiene que esperar el navegador para recibir la primera información desde que realiza la solicitud al servidor web. Cuanto más tarda en recibir ese dato, más tiempo tarda en mostrar la página.
TTFB en Devtools:
TTFB en Pingdom:
Un valor de TTFB por debajo de 100ms es idóneo. Alrededor de los 200 ms es un valor bastante positivo. Y un valor en el rango 300-500ms es algo estándar.
El valor del TTFB es debido a estos tres componentes:
1-El tiempo en llegar la solicitud de tu navegador hasta el servidor web.
2-El tiempo que tarda el servidor web en procesar y generar la solicitud.
3-El tiempo en recibir la respuesta del servidor web hasta tu navegador.
Hay varias maneras de reducir el TTFB:
-Usar versión de PHP a partir de la 7
-Usar técnicas de caché, que comento un poco más abajo.
-Tener la bbdd optimizada
-Elegir una buena plantilla de base, que ya hemos comentado en el punto anterior
-Tener instalado solo los plugins necesarios
-Usar un buen hosting, comentado anteriormente
Controlar el Heartbeat / admin-ajax.php
Con la versión 3.6 de WordPress, allá por el año 2013, se introdujo la API «WP Heartbeat», cuyo propósito era controlar la conexión entre tu navegador y el servidor. Se utiliza por ejemplo para los autoguardados o el bloqueo de las entradas. Cada 15 segundos WordPress guarda automáticamente la entrada que estés escribiendo en ese momento para que no la pierdas. Si dejas de escribir y no haces nada, ese intervalo pasa a 2 minutos.
El problema es que esta API envía constantemente solicitudes al servidor a través de la librería /wp-admin/admin-ajax.php, lo cual afecta negativamente al rendimiento del servidor. Si escribes a menudo o utilizas bastante tiempo el panel de WordPress, y estas en un hosting que te cuenta el número de ejecuciones de scripts puede llegar un momento que tengas un problema por pasarte del limite.
Si eres el único autor en tu blog y no necesitas que tus entradas se autoguarden tantas veces, puedes reducir la frecuencia del latido de la API Heartbeat añadiendo el siguiente código a tu fichero functions.php:
function wp_heartbeat_settings( $settings ) {
$settings['interval'] = 60; //Cambiamos la frecuencia a 60 segundos (valor entre 15 y 120 segundos)
return $settings;
}
add_filter( 'heartbeat_settings', 'wp_heartbeat_settings' );También puedes hacerlo a través del plugin Heartbeat Control.
Cron de wordpress
En el artículo anterior hablaba sobre el funcionamiento del cron de WordPress y cómo puede afectar al rendimiento de nuestro sitio web. Ésta es otra opción más para ayudar a que tu sitio vaya un poco más rápido.
Especificar caché de navegador
La caché de navegador es un espacio en disco que el navegador utiliza para almacenar diferentes elementos de un sitio web. Es un espacio privado para cada navegador y cada usuario.
En una segunda visita, al no tener que descargar otra vez todos los elementos de la web, la web cargará mucho más rápido.
Para que el navegador que esta visitando nuestra web almacene algunos datos en su caché tenemos que asegurarnos de que en las respuestas que el servidor da al navegador le indique cuándo y durante cuánto tiempo puede almacenar la respuesta en caché.
Esto se consigue activando el modulo mod_expires de Apache (disponible desde la versión 1.3 de Apache). En .htaccess añadimos el siguiente código:
<IfModule mod_expires.c> <filesmatch “\.(jpg|JPG|gif|GIF|png|PNG|css|js)$”> ExpiresActive on ExpiresDefault “access plus 30 day” </filesmatch> </IfModule>
Si queremos especificarlo en función del tipo de fichero tendríamos que añadir este código:
<IfModule mod_expires.c> ExpiresActive on ExpiresByType image/jpg “access plus 60 days” ExpiresByType image/png “access plus 60 days” ExpiresByType image/gif “access plus 60 days” ExpiresByType image/jpeg “access plus 60 days” ExpiresByType text/css “access plus 1 days” ExpiresByType image/x-icon “access plus 1 month” ExpiresByType application/pdf “access plus 1 month” ExpiresByType audio/x-wav “access plus 1 month” ExpiresByType audio/mpeg “access plus 1 month” ExpiresByType video/mpeg “access plus 1 month” ExpiresByType video/mp4 “access plus 1 month” ExpiresByType video/quicktime “access plus 1 month” ExpiresByType video/x-ms-wmv “access plus 1 month” ExpiresByType application/x-shockwave-flash “access 1 month” ExpiresByType text/javascript “access plus 1 week” ExpiresByType application/x-javascript “access plus 1 week” ExpiresByType application/javascript “access plus 1 week” </IfModule>
«access plus 1 month» -> significa que el documento expira 1 mes después de ser accedido.
Para «access» la fecha es añadido a la fecha en la cual la solicitud es servida. Por ejemplo:
Si tenemos «access plus 2 days 12 hours» y la solicitud fue recibida a las 3:30am, Apache responde con una cache control perdurable hasta las 3:30pm 2 días mas tarde.
Para «modification» la fecha es añadida a la fecha de la última modificación del archivo.
La base «modification» debería usarse solo para archivos que cambian regularmente. Ya que si el tiempo de expiración ha pasado y el fichero no se actualiza, todas las solicitudes siguientes de acceso al archivo resultarán como respuestas pre-expiradas. Esto apenas mejora la cacheabilidad del fichero. Además solo se debería usar «modification» para archivos de disco.
Cuando una respuesta es dinámica (por ejemplo un CGI script), éste no tiene una fecha «Last-modified», y Apache no puede incluirlo en la cabecera Expires.
Controlar los plugins instalados
Cuando hablamos de rendimiento web una de las cosas que suelen aconsejar es reducir el número de plugins instalados y dejar solo los necesarios, pero más que el número creo que es mucho más importante saber para que sirve cada plugin y no repetir funcionalidades. Me he encontrado con webs que tenían instalados más de dos y tres plugins para realizar una misma función.
Además para una misma función un plugin puede ser muy pesado y otro similar puede ser mucho más ligero. Por ejemplo un plugin de seguridad como pueda ser Wordfence te instala nada menos que 25 tablas en la base de datos, sin embargo All In One WP Security por ejemplo te instala solamente 6.
Así que lo que debes hacer es elegir bien los plugins para la función que buscas e intentar no duplicarlos.
Si alguna vez te han recomendado el plugin P3 (Plugin Performance Profiler) yo que tu no me fiaría mucho, ademas de que lleva sin actualizarse más de 2 años no es compatible con PHP 7.
Optimizar base de datos
WordPress almacena en la base de datos mucha información que no siempre es necesaria, por ejemplo las versiones de los artículos, comentarios borrados o de spam, información sobre plugins aunque los hayamos desinstalalo, etc. Un plugin que optimiza la base de datos de tu WordPress es WP-Optimize.
Optimizar las imágenes
Para mejorar la velocidad de carga es muy importante que las imágenes de nuestra web sean lo más ligeras posible. Además de recortarlas también debes comprimirlas. Para ello tenemos varias herramientas:
De escritorio (para Mac): ImageOptim
En la nube: Compressor.io
Plugin para WP: ShortPixel Image Optimizer. Este plugin me encanta, y es el que yo tengo instalado. Entre las cosas que hace y que no hacen otros plugins esta por ejemplo eliminar los datos EXIF. Son datos que se añaden a la información de la imagen, y pueden ser posición GPS, fabricante de la cámara, fecha y hora, tamaño de la lente, etc. También optimiza las imágenes automáticamente al subirlas.
Habilitar la compresión GZIP
Gzip es un formato de compresión que usa un algoritmo de compresión llamado «deflate». Lo que hace es comprimir código fuente principalmente, es decir archivos html, css y js. Se da por hecho que archivos pdf e imágenes ya están comprimidos, así que el algoritmo no los intenta comprimir de nuevo para no hacer más largo el proceso.
Comprime todos estos archivos antes de enviarlos al navegador del usuario que lo solicita, de esta forma se reduce el tiempo de descarga y el consumo de ancho de banda.
Si tienes un hosting en SiteGround podrás encontrar esta opción dentro de tu cPanel, en la parte de Avanzada -> Optimizar el sitio web
También debes añadir el siguiente código a tu fichero .htaccess:
<IfModule mod_deflate.c> SetOutputFilter DEFLATE <IfModule mod_setenvif.c>
Usar un CDN
Una CDN (Content Delivery Networ o Red de Distribución de Contenidos) es una red de servidores que contienen datos para ser servidos a quién los solicita.
Cuando utilizas una CDN lo que estas haciendo, entre otras cosas, es permitir que parte del contenido de tu web se distribuya por estos servidores, de tal forma que cuando un usuario visita tu web, en lugar de enviarle los contenidos desde tu propio servidor se le envíen desde el servidor más cercano fisicamente. Con esto se consigue reducir los tiempos de respuesta al usuario.
Podrás localizarlo en tu cPanel:
Usar un buen plugin de optimización
Existen buenos plugins para optimizar el sitio web, entre ellos W3 Total Cache, WP Fastest Cache y WP Super Cache, pero si tuviera que elegir uno de ellos yo me quedaría con WP Rocket. Para mí el mejor plugin de optimización web. Se trata de un plugin premium, es decir es de pago, pero bastante económico. Puedes ver todas sus características aquí.
Si esta entrada te ha resultado útil no dudes en compartirla para ayudar a otros personas. ¡Nos vemos!