Uno de los factores más críticos para la experiencia de usuario y el posicionamiento en buscadores es la velocidad de carga de una web. Un sitio lento no solo frustra a los visitantes, sino que también puede traducirse en una menor conversión, más rebote y peor visibilidad en Google.

Índice de contenidos

¿Tiene sentido mostrar la velocidad del tiempo de carga y uso de memoria?

Tanto administradores de sitios WordPress como desarrolladores debemos contar con herramientas que permitan medir de manera rápida y fiable los tiempos de carga. Tener estos datos a mano es fundamental para:

Diagnosticar problemas de rendimiento: detectar si hay plugins, temas o recursos externos que ralentizan la web.
Validar mejoras: comprobar de forma inmediata si un cambio de configuración, optimización de imágenes, actualización de hosting o implementación de caché realmente ha mejorado la velocidad.
Monitorizar en el día a día: disponer de una referencia rápida desde el propio WordPress, sin necesidad de acudir a servicios externos.
Transparencia en proyectos: mostrar a clientes o equipos técnicos el impacto de las decisiones en la carga de la web.

En esta guía tienes distintas formas de mostrar la velocidad del tiempo de carga de tu web WordPress, y alguna cosilla más, desde pequeños fragmentos de código que puedes añadir, hasta soluciones basadas en plugins listos para usar.

Cómo mostrar la velocidad del tiempo de carga y uso de memoria en WordPress con códigos

Para empezar aquí tienes una serie de códigos con los que mostrar el tiempo de carga de las páginas de tu web de distintas maneras. En todos los ejemplos solo se mostrará a usuarios conectados y con el perfil de administrador.

He probado todos y funcionan de maravilla. Es únicamente cuestión de gustos usar uno u otro.

Mostrar como ventana flotante el tiempo de carga

/** 
* Muestra en una ventana flotante el tiempo de carga 
*/

function wp_load_time_floating() {
if ( ! is_user_logged_in() || ! current_user_can( 'manage_options' ) ) return;

$time = timer_stop(0, 3);
?>
<div id="load-time-widget" style="
position:fixed;
bottom:10px; right:10px;
background:#222;color:#fff;
padding:8px 12px;
border-radius:4px;
font-size:13px;
z-index:9999;">
Cargada en <?php echo $time; ?> s
</div>
<style>#load-time-widget:hover{background:#444;cursor:pointer;}</style>
<?php
}
add_action('wp_footer', 'wp_load_time_floating');

Qué hace

Calcula el tiempo de carga con timer_stop().
Inserta una caja flotante en la esquina inferior‑derecha que muestra el tiempo de carga.

Mostrar como ventana flotante el tiempo de carga y uso de memoria

/**
* Muestra en una ventana flotante el tiempo de carga y el uso de memoria
*/
function mostrar_carga_y_memoria_flotante() {
// 1. Tiempo de carga (en segundos)
$tiempo = timer_stop(0, 3); // 3 decimales

// 2. Uso de memoria peak en MB
$mem_peak_bytes = memory_get_peak_usage(true);
$mem_peak_mb = round($mem_peak_bytes / 1024 / 1024, 2);

// 3. HTML + CSS para la ventana flotante
echo <<<HTML
<div id="load-info-box">
<p> Carga: {$tiempo}s | Memoria peak: {$mem_peak_mb} MB</p>
</div>

<style>
#load-info-box {
position: fixed;
bottom: 12px; right: 12px;
background:#111; color:#fff;
padding:8px 12px;
border-radius:4px;
font-family:sans-serif;font-size:.9em;
z-index:99999;
}
</style>
HTML;
}
add_action( 'wp_footer', 'mostrar_carga_y_memoria_flotante' );

Qué hace

Calcula el tiempo de carga con timer_stop().
Obtiene el pico de memoria usado por la página.
Inserta una caja flotante en la esquina inferior‑derecha que muestra ambos valores.

Mostrar en la barra superior de administración el tiempo de carga

/** 
* Añade al Admin Bar el tiempo de carga
*/

function wp_admin_bar_load_time( $wp_admin_bar ) {
if ( ! is_user_logged_in() || ! current_user_can( 'manage_options' ) ) return;

$time = timer_stop(0, 3);
$args = [
'id' => 'load-time',
'title' => "Cargada en {$time} s",
'meta' => ['class' => 'ab-load-time'],
];
$wp_admin_bar->add_node($args);
}
add_action('admin_bar_menu', 'wp_admin_bar_load_time', 100);

Qué hace

Calcula el tiempo de carga como con los códigos anteriores.
Inserta un nodo al admin_bar con la información.

Mostrar en la barra superior de administración el tiempo de carga y uso de memoria

/**
* Añade al Admin Bar el tiempo de carga + uso de memoria.
*/
function mostrar_carga_y_memoria_adminbar() {
if (!is_admin_bar_showing()) return; // Sólo cuando el bar está activo

global $wp_admin_bar;

// 1. Tiempo de carga (en segundos)
$tiempo = timer_stop(0, 3);

// 2. Uso de memoria peak en MB
$mem_peak_bytes = memory_get_peak_usage(true);
$mem_peak_mb = round($mem_peak_bytes / 1024 / 1024, 2);

// 3. Añadir nodo al Admin Bar
$wp_admin_bar->add_node( array(
'id' => 'load-info',
'title' => " Carga: {$tiempo}s | Memoria peak: {$mem_peak_mb} MB",
'href' => '#', // No enlaza a nada
'meta' => array('class'=>'load-info-node')
) );
}
add_action( 'wp_before_admin_bar_render', 'mostrar_carga_y_memoria_adminbar' );

Qué hace

Calcula la velocidad del tiempo de carga y uso de memoria como en los otros códigos.
Inserta un nodo al admin_bar con la información de ambas mediciones.

Mostrarlo el tiempo de carga usando un shortcode

/** 
* Muestra el tiempo de carga y uso de memoria
* donde añadas el shortcode [tiempo_carga]
*/

function ayudawp_lio_shortcode_load_info( $atts ) {
$info = ayudawp_lio_get_load_info();
return sprintf(
__( 'Página cargada en %s s (uso de memoria: %s MB)', 'ayudawp-load-info-enhanced' ),
esc_html( $info['time'] ),
esc_html( $info['memory'] )
);
}
add_shortcode( 'tiempo_carga', 'ayudawp_lio_shortcode_load_info' );

Qué hace

Registra el shortcode [tiempo_carga].
Si lo añades en cualquier contenido se mostrará la velocidad del tiempo de carga y el uso de memoria.

shortcode tiempo carga y uso de memoria visible wordpress

Código completo con página de ajustes y cuatro modos posibles de visualización de tiempo de carga y uso de memoria

Código con todas las opciones principales, como plugin completo, o quítale las líneas primera y última y puedes usarlo en tu archivo functions.php o con un plugin de snippets:

<?php
/*
Plugin Name: Información de tiempo de carga y uso de memoria
Description: Muestra el tiempo de carga y opcionalmente el uso de memoria en distintas posiciones.
Version: 1.0
Author: Fernando Tellado
Author URI: https://ayudawp.com/
Plugin URI: https://servicios.ayudawp.com
License: GPL v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ayudawp-load-info-enhanced
*/

if ( ! defined( 'ABSPATH' ) ) exit; // Seguridad básica

/* Opciones por defecto – se guardan en la base de datos */
function ayudawp_lio_default_options() {
return array(
/* modos disponibles:
* floating → ventana flotante (solo tiempo)
* admin_bar → barra admin (solo tiempo)
* floating_mem → ventana flotante + memoria
* admin_bar_mem → barra admin + memoria
*/
'display_mode' => 'floating',
);
}

/* Página de ajustes en el panel de administración */
function ayudawp_lio_add_settings_page() {
add_options_page(
__( 'Ajustes de tiempo de carga', 'ayudawp-load-info-enhanced' ),
__( 'Tiempos de carga', 'ayudawp-load-info-enhanced' ),
'manage_options',
'ayudawp-load-info-enhanced',
'ayudawp_lio_render_settings_page'
);
}
add_action( 'admin_menu', 'ayudawp_lio_add_settings_page' );

function ayudawp_lio_save_settings() {
if ( ! current_user_can( 'manage_options' ) ) return;

check_admin_referer( 'ayudawp_lio_settings_nonce', '_nonce' );

$mode = isset( $_POST['display_mode'] )
? sanitize_text_field( wp_unslash($_POST['display_mode']) )
: 'floating';

update_option( 'load_info_enhanced', array( 'display_mode' => $mode ) );
}

function ayudawp_lio_render_settings_page() {
if ( ! current_user_can( 'manage_options' ) ) return;

/* Guardar cambios si se envió el formulario */
if ( isset($_POST['submit']) ) ayudawp_lio_save_settings();

$options = get_option( 'load_info_enhanced', ayudawp_lio_default_options() );
$mode = esc_attr( $options['display_mode'] );

?>
<div class="wrap">
<h1><?php _e( 'Ajustes de tiempo de carga y uso de memoria', 'ayudawp-load-info-enhanced' ); ?></h1>

<form method="post" action="">
<?php wp_nonce_field( 'ayudawp_lio_settings_nonce', '_nonce' ); ?>

<table class="form-table" role="presentation">
<tr valign="top">
<th scope="row"><?php _e( 'Modo de visualización', 'ayudawp-load-info-enhanced' ); ?></th>
<td>
<?php foreach ( array(
'floating' => __( 'Caja flotante – solo tiempo de carga', 'ayudawp-load-info-enhanced' ),
'admin_bar' => __( 'Barra de admin – solo tiempo de carga', 'ayudawp-load-info-enhanced' ),
'floating_mem' => __( 'Caja flotante – tiempo de carga y uso de memoria', 'ayudawp-load-info-enhanced' ),
'admin_bar_mem' => __( 'Barra de admin – tiempo de carga y uso de memoria', 'ayudawp-load-info-enhanced' ),
) as $value => $label ): ?>
<label>
<input type="radio" name="display_mode" value="<?php echo esc_attr( $value ); ?>" <?php checked( $value, $mode ); ?>>
<?php echo esc_html( $label ); ?>
</label><br>
<?php endforeach; ?>
</td>
</tr>
</table>

<?php submit_button(); ?>
</form>
</div>
<?php
}

/* Funciones auxiliares: tiempo y memoria */
function ayudawp_lio_get_load_info() {
$tiempo = timer_stop(0, 3); // 3 decimales
$mem_peak_bytes = memory_get_peak_usage( true ); // peak memory (real)
$mem_peak_mb = round( $mem_peak_bytes / 1024 / 1024, 2 );

return array(
'time' => $tiempo,
'memory' => $mem_peak_mb
);
}

/* Ventana flotante (solo tiempo o con uso de memoria) */
function ayudawp_lio_floating_box() {
$info = ayudawp_lio_get_load_info();

/* Sólo se muestra si el modo activo lo permite */
$options = get_option( 'load_info_enhanced', ayudawp_lio_default_options() );
if ( ! in_array( $options['display_mode'], array('floating','floating_mem') ) ) return;

/* Generar la caja */
?>
<div id="ayudawp-lio-floating-box">
<p>
<?php
printf(
esc_html__( ' Tiempo de carga: %s s', 'ayudawp-load-info-enhanced' ),
$info['time']
);
if ( in_array( $options['display_mode'], array('floating_mem') ) ) {
printf(
esc_html__( ' | Uso de memoria: %s MB', 'ayudawp-load-info-enhanced' ),
$info['memory']
);
}
?>
</p>
</div>

<style>
#ayudawp-lio-floating-box{
position:fixed;
bottom:12px; right:12px;
background:#111;color:#fff;
padding:8px 12px;border-radius:4px;
font-family:sans-serif;font-size:.9em;
z-index:99999;
}
</style>
<?php
}
add_action( 'wp_footer', 'ayudawp_lio_floating_box' );

/* Nodo en la barra admin (solo tiempo o con memoria) */
function ayudawp_lio_admin_bar_node() {
if ( ! is_admin_bar_showing() ) return; // Sólo cuando se muestra el bar

$options = get_option( 'load_info_enhanced', ayudawp_lio_default_options() );
if ( ! in_array( $options['display_mode'], array('admin_bar','admin_bar_mem') ) ) return;

global $wp_admin_bar;
$info = ayudawp_lio_get_load_info();

$title = sprintf(
esc_html__( ' Tiempo de carga: %s s', 'ayudawp-load-info-enhanced' ),
$info['time']
);
if ( in_array( $options['display_mode'], array('admin_bar_mem') ) ) {
$title .= ' | ' . sprintf(
esc_html__( 'Uso de memoria: %s MB', 'ayudawp-load-info-enhanced' ),
$info['memory']
);
}

$wp_admin_bar->add_node( array(
'id' => 'ayudawp-lio-load-info',
'title' => $title,
'href' => '#',
'meta' => array( 'class' => 'ayudawp-lio-load-info-node' ),
) );
}
add_action( 'wp_before_admin_bar_render', 'ayudawp_lio_admin_bar_node' );

/* Opcional: Mostrar solo si el usuario está conectado y es admin */
function ayudawp_lio_mostrar_solo_admin() {
$options = get_option( 'load_info_enhanced', ayudawp_lio_default_options() );

/* Si se desea restringir a admins, cambia la condición aquí */
if ( ! current_user_can('manage_options') ) return false;

return true;
}

/* Si quieres usar un shortcode en el contenido - Usa [tiempo_carga] */
function ayudawp_lio_shortcode_load_info( $atts ) {
$info = ayudawp_lio_get_load_info();
return sprintf(
__( 'Página cargada en %s s (uso de memoria: %s MB)', 'ayudawp-load-info-enhanced' ),
esc_html( $info['time'] ),
esc_html( $info['memory'] )
);
}
add_shortcode( 'tiempo_carga', 'ayudawp_lio_shortcode_load_info' );

/* Registra traducciones */
function ayudawp_lio_load_textdomain() {
load_plugin_textdomain( 'ayudawp-load-info-enhanced', false, dirname( plugin_basename(__FILE__) ) . '/languages/' );
}
add_action( 'plugins_loaded', 'ayudawp_lio_load_textdomain' );
?>

Cómo usarlo como plugin

Copia el bloque completo en un archivo PHP llamado ayudawp-load-info-enhanced.php.
Sube el archivo a /wp-content/plugins/ y activa el plugin desde el panel de administración.
Ve a Ajustes → Tiempos de carga para elegir la visualización que prefieras.

Cómo mostrar la velocidad del tiempo de carga y uso de memoria en WordPress con plugins

Si lo prefieres, también hay algunos plugins que te ofrecen visualizar la velocidad del tiempo de carga, y más cosas. Estos son los mejores:

Query Monitor
Uno de los plugins más completos para desarrolladores. Muestra tiempos de carga de página, picos de memoria, consultas a base de datos, hooks y muchísimo más.
Debug Bar
Añade una barra de depuración en la parte superior con información sobre tiempos de ejecución, peticiones y uso de memoria. No muestra exactamente el tiempo de carga de las páginas sino parámetros más detallados.

Ya me dirás qué método te ha gustado más, y cualquier mejora que se te ocurra 😉