Desde hace un tiempo hay un concepto que va tomando protagonismo e importancia en la administración y gestión de sitios web, es el vinculado al WPO. Sus siglas en inglés hacen referencia a la optimización de la performance de nuestro sitio (web performance optimization). El mismo está directamente relacionado con un parámetro en concreto de nuestras páginas: su velocidad de carga.
Quizá algunos años atrás no se tenía una noción real de la importancia de que nuestras páginas cargasen en un corto tiempo, pero definitivamente en la actualidad es sabido que este parámetro debe estudiarse e intentar reducirse de manera continua y sostenida.
No se trata sólo de algo que se ve bien, el tener páginas que carguen rápido, sino que hay verdaderos factores de peso para trabajar incansablemente en pro de ello. Aquí comenzaré mostrándote los 3 principales motivos:
- Google anunció recientemente que la velocidad de carga es un parámetro que considera al momento de elaborar sus listas de resultados. Como consecuencia, esto afecta directamente nuestro posicionamiento en los motores de búsqueda.
- Se ha estudiado y demostrado que el público tiene cada vez menos paciencia y tolerancia a las esperas. Cada segundo que demora la carga de una página va disminuyendo exponencialmente el número de visitas, las conversiones de la web, la confianza del público en el sitio, las ventas, la experiencia de navegación en su totalidad. Se estima que transcurridos 10 segundos, el número de personas que abandonan la página comienza a ser mayor a quienes se mantienen esperando. Luego de 20 segundos, es difícil que alguien se mantenga esperando por tus contenidos sin irse a otro sitio.
- Una velocidad de carga menor también redunda en un ahorro de recursos, ya que las peticiones al servidor se resuelven rápidamente, quedando liberado y listo, sin utilizarse, esperando por más solicitudes.
Herramientas para medir la velocidad de carga de WordPress
Si ahora estás convencido de lo necesario de mejorar el tiempo de carga de tu página web, voy a mostrarte algunas maneras de hacerlo realidad.
Antes voy a presentarte aquí algunas herramientas que puedo recomendarte para saber si tu sitio está siendo de carga lenta o lo suficientemente rápido para lo que se estima como óptimo. Un análisis para saber dónde estamos parados.
Pingdom
Para comenzar con este servicio vamos al sitio web de Pingdom Tools, donde encontraremos un campo para completar con nuestra dirección URL. Desplegando las opciones del test nos encontramos con la posibilidad de hacer públicos los resultados y el lugar desde dónde realizaremos el test.
Pingdom cuenta con varios centros distribuidos en distintas partes del planeta. Eso nos ayudará a realizar el análisis según la procedencia de nuestras visitas. Una vez seleccionado esto, ingresamos nuestra URL y damos al botón para comenzar el test.
Analizando los resultados
Una vez finalizado el test podremos ver un cuadro de resultados. Junto a una vista en miniatura de nuestro sitio tenemos algunas estadísticas.
- Tenemos un grado de performance, expresado sobre una base de 100, como medida del comportamiento global del sitio.
- Los requisitos al sitio que realizó el test.
- El tiempo de carga, que es probablemente el dato que más importante sea para nosotros. Es muy recomendable que esté por debajo de los 2 segundos (una medida que abarca a los usuarios y los motores de búsqueda).
- El espacio que ocupa la página web (cuanto menos mejor).
Otros datos y estrategias a seguir
Más abajo del cuadro de resultados se nos presenta una descripción más detallada de la carga de cada uno de los apartados del sitio. Moviendo el puntero sobre cada uno de ellos podremos ver el tiempo que tarda la carga de cada una de sus partes: DNS, conexión entre navegador y servidor, envíos del navegador al servidor, esperas del servidor, recibos del servidor.
Dentro de estos parámetros, el de espera del navegador por datos del servidor, es uno de los más importantes. Tiene un impacto directo sobre los tiempos de carga. Una medida para disminuirlo es contar con un mejor servicio de hosting, menos saturado.
También podremos ver el tiempo de carga de cada uno de nuestros componentes, estudiando la posibilidad de sustituirlos o modificarlos para que éste se reduzca. Quizá tengamos algunos que no son realmente importantes pero que sí tienen un impacto importante sobre la carga. Quizá podemos cambiar el formato de algunas imágenes o logos. Son muchas las pruebas que podemos intentar para mejorar nuestra performance.
Google PageSpeed
Google PageSpeed es un conjunto de herramientas para optimizar nuestras cargas. Por supuesto que viniendo del propio Google, es algo que vale la pena tener en cuenta y conocer sus fundamentos de funcionamiento. Las mismas están agrupadas en dos bloques principales, según su cometido: análisis y optimización.
Análisis
Este grupo incluye 4 herramientas:
- Un analizador en línea de sitios web – se trata de una herramienta muy simple y rápida de usar que en pocos segundos nos muestra varios resultados, tanto para la versión móvil del sitio como para la de ordenador. Nos ofrece un puntaje de la velocidad, experiencia de usuario y sugerencias. Se incluyen factores que deberíamos considerar mejorar, otras que definitivamente debemos mejorar y las reglas de Google que estamos cumpliendo. Además, para cada punto, nos muestra una pequeña guía de cómo realizarlo.
- Extensión para Google Chrome – permite la utilización de las herramientas de Chrome para desarrolladores. Esta nos permite realizar un análisis similar al anterior, de la página que estamos visualizando, desde el propio navegador. También ordena por jerarquía los asuntos encontrados e incluye una guía de buenas prácticas para trabajar sobre ellos.
- API de conocimientos – aporta toda la información sobre cómo utilizar la interfaz de usuario de la suite de herramientas PageSpeed, incluyendo el registro de usuario en Google, la clave de la API, etc.
- Reglas de PageSpeed – son un conjunto de reglas de velocidad y usabilidad que ofrece Google como guía para optimizar nuestros sitios y también que tendrá en cuenta para ordenar sus resultados de búsqueda. Entre ellas figuran algunas como: evitar redireccionamientos a páginas de destino, optimizar imágenes, usar scripts asíncronos, configurar las ventanas gráficas, utilizar tamaños de fuente legibles, etc.
Optimización
Este grupo contiene dos ítems únicamente:
- Instalación de PageSpeed en servidor – para utilizar las buenas prácticas de optimización a nivel de servidor web y sus componentes (CSS, JavaScript, etc.), sin tener que modificar nuestros contenidos.
- PageSpeed SDK – son las bibliotecas de la suite de herramientas, su instalación y uso.
GTmetrix
Es una herramienta online para realizar un análisis de tu web, similar a lo que es la herramienta del Google PageSpeed, de hecho utiliza ésta misma junto con otra llamada Yahoo! YSlow. Simplemente introduciendo la dirección de la web en el sitio de GTmetrix se realiza un estudio desde distintas regiones alrededor del mundo, que nos devuelve una serie de resultados. Cuenta con un apartado especial para optimizar las velocidades de WordPress en su guía de optimización de WP.
En esta se incluyen recomendaciones generales, así como también algunas consideraciones a tener en cuenta al utilizar plugins como el W3 Total Cache para optimizar las velocidad.
WebPageTest
Lo que WebPageTest hace es un simulacro de acceso a tu web desde diferentes localizaciones geográficas, con conexión y navegadores reales, para medir una serie de parámetros. Entre estos podemos encontrar cosas como:
- La velocidad de carga
- Velocidad de acceso
- Velocidad de respuesta
El mejorar parámetros como estos nos traerá básicamente dos beneficios principales: por un lado mejorará nuestro posicionamiento en los motores de búsqueda como Google, por otra parte tendremos usuarios con mejor experiencia de navegación y más satisfechos.
El sitio web del WebPageTest
En su página de inicio el WebPageTest nos presenta un simple formulario con algunos campos a completar y tres pestañas. La primera de ellas corresponde al análisis, la segunda a una comparación entre sitios y la última está relacionada con el hosting.
Veamos la primera de estas opciones. Para realizar el análisis de un sitio debemos seguir unos simples pasos:
Comenzamos ingresando la URL del sitio web a analizar, por ejemplo https://www.nytimes.com/.
Seleccionamos una ubicación geográfica desde donde queremos realizar el análisis, es decir, desde donde simularemos que ingresa un usuario. En el caso de España, el más cercano es París.
Luego elegimos un navegador web para realizar la prueba, las opciones son 2: Internet Explorer y Chrome.
También hay otras opciones avanzadas donde se puede configurar aspectos como:
- El tipo de conexión.
- Número de pruebas a realizar.
- Utilizar etiquetas.
- Desactivar JavaScript.
- Los certificados SSL.
Una vez lista la configuración, damos al botón de comenzar el test.
Interpretando los informes del análisis
Luego de realizado el simulacro, WebPageTest nos presentará una serie de resultados. Veremos muchos datos en la pantalla, los cuales podemos ajustar de acuerdo a la configuración realizada anteriormente. Entre ellos se destaca el "Tiempo de carga", tanto del primer intento como de los otros que hayamos configurado.
Tenemos también una interesante gráfica tipo pastel, donde se muestran los tiempos de carga de diferentes componentes, como ser el HTML, archivos JavaScript, CSS, imágenes, etc. Además de la vista en forma de sumario, tenemos otro apartado con todos los detalles, algo realmente muy completo y con una gran cantidad de datos.
Algunas cosas que podemos considerar son los distintos tiempos que aparecen para cada tipo de contenido distinto. Identificando lo que más tarda, podremos trabajar en eso. La clave está en estudiar en detalle la información buscando en nuestro caso qué puede mejorarse.
Aspectos básicos para mejorar el rendimiento de WordPress
Aquí te voy a presentar diferentes aspectos que debes tener en cuenta para mejorar la velocidad de carga de tu web, así que vamos allá.
Hosting WordPress
Como veníamos hablando, la primera condicionante en cuanto a la velocidad de carga aparece en el propio servidor, donde los usuarios acuden en busca de nuestras páginas. En otros artículos vimos la gran variedad de planes de servicios de alojamiento que hay, con un amplio rango de precios, pero también prestaciones y calidad. Muchas cosas entran en juego a nivel del plan de hosting que determinarán la velocidad de nuestro sitio.
Mi recomendación en cuanto a los proveedores, para un sitio WordPress, es SiteGround. Este proveedor presenta en mi opinión numerosas ventajas que hacen de su producto algo realmente de buena calidad, confiable y seguro. Además se destaca por ofrecer un gran servicio de soporte, algo no muy común entre proveedores. También cuenta con protección anti-hackeo y respaldos automáticos.
Pero si vamos a hablar específicamente de velocidad, es bueno saber que todos los planes de hosting compartido de SiteGround cuentan con servidores con discos SSD de alta velocidad, lo que definitivamente acelerará sus respuestas a las peticiones. Además su configuración específica para WordPress agiliza mucho los envíos y recepción de paquetes, junto con su transferencia mensual no medida.
Temas WordPress
Otro de los grandes condicionantes de la velocidad son los temas que utilicemos en nuestros sitios WordPress. Hemos hablado en otros artículos acerca de ellos y su importancia. Piensa que el tema es la interfaz entre tu sitio, todas sus prestaciones y funciones, y el usuario que quiere interactuar con él. No todos los temas son iguales y por ello el procesamiento de todas las acciones será también diferente, lo que se traduce en tiempo.
Te recomiendo utilizar el tema Astra, destaca por su optimización y fácil personalización. Haz clic aquí para ver todos los diseños que tiene disponibles. Astra posee un código bien estructurado y ordenado, esto provoca que no haya demoras y la carga se realice de forma más fluida.
Este tema es el que utilizo en mi web y el que utilizo en mi servicio "Tu Web en 24 horas".
El plugin P3 de WordPress, sus más y sus menos
Sabemos que los plugins son componentes que enriquecen nuestro sitio, pudiendo agregar funcionalidades y haciendo tareas por nosotros para mejorar la performance. Sin embargo, podemos caer en el caso de tener demasiados o algunos que no están funcionando como esperamos. Lo que es peor, podríamos llegar al punto en que estamos enlenteciendo nuestro sitio web en lugar de favorecerlo. En estos casos puede servirnos el plugin que presento aquí, el P3, para el que estudiaremos sus ventajas y desventajas.
Descripción general e instalación del P3
Básicamente el P3 es un plugin que mide cómo los otros plugins afectan el tiempo de carga de nuestro sitio. Para instalarlo vamos al menú "Plugins", "Añadir nuevo" e introducimos su nombre en el cuadro de búsqueda. Comenzamos con la misma y al encontrarlo, instalamos y activamos.
Utilizando el P3
Una vez instalado, dentro del menú de plugins instalados, podremos utilizar el P3 para realizar un escaneo automático. Esto realizará el mencionado estudio acerca de cómo los plugins afectan el rendimiento del sitio. Veremos un cuadro con una barra de progreso que nos indica el porcentaje completo del estudio.
Consideraciones del plugin acerca de sus resultados
Una primera característica que debemos considerar es que la utilización de este plugin en sitios que se encuentren alojados en servidores compartidos, puede arrojar resultados muy alejados de la realidad. Esto se debe a que posiblemente no restrinja su análisis a nuestro sitio, sino a todos los alojados junto a él.
Si el servidor se encuentra realizando diversos procesos al momento del análisis, el P3 no podrá diferenciarlos de nuestro sitio y sus resultados también se verán desviados de la realidad.
Es también susceptible al tráfico, algo aleatorio y que no es regular en el tiempo. Por ello, dependiendo de cuándo realicemos el estudio y el tráfico que exista en ese momento, serán los resultados que nos dará el P3.
Por lo tanto, ¿qué podemos hacer con él? Mi sugerencia es la siguiente: realiza varios estudios, a diferentes momentos y en distintas circunstancias de tu sitio web. Seguramente obtengas resultados muy distantes, pero encontrando un punto medio entre ellos podrás tener una aproximación de la realidad.
Entendiendo y aplicando los resultados del P3
Cuando el escaneo se completa hacemos clic en el botón de "Ver resultados", veremos varios datos y estadísticas. Una de ellas es una gráfica tipo pastel donde se muestra el porcentaje de tiempo que cada plugin se encuentra ejecutándose.
Esto puede servirnos, por ejemplo, para comparar plugins. Si tenemos 2 de ellos que realizan la misma tarea, el P3 nos puede ayudar a decidirnos por el que consume menos recursos.
También podemos ver qué tareas están consumiendo la mayor parte de los recursos y omitir aquellas que no sean tan importantes, para así aligerar la carga del sitio.
Recordemos que los datos no deben tomarse de forma literal, en cuanto a sus valores por separado, sino utilizarlos para comparar la utilización de recursos entre varios plugins instalados y las tareas que ellos hacen.
Pasos a seguir para mejorar la velocidad de WordPress siendo principiante
Luego de haber visto los conceptos y herramientas disponibles, vamos a ponernos manos a la obra y ver, concretamente, cómo proceder para mejorar la velocidad de tu sitio WordPress. Si ves que lo que te explico es complejo para ti o prefieres delegar esta tarea, no dudes en contactar conmigo y te daré un presupuesto a medida.
Hacer una copia de seguridad completa (archivos y base de datos) del sitio web
Como sabrás, más allá de WordPress en particular, el realizar respaldos o copias de seguridad es algo muy importante en todo lo informático. Si bien algunos servicios de hosting, como es el que te recomendé de SiteGround, realizan respaldos automáticos periódicos, puede que a veces quieras hacer uno por ti mismo. Antes de meter mano para optimizar tu web, vamos a hacer uno en caso de que algo nos salga mal.
Para eso voy a hablarte de un plugin, el Updraft, entre los muchos que existen para esta tarea. Este plugin me parece interesante principalmente por dos motivos: por un lado realiza una copia completa de tu WordPress y por otro te permite almacenar tus respaldos en servicios en la nube, como Dropbox.
Es muy importante que tu respaldo sea completo, no sólo los archivos del sitio sino también la base de datos. Todo debe quedar en la copia de seguridad. Si bien esto te ocupará más espacio, es algo que definitivamente te recomiendo.
Es interesante la opción de almacenar el respaldo en Dropbox para no ocupar espacio en tu hosting.
El plugin Updraft es muy sencillo de configurar, simplemente das un nombre a la copia, indicas el destino (puede ser en la nube), activar las opciones que vamos a incluir en el respaldo (como te decía, recomiendo activarlas todas para tener una copia completa) y el formato de compresión del archivo (por defecto viene Tar GZip).
Si quieres hacer copias recurrentes también se puede configurar e incluso la cantidad de copias que deseas guardar para no ocupar demasiado espacio. Realmente un plugin sencillo de usar y muy útil.
Una vez que tengas tu copia de seguridad lista, continúa con el siguiente paso.
Comprobar el rendimiento actual del sitio web
Para esto te recomiendo que utilices las herramientas que te mencioné anteriormente (Pingdom, Google PageSpeed, GTmetrix y WebPageTest).
Limpiar el SPAM existente
Instala y configura el plugin Akismet, así para evitar en gran parte los comentarios tipo spam que recargan las páginas.
Haz una limpieza de temas y plugins
Borra todos los temas y plugins que no sean imprescindibles, que no estés utilizando y no pienses utilizar. Todos ellos ocupan espacio y consumen recursos en tu web.
Actualiza tu sitio web
Debes actualizar el núcleo de WordPress, temas y plugins. En este paso es recomendable estudiar las compatibilidades entre ellos para las nuevas versiones a instalar.
Medir el rendimiento de los plugins instalados
Esto lo puedes hacer con el plugin P3, es muy sencillo de utilizar, realiza un listado de todos los plugins que tienes instalados en tu web, ordenándolos según los recursos que cada uno utiliza y su impacto en el tiempo de carga. Mediante esta información podrías remplazar algunos plugins que recargan significativamente tu web por otros, que cumplan la misma función, pero no ralenticen tanto la velocidad de carga.
Optimizar las imágenes
Esto significa tomarnos el trabajo antes de subirlas de reducir su peso y tamaño. Esto puede hacerse con varios programas y analizando diferentes formatos de archivo de imágenes. No subas imágenes con calidad o tamaño superior al que realmente necesitas. Una vez que estén optimizadas puedes subirlas. Esto reducirá significativamente el espacio que ocupa y los tiempos de carga.
Te dejo algunas herramientas para comprimir tus imágenes:
Optimizar la base de datos
Para esta tarea hay varios plugins, pero te recomiendo en particular el WP-Optimize.
Utilizar un plugin de creación de caché
Esto reducirá significativamente los tiempos de carga, alivianando a la vez la carga del servidor. Personalmente te recomiendo el plugin W3 Total Cache, de los más populares y efectivos.
Otra forma de optimizar tu web es usar un servicio de CDN (Red de Entrega de Contenidos)
Básicamente lo que hace es multiplicar los servidores a donde los usuarios pueden ir por tus contenidos. Se copian los mismos a diferentes puntos que actúan como servidores, por lo que no todos los usuarios deben acceder al mismo cada vez que hagan una petición, lo que acelera el proceso y descongestiona los cuellos de botella. Te recomiendo utilizar Cloudflare.
Como ves hay muchas áreas de mejora y esto es sólo el principio, para algunas webs con esto es suficiente y para otras hay que realizar una optimización más personalizada. Puedes contactar conmigo si quieres que me encargue de mejorar la velocidad de carga de tu web, para eso te recomiendo mi servicio de mantenimiento web, ya que por sólo 50€ al mes iré mejorando la velocidad de carga dentro de lo posible.
