Ya tenía ganas de dedicarle un post específicamente al plugin Perfmatters. En otros artículos he hablado de él, pero nunca en tanta profundidad, aunque tengo un vídeo donde muestro cómo utilizar el plugin Perfmatters.
Perfmatters es un plugin de tweaking para WordPress que nos permite ajustar algunas cosas que de forma nativa en WordPress no podemos activar y desactivar, pese a que es muy necesario en algunos casos, como puede ser la desactivación del XML-RPC.
La historia de Perfmatters es curiosa, sus dos desarrolladores están muy cerca del mundo web (WordPress) y del mundo del hosting y la optimización web. Esto es precisamente lo que convierte a Perfmatters en un plugin de WPO que complementa muy bien a otros plugins de cache efectivos como WP Rocket.
Además de los tweaks y ajustes que nos deja aplicar Perfmatters, también nos permite hacer carga condicional de JS y CSS, siendo su interfaz una de las más intuitivas para hacer esto. En esto, supera de lejos a sus alternativas: Scripts Dequeuer y Gonzales.
Perfmatters es Premium. Para utilizarlo debemos comprarlo previamente y, si queremos seguir teniendo actualizaciones y soporte, debemos renovar la licencia anualmente.
Lo que ves anteriormente es una captura de la tabla de precios de Perfmatters en el momento de publicar este artículo, es decir, puede cambiar con el tiempo.
Lo normal es comprar la licencia para sitios ilimitados y utilizar Perfmatters en todos nuestros sitios web ya que, como he dicho, es un complemento perfecto para tener en un WordPress junto a cualquier plugin de cache.
Otro punto fuerte que tiene Perfmatters es que el plugin está muy bien documentado, en la web oficial podremos encontrar muy buena documentación (en inglés) sobre todas las funcionalidades del plugin.
Vamos a separar las funcionalidades del plugin Perfmatters en tres partes diferenciadas:
- Tweaks y ajustes en WordPress.
- Configuración de un CDN con Perfmatters.
- Cache local del script de Google Analytics.
- Carga condicional de JavaScript y CSS.
- Otras opciones útiles de Perfmatters.
Antes de empezar, si quieres ver todas estas opciones en un vídeo en mi canal de Youtube, lo tienes aquí:
Puedes comprar una licencia de Perfmatters para utilizar en tu WordPress en la siguiente dirección URL: https://alvaro.click/perfmatters
Tweaks y ajustes en WordPress con Perfmatters
En cada versión nueva de Perfmatters se añaden nuevos tweaks ya que, al final, la mayoría de ajustes y tweaks que vamos a comentar se pueden declarar manualmente en el functions.php del theme activo.
- Desactivar Emojis: Los emojis y caritas nadie los usa normalmente al escribir artículos y maquetar contenidos, pero es una petición más en la cabecera de los sitios WordPress. Si no los utilizamos, podemos desactivarlos con esta opción.
- Disable Embeds: Desde hace tiempo, cuando copiamos la URL de un servicio conocido (como Youtube o DailyMotion) en el editor de WordPress, automáticamente se incrusta. Esto ocurre por un código Javascript que tiene WordPress y que podemos desactivar si no queremos que WordPress se comporte así.
- Remove Query Strings: Los query strings son viejos conocidos del WPO, ya que teóricamente sirven para mucho. No obstante, en la práctica no sirven para nada más que para dificultar el cache en proxys inversos y CDNs.
- Disable XML-RPC: Esta funcionalidad o protocolo de WordPress ha sido muy atacado con fuerza bruta durante mucho tiempo, por lo que es recomendable desactivarla si no la utilizamos. Solo la usa Jetpack for WordPress.
- Remove jQuery Migrate: Normalmente, se desactiva esta librería para mejorar la seguridad de WordPress y prevenir ataques. En condiciones normales no deberíamos necesitar esta funcionalidad, por lo que deberíamos activar la opción en Perfmatters.
- Hide WP Version: Esconder la versión de WordPress es muy importante por temas de seguridad, ya que muchos bots se basan en que conocen nuestra versión de WordPress para realizar ataques porque, de forma predeterminada, encontramos la versión de WordPress en el código generado.
- Remove wlwmanifest Link: Las cabeceras wlwmanifest nos permitían utilizar Windows Live Writter, un software que ahora mismo no se utiliza, por lo que podemos activar la opción para desactivar la funcionalidad en WordPress.
- Remove RSD Link: Esta funcionalidad se añade en el header de WordPress y normalmente no se utiliza, por lo que podemos desactivar la funcionalidad con Perfmatters.
- Remove Shortlink: Cuando generamos una nueva página o post, WordPress genera un shortlink o enlace corto que normalmente nadie lo utiliza, por lo que podemos desactivar los enlaces cortos.
- Disable RSS Feeds: Los feeds RSS pueden llegar a ser un problema de cara a los scrapers de contenido o bots, pero mucha gente sigue utilizándolos con servicios como Feedly. Esta última es la razón para dejar activos los feeds RSS en WordPress.
- Remove Feed Links: En el código generado de WordPress se añaden los links a los feeds RSS. Yo normalmente recomiendo desactivarlos y que no se añadan, sobre todo si desactivamos los feeds RSS.
- Disable Self Pingbacks: Los pingbacks es una funcionalidad de autoenlazado de WordPress. Suelo recomiendar desactivar los pingbacks y lo podemos hacer con Perfmatters.
- Disable REST API: Podemos desactivar la REST API de WordPress si no la utilizamos, aunque debemos tener en cuenta que algunos plugins como Disqus Comment System la utilizan y dejarán de funcionar si la desactivamos.
- Remove REST API Links: En el código generado normalmente se añaden los enlaces a la REST API de nuestro WordPress. Podemos evitar que ocurra esto y es recomendable en muchos casos por seguridad o si tenemos el REST API desactivada o limitada.
- Disable dashicons: Evitamos que se carguen las peticiones de dashicons en el front-end, por lo que reducimos una petición, al igual que en el caso de los emojis.
- Disable google Maps: Al incrustar un mapa de Google Maps o en themes que tienen esta funcionalidad, se añaden muchas peticiones especificas a Google Maps que ralentizan mucho la carga del sitio web. Con esta opción podemos hacer que esas peticiones no se realicen si no utilizamos Google Maps en nuestro sitio web.
- Disable Password Strength Meter: Hace tiempo que WordPress mide la fortaleza de las contraseñas. Podemos evitar que lo haga desactivando la funcionalidad.
- Remove Comment URLs: Con el sistema de comentarios predeterminado de WordPress, por cada comentario realizado se genera una URL dentro de la página. Podemos desactivar esta funcionalidad para evitar estas URL no necesarias.
- Disable Heartbeat: Ya hemos hablado en este blog del API Heartbeat de WordPress en este blog, por lo que no voy a entrar más en temática.
- Heartbeat Frequency: Nos permite ajustar la frecuencia entre pulsos del API Heartbeat. Puedes encontrar más información en el post sobre el tema que he mencionado en la opción anterior.
- Limit Post Revisions: De forma automática, WordPress guarda revisiones o autoguardados del editor de WordPress cuando este está abierto. Podemos limitar el número de revisiones guardadas o desactivar directamente las revisiones.
- Autosave Interval: Podemos modificar el tiempo entre revisiones o autoguardados para reducir el consumo de recursos y que no se guarden tantos datos no necesarios en la base de datos.
- Change Login URL: Perfmatters nos permite cambiar la URL de login de WordPress por una URL que nosotros queramos, lo que ayuda a mejorar la seguridad del sitio web.
Además, Perfmatters tiene algunas opciones más específicas para tiendas online WooCommerce:
- Disable Scripts: Nos permite desactivar los scripts y CSS de WooCommerce en zonas donde no se necesitan, es decir, en todo el sitio excepto en el carrito, en las páginas de producto y en los listados de producto.
- Disable Cart Fragmentation: Nos permite solucionar el wc-ajax=get_refreshed_fragments que suele ralentizar muchas instalaciones WooCommerce + WordPress.
- Disable Status Meta Box: Desactiva la caja resumen de WooCommerce en el dashboard de WordPress.
- Disable Widgets: Desactiva los widgets de WooCommerce. Se pueden desactivar cuando no se utilizan.
Si quieres profundizar en el WPO para WooCommerce, puedes consultar el siguiente artículo publicado en este blog: https://alvarofontela.com/wpo-optimizar-woocommerce-tienda-online/
Como he dicho, con tiempo se añadirán más tweaks y ajustes para mejorar el WPO de WordPress.
En esta URL puedes ver las peticiones de nuevas funcionalidades que pueden ser o no añadidas: https://perfmatters.io/docs/feature-requests/?ref=100
Ninguna de estas opciones que hemos listado en esta sección hace milagros. Siempre será mucho más efectivo implementar un plugin de cache que implementar Perfmatters, pero es un buen complemento.
¿No sabes qué opciones activar y cuáles no en Perfmatters? Aquí tienes un ejemplo estándar de cómo dejar la configuración:
En algunos casos específicos puedes tener que adaptar la configuración a lo que necesites.
Configurar un CDN con Perfmatters
Existen plugins mucho más completos para implementar un CDN en WordPress, como por ejemplo WP Rocket y su sección de configuración CDN.
Si queremos implementar de forma gratuita un CDN en WordPress, podemos utilizar el plugin gratuito llamado Domain Sharding, como ya he explicado en el artículo que he publicado en este blog sobre cómo configurar un CDN en WordPress.
Lo malo de Perfmatters para implementar un CDN en WordPress es que solo permite implementar un CNAME o subdominio para apuntar al hostname del servidor y, al ser así, simplemente debemos meter el CNAME o el HOSTNAME del CDN en la parte correspondiente de Perfmatters:
La configuración que ves en la captura anterior es de mi blog. Lo único que ha sido cambiado es el campo CDN URL. Lo demás está con la configuración predeterminada.
De forma predeterminada no incluirá dos directorios de la raíz de WordPress cuyos archivos debemos servir desde el CDN, excluyendo el wp-admin que no podemos servirlo desde el CDN. Si tenemos algún directorio o carpeta más en la raíz de la instalación de WordPress, es necesario añadirla aquí. También podemos excluir tipos de archivo. De forma nativa, en exclusiones nos pondrá los archivos PHP.
Aunque existen mejores opciones para configurar un CDN en WordPress, Perfmatters es una excelente posibilidad.
Carga local de Google Analytics
Otra de las funcionalidades especiales de Perfmatters: la posibilidad de cachear en local el script de Google Analytics para poder usar cache de navegador.
En muchas ocasiones, depende de cómo tengamos configurado Google Analytics, Google PageSpeed Insights puede mostrarnos que tenemos un problema de cache de navegador por el script de Google Analytics.
¿Cómo podemos solucionar esto? Con Perfmatters podemos cachear el código de Google Analytics y además podemos modificar algunos parámetros en el script para adaptar el script cacheado a nuestras necesidades:
Como puedes ver en la imagen anterior, Perfmatters incluso tiene integración con el plugin de Monsterinsights, por lo que puedes personalizar al máximo la implementación de Google Analytics incluso aunque cachees el script con Perfmatters.
Aunque me gusta esta funcionalidad, yo no suelo utilizarla. El motivo es que no me gusta jugármela con las estadísticas y con los scripts de este tipo, ya que el mínimo error puede hacer que pierda datos estadísticos importantes.
Carga condicional de JS y CSS en WordPress
La carga condicional de elementos o, como yo la llamo en algunas ocasiones, “carga inteligente”, es una técnica WPO aplicada desde hace ya tiempo a WordPress. Desde hace relativamente poco tiempo se ha empezado a implementar debido a que han aparecido plugins como Perfmatters que nos permiten implementar carga condicional de forma visual con plugins.
Para activar la carga condicional de elementos con Perfmatters debemos activar la opción, antes de nada, desde la sección “Extras”.
Después de activar esta opción, tendremos a nuestra disposición el sistema de carga condicional de JS y CSS para poder personalizar lo que se carga y lo que no.
En cada una de las páginas de nuestro sitio web, cuando estemos autentificados como administradores, nos aparecerá un botón llamado “Script Manager” en la barra de administración:
Y lo que podremos ver es un listado de los JS y CSS cargados por los plugins y encolados para su carga con cada página vista:
En los botones ON/OFF que he rodeado en la captura anterior puedes activar y desactivar la carga de elementos del plugin entero en cuestión o simplemente activar o desactivar la carga del script.
Al hacer esto para cada una de las páginas del sitio web, conseguimos hacer lo que se llama carga condicional de elementos. Nos permite conseguir una mejora brutal en la velocidad de carga y en el modo en que el bot de Google puede ver nuestro sitio web.
Cuando pasamos un elemento a OFF nos muestra donde queremos desactivarlo y podemos elegir entre tres opciones:
- Desactivado para todo el sitio, añadiendo como excepción la URL actual donde hemos pulsado el botón “Script Manager” o un tipo de contenido en particular.
- Desactivado para la URL actual donde hemos pulsado en el botón “Script Manager”.
- Desactivado donde le indiquemos con un regex personalizable.
Como puedes observar, es bastante personalizable y nos permite darle forma.
Antes de finalizar, quiero que veas este gráfico de rastreo de Google Search Console en su versión antigua:
Como puedes ver, justo el punto de mejora es debido a que se simplificó la carga de JS del sitio web con carga condicional. Al ser un sitio web con mucha sobrecarga de Javascript, se consiguen mejoras muy buenas en cuanto al crawling por parte de los bots de los principales buscadores y a la ejecución de Javascript en el navegador del visitante.
Existen otros plugins para realizar carga condicional de elementos en WordPress: Scripts Dequeuer, WP Enqueue Manager y Enqueue Organizer. Sin embargo, de entre todos ellos yo prefiero Perfmatters: tiene una interfaz mucho más intuitiva.
Otras opciones de Perfmatters
En la sección “Extras” tenemos algunas opciones interesantes, además de la posibilidad de activar el “Script Manager” para utilizar la carga condicional.
Las opciones interesantes que nos encontramos en la sección “Extras” son estas:
- DNS Prefetch: Nos permite introducir un listado de hostnames a los que se hacen peticiones externas durante la carga de nuestro sitio web. Debemos introducirlos sin protocolo, tal y como se muestra en la captura anterior.
- Preconnect: En este campo también debemos introducir un listado de hostnames externos a los que queremos hacer preconnect para acelerar las peticiones realizadas a orígenes externos durante la carga de la web. El preconnect no hace milagros, pero puede ayudar en algunos casos con algunos cuellos de botella.
- Add Blank Favicon: En algunos casos donde el favicon puede dar 404, lo rellena con un favicon en blanco.
El resto de opciones son variables. Por un lado, está la opción “Clean Uninstall” para eliminar todo el rastro del plugin al desinstalarlo. También tenemos el modo accesibilidad (“Accessibility Mode”), que nos activa las opciones de accesibilidad, de las que no puedo hablar ya que no las conozco.
Alternativas a Perfmatters
No existen alternativas exactamente iguales a Perfmatters. No hay otro plugin exactamente igual, aunque hay muchos plugins de tweaking para WordPress y, como he mencionado antes, también existen otros plugins que nos permiten implementar un CDN o configurar carga condicional de elementos en WordPress.
En cuanto a plugins de tweaking para WordPress, el que más me gusta es un plugin español gratuito desarrollado por Fernando Tellado (ayudawp.com). Se llama WordPress WPO Tweaks & Optimizations: https://wordpress.org/plugins/wpo-tweaks/
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
15 Responses
¡Excelente como siempre Alvaro!
Gracias Samir!!!
Wow, blown away Álvaro! Brett and I really appreciate all the time you took to put this together. We have a lot of great updates coming, and one really big one I think you’ll like.
Thanks Brian, Perfmatters is a great plugin.
I’m waiting new features 🙂
PD: Sorry for my bad english 🙁
Puedo usar este plugin en conjunto con Autoptimize y WP Fastest cache? O qué recomiendas?
Saludos y que buena info!
este tutorial esta de primera!, se actualizo muchas opciones seria genial que lo puedas actualizar a la version
Muchas gracias Ulises, tomo nota, la semana que viene lo actualizaré 🙂
Hola Álvaro. Espero estés bien. Quiero preguntarte qué recomiendas en este caso ¿Asset CleanUp Pro + WP Rocket o Perfmatters + WP Rocket?
Por cierto, excelente blog tienes. Saludos!
Hola Roberto, pues depende de lo que quieras hacer.
Yo utilizo los 3, ya que la carga condicional me gusta mucho hacerla con Perfmatters, pero soy consciente de que a nivel optimización de código, Assets CleanUp Pro es mucho mas potente que WP Rocket.
Si buscas lo que sea mas completo, Assets CleanUp Pro es mas potente y completo, pero también mas difícil de aprovechar.
Hola Álvaro, leo tu última respuesta sobre Assets CleanUp Pro y Perfmatters y me parece muy interesante. ¿Podrías por favor explicarlo un poco más? Cuándo usas cada plugin?
Gracias por el post.
Hola Jorge, pues simplemente depende de si necesito usar Assets CleanUp Pro para minificar y optimizar CSS y JS o si puedo hacerlo con WP Rocket. Si lo hago con WP Rocket y no tengo que instalar Assets CleanUp Pro, pues…hago la carga condicional y los tweaks directamente con Perfmatters y la parte de optimización de código con WP Rocket.
Muchas gracias por tan detallado artículo!
Veo que se comparten varias opciones con WP Rocket. ¿Sería aconsejable solo utilizarlo para caché y para el resto Perfmatters? ¿Hay alguna opción que no tenga Perfmatters pero si WP Rocket y sea recomendable activar?
El resumen es que no sé qué activar en un lado o en otro, si hace la misma función uno mejor que otro o si es indiferente donde se activen (las que están en ambos).
Gracias y un saludo!
Hola Sergio, pues…yo actualmente estoy utilizando WP Rocket para todo y Perfmatters solo para carga condicional, ya que creo que es donde realmente se diferencia bastante de los demás.
Te dejo mas info: https://alvarofontela.com/carga-condicional-wordpress-js-css/
Hola Alvaro, excelente post! Recomiendas comprar la licencia para sitios web ilimitados y aplicar Perfmatters y WP rocket a todas las webs de los clientes? (explicandoles la función, y fijando un precio acorde a todo lo que se implementa en sus webs) ?
Un saludo, y gracias por el contenido! 🙂
Hola Andrei, yo antes usaba Perfmatters para todo, ahora depende del sitio lo instalo o no. Si no hay carga condicional para hacer, no suelo instalarlo.