Mejorar la velocidad de carga de tu web ([dt_tooltip title=”WPO”]Web Performance Optimization[/dt_tooltip] en inglés) tiene que ser una de tus prioridades cuando quieras mejorar el SEO de tu página. Una buena experiencia de usuario ([dt_tooltip title=”UX”]User Experience[/dt_tooltip]) comienza por que tus visitantes puedan ver tu página más rápidamente.

Para este artículo vamos a usar datos de un proyecto real, aunque no os diré el proyecto que es por la confidencialidad con nuestro cliente. ¿Empezamos?

La página web de nuestro cliente tiene las siguientes premisas para que mejorásemos el rendimiento de su página web:

[dt_vc_list dividers=”false”]

[/dt_vc_list]

Análisis previo de mejora de velocidad de carga web

Análisis previo de la velocidad de carga de tu web

Si sois de los que nos seguís a través de nuestras publicaciones en el blog, sabréis que siempre que podemos, os recomendamos herramientas gratuitas. Para analizar la velocidad de carga y los posibles problemas que podemos tener en nuestra web, vamos a usar una herramienta gratuita muy útil: GTMetrix.

Su uso es tan fácil como escribir la URL de la página web a analizar en el cuadro de texto que os presenta la página de inicio. Nosotros lo hicimos con nuestro cliente y el resultado del análisis fue el siguiente:

Análisis de la velocidad de carga de una web con GTMetrix

Como podéis apreciar, tanto en Google PageSpeed como en Yahoo! YSlow, la página web de nuestro cliente tenía bastante mala puntuación (score) y llegaba justo a un 50% en los tests de Google para la velocidad de carga de una página web.

El análisis nos reveló las deficiencias de carga que tenía nuestra página web objetivo:

[dt_vc_list dividers=”false”]

  • Habilitar la compresión gzip en el servidor.
  • Optimizar las imágenes.
  • Aprovechar el almacenamiento en caché del navegador.
  • Minificar CSS y JS.

[/dt_vc_list]

También podemos apreciar un parámetro con valor abultado, como es el tamaño de la página, que solucionaremos en el siguiente paso, habilitando la compresión gzip del servidor.

Configuración del servidor de hosting

Configuración del servidor de hosting

Dado que nuestro proveedor de hosting es Piensa Solutions y el plan es el Plan Premium, estudiamos las posibilidades de configuración del servidor Nginx que sirve las páginas web.

No había posibilidad de conectarse al servidor a través de un Panel de Control (tipo Plesk o cPanel) o mediante SSH, con lo que nos pusimos en contacto con Piensa Solutions y nos habilitaron la compresión gzip en el hosting de nuestro cliente.

Solamente con esta opción, hemos conseguido mejorar nuestra velocidad de carga y el tamaño de la página.

Ahora bien, si tenéis un Panel de Control en vuestro hosting, aquí tenéis los enlaces para poder configurar Nginx para habilitar la compresión gzip:

Instalación de un plugin de caché para WordPress

Instalación de un plugin de caché para WordPress

Ya que nuestro servidor está configurado y la compresión gzip habilitada, pensamos que el siguiente paso era instalar un plugin de caché en el WordPress de nuestro cliente.

Como antes os hemos comentado, hay dos buenos plugins de caché gratuitos: WP Super Cache y W3 Total Cache.

 

WP Super Cache

Es el plugin de caché que usamos en instalaciones sencillas de WordPress y el que menos tiempo te tirarás configurando. Activa la caché y ya estarás mejorando la velocidad de carga de tu página web.

La empresa detrás de este plugin es Automattic, los mismos creadores que el CMS WordPress, con lo que sin mucha configuración os podéis imaginar que ambos funcionan muy bien.

 

W3 Total Cache

Para nosotros es el mejor plugin de caché gratuito. Eso sí, hay que tener paciencia para configurarlo, porque requiere tiempo y algo de conocimientos técnicos. Si no te ves capaz de configurarlo, vete a por la opción WP Super Cache.

 

WP Rocket, el plugin cache de pago

Ésta es la opción de pago dentro de los plugins de caché. Últimamente se está poniendo de moda y muchos diseñadores web están instalando WP Rocket en WordPress para sus clientes o para sus propias páginas web.

Si queréis configurar este plugin, aquí os dejo un tutorial de Gerardo García Asensio en su blog Sensación Web sobre cómo configurar WP Rocket en 2017.

 

Nuestra elección y la configuración del plugin de caché

Pese a la facilidad de configuración de WP Super Cache y a ser junto a WordPress, hijos del mismo padre, decidimos instalar y configurar W3 Total Cache, por su cantidad de opciones para poder reducir el tiempo de carga de la página web de nuestro cliente.

En la pantalla “General Settings” de la configuración del plugin, sólo habilitamos 3 de los tipos de caché:

[dt_vc_list dividers=”false”]

  • Page Cache, con la opción “Disk Enhance” seleccionada.
  • OpCode Cache con la opción Zend Opcache, ya que nuestro proveedor de hosting la tenía instalada y configurada.
  • Browser Cache.

[/dt_vc_list]

Page Cache

Ésta es nuestra configuración para la sección Page Cache de W3 Total Cache.

 

Configuración Page Cache del plugin W3 Total Cache

Browser Cache

Y, ésta es nuestra configuración para la sección Browser Cache del plugin W3 Total Cache.

 

Configuración Browser Cache del plugin W3 Total Cache

Resultados después de instalar y configurar W3 Total Cache

La página web de nuestro cliente, después de haber habilitado la compresión gzip en el servidor y de haber instalado y configurado el plugin de caché W3 Total Cache, quedó de la siguiente manera en el análisis de GTMetrix.

 

Análisis GTMetrix tras instalación y configuración del plugin de cache

Optimización de las imágenes

Optimización de las imágenes

Pese a nuestros esfuerzos, todavía no hemos conseguido una buena puntuación en Google PageSpeed y Yahoo! YSlow. Necesitamos optimizar las imágenes para reducir el tamaño de la página web pedida al servidor.

Para ello, usamos dos plugins gratuitos (con versiones limitadas, no completas) para optimizar las imágenes dentro de nuestra página web objetivo: Smush Image Compression and Optimization y Kraken.io Image Optimizer.

 

Smush Image Compression and Optimization

Este plugin ofrece la posibilidad de optimizar hasta 50 imágenes cada vez que se dé el botón de optimizar. Un poco coñazo cuando tenemos una instalación WordPress con muchas imágenes, galerías y demás. Quizás en este caso sería rentable pagar un poco por la versión Pro.

Nosotros teníamos pocas imágenes, así que decidimos usar la versión gratuita, con el siguiente resultado en el análisis de GTMetrix:

 

Analisis de velocidad de carga de una web con GTMetrix

Ya nos íbamos acercando a nuestro objetivo y la velocidad de carga de la web había mejorado mucho, junto con la reducción en el tamaño de la página. Pero no nos quedamos contentos del todo porque las imágenes podían reducirse un poco más, con un algoritmo un poco más agresivo, el que usa el plugin Kraken.io Image Optimizer.

 

Kraken.io Image Optimizer

Nosotros partíamos del hecho de que la mayoría de las imágenes grandes de nuestra página web estaban colocadas de fonde de las cabeceras de página o de fondo del slider de la página de inicio. Así, decidimos optimizar esas imágenes con el plugin de optimización de imágenes de Kraken.io.

El resultado fue el que vemos en este análisis:

Analisis de velocidad de carga de una web con GTMetrix

Posicionamiento web en Madrid para todo tipo de negocios
Recomendaciones para mejorar la velocidad de carga de tu web

Otras recomendaciones para mejorar la velocidad de carga de tu WordPress

Usa PHP 7 en tu hosting web

Si no lo tienes, deberías instalar la última versión de PHP para optimizar mucho más la carga de tu WordPress. A partir de la versión 4.7 del CMS está completamente integrada con PHP 7 y la ganancia en rendimiento es muy notable.

 

Minify CSS, JS y HTML

La minificación de los archivos estáticos de tu web es una manera de enviar menos peticiones al servidor y con menor tamaño de petición. Algunos temas como el de nuestro proyecto cliente, Divi, ya minifica los archivos CSS y JS directamente. Pero, si tu plantilla WordPress no lo hace, prueba con “Minify” de W3 Total Cache o algún plugin del repositorio oficial que funcionan muy bien:

[dt_vc_list dividers=”false”]

[/dt_vc_list]

Usa un CDN para los archivos estáticos de tu web

Usar un Content Delivery Network (CDN), es una de las máximas si tienes un sitio web con muchas imágenes o galerías. Son sistemas de entrega distribuida en Cloud, lo que significa que tus imágenes están replicadas en servidores repartidos por todo el mundo para mejor accesibilidad desde cualquier país.

Algunos CDNs que funcionan muy bien son:

[dt_vc_list dividers=”false”]

[/dt_vc_list]

El CDN recorre todo tu sitio web para recoger tus archivos estáticos: imágenes, vídeos alojados en tu servidor, CSS y JS, y los sirve desde sus servidores, no desde el tuyo. Ahorrarás en consumo de ancho de banda y mejorarás notablemente la carga de tu página web.

 

Elige bien la plantilla de tu WordPress

Cuando elegimos la plantilla de nuestra página web basada en WordPress, sólo vemos que sea bonita y que cumpla con todas nuestras necesidades funcionales. Los proveedores de temas para WP ofrecen muchas plantillas para cada tipo de negocio.

Pero, si los desarrolladores de la plantilla no se han centrado en uno de los puntos más críticos del Diseño Web hoy en día, la velocidad de carga, tendrás que valorar tú si esa plantilla merece la pena el coste posterior en configuración.

Resultados finales de la mejora de velocidad de carga de la página web

Resultados finales

A la vista está que con 4 cosas podemos mejorar mucho la velocidad de carga de nuestra página web. Lo que técnicamente llamamos Web Performance Optimization o WPO.

Aunque la nota está cercana al 100%, es casi imposible conseguirlo y en algún momento tienes que parar. Nosotros nos hemos conformado con pasar de una puntuación E (50%) a una A (92%).

Anímate a probar estos consejos y si queréis compartir los resultados con nosotros, estaremos encantados de leerlo en los comentarios.

4 Comentarios

  1. Hola
    Tengo una pagina web de noticias. Con un plugin de caché las noticias no se actualizam automaticamente. Tengo de pinchar CTRL+F5 para mirar. Que debo hacer?

    • Buenas Joao,
      ¿qué plugin de caché estás usando? Nosotros en masmoto.net estamos usando el plugin W3 Total Cache y va de lujo con el volumen de publicaciones diarias que tenemos.

      Un saludo.

      • Buenas
        Ahora no tengo ningún plugin. Pero ya tuve el W3. Después dejé sólo en el código en “.htacess”. Pero acabo de borrar a todos. Sólo así el sitio se actualiza sin necesidad de forzar la actualización de contenidos.

Dejar respuesta

Please enter your comment!
Please enter your name here