Antes de nada, quiero decir que la mayoría de tweaks y trucos que voy a enseñar en este post puedes conseguir implementarlos mediante plugins de los que ya he hablado anteriormente (como, por ejemplo, Perfmatters o Machete). Sin embargo, mucha gente es reticente a la implementación de plugins para cosas simples, por lo que siempre tiene que existir una alternativa para realizar esto.
La gran mayoría de estos tweaks son fragmentos de código o snippets que se cargan en el functions.php del theme activo y que se ejecutan en toda la web.
Antes de nada, si no sabes cómo editar el functions.php del theme activo, a continuación te dejo un vídeo que tengo publicado en mi canal de YouTube:
Existen otra opción para editar el functions.php con menos complicaciones: el plugin Code Snippets, que podemos encontrar de forma gratuita en el repositorio de WordPress y con el que podemos tener todo mucho más controlado. Aquí tienes un vídeo sobre él:
Debes tener mucho cuidado, ya que si el código introducido no está bien en cuanto a sintaxis, tu sitio web puede caerse y dar error. Si te ocurre esto, creo que el post sobre solución de errores en WordPress que publiqué hace algún tiempo te será de utilidad: https://alvarofontela.com/solucion-problemas-errores-wordpress/
A continuación, te dejo el listado completo de tweaks para WordPress que puedes ver en este post.
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
Eliminar y desactivar los query strings
Los query strings son un problema, ya que pueden llegar a dificultar el cacheo en cache o CDN y, en la práctica, tan solo sirven para establecer una versión del archivo cacheado (hay otras formas de identificar estos archivos).
Por si no lo sabes, los query strings son los números que salen al final de las URL, tal que así:
1 | misitioweb.com/jquery.js?ver=1.12.4 |
Y con este código puedes desactivarlos por completo:
1 2 3 4 5 6 | function _remove_script_version( $src ){ $parts = explode( '?ver', $src ); return $parts[0]; } add_filter( 'script_loader_src', '_remove_script_version', 15, 1 ); add_filter( 'style_loader_src', '_remove_script_version', 15, 1 ); |
Esta es una de las primeras cosas que deberías hacer después de instalar tu WordPress, ya que vas a solucionar problemas en tres frentes diferentes.
Desactivar la carga de Google Fonts
Con un pequeño código en el functions.php del theme activo puedes desactivar por completo la carga de Google Fonts, aunque estén “llamadas” desde la maquetación de la web.
1 2 3 4 5 6 | add_filter( 'style_loader_src', function($href){ if(strpos($href, "//fonts.googleapis.com/") === false) { return $href; } return false; }); |
Este código es útil para themes multipurpose sobrecargados de los que puedes encontrar en ThemeForest, aunque tienes que tener cuidado de que no “rompa” nada en tu web.
Cargar Google Fonts en asíncrono
Si has visto post míos de WPO como el de optimizar el JS y CSS en WordPress, ya entenderás la necesidad de cargar recursos como el JS y el CSS en asíncrono.
Durante la carga asíncrona se cargan los estilos y los scripts en paralelo. Por el contrario, durante la carga síncrona se cargan de forma secuencial.
Este script debes insertarlo en la cabecera del sitio web, entre las etiquetas <head></head> del theme activo, o mediante algún plugin para meter scripts en la cabecera:
1 2 3 4 5 6 7 8 9 10 11 12 13 | <script type="text/javascript"> WebFontConfig = { google: { families: [ 'Noto+Serif:400,400italic,700,700italic' ] } // EJEMPLO }; (function() { var wf = document.createElement('script'); wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script> |
Recuerda que debes personalizarlo con las fuentes que tú utilices justo donde en el código pone el comentario “Ejemplo”. En caso contrario, el código no funcionará.
Esto también puedes hacerlo con el plugin que te explico en este artículo sobre la optimización de la carga de Google Fonts en WordPress: https://alvarofontela.com/optimizar-la-carga-de-google-fonts-wordpress/
Eliminar el enlace de respuesta de comentarios
Esto afecta al archivo comment-reply.min.js que carga WordPress. Es el encargado de que, cuando respondemos a un comentario, podamos contestar al que nosotros queramos. Esto es, en parte, con lo que se hacen los comentarios anidados en los blogs creados con WordPress.
Podemos desactivar el comment-reply.min.js (si no lo utilizamos) con el siguiente código en el functions.php del theme activo:
1 2 3 4 | function com_clean_header_hook(){ wp_deregister_script( 'comment-reply' ); } add_action('init','com_clean_header_hook'); |
Recuerda que esto no va a afectar a la posibilidad de que tus lectores dejen comentarios en WordPress, pero sí a que puedan responder a los comentarios que previamente han dejado otros lectores.
Con este método ahorraremos una petición a un archivo JS, que nunca está de más para el WPO de un sitio WordPress.
Eliminar jQuery Migrate en WordPress
jQuery Migrate es una librería dependiente de jQuery que sirve como transición para versiones antiguas de jQuery (1.9 y anteriores).
Si no la utilizas, ya que tienes la certeza de que todos los plugins que tienes utilizan las últimas versiones de jQuery, puedes desactivarlo con el siguiente código en el functions.php del theme activo:
1 2 3 4 5 6 7 | function isa_remove_jquery_migrate( &$scripts ) { if( !is_admin() ) { $scripts->remove( 'jquery' ); $scripts->add( 'jquery', false, array( 'jquery-core' ), '1.12.4' ); } } add_filter( 'wp_default_scripts', 'isa_remove_jquery_migrate' ); |
Con esto ahorraremos una petición a un JS que, en la mayoría de los casos y si tenemos todos los plugins actualizados, no vamos a necesitar.
Cargar jQuery desde el CDN de Google
Otra cosa que se suele hacer con plugins, pero que también podemos hacer con un snippet PHP en el functions.php del theme activo.
Google y CloudFlare tienen a disposición de los administradores de sitios web un CDN para ciertas librerías, entre ellas jQuery, la librería Javascript más utilizada.
Puedes cargar jQuery desde el CDN de Google con este código en el functions.php del theme activo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | add_action('init', 'jquery_google'); function jquery_google () { if (is_admin()) { return; } global $wp_scripts; if (isset($wp_scripts->registered['jquery']->ver)) { $ver = $wp_scripts->registered['jquery']->ver; $ver = str_replace("-wp", "", $ver); } else { $ver = '1.12.4'; } wp_deregister_script('jquery'); wp_register_script('jquery', "//ajax.googleapis.com/ajax/libs/jquery/$ver/jquery.min.js", false, $ver); } |
Y si quieres cargarlo desde el CDN de CloudFlare (que a mí me encanta) puedes hacerlo con este código en el functions.php del theme activo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | add_action('init', 'jquery_cloudflare'); function jquery_cloudflare () { if (is_admin()) { return; } global $wp_scripts; if (isset($wp_scripts->registered['jquery']->ver)) { $ver = $wp_scripts->registered['jquery']->ver; $ver = str_replace("-wp", "", $ver); } else { $ver = '1.12.4'; } wp_deregister_script('jquery'); wp_register_script('jquery', "//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js", false, $ver); } |
Evidentemente, en ambos casos puedes modificarlo para personalizar la versión de jQuery que vamos a cargar desde el CDN. En los scripts anteriores puedes ver como ejemplo la versión 1.12.4 de jQuery.
Desactivar el REST API de WordPress
En algunos casos (la gran mayoría), no necesitamos el REST API de WordPress para nada y podemos desactivarla para evitar que sea el foco de ataques indeseados.
Si queremos desactivar el REST API de WordPress, podemos hacerlo con el siguiente código en el functions.php del theme activo:
1 2 3 4 | add_filter( 'rest_authentication_errors', 'deshabilitar_rest_api' ); function deshabilitar_rest_api( $access ) { return new WP_Error( 'rest_disabled', 'El REST API esta desactivado', array( 'status' => rest_authorization_required_code() ) ); } |
Repito: es necesario asegurarse de que no va a interferir con ningún plugin o funcionalidad que vayamos a utilizar.
El REST API puede ser objeto de ataques de fuerza bruta que no solo lleguen a dañar el rendimiento, sino también el rendimiento.
Desactivar el REST API para usuarios NO autentificados
Desactivar el acceso al REST API para usuarios que NO estén autentificados es una opción para los sitios web que, por algún plugin, no puedan desactivar por completo el REST API.
Con este código podemos hacer que el REST API no funcione para usuarios NO autentificados. También hay que meterlo en el functions.php del theme activo:
1 2 3 4 5 6 7 8 9 | add_filter( 'rest_authentication_errors', function( $result ) { if ( ! empty( $result ) ) { return $result; } if ( ! is_user_logged_in() ) { return new WP_Error( 'rest_not_logged_in', 'No está conectado.', array( 'status' => 401 ) ); } return $result; }); |
Los plugins podrán seguir accediendo y los bots externos no tendrán acceso.
Deshabilitar oEmbed en WordPress
Mediante oEmbed podemos incrustar un contenido dentro de otro contenido. Mediante este método automático, podemos incrustar contenido de las principales redes sociales dentro de WordPress (incluidos vídeos de Youtube). Además, también podemos incrustar un post dentro de otro post.
Esta funcionalidad no la usa mucha gente. Algunos, como yo, preferimos insertar los vídeos con el código HTML en lugar de usar oEmbed.
Con este código podemos desactivar esta funcionalidad si lo introducimos en el functions.php del theme activo.
1 2 3 4 5 | remove_action('wp_head', 'wp_oembed_add_discovery_links', 10); add_action( 'wp_footer', 'remueve_wp_embed' ); function remueve_wp_embed(){ wp_dequeue_script( 'wp-embed' ); } |
Con esto nos ahorramos una petición HTTP a un Javascript, algo que no está del todo mal si lo miramos desde el punto de vista del WPO.
Controlar el API Heartbeat de WordPress
Del API Heartbeat y de sus ventajas e inconvenientes ya hemos hablado varias veces en este blog. De hecho, he publicado un post sobre el tema.
En las siguientes URLs puedes ver cómo manipular el API Heartbeat con snippets:
- Cómo desactivar el API Heartbeat de WordPress: https://alvarofontela.com/api-heartbeat-admin-ajax-php-wordpress/#desactivar_el_api_heartbeat_de_forma_manual
- Cómo limitar el API Heartbeat de WordPress: https://alvarofontela.com/api-heartbeat-admin-ajax-php-wordpress/#limitar_el_api_heartbeat_de_forma_manual
Simplemente a modo de recordatorio: el API Heartbeat es un API que permite que el código AJAX dinámico interactúe con el núcleo de WordPress. El API Heartbeat es la “culpable” de que puedas añadir productos al carrito de un WooCommerce sin necesidad de recargar la página, por ejemplo.
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
Desactivar widgets de sidebar y footer en WordPress
WordPress, de forma predeterminada, trae una serie de widgets nativos que podemos utilizar en ciertas zonas como el sidebar (lo más común) o en el footer en algunos themes. Aunque en sitios web creados íntegramente con Elementor Pro no hace realmente falta, en la mayoría de themes se utilizan los widgets e incluso se declaran nuevos widgets.
Este código es el que tienes que utilizar para desactivar los widgets. Simplemente debes utilizarlo en el functions.php del theme activo:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | add_action( 'widgets_init', 'remover_widgets'); function remover_widgets() { //ON unregister_widget('WP_Widget_Pages'); unregister_widget('WP_Widget_Calendar'); unregister_widget('WP_Widget_Archives'); unregister_widget('WP_Widget_Links'); unregister_widget('WP_Widget_Media_Audio'); //ON unregister_widget('WP_Widget_Media_Image'); unregister_widget('WP_Widget_Media_Video'); unregister_widget('WP_Widget_Media_Gallery'); unregister_widget('WP_Widget_Meta'); unregister_widget('WP_Widget_Search'); unregister_widget('WP_Widget_Text'); unregister_widget('WP_Widget_Categories'); unregister_widget('WP_Widget_Recent_Posts'); unregister_widget('WP_Widget_Recent_Comments'); unregister_widget('WP_Widget_RSS'); unregister_widget('WP_Widget_Tag_Cloud'); unregister_widget('WP_Nav_Menu_Widget'); unregister_widget('WP_Widget_Custom_HTML'); } |
Como puedes ver, solo con comentar //ON en la línea correspondiente al widget que NO quieres desactivar, puedes seleccionar los que no utilizas y así dejarlos inactivos.
Esta medida no ahorra peticiones, pero sí algo de carga de CPU en la ejecución de PHP.
Desactivar los feeds RSS en WordPress
Los feeds RSS pueden ser una muy buena herramienta para la sindicación de contenido, pero también pueden tener un doble filo, ya que los bots pueden scrapear contenido a través del feed.
Yo suelo desactivarlos salvo en proyectos formato blog donde sé que mis lectores utilizan servicios como Feedly. En webs corporativas o proyectos nicho siempre lo desactivo para evitar problemas.
Puedes desactivar los feeds RSS con este código PHP en el functions.php del theme activo:
1 2 3 4 5 6 7 8 9 10 | add_action('do_feed', 'deshabilitar_rss', 1); add_action('do_feed_rdf', 'deshabilitar_rss', 1); add_action('do_feed_rss', 'deshabilitar_rss', 1); add_action('do_feed_rss2', 'deshabilitar_rss', 1); add_action('do_feed_atom', 'deshabilitar_rss', 1); add_action('do_feed_rss2_comments', 'deshabilitar_rss', 1); add_action('do_feed_atom_comments', 'deshabilitar_rss', 1); function deshabilitar_rss() { wp_die( 'RSS off' ); } |
Algunos servicios externos pueden necesitar el feed para funcionar, por lo que debes tener cuidado.
Desactivar los comentarios en WordPress
Los plugins no son la única forma de desactivar los plugins en WordPress, ya que con el siguiente fragmento de código en el functions.php del theme activo puedes desactivar por completo los comentarios en todo el sitio web (ten en cuenta que esto no ocultará los ya existentes).
1 2 3 4 5 6 7 8 9 10 | add_action('admin_init', 'deshabilita_comentarios_posts'); function deshabilita_comentarios_posts() { $post_types = get_post_types(); foreach ($post_types as $post_type) { if(post_type_supports($post_type, 'comments')) { remove_post_type_support($post_type, 'comments'); remove_post_type_support($post_type, 'trackbacks'); } } } |
Y si quieres ocultar y cerrar los comentarios actuales que ya están publicados, puedes usar el mismo código en el functions.php del theme activo:
1 2 3 4 5 6 7 8 9 10 | add_filter('comments_open', 'cierra_comentarios_abiertos', 20, 2); add_filter('pings_open', 'cierra_comentarios_abiertos', 20, 2); function cierra_comentarios_abiertos() { return false; } add_filter('comments_array', 'ocultar_comentarios', 10, 2); function ocultar_comentarios($comments) { $comments = array(); return $comments; } |
Si utilizas un sistema de comentarios externo como Disqus, no desactives los comentarios: para que funcione, tiene que cargar el template por defecto. Si los desactivamos, no lo carga.
Desactivar los emojis en WordPress
Los emojis son bastante utilizados en sitios web y blogs informales, pero en otros ámbitos no se utilizan y por esa razón puede que queramos desactivarlos.
Podemos desactivar los emojis en WordPress (tanto en contenido como en comentarios) usando el siguiente snippet en el functions.php:
1 2 3 4 5 6 7 8 9 10 11 12 | add_action( 'init', 'deshabilitar_emojis' ); function deshabilitar_emojis() { remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' ); remove_filter( 'the_content_feed', 'wp_staticize_emoji' ); remove_filter( 'comment_text_rss', 'wp_staticize_emoji' ); remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' ); add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' ); add_filter( 'wp_resource_hints', 'disable_emojis_remove_dns_prefetch', 10, 2 ); } |
Con esto nos ahorramos una petición a un JS y eso nunca está mal para el WPO de un sitio web.
Desactivar el enlace RSD en WordPress
Es una funcionalidad que se enlaza desde la cabecera y que les indica a ciertos clientes donde se encuentra el XMLRPC, una funcionalidad que es recomendable desactivar para evitar problemas de seguridad actualmente.
Con el siguiente código añadido en el functions.php del theme activo podemos desactivar el enlace RSD:
1 | remove_action ('wp_head', 'rsd_link'); |
Con esto nos ahorramos una petición en la cabecera y, además, mejoramos la seguridad del sitio web.
Desactivar el XML-RPC.PHP de WordPress
Como hemos dicho antes, es importante desactivar el XML-RPC.PHP porque puede ser objeto de ataques de fuerza bruta. Actualmente, solo conozco un plugin que haga uso de esta funcionalidad y es Jetpack, un plugin que tampoco es muy recomendable por el alto uso de recursos.
En este caso, el código debemos introducirlo AL FINAL del wp-config.php de la instalación:
1 | add_filter('xmlrpc_enabled', '__return_false'); |
Si necesitas más información sobre el wp-config.php de WordPress puedes encontrarla en este post publicado hace algunos meses: https://alvarofontela.com/configurar-wp-config-php-wordpress/
Si complementamos la desactivación del XML-RPC mediante .htaccess con este tweak, conseguiremos hacer desaparecer por completo la brecha de seguridad.
Desactivar el enlace a WLW en WordPress
En la cabecera de cualquier WordPress también se hace una petición para añadir compatibilidad con WLW (Windows Live Writer), una aplicación que ya está en desuso y que se utilizaba para publicar en blogs.
Windows Live Writer era una aplicación de escritorio que estaba en el “pack” de Messenger y que ya no se actualiza.
Podemos desactivar esta compatibilidad con este código en el functions.php:
1 | remove_action( 'wp_head', 'wlwmanifest_link'); |
Con esto, mejoramos la seguridad y limpiamos el código de la cabecera de la instalación WordPress.
Desactivar los shortlinks o enlaces cortos de WordPress
De forma nativa, WordPress genera enlaces cortos para cada contenido con un acortador propio de Automattic. Aunque estos enlaces redireccionan, pueden ser bastante molestos e incluso llegar a causar ciertos conflictos.
Lo ideal es desactivarlos. Podemos hacerlo con el siguiente snippet en el functions.php:
1 | remove_action( 'wp_head', 'wp_shortlink_wp_head'); |
Así también limpiamos el código de la cabecera y eliminamos un enlace que es bastante “inútil”, ya que quien quiere acortar un enlace normalmente utiliza otro servicio.
Desactivar la versión de WordPress en el código
De forma nativa, WordPress incluye en el código (y en los query strings) la versión de WordPress con la que se está ejecutando el sitio web, y claro…esto puede llegar a ser un problema para la seguridad del sitio web en caso de no estar actualizado.
Con este código en el functions.php podemos desactivar esta función nativa:
1 2 3 4 | add_filter('the_generator', 'remueve_generador_wp'); function remueve_generador_wp() { return ''; } |
De todas formas, aunque desactivemos esta función, un consultor WordPress experimentado puede llegar a conocer la versión de WordPress con alguna extensión del navegador o mediante la revisión de la estructura de archivos descargado al navegador del visitante.
Desactivar pingbacks en WordPress
Los pingbacks, al igual que los trackbacks, pueden llegar a ser innecesarios actualmente porque muy poca gente los usa.
Con el siguiente código en el functions.php del theme activo, puedes desactivar los Pingbacks por completo:
1 2 3 4 5 6 | function disable_pingback( &$links ) { foreach ( $links as $l => $link ) if ( 0 === strpos( $link, get_option( 'home' ) ) ) unset($links[$l]); } add_action( 'pre_ping', 'disable_pingback' ); |
Otra razón para eliminar y desactivar los Pingbacks por completo es que nos pueden llegar a descontrolar el enlazado interno.
19 comentarios
Buenísimo artículo. Gracias Alvaro
Muchas gracias Jose 🙂
Excelente trabajo
Gracias 🙂
Mil gracias!!! Súper útil!! Me encantan estos truquitos!!
Gracias a ti por el comentario Victoria 😉
Genial Álvaro muy grande.
Gracias a ti por el comentario 🙂
hola alvaro acabo de poner el de los widgets una pregunta ¿Para desactivarlos hay que ponerlo en off?
Hola Marcos, entiendo que te refieres a que has puesto el tweak usando el plugin Code Snippets. Si es así, si puedes desactivarlo pasándolo a off.
Hola Álvaro,
Fantástico el artículo.
Una consulta: es más recomendable poner los tweaks en el functions.php o usar perfmatters ( u otro plugin)?
Gracias
Hola Iratxe, pues aquí ya depende de ti… hay gente que no se atreve a tocar el functions.php y prefiere plugins, pero a nivel rendimiento, el resultado es el mismo prácticamente, ya que la diferencia no la vas a notar en el uso normal.
Muchas gracias por la respuesta.
Y de nuevo, por el artículo.
Hola Alvaro, muchas gracias, buenísimo el post!
Te cuento que desactivé la carga de fuentes de Google Fonts y tal como lo advertiste que se puede romper algo, pues me pasó. Se rompió, ahora no puedo utilizar la fuente que había cargado, de hecho no puedo utilizar ninguna, ¿cómo deshago esto? ya he eliminado las líneas de código del functions.php y no pasa nada, sigue igual. Muchas gracias por tu respuesta.
Hola Josué, es algo normal, estas desactivando por completo Google Fonts, como su nombre indica.
Lo de que no se vea, posiblemente sea simplemente cache de navegador u OPCache, ya que al hacer estos cambios puede tocar las narices.
Hola Álvaro.
Muchas gracias por compartir estos trucos. Realmente están geniales y me han sido muy útiles.
Quiero aprovechar para consultarte si también sería posible cargar jquert-ui desde CloudFlare.
Actualmente es el recurso que mayor tiempo consume en el bloqueo del renderizado en mi página
.
Conseguí esto en CloudFlare pero no se si puedo usar el mismo fragmento de código que dejaste en este post.
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css
Muchas gracias. Un abrazo!
Hola Rey, si, puedes usar el tweak o incluso cargarlo desde Google CDN: https://www.namehero.com/startup/the-right-way-to-load-jquery-from-a-cdn-in-wordpress/
Averigue mucho de este tema instalando todos los plugins de WPO y optimizacion pero es la primera ves que veo el cargar Jquery desde el CDN, entonces, en caso de una instalacion normal con un theme simple como HELLO THEME recomiendas activar esta opcion ? wp rocket tambien tiene esta opcion creo: recomiendas cargar desde el CDN o ponerlo en async desde un plugin de cache ? GRACIAS ALVARITO
PARA MEJROPAR ESTE POST: Tambien podrias desactivar gutenberg y sus scripts si en caso solo usas elementor, tambien desactivar Capital P, tambien Disable dashicons y dejarlo solo para los ADMIN, tambien Disable REST API y dejarlo solo para ADMIN
Hola, la verdad es que este post se ha quedado algo desactualizado, por eso hay cosas que no menciona, como el caso de desactivar Gutenberg (cuando lo escribí no existía Gutenberg).
jQuery es uno de los “grandes problemas” del WPO y cualquier mejora es notable. Puedes cargarlo desde un CDN comun (el que uses para la web) o desde el oficial, yo prefiero la primera opción)
Por otro lado, puedes usar ambas técnicas con el jQuery, es decir, cargar asíncrono y al mismo tiempo, cargar desde un CDN. Lo que si que te recomiendo es hacer un preconnect al hostiname del CDN para acelerar la carga. Esto con WP Rocket lo puedes hacer, con los “DNS prefetch”.