URL de inicio de sesión
Otra función interesante es la de poder cambiar la URL por defecto de entrada al área de administración que WordPress establece en tudominio/wp-admin. Hace exactamente lo mismo que pugins como WPS Hide Login.
Encontrarás tres campos:
En el primero puedes cambiar la url de acceso wp-admin por lo que quieras, como por ejemplo, tudominio.com/patata", evitando así los ataques de fuerza bruta y otros, que suelen dirigirse a la url por defecto. Eso sí, apúntala por ahí y/o intenta que no sea una url rara con demasiados caracteres para no olvidarla (aunque siempre puedes recuperarla acudiendo a la tabla wp_options / perfmatters_options )
El segundo campo (Disabled Behavior) establece a qué url se enviará al visitante que aterriza en tudominio/wp-admin con tres posibilidades:
- Mensaje (por defecto): Muestra un mensaje al visitante. Puedes personalizar el mensaje con el texto que quieras añadiéndolo en el campo Message.
- Plantilla 404: El usuario será enviado a una página 404.
- URL de inicio: Se redirige al usuario a la página de inicio.
Assets
Aquí empieza lo realmente interesante.
Script Manager, la guinda
El Script Manager de Perfmatters es sin duda su herramienta más poderosa y útil. Sólo esto ya vale hasta el último céntimo de lo poco que se paga por el plugin y su soporte.
Permite desactivar los scripts y el CSS que usa cada plugin y evitar que se carguen en un post o página, en ambos lugares o en todo el sitio, filtrar por usuarios conectados o no conectados, por dispositivos y añadir excepciones, incluso para categorías y etiquetas.
Así se puede aumentar drásticamente la velocidad de carga (especialmente de la página de inicio) al eliminar peticiones innecesarias allí donde los plugins no se usan, como por ejemplo los formularios o cualquier otra cosa.
El modo de uso obligatorio (MU) lleva al Script Manager mucho más allá. Da mucho más control y brinda la capacidad de deshabilitar las consultas y ganchos de los plugins de WordPress, así como el CSS y JS en línea. Ahora se pueden controlar todos los aspectos de un plugin, desde sus scripts frontales, el código en línea y las consultas MySQL donde quieras.
En su vista global encontrarás todas las configuraciones aplicadas por si un día necesitas reorganizarlas, modificarlas, añadir nuevas o eliminar alguna.
Tiene una documentación bastante completa. Si no estás habituado a este tipo de herramientas en principio puede intimidar, pero a poco que lo trastees descubrirás que es muy fácil de usar.
JavaScript
Defer (aplazar) y delay (retrasar) el Javascript.
Ambas cosas pueden contribuir a mejorar el FCP y el LCP
Añadiendo el atributo defer en cada archivo JavaScript no crítico se acelera la primera pintura con contenido (FCP) de la página. Esto significa que el JavaScript se descarga durante el análisis sintáctico del HTML y se ejecuta después de que la página haya terminado de cargarse (cuando el análisis sintáctico haya terminado). Es decir, se empuja hacia la parte inferior de la página la descarga del javascript para que se haga al final del proceso.
Con delay se mejoran los resultados de LCP y TBT. Se retrasa el JavaScript según la interacción del usuario acelerando sensiblemente la primera pintura de la página cuando algo no se necesita de inmediato como puede ser scripts pesados de terceros como Google Adsense, Google Analytics, píxeles de conversión de Facebook o Google Ads y similares.
Para ambas opciones se pueden añadir excepciones y activar el comportamiento de retardo (Delay Timeout), esto fija un tiempo de espera que cargará automáticamente los scripts después de 10 segundos si no se ha detectado ninguna interacción del usuario. Esto es opcional y está desactivado por defecto.
Delay Timeout
Si activas esta opción tienes la posibilidad de configurar el tiempo de espera con un valor diferente usando alguno de estos filtros.
El del ejemplo lo fija en 7 segundos.
add_filter('perfmatters_delay_js_timeout', function($timeout) {
return '7';
});Aconsejan no establecer el valor del tiempo de espera demasiado corto, de lo contrario la función de retraso JS no funcionará correctamente. Además, independientemente del tiempo fijado, el 99% de las veces todo se disparará con la primera interacción del usuario ya sea scroll, un clic o al primer movimiento del ratón.
CSS
Perfmatters afirma que la forma más fácil de resolver la advertencia de "Reducir CSS no utilizado" es activar esta función, que reseñé cuando aún estaba en fase beta, que lo hace todo automáticamente. Sus desarrolladores aseguran que la han probado en cientos de URLs (usando diferentes plantillas y configuraciones) y estos son algunos de los resultados que dicen haber obtenido:
- Disminución media de FCP del 15,20%.
- Disminución media de LCP del 19,66%.
- Disminución media del TTI del 14,95%.
Antes de activar la función "Eliminar el CSS no utilizado" en Perfmatters recomiendan eliminar cualquier precarga de CSS existente que se haya configurado en Perfmatters (excluyendo las hojas de estilo locales de Google Fonts).
No combinar el CSS (cosas que suele hacerse con WP Rocket, Litespeed, Autoptimize y otros). La combinación de CSS es una técnica de optimización obsoleta desde HTTP/2. En algunos casos, combinar el CSS puede perjudicar el rendimiento (en mi caso no ha sido así) y por último asegurarse de que no estás intentando eliminar el CSS no utilizado con otro plugin.
Hay tres métodos de eliminación:
- Retraso (por defecto): Todas las hojas de estilo CSS originales (CSS no utilizadas) se retrasan y se cargan en la interacción con el usuario. Es la opción recomendada.
- Asíncrono: Todas las hojas de estilo CSS originales (CSS no utilizadas) se cargan mediante async. Este método puede ayudar a evitar el pop-in, ya que las hojas de estilo se ejecutan de forma asíncrona mientras se carga la página. Este método dará como resultado un LCP/FCP ligeramente mayor que el comportamiento de retraso.
- Eliminar: Se eliminan todas las hojas de estilo CSS originales (CSS no utilizadas). Este es el método más agresivo pero también requerirá probablemente que se añadan excepciones. Se recomienda sólo para usuarios avanzados.
Aquí no hay más secreto que experimentar en un entorno de pruebas y medir los resultados, tanto aislados como en la interacción con el resto de funciones.
Algunas de estas funciones se pueden desactivar en cualquier entrada o página desde la edición de WP.
Code
Un clásico útil que incluyen muchos otros plugins, algo que puede incluso hacerse a mano, pero que simplifica y facilita la operación de añadir código personalizado a la cabecera, al cuerpo o al pie de página de tu blog.
Los siguientes campos imprimen código directamente en el front-end, por lo que debe ser HTML válido. Esto incluye CSS en línea dentro de las etiquetas <style> o JS en línea dentro de las etiquetas <script>. También podría cargar un archivo JS o CSS.
No acepta lenguajes del lado del servidor, como PHP. Para añadir código PHP personalizado se recomienda usar el plugin Code Snippets.
Preloading
En Preloading, la primera opción llamada "Instant Page" utiliza la librería de instant.page y carga un pequeño archivo JS de menos de 2 KB (instantpage.js) localmente en tu sitio y se utiliza para precargar las URLs cuando un usuario pasa el puntero del ratón por encima de un enlace, o imagen en la versión de escritorio. En móvil, una URL se precarga después de que el usuario empiece a tocar el enlace en su pantalla y antes de soltarlo.
Al cabo de 65 milisegundos se inicia automáticamente la precarga de la URL en segundo plano.
Esta herramienta es la equivalente al "Clic instantáneo" de Litespeed y a "Preload Links" de WP Rocket, así que si usas esta opción en algunos de estos dos plugins deberás desactivarla para probar la de Perfmatters.
En mi caso ha funcionado algo mejor que su opción equivalente en Litespeed aunque hay que advertir que en algunos casos puede aumentar la carga del servidor.
Al igual que con las opciones de Javascript y CSS, el uso de la precarga y la preconexión debes usarla según tus necesidades basándote en diferentes pruebas.
La precarga de imágenes críticas (las que están por encima del pliegue), es una opción aún en fase Beta que puede ayudar a reducir los tiempos de la pintura de contenido más grande (LCP) en Core Web Vitals.
Se trata normalmente de imágenes como un logotipo, una imagen destacada en un post, una imagen principal en una página de destino, etc. Al precargarlas, se mueven a la parte superior de la cascada y esencialmente le dicen al navegador que tienen prioridad y deben ser cargadas de inmediato.
Puedes elegir entre cero, para no precargar ninguna (opción por defecto), y cinco imágenes. Permatters recomienda elegir dos o tres como máximo ya que Chrome tiene un límite de dos imágenes precargadas que aparecerán en la parte superior de la cascada.
Lazy loading
Otro clásico relacionado con el rendimiento que WordPress ya incluye de forma nativa desde su versión 5.4 lanzada en 2020.
En mi caso utilizo la opción de Litespeed ya que en las pruebas encontré resultados ligeramente mejores, aún así, la de Perfmatters funciona realmente bien y además también lo aplica al CSS de las imágenes de fondo.
Fonts
Otro acierto. Esta opción, añadida a la versión 1.7.4 de Perfmatters, fue lanzada el 7 de junio de 2022. Permite alojar y cargar las fuentes de Google en local con un par de clics.
Las ventajas de alojar las fuentes localmente son muchas, pasas a tener el control total sobre ellas, eliminas todas esas solicitudes y por tanto el tiempo de carga y además puedes decidir cómo servirlas.
La función localiza automáticamente cualquier referencia de Google Fonts que exista en tu blog, descarga las fuentes correspondientes de fonts.google.com y las aloja localmente en tu servidor en el directorio: /wp-content/cache/perfmatters/tu-dominio.com/fonts/
En este otro post se explica su uso con más detalle.
CDN
Aquí no hay nada del otro mundo y tiene poco que comentar. Una herramienta, siempre útil para añadir el CDN que uses. Como utilizo QUIC.CLOUD, aún no la he necesitado.
Analytics
Aunque ahora lo no uso ya que inicié la transición a Matomo y relegué la gestión del script de Analytics a mi plugin de gestión del consentimiento de cookies para RGPD/CCPA, que también lo gestiona correctamente, pero me consta que funciona muy bien con Perfmatters porque lo usé en su día.
Desde aquí puedes alojar el script de Google Analytics localmente. Esto ayuda a acelerar tu sitio reduciendo las búsquedas adicionales de DNS y resolviendo el problema de "aprovechar la caché del navegador" de su script.
Según Perfmatters, irónicamente, el propio script de Google lanza una advertencia sobre el almacenamiento en caché, pero esto se debe a que tienen la caducidad de su cabecera de caché HTTP muy corta. Si lo alojas tú mismo, se aplicarán automáticamente las cabeceras de caché HTTP de tu propio CDN o servidor. En otras palabras, pasas a tener el control total sobre el almacenamiento en caché del script.
También advierten que esta herramienta no está soportada oficialmente por Google, pero que se usa desde hace años sin ningún problema.
Alojar Google Analytics localmente y servir el script desde su propio CDN o servidor también te permite aprovechar una única conexión HTTP/2.
