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:
- CMS WordPress.
- Plantilla Premium Divi.
- Hosting Premium de Piensa Solutions.
- Sin plugin de caché.
[/dt_vc_list]
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:
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:
- 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.
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:
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.
¿De qué hablamos en este artículo?
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é:
- 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][vc_custom_heading text=»Page Cache» font_container=»tag:h4|text_align:left» use_theme_fonts=»yes»]
Ésta es nuestra configuración para la sección Page Cache de W3 Total Cache.
Y, ésta es nuestra configuración para la sección Browser Cache del plugin 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.
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:
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:
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]
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]
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.
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.
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.
Si quieres envíame un correo a info@dewebloping.com y te miramos cómo puedes hacerlo. Es posible hacerlo con un plugin de caché.
Un saludo y buen fin de semana.