¿Te has preguntado alguna vez cómo afectan los plugins de WordPress al tiempo de carga de tu sitio? Los plugins de WordPress le permiten añadir características a su sitio, pero también pueden afectar a la velocidad de su sitio web. En este artículo, le mostraremos cómo afectan los plugins de WordPress al tiempo de carga de su sitio y cómo puede controlarlos de forma más eficiente.
¿Cómo funcionan los plugins de WordPress?
Los plugins de WordPress son como aplicaciones para su sitio de WordPress. Puedes instalarlos para añadir más características a tu sitio web, como formularios de contacto, galerías de fotos o una tienda de comercio electrónico.
Cuando alguien visita tu sitio web, WordPress carga primero sus archivos de núcleo y luego carga todos tus plugins activos.
Para más detalles, eche un vistazo a nuestro artículo acerca de ¿qué son los plugins de WordPress? ¿Y cómo funcionan?.
¿Cómo pueden afectar los plugins al tiempo de carga del sitio?
Cada plugin de WordPress ofrece diferentes funcionalidades y características. Para ello, algunos plugins realizan llamadas a la base de datos en el backend, mientras que otros cargan activos en el front-end, como hojas de estilos CSS, archivos JavaScript, imágenes, etc.
Las consultas a la base de datos y la carga de recursos añaden tiempo a la carga del sitio. La mayoría de los plugins realizan una petición HTTP para cargar activos como scripts, CSS e imágenes. Cada petición aumenta el tiempo de carga de la página de su sitio.
Cuando se hace correctamente, el impacto en el rendimiento no suele ser demasiado perceptible.
Sin embargo, si utiliza varios plugins que realizan demasiadas solicitudes http para cargar archivos y activos, el rendimiento del sitio y la experiencia del usuario se verán afectados.
¿Cómo comprobar los archivos cargados por los plugins de WordPress?
Para ver cómo los plugins están afectando el tiempo de carga de su página, necesita comprobar los archivos cargados por los plugins de WordPress.
Hay un montón de herramientas que puede utilizar para averiguar esto.
Puedes utilizar las herramientas para desarrolladores de tu navegador (Inspect en Google Chrome e Inspect Element en Firefox).
Simplemente visita tu sitio web y haz clic con el botón derecho para seleccionar Inspeccionar. Se abrirá el panel de herramientas de desarrollo.
Haz clic en la pestaña “Red” y vuelve a cargar el sitio web. Mientras la página se recarga, podrás ver cómo tu navegador carga cada archivo.
También puede utilizar herramientas de terceros como Pingdom y GTmetrix para ver esto. Entre otra información útil, estas herramientas también le mostrarán todos los archivos que se cargan y cuánto tiempo tardan en cargarse.
¿Cuántos plugins son demasiados?
Al ver cómo se cargan estos archivos, es posible que empiece a preguntarse cuántos plugins debería utilizar en mi sitio. ¿Cuántos plugins son demasiados?
La respuesta realmente depende del conjunto de plugins que esté utilizando en su sitio web.
Un solo plugin malo puede cargar 12 archivos mientras que varios plugins buenos añadirán sólo un par de archivos extra.
Todos los plugins bien codificados intentan mantener al mínimo los archivos que cargan. Sin embargo, no todos los desarrolladores de plugins son tan cuidadosos. Algunos plugins cargan archivos en cada carga de página, incluso cuando no necesitan esos archivos.
Si utiliza demasiados plugins de este tipo, el rendimiento de su sitio se verá afectado.
¿Cómo mantener los plugins bajo control?
Lo más importante que puede hacer en su sitio de WordPress es usar solo plugins que estén bien codificados, tengan buenas reseñas y estén recomendados por fuentes de confianza.
Consulte nuestra guía sobre cómo encontrar qué plugins de WordPress.
Si encuentra que un plugin de WordPress está afectando la carga de su sitio, entonces busque un plugin mejor que haga el mismo trabajo pero mejor.
A continuación, debe empezar a utilizar el almacenamiento en caché y CDN para mejorar aún más el rendimiento y la velocidad de su sitio.
Otro factor que debes tener en cuenta es el alojamiento de tu sitio web. Si los servidores de tu alojamiento no están bien optimizados, entonces aumentará el tiempo de respuesta de tu sitio.
Esto significa que no sólo los plugins, sino el rendimiento general de su sitio será más lento. Asegúrese de que está utilizando una de las mejores empresas de alojamiento de WordPress.
Como último recurso, puede desinstalar plugins de los que pueda prescindir. Haga una cuidadosa reseña / valoración de los plugins instalados en su sitio web, y vea si puede desinstalar algunos de ellos. Esta no es una solución ideal, ya que tendrá que renunciar a características a cambio de velocidad.
Optimizar manualmente los plugins de WordPress
Los usuarios avanzados de WordPress pueden intentar gestionar cómo los plugins de WordPress cargan los archivos en su sitio. Hacerlo requiere algunos conocimientos de código y algunas habilidades de depuración.
La forma correcta de cargar scripts y hojas de estilos en WordPress es usando las funciones wp_enqueue_style
y wp_enqueue_script
.
La mayoría de los desarrolladores de plugins de WordPress las usan para cargar archivos de plugins. WordPress también viene con funciones sencillas para dar de baja esos scripts y hojas de estilos.
Sin embargo, si simplemente desactiva la carga de esos scripts y hojas de estilos, entonces esto romperá sus plugins, y no funcionarán correctamente. Para corregirlo, necesitará copiar y pegar esos estilos y scripts en la hoja de estilos y archivos JavaScript de su tema.
De esta forma podrá cargarlos todos a la vez, minimizando las peticiones http y reduciendo efectivamente el tiempo de carga de su página.
Veamos cómo dar de baja fácilmente hojas de estilos y archivos JavaScript en WordPress.
Desactivar hojas de estilos de plugins en WordPress
Primero, necesitará encontrar el nombre o handle de la hoja de estilos que desea desregistrar. Puede localizarla usando la herramienta de inspección de su navegador.
Después de encontrar el manejador de la hoja de estilos, puedes anular su registro añadiendo este código al archivo functions.php de tu tema o a un plugin específico del sitio.
add_action( 'wp_print_styles', 'my_deregister_styles', 100 ); function my_deregister_styles() { wp_deregister_style( 'gdwpm_styles-css' ); }
Puede anular el registro de tantos manejadores de estilo como desee dentro de esta función. Por ejemplo, si tienes más de un plugin para el que desregistrar la hoja de estilos, entonces lo harías así:
add_action( 'wp_print_styles', 'my_deregister_styles', 100 ); function my_deregister_styles() { wp_deregister_style( 'gdwpm_styles-css' ); wp_deregister_style( 'bfa-font-awesome-css' ); wp_deregister_style( 'some-other-stylesheet-handle' ); }
Recuerde que la anulación del registro de estas hojas de estilos afectará a las características de los plugins de su sitio web. Debe copiar el contenido de cada hoja de estilos que desregistre y pegarlo en la hoja de estilos de su tema de WordPress o añadirlo como CSS personalizado.
Desactivar plugins JavaScripts en WordPress
Al igual que las hojas de estilos, necesitará encontrar el handle usado por el archivo JavaScript para darlos de baja. Sin embargo, no encontrará el handle usando la herramienta de inspección.
Para ello, tendrá que profundizar en los archivos de plugins para encontrar el controlador utilizado por el plugin para cargar un script.
Otra forma de encontrar todos los controladores utilizados por los plugins es añadir este código en el archivo functions.php de tu tema.
function wpb_display_pluginhandles() { $wp_scripts = wp_scripts(); $handlename .= "<ul>"; foreach( $wp_scripts->queue as $handle ) : $handlename .= '<li>' . $handle .'</li>'; endforeach; $handlename .= "</ul>"; return $handlename; } add_shortcode( 'pluginhandles', 'wpb_display_pluginhandles');
Después de añadir este código, puedes usar el shortcode [SKX1
] para mostrar un anuncio / catálogo / fichas de los plugins.
Ahora que ya tienes los manejadores de script, puedes darlos de baja fácilmente usando el siguiente código:
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 ); function my_deregister_javascript() { wp_deregister_script( 'contact-form-7' ); }
También puedes usar este código para desactivar múltiples scripts, así:
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 ); function my_deregister_javascript() { wp_deregister_script( 'contact-form-7' ); wp_deregister_script( 'gdwpm_lightbox-script' ); wp_deregister_script( 'another-plugin-script' ); }
Ahora, como mencionamos anteriormente desactivar estos scripts hará que tus plugins dejen de funcionar correctamente.
Para evitar esto, necesitarás combinar JavaScripts juntos, pero a veces no funciona bien, así que debes saber lo que estás haciendo. Puedes aprender a base de ensayo y error (como hacemos muchos de nosotros), pero te recomendamos que no lo hagas en un sitio activo.
El mejor lugar para probar es en una instalación local de WordPress o en un sitio de ensayo con proveedores de alojamiento gestionado de WordPress.
Cargar scripts solo en páginas específicas
Si usted sabe que va a necesitar un plugin script para cargar en una página específica en su sitio web, entonces usted puede permitir un plugin en esa página en particular.
De esta manera el script permanece desactivado en todas las demás páginas de su sitio y se carga solo cuando es necesario.
A continuación se explica cómo cargar scripts en páginas específicas.
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 ); function my_deregister_javascript() { if ( !is_page('Contact') ) { wp_deregister_script( 'contact-form-7' ); } }
Este código simplemente desactiva el script contact-form-7 en todas las páginas excepto en la página de contacto.
Eso es todo por ahora.
Esperamos que este artículo le haya ayudado a aprender cómo los plugins de WordPress afectan al tiempo de carga de su sitio. Puede que también quiera ver nuestra guía definitiva para mejorar la velocidad de WordPress y el rendimiento del sitio.
Si te ha gustado este artículo, suscríbete a nuestro canal de YouTube para ver nuestros tutoriales en vídeo sobre WordPress. También puedes encontrarnos en Twitter y Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Moinuddin Waheed says
In the nutshell it is not the number of plugins that make a huge difference but number of poorly coded plugins which makes the task difficult and creates problems for the websites.
one thing in my opinion while selecting a plugin should be to install task specific plugins only.
Not which loads everything in return to do a specific task easily.
Thanks for the guide.
Oscar says
I’m not sure I understood everything. I want to use the last code snippet (Load Scripts Only on Specific Pages) for Contact Form 7.
What is unclear to me is on line 4. Does “Contact” refer to the title of the page where the contact form is located? If title of my page is “Contact Us” do I need to change this on line 4?
Thanks in advance. Regards,
WPBeginner Support says
Correct, Contact would be the title of the post and you would change it to match the title of the page. You can also look up the page ID and add that number as an alternative if you prefer. Our guide on finding the ID can be found below!
https://www.wpbeginner.com/beginners-guide/how-to-find-post-category-tag-comments-or-user-id-in-wordpress/
Administrador
Korii says
Really great tips here!
Question re: deregistering plugin stylesheets and scripts and merging them into a single stylesheet and a single script file respectively, will you have to do this every time there is a plugin update? If so, is there a way to get around this?
WPBeginner Support says
To protect the changes, you would likely want to create a child theme
Administrador
Thomas says
I use a couple of plugins when writing copy. (Font, etc) If I deactivate when I’m not using them will it help?
Mike Burk says
Very good article! Thanks.
pete says
Hi guys,
So, how would I add a Code Pen script to a page if it’s just a CSS only pen? And also, how would I add pens with JS, please?
Many thanks!
PeTe
amin says
it’s a really useful post for all(beginners and advanced).also you can use css without blocking render to make your site or plugin faster.like
amin says
also you can remove some languages of the plugin.so delet .po and .mo files(if they are not usable) can load you faster.and remove helps files and pictures and you can minify your js and css(not necessary) and some more….
abubakar says
i have this website link is
i want to stop the ajax loading but i dont know how to do that can any one help me with that
i really appreciate it..
Thnakx
Jasmine says
Thanks for the tips @Wpbeginner. I love you guys!
Matus says
Could you please make a list of top social media share buttons for WP?
For example what are you using on your website to do that, plugin, Shareaholic or SumoMe? Or something made yourself?
Jasmine says
Try out Social Warfare plugin