Cuando se trata de rendimiento de WordPress tenemos mucho que decir acerca de los plugins. Cada plugin agrega código PHP que tiene que ser ejecutado, puede incluir scripts y estilos, y algunos pueden ejecutar consultas adicionales en la base de datos. Esto significa que los plugins innecesarios pueden afectar la velocidad de la página y pueden tener un impacto negativo en la experiencia del usuario y el ranking de páginas.
Como ejemplo, considere un plugin que crea y muestra formularios personalizados en páginas frontales, como Contact Form 7. Generalmente, solo necesitaría un formulario en una sola página, pero lo ideal sería incrustar un formulario en cualquier página utilizando el código corto del complemento. Por este motivo, Contact Form 7 carga scripts y estilos en cada página de su sitio web.
¿Realmente desea ejecutar el código de plugin e incluir scripts y estilos en cada página de su sitio web?
En esta publicación, demostraré que puede instalar tantos plugins como necesite (no se vuelva loco por supuesto), y sin embargo hacer que las páginas de WordPress se carguen rápido. Vamos a desactivar plugins de WordPress (que son innecesarios de cargar en entradas y páginas específicas. Esto implicará un proceso de cuatro procesos de cuatro pasos:
- Escoger los plugins más populares que se adapten a sus necesidades y comparar sus características y efectos con la velocidad de la página.
- Programar la lista y filtrar complementos antes de cargar la página.
- Filtre y desactive programáticamente los complementos innecesarios con un complemento mu.
- Filtrar y desactivar los plugins innecesarios antes de cargar la página.
- Rastrear el rendimiento del sitio.
Exploremos a profundidad.
Tres Reglas Generales a Seguir al Elegir un Plugin
Las siguientes reglas generales pueden ser útiles al elegir un plugin:
- Instale sólo plugins bien codificados de desarrolladores de confianza: considere instalaciones activas, calificación de usuarios, soporte al cliente, frecuencia de actualización y cualquier información útil proveniente de la comunidad de WordPress.
- Prefiera plugins escalables: compare plugins similares en términos de rendimiento, haciendo uso de herramientas de desarrollo de navegador y / o servicios online como Google Pagespeed Insights, Pingdom y GTmetrix para evaluar el impacto de cada plugin sobre el tiempo de carga de la página.
- No instale plugins innecesarios: podría ser obvio, pero vale la pena mencionar que nunca debe instalar un plugin que realmente no necesita por razones de seguridad y rendimiento. Además, asegúrese de revisar sus complementos de vez en cuando y desinstale aquellos que ya no necesita y usa.
Un Ejemplo Concreto
Contact Form 7 es un gran plugin que construye y muestra formularios en WordPress. Proporciona un ejemplo perfecto para nuestros propósitos, ya que incluye los siguientes archivos .js en cada página, incluso si la página no contiene un formulario:
- style.css
- scripts.js
Un plugin puede ralentizar su sitio web, pero podemos obligar a WordPress a desactivar selectivamente los plugins en función de la URL de solicitud. Si usted es un desarrollador, lea la siguiente sección en la que aprenderemos cómo administrar plugins mediante programación y crear un plugin mu que filtre los plugins innecesarios. Si no es un desarrollador, siéntase libre de saltar a la sección dedicada a los plugins que permiten filtrar y organizar los mismos.
Cómo obtener una lista de todos los plugins activos mediante programación
En primer lugar, puede obtener una lista de todos los plugins activos en su sitio web de WordPress con un simple fragmento de código PHP. Puede agregar el siguiente código en un plugin personalizado o en el editor de un plugin gratuito de WordPress como Code Snippets. Si decide ir con su plugin personalizado, no olvide agregar el encabezado del plugin como se ve a continuación.
Cada plugin activo se almacena en la tabla wp_options donde options_name es active_plugins. Así que podemos extraer la lista de esos plugins con una simple llamada a get_option. Aquí está el código:
<?php
/**
* @package active-plugins
* @version 1.0
*
* Plugin Name: Active Plugins
* Plugin URI: http://wordpress.org/extend/plugins/#
* Description: This is a development plugin
* Author: Your Name
* Version: 1.0
* Author URI: https://example.com/
*/
add_shortcode( 'activeplugins', function(){
$active_plugins = get_option( 'active_plugins' );
$plugins = "";
if( count( $active_plugins ) > 0 ){
$plugins = "<ul>";
foreach ( $active_plugins as $plugin ) {
$plugins .= "<li>" . $plugin . "</li>";
}
$plugins .= "</ul>";
}
return $plugins;
});Cambie los detalles del plugin, luego guarde el archivo active-plugins.php y cárguelo en su carpeta /wp-content/plugins/. Cree una nueva publicación de blog e incluya el shortcode [activeplugins]. Ahora debería mostrar una lista de todos los plugins activos.
Una vez hecho esto, podemos ir un paso más allá y agregar o eliminar plugins mediante programación aprovechando el filtro option_active_plugins. Este filtro pertenece al grupo de filtros option_ $ option_name, que permite filtrar cualquier opción después de que se haya recuperado de la base de datos. Dado que todos los plugins activos se almacenan en la tabla wp_options donde option_value es active_plugins, el filtro option_active_plugins proporciona una manera de activar o desactivar los plugins mediante programación.
Así que podemos activar un plugin programáticamente. Digamos, como ejemplo, desea activar el plugin ACF. Aquí está el código:
add_filter( 'option_active_plugins', function( $plugins ){
$myplugin = "advanced-custom-fields/acf.php";
if( !in_array( $myplugin, $plugins ) ){
$plugins[] = $myplugin;
}
return $plugins;
} );En este ejemplo, asumimos que el plugin se ha instalado y aún no se ha activado.
El código anterior simplemente agrega el plugin a la lista de plugins activos en cada página de nuestro sitio web. No es muy útil, pero se entiende el punto.
Además, el plugin debe cargarse antes que cualquier otro plugin; de lo contrario, nuestro código no podría funcionar como se esperaba. Para priorizar nuestra carga de plugins, debemos agregar nuestro script en un plugin de uso obligatorio.
Cómo construir un plugin obligatorio para desactivar programáticamente los plugins
Vamos a crear un mu plugin, que es un plugin que se encuentra en una subcarpeta /wp-content específica y se ejecuta antes que cualquier plugin regular.
Desafortunadamente, en esta situación, no se nos permite usar etiquetas condicionales, porque las etiquetas de consulta condicionales no funcionan antes de que se ejecute la consulta. Antes de eso, siempre devuelven falso. Por lo tanto, tenemos que verificar nuestras condiciones de lo contrario, por ejemplo, analizando el URI de la solicitud y verificando la ruta URL correspondiente.
Agregue el siguiente código al archivo active-plugins.php, luego muévalo a /wp-content/mu-plugins:
$request_uri = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );
$is_admin = strpos( $request_uri, '/wp-admin/' );
if( false === $is_admin ){
add_filter( 'option_active_plugins', function( $plugins ){
global $request_uri;
$is_contact_page = strpos( $request_uri, '/contact/' );
$myplugin = "contact-form-7/wp-contact-form-7.php";
$k = array_search( $myplugin, $plugins );
if( false !== $k && false === $is_contact_page ){
unset( $plugins[$k] );
}
return $plugins;
} );
}
Vamos a sumergirnos en este código:
- parse_url devuelve la ruta de la URL solicitada.
- strpos encuentra la posición de la primera aparición de
'/wp-admin/', y devuelvefalsosi no se encuentra la cadena. La variable$is_adminalmacena el valor devuelto. - La condición impide que el filtro se ejecute en el panel de administración, de modo que podamos acceder de forma segura a las páginas de configuración del plugin. Si el URI de la solicitud no contiene
'/wp-admin/', invocamos el filtrooption_active_pluginsfilter. - Finalmente, si el plugin actual no está en la matriz de plugins activos, y el URI de la página actual no contiene
/contact/, entonces eliminamos el plugin de$plugins.
Ahora guarde su plugin y cárguelo en su carpeta /wp-content/mu-plugins/. Borre la memoria caché y agregue el shortcode [activeplugins] a varias páginas. Debería aparecer en la lista solo en la página /contacto/.
Luego podemos desactivar una serie de plugins a la vez con solo un poco de PHP adicional.
$request_uri = parse_url( $_SERVER['REQUEST_URI'], PHP_URL_PATH );
$is_admin = strpos( $request_uri, '/wp-admin/' );
if( false === $is_admin ){
add_filter( 'option_active_plugins', function( $plugins ){
global $request_uri;
$is_contact_page = strpos( $request_uri, '/contact/' );
$myplugins = array(
"contact-form-7/wp-contact-form-7.php",
"code-snippets/code-snippets.php",
"query-monitor/query-monitor.php",
"autoptimize/autoptimize.php"
);
if( false === $is_contact_page ){
$plugins = array_diff( $plugins, $myplugins );
}
return $plugins;
} );
}En este ejemplo, primero hemos definido una matriz de plugins que se eliminarán, luego los eliminamos con array_diff. Esta función «compara array1 con una o más otras matrices y devuelve los valores en array1 que no están presentes en ninguna de las otras matrices».
Puede descargar el código completo de este plugin desde Gist.
Ahora puede cargar el plugin en la carpeta mu-plugins e inspeccionar cualquier página de su sitio web. El plugin mu puede ser altamente personalizado agregando más condiciones y verificando más URI, pero cada condición debe agregarse manualmente al código y, a largo plazo, este simple plugin puede ser difícil y una molestia de mantener.
Por esta razón, es posible que desee revisar los siguientes plugins.
Plugins que filtran plugins
Como alternativa, podemos ver una serie de buenos plugins que nos permiten agregar filtros que se pueden administrar desde el panel de administración de WordPress.
Plugin Load Filter
Plugin Load Filter es una opción gratuita para los usuarios de WordPress que necesitan filtrar plugins bajo varias condiciones.
Actualmente, soporta las siguientes características:
- Post formatos
- Tipos de correos personalizados
- Módulos Jetpack
- WP Insertar tarjeta de contenido
- Filtro de URL para expertos (REST API / Heartbeat / AJAX / AMP / etc)
Una vez que se haya activado un filtro, el usuario administrador puede especificar en qué lugar del sitio se debe aplicar, como se muestra en la imagen a continuación.
Plugin Organizer
Plugin Organizer es un plugin popular con más de 10,000 instalaciones activas y una impresionante calificación de 5 estrellas de 5. Es un plugin más completo que permite a los administradores del sitio:
- Desactivar selectivamente los plugins por tipo de publicación y URL de solicitud
- Desactivar selectivamente los plugins por roles de usuario
- Crear grupos de plugins.
- Cambiar el orden de carga del plugin
- Características adicionales
La página de opciones de Global Plugins proporciona una función de arrastrar y soltar que permite al usuario administrador desactivar los plugins a nivel global, lo que impide que WordPress ejecute uno o más plugins en cualquier lugar del sitio, a menos que se especifique de forma diferente para publicaciones o páginas individuales. La misma característica está disponible para los tipos de página de búsqueda y publicación.
El plugin agrega un metabox en la pantalla de edición posterior para que el administrador pueda anular la configuración global y de tipo de publicación. Esta función también se puede activar para los tipos de publicaciones, marcando el elemento correspondiente en la pantalla Configuración general. Una gran característica es el Mensaje de depuración del Plugin Organizer, que proporciona al administrador del sitio información útil sobre los plugins que afectan a cada página del sitio.
Más información se puede encontrar en su documentación.
Perfmatters Plugin
Un enfoque parcialmente diferente proviene del plugin Perfmatters. Es una alternativa premium que le permite al administrador del sitio cargar selectivamente los recursos de tema y plugin en función de la URL o el tipo de publicación personalizada. Es una gran herramienta para la optimización de plugins y temas. De hecho, es desarrollado por un miembro del equipo de Kinsta!
El plugin tiene una función llamada el Administrador de secuencias de comandos, donde todo se agrupa por el nombre del plugin o tema. Esto hace que sea muy fácil deshabilitar un plugin completo a la vez, o archivos CSS y JavaScript individuales dentro de él.
Incluso puede deshabilitar los scripts con expresiones regulares. Esto es especialmente útil para los sitios que tienen una estructura de URL más compleja o páginas generadas dinámicamente.
Esto es muy poderoso y puede aumentar drásticamente la velocidad en sus sitios de WordPress (especialmente su página de inicio). Algunos ejemplos de para qué se puede usar esto:
- Los plugins para compartir en redes sociales solo deben cargarse en tus publicaciones. Puede deshabilitarlo fácilmente en todas partes y cargar solo en tipos de publicaciones, o incluso en tipos de publicaciones personalizadas.
- El popular plugin Contact Form 7 se carga solo en cada página y publicación. Puede desactivarlo fácilmente en cualquier lugar con un solo clic y habilitar solo en su página de contacto.
- Si ha actualizado a WordPress 5.0 pero no está usando el editor de bloque de Gutenberg, quizás aún esté usando el editor clásico, hay dos scripts de front-end adicionales que se agregan en todo el sitio que puede deshabilitar:
/wp-incluye/css/dist/block-library/style.min.cssy/wp-includes/css/dist/block-library/theme.min.css
Puede ver en esta revisión de perfmatters, que disminuyó sus tiempos de carga totales en un 20,2%. Solo en su página de inicio, ¡pudieron reducir el número de solicitudes HTTP de 46 a 30! El tamaño de la página también se redujo de 506.3 KB a 451.6 KB.
Saved 25% (and 500KB) off total page size using @_perfmatters – this is AFTER extensive optimization using Plugin Organizer. I was *shocked* at how much I was able to save by fine tuning js/css that is downloaded per page.
— Vanessa (@technologypoet) March 14, 2019
Cómo realizar un seguimiento del rendimiento: los Dev Tools del navegador
Un paso fundamental en la carretera para la optimización del rendimiento es la medición del tiempo de carga. Tenemos una serie de plugins y herramientas en línea que podemos usar para hacer un seguimiento del rendimiento del sitio, como Google Pagespeed Insights y Pingdom. Pero, ante todo, podemos usar las herramientas de desarrollo del navegador, que proporcionan mucha información significativa.
Cada inspector de navegador tiene un panel de Red que muestra una lista de solicitudes de red e información relacionada. Siga estos enlaces para documentación detallada:
En una instalación de WordPress con dieciocho plugins activos, hemos inspeccionado repetidamente una página de publicación con Firefox Dev Tools. Primero medimos la velocidad de la página y enumeramos los recursos solicitados antes de instalar cualquier plugin de filtrado. La siguiente imagen muestra el resultado de la herramienta de análisis de rendimiento disponible en el monitor de red de Firefox.
El monitor de red proporciona los siguientes resultados (caché vacía):
- tamaño: 255.19 Kb
- tiempo de carga: 1.24 segundos
- peticiones: 12
A continuación, hemos instalado el Plugin Organizer para evitar que WordPress ejecute el plugin CF7. El gráfico circular cambia un poco.
Ahora la página se carga más rápido (caché vacía):
- tamaño: 104.21 Kb
- tiempo de carga: 0,80 segundos
- peticiones: 8
A continuación, hemos desactivado varios plugins innecesarios, y la siguiente imagen muestra cuánto hemos mejorado el rendimiento de la página.
Después de deshabilitar todos los plugins innecesarios, el caché de navegador vacío del monitor de red devuelve los siguientes datos:
- tamaño: 101.98 Kb
- tiempo de carga: 0,46 segundos
- peticiones: 8
Podemos comparar los resultados de nuestras pruebas. El tamaño del recurso se redujo en un 60,04%, el tiempo de carga se redujo de 1,24 segundos a 0,46 segundos y el número de peticiones HTTP se redujo de 12 a 8. Esto confirma que los plugins pueden afectar el rendimiento de la página y que podemos aumentar la velocidad de la página. aprovechando un plugin de filtro.
Resumen
Ya sea que cree sus propios scripts o instale herramientas de terceros, organizar y filtrar plugins es algo que siempre debe considerar cuando se trata de la optimización del rendimiento. Recuerde, no todos los plugins se desarrollan teniendo en cuenta el rendimiento. Por lo tanto, puede ser prudente tomarse un tiempo y determinar qué activos de plugins (CSS y JS) se están cargando y dónde.
Pero aprender a deshabilitar los plugins de WordPress es solo una entre muchas otras técnicas destinadas a aumentar la velocidad del sitio. Aquí hay una lista de otras guías y tutoriales útiles relacionados con el rendimiento del sitio:
- Cómo acelerar WordPress (Guía definitiva)
- Una guía para principiantes para la optimización de la velocidad del sitio web
- Cómo reducir el TTFB para mejorar los tiempos de carga de la página de WordPress
- Cómo diagnosticar un alto uso de Admin-Ajax en su sitio de WordPress
- Cómo limpiar la tabla wp_options y los datos con carga automática
- Cómo deshabilitar los plugins de WordPress (sin acceso a WP-Admin)
Deja una respuesta