Plugin Perfmatters para optimización de rendimiento Wordpress
Perfmatters es un plugin de rendimiento web que, sin ser un plugin de caché, nos permite mejorar la carga al optimizar recursos como CSS o Javascript, entre otros. Personalmente, me gusta mucho porque es muy sencillo de usar y no necesitas grandes conocimientos para mejorar el WPO de tu web.
¿Qué es Perfmatters?
Perfmatters es un plugin de rendimiento web para WordPress diseñado para optimizar la velocidad de tu sitio web (WPO). Con él, tenemos el control sobre el CSS, Javascripts, imágenes o base de datos, para aplicar mejoras que afecten positivamente en los tiempos de carga de nuestra web.
Lo que hace distinto a este plugin es que podemos realizar optimizaciones a nivel global, como retrasar la ejecución de scripts, o a nivel granular, es decir, deshabilitar la funcionalidad de un plugin en una URL en concreto.
¿Sustituye Perfmatters a un plugin de caché?
No, Perfmatters no sustituye a un plugin de caché. Aunque ambos tipos de plugins se centran en mejorar el rendimiento del sitio web, cada uno lo hace de manera diferente y complementaria:
Un plugin de caché almacena versiones estáticas de las páginas de tu sitio web para que se carguen más rápidamente para los visitantes. Esto reduce el tiempo y los recursos necesarios para generar una página cada vez que un usuario la solicita.
En cambio, Perfmatters se centra en la optimización del rendimiento mediante la reducción de las solicitudes HTTP, la desactivación de plugins y scripts innecesarios en determinadas páginas, la optimización de la base de datos, y la eliminación de código redundante, entre otros.
Características principales de Perfmatters
- Optimización de la velocidad de carga: Perfmatters incrementa la velocidad del sitio al reducir las solicitudes HTTP, desactivar plugins no necesarios, eliminar código redundante y optimizar la base de datos Wordpress.
- Interfaz sencilla y minimalista: su panel de control es muy fácil de usar con interruptores de activación/desactivación que no requieren conocimientos técnicos avanzados.
- Código ligero y sin bloatware: obviamente el plugin tiene un código limpio y ligero, sin JavaScript en el frontend, para no afectar la velocidad de carga (faltaría más).
- Script Manager: la funcionalidad de Script Manager nos permite hacer configuraciones a nivel granular, es decir, página a página.
- Soporte directo de los desarrolladores: Ofrece soporte directamente de los desarrolladores del plugin, quienes tienen más de 20 años de experiencia en WordPress.
- Actualizaciones constantes: Perfmatters se actualiza frecuentemente para introducir nuevas características y mejorar las existentes, lo cual es vital ya que es te mundo está en constante cambio.
- Gran Compatibilidad: como te he he comentado antes, este plugin es totalmente compatible con otros, como WP Rocket.
Cómo configurar Perfmatters
El primer paso para empezar a usar este plugin de rendimiento web es comprarlo y conseguir la licencia.
Tras ello, sigue los siguientes pasos:
- Descargar el zip de la página oficial.
- Acede a tu panel de Wordprees y dirígete a plugins > Añadir nuevo plugin > subir plugin.
- Arrastra el archivo zip.
- Haz clic en Instalar ahora.
- Tras ello actívalo.
Para poder usar este plugin debes ir a Ajustes > Perfmatters. Como ves en la imagen de abajo, este panel está compuesto de un menú lateral izquierdo, con las tipologías de elementos a optimizar y la ventana derecha con las opciones específicas.
Vamos a ver cada una de ellas:
General
Este módulo nos permite implementar mejoras a golpe de clic, activando o desactivando cada una de las opciones.
Por ejemplo, en una web de tipo directorio con mapas no actives la opción de deshabilitar Google Maps.
| Función | Marcado/Desmarcado | Explicación |
|---|---|---|
| Disable Emojis | < Marcado > | Si no los usas, desactívalo para reducir las peticiones al servidor. |
| Disable Dashicons | < Marcado > | Éstos son los íconos de la interfaz de usuario de WordPress, en el frontend del sitio para reducir las solicitudes HTTP. |
| Disable Embeds | < Marcado > | Si no embebes contenido como videos de Youtube, audios o PDFs, desactívalo. |
| Disable XML-RPC | < Marcado > | Esta función se usa para conectar aplicaciones externas al sitio, pero también puede ser un vector común de ataques si no se utiliza activamente. |
| Remove jQuery Migrate | < Marcado > | Esto elimina el script jQuery Migrate, que se usa para garantizar la compatibilidad de plugins y temas con versiones anteriores de jQuery. |
| Hide WP Version | < Marcado > | Está bien desactivarlo para proteger tu sitio de vulnerabilidades conocidas. |
| Remove wlwmanifest Link | < Marcado > | Es un simple enlace que puedes quitar para reducir el código innecesario. |
| Remove RSD Link | < Marcado > | Es un simple enlace que puedes quitar para reducir el código innecesario. |
| Remove Shortlink | < Marcado > | Está bien para eliminar los enlaces cortos que WordPress genera automáticamente. |
| Disable RSS Feeds | < Marcado > | Si no usas feeds RSS, desactivalo para evitar que te scrapeen el contenido. |
| Remove RSS Feed Links | < Marcado > | Elimina los enlaces a los feeds RSS de tu sitio. |
| Disable Self Pingbacks | < Marcado > | Esto se genera al enlazar a artículo de nuestra web, al desactivarlo reducimos las peticiones innecesarias. |
| Disable REST API | < Marcado (por defecto) > | Ante la duda, déjalo por defecto (activado) ya que muchos plugins importantes la utilizan. |
| Remove REST API Links | < Marcado > | Si decides desactivar la REST API, también deberías eliminar sus enlaces. |
| Disable Google Maps | < Marcado > | Si no utilizas mapas en tu sitio, desactívalo. |
| Disable Password Strength Meter | < Desmarcado > | Esto puede mejorar el rendimiento al evitar scripts adicionales durante la creación de contraseñas. |
| Eliminar URLs de Comentarios | < Marcado > | para evitar que dejen enlaces en los comentarios. |
| Add Blank Favicon | < Desmarcado > | te quita el favicon estropeando el branding. |
| Remove Global Styles | < Desmarcado > | no lo actives salvo que estés muy seguro ya que elimina los estulo globales inline (CSS y SVG) |
| Controlar el Heartbeat de WordPress | < Marcado (por defecto) > | te permite activar o desactivar el Heartbeat. |
| Heartbeat Frecuency | < 60 segundos > | lo máximo para reducir el consumo de recursos. |
| Limitar Revisiones de Entradas | < 30 > | límite de revisiones creadas para una entrada. |
| Intervalo de Autoguardado | < 30 minutos > | Ajustar este intervalo puede reducir la carga en tu servidor. |
| Cambiar la URL de Login | < Desmarcado > | permite personalizar la URL de acceso a tu administración de WordPress para mayor seguridad. |
Assets
Este módulo nos permite activar el Script manager, optimizar el Javascript y CSS de nuestra web además de añadir código personalizado.
Script Manager
Actívalo ya que con esta herramienta vamos a poder optimizar el rendimiento de web, página a página, sobre la carga de scripts y estilos.
Javascript
- Defer Javascript: si lo activamos retrasas la ejecución de los scripts JavaScript (principalmente los externos) hasta que todo el contenido HTML ha sido completamente cargado. Esto permite que el contenido visible de la página se muestre más rápidamente al usuario, mejorando la experiencia de navegación, ya que los scripts se ejecutan después.
- Delay JavaScript: si lo activamos retrasamos la ejecución de los scripts JavaScript hasta que no haya ocurrido un evento específico, como que la página haya sido completamente cargada o que el usuario haya interactuado con la página.
- Delay Behavior: para elegir si aplazar todos los scripts o lo que tu elijas.
- Delayed Scripts: espacio para incluir los scripts a aplazar.
- Delay Timeout: tiempo para que se ejecuten los scripts en caso de que el usuario no haya realizado la acción.
En mi caso, yo uso la función de Delay y retraso los scripts de Google Tag Manager, Google Analytics, Google Maps, el Facebook Pixel y Google AdSense
/gtm.js
/gtag/js
gtag(
/gtm-
/gtm.
maps.googleapis.com
maps.google.com
adsbygoogle.js
fbevents.jsCSS
Esta función permite optimizar las hojas de estilo en cascada (CSS) en tu sitio web WordPress, minimizando y cambiando archivos CSS, para reducir el número total de solicitudes HTTP y el tamaño de los archivos transferidos durante la carga de una página.
Así mismo, ofrece la opción de posponer la carga de CSS no crítico, es decir, cargar estilos importantes primero y demorar aquellos que no son esenciales para la visualización inicial de la página. Esto mejora significativamente los tiempos de carga percibidos por los usuarios, optimizando la experiencia del usuario y potencialmente mejorando la puntuación de tu sitio en herramientas de medición de rendimiento como Google PageSpeed Insights.
Code
Este espacio está muy bien para añadir aquellos códigos personalizados. Si bien existen temas de Wordpress como ASAP Theme que ya lo incluyen de manera nativa, puede ser que el tuyo no y ahí viene muy bien.
Puedes usarlo para incluir:
- El ID de seguimiento de Google Tag manager.
- El código para instalar Google Analytics en WordPress.
- El código HTML para verificar Google Search Console.
- El código de Adsense al instalarlo en WordPress.
Preloading
El preloading en Perfmatters es una característica que nos permite mejorar la carga inicial y la percepción de velocidad de un sitio web al precargar ciertos recursos que se consideran críticos.
- Preload: Esta opción permite especificar qué recursos (como CSS, JavaScript o fuentes) deben cargarse prioritariamente en el navegador antes que otros contenidos. Esto asegura que los archivos esenciales se carguen rápidamente, mejorando el tiempo hasta el primer renderizado útil (First Meaningful Paint).
- Preconnect: Permite al navegador configurar conexiones anticipadas antes de que se soliciten los recursos. Esto incluye la resolución de DNS, la negociación de TLS y la creación de conexiones TCP, reduciendo la latencia cuando se solicitan esos recursos.
- Prefetch: Esta técnica se utiliza para cargar recursos que se utilizarán en la próxima página (que el usuario podría visitar), aprovechando el tiempo en que el navegador está inactivo. Es efectiva para mejorar la experiencia de usuario en navegaciones por múltiples páginas dentro de un mismo sitio.
- DNS-Prefetch: Similar a Preconnect, pero más limitado, esta opción facilita la resolución de DNS de dominios externos antes de que se soliciten los recursos de esos dominios. Es útil para acelerar conexiones a dominios de terceros que requieren múltiples llamadas, como redes de anuncios o widgets sociales.
Lazyloading
El lazy loading en es una técnica de optimización que mejora significativamente los tiempos de carga y el rendimiento general de un sitio web al retrasar la carga de ciertos elementos hasta que realmente son necesarios.
En Perfmatters, las opciones de lazy loading incluyen:
- Imágenes: Al activar el lazy loading para imágenes, el navegador carga las imágenes visibles en la pantalla y retrasa la carga de otras imágenes hasta que el usuario se desplaza y estas entran en el campo de visión. Esto reduce la cantidad de datos cargados inicialmente, acelerando los tiempos de carga de la página.
- Iframes y videos: Similar a las imágenes, los iframes y los videos se pueden cargar de manera perezosa. Esto es particularmente útil para contenido incrustado como videos de YouTube o mapas de Google, que son notoriamente pesados y pueden ralentizar significativamente la carga de la página.
- Miniaturas de vista previa de YouTube: Esta función reemplaza los iframes de videos de YouTube con una miniatura de imagen estática que solo carga el video cuando el usuario interactúa con la miniatura. Esta técnica reduce considerablemente la carga inicial, ya que los videos solo se descargan cuando es probable que se vean.
- Monitorización del DOM: Perfmatters también puede monitorear cambios en el DOM (Modelo de Objeto del Documento) para aplicar lazy loading a elementos que se agregan dinámicamente a la página, asegurando que el rendimiento no se degrade con el tiempo debido a modificaciones en el contenido de la página.
Fonts
Este módulo permite optimizar la carga y el uso de fuentes web (tipografías).
- Host Local Fonts: esta opción permite alojar localmente las fuentes utilizadas en el sitio. Al almacenar las fuentes directamente en el servidor web del sitio en lugar de cargarlas desde fuentes externas como Google Fonts, se pueden reducir las solicitudes DNS y los tiempos de espera, acelerando la carga de las páginas.
- Add Font Display Swap: esta función agrega la propiedad CSS
font-display: swap;a las declaraciones de fuentes en tu sitio. Esto instruye al navegador para que utilice una fuente de reserva y muestre el texto inmediatamente mientras la fuente principal se está cargando, lo que evita el bloqueo visual causado por el retraso en la carga de las fuentes.
- Disable Google Fonts: esta opción elimina cualquier llamada a Google Fonts del sitio, eliminando solicitudes externas y posibles demoras asociadas con la carga de estas fuentes desde servidores externos.
CDN
La función de CDN (Content Delivery Network) nos permite integrar un servicio de CDN con su sitio WordPress, como Cloudflare, para mejorar la velocidad de carga y la disponibilidad global del contenido.
Las funciones a optimizar son:
- Enable CDN Rewrite: activa la función.
- CDN URL: espacio para incluir la URL del CDN.
- Included Directories: espacio para incluir los directorios incluidos en el CDN.
- CDN Exclusions: espacio para excluir elementos del CDN.
Analytics
La función de Analytics en Perfmatters facilita la integración de Google Analytics con tu sitio web, pero con un enfoque en la optimización del rendimiento, ya que Perfmatters aloja localmente el script de Google Analytics para reducir peticiones externas.
- Enable Local Analytics: activa Local Analytics.
- Tracking ID: espacio reservado para indicar el ID de Analytics.
- Tracking Code Position: para indicar si insertas el código en el header o footer (escoge header).
- Script Type: escoge el tipo:
- Google Analytics 4 (gtagv4.js): Este es el script estándar de Google Analytics con todas las funciones incluidas. Es el más completo y pesa 51.5 KB. Es la opción predeterminada y se aloja localmente, lo que facilita su caché tanto en el navegador como en tu CDN.
- Google Analytics 4 Minimal (analytics-minimal-v4.js): Este es un script optimizado y más pequeño, con un tamaño de solo 2.2 KB. Ofrece funcionalidades básicas de seguimiento como vistas de página, usuarios, ubicaciones, dispositivos, fuentes de tráfico y tiempo real. Es una opción rápida y eficiente si no necesitas datos muy detallados de Google Analytics
- Track Logged In Admins: no te aconsejo que lo actives ya que es para trackear lo que hacen los administradores de la web y ensucia tus métricas.
Yo no lo uso ya que lo integro a través de Google Tag Manager, pero si tu no usas GTM es una buena opción para incluirlo sin que afecte en los tiempos de carga.
Database
Permatters te permite limpiar y optimizar la base de datos de WordPress, eliminando elementos como artículos borrados, revisiones, auto salvados otro comentarios, entre otros.
Para ello:
- Ejecuta el escáner.
- Marca las opciones a optimizar.
- Guarda los cambios.
- Optimiza el sitio.
Así mismo, puedes optimizar las optimizaciones para que se hagan de manera periódica.
Los elementos que puedes eliminar son:
- Post Revisions: eliminar revisiones de entradas y páginas.
- Post Auto-Drafts: eliminar borradores automáticos.
- Trashed Posts: eliminar revisiones de entradas y páginas de la papelera permanentemente.
- Spam Comments: eliminar comentarios indicados como spam.
- Trashed Comments: eliminar comentarios de la papelera permanentemente.
- Expired Transients: eliminar datos temporales de la base de datos que ya no sirven.
- All Transients: eliminar todos los datos temporales.
- Tables: optimizar las tablas de la base de datos.
Plugin
En esta sección podremos realizar acciones interesantes, como exportar la configuración realizada para llevarla a otras webs:
- Clean Uninstall: si está activado, cuando desinstales Perfmatters, se eliminarán todos los ajustes.
- Accessibility Mode: modo de accesibilidad, no te aconsejo activarlo.
- Purge Meta Options: elimina los ajustes sobre el retraso del JavaScript, la carga diferida y la precarga de enlaces.
- Export Settings: exporta la configuración realizada en tu web.
- Import Settings: importa la configuración realizada en otra web.
Te enseño a auditar tu web con Screaming Frog, para que identifiques y soluciones los problemas que están afectando tu SEO.
¡Comienza mi curso de Screaming Frog gratis hoy!
Script Manager
La función Script Manager nos permite optimizar el rendimiento de manera granular, es decir, URL por URL. Con este módulo podemos especificar exactamente en qué páginas, publicaciones o tipos de contenido deben cargarse o no determinados scripts JavaScript y hojas de estilo CSS.
Esto es especialmente útil para evitar la carga innecesaria de recursos en páginas donde no se necesitan, reduciendo así las solicitudes HTTP y mejorando los tiempos de carga del sitio.
Además, esta interfaz es muy fácil de usar, permitiendo incluso aplicar reglas basadas en expresiones regulares para una gestión más precisa y eficiente del rendimiento web.
Precio de Perfmatters
Permatters gratis no es, pero no me parece un plugin caro ya que 125$ dólares anuales para todas las webs es un buen precio. Yo lo uso en todas mis webs y para confirmarlo puedes pasar ésta misma por cualquier herramienta de análisis.
También conozco gente que ha conseguido Perfmatters gratis porque suelen usarlo en membresías como SEOWarriors o el ChorriClub. Yo nunca lo he hecho, y estoy en contra, pero sé que hay gente que insiste en que lo han conseguido así.
Ahora, ten presente que este plugin no sustituye en ningún momento a uno de caché.
Si has llegado hasta aquí… ¡Apúntate a mi Newsletter y sigue aprendiendo cada semana sobre SEO!