En esta página voy a ir guardando algunos consejos que he ido poniendo en Twitter para mejorar la velocidad de tu sitio web. Muchos de ellos están orientados a mejorar velocidad WordPress, veremos como optimizar JavaScript en WordPress y también optimizar CSS en WordPress de una forma sencilla.
Si bien estos consejos te ayudarán a mejorar significativamente la velocidad de tu WordPress y WooCommerce, entiendo que no todos se sienten cómodos trabajando directamente con código o tal vez no tengan el tiempo necesario para dedicarle a estas optimizaciones.
Si este es tu caso, te invito a conocer nuestro servicio especializado de optimización WordPress. Nosotros nos encargaremos de todos los aspectos técnicos por ti, asegurando que tu sitio web no solo sea rápido, sino también eficiente y ajustado a las mejores prácticas.
Carga los scripts de terceros de forma más eficiente, y optimizar adsense WordPress
Unos de los elementos que más ralentiza una web son los scripts de terceros, sobre todo los de publicidad. En este tip de optimización lo que hacemos es cargar el script de publicidad (Adsense) una vez que el usuario haga scroll.
Así, la web cargará más rápido, lo que es bueno para el posicionamiento y para el usuario.
<script type="text/javascript">
//<![CDATAL
var la=!1;window.addEventListener("scroll",function(){
(0!=document.documentElement.scrollTop&&!1===la||0!=document.body.scrollTop&&!1===la)&&(!function(){
var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-vuestroadsenseid";
var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),la=!0)},!0);
//]]>
</script>Este truco es válido tanto para webs realizadas con WordPress, como para otros tipos de webs.
Reduce el impacto de CSS en el tiempo de carga de la página
El CSS es uno de los principales factores que afectan al tiempo de carga de la página. Una vez que el HTML encuentra un archivo CSS, espera a que se descargue el archivo y se cree el CSSOM, se combine con el árbol DOM para crear el «Render Tree», y dar un correcto estilo a la página. Por tanto, se dice que el CSS bloquea el renderizado de la página.
Cuanto mayor sea este archivo, mayor será el tiempo consumido para realizar el renderizado. Por esa razón solo debemos tener en el archivo el CSS necesario para dar estilo a esa página.
Usar CSS sin bloqueo
Para resolver este problema podemos usar un truco que mejora el rendimiento. Para ello, haremos que el navegador no espere a que descargue el CSS, y que cree el CSSOM durante la carga de la página inicial.
Con el siguiente código especificaremos que el CSS es para imprimir, lo que significa que el CSS no se aplicará inicialmente, y se aplicará una vez que el usuario intente «imprimir». Hemos añadido en el código que, cuando el archivo está cargado, cambie el tipo de «medios» a «todos» mediante la función «onload», haciendo así disponible el CSS a todos los medios.
<link rel="stylesheet" href="/path/custom.css" media="print" onload="this.media='all'">Esta técnica solo la utilizaremos en elementos que solo se muestren o no tengan impacto en de la carga inicial de la página.
Os recomiendo que veáis la ponencia de Carlos Villuendas que dió en Codemotion sobre «Acelerando Domestika – Una historia sobre web performance» y habla sobre este tema en el minuto 18:44.
Podéis ver más ponencias sobre «Web Performance» en una serie que hicieron con el gran maestro de ceremonias Joan León.
Realizar petición AJAX solo cuando lo necesites
Muchas veces, para mejorar la velocidad de nuestra página, retrasamos la llamada AJAX varios segundos si la información que necesitamos se encuentra en la parte no visible de la web.
Este método no funciona del todo bien y es un poco «hacer trampa». Creo que la mejor forma de hacer esto es realizar la llamada cuando el scroll de la página se acerque al módulo que lo necesite.
Por ejemplo, al final de la página de un artículo queremos hacer una petición a Twitter y traernos varios tweets para mostrarlos. Si el usuario no llega al módulo, o tarda en llegar a ese bloque, es una perdida de recursos y tiempo de carga en hacer la petición si no se va a usar.
Utilizando la API Observador (Observer) de JavaScript podremos ejecutar una acción cuando el usuario esté en el sitio que le indiquemos.
let options = {
root: null,
rootMargin: '0px',
threshold: 0.5
}
let observer = new IntersectionObserver(callbackObserver, options);
observer.observe(document.querySelector('.content-box'));Con threshold al 0.5, indicamos que se lance la acción cuando el elemento con la clase «content-box» este en el 50% dentro de la zona visible de la página. Si lo necesitas al 100% sería «1.0»
Y la acción en esta ocasión es:
function callbackObserver(entries, observer){
entries.forEach((entry) => {
if (entry.isIntersecting) {
callRss();
observer.unobserve(entry.target);
}
});
}Con «callRss» llamaríamos a la función que realiza la petición y muestra los datos. Y con «unobserve» paramos la observación de ese elemento.
Realizar la carga de un fichero de JavaScript solo cuando sea necesario
Normalmente se retrasa la carga de ficheros JavaScript, o se cargan los ficheros JavaScript al mover el scroll.
Estamos en el mismo caso que hemos visto anteriormente. En esta ocasión vamos a ver como usar Observer para cargar un archivo JS solo cuando entre en pantalla el elemento que indiquemos.
Utilizaremos el siguiente código para indicar que el navegador observe el elemento indicado.
let options = {
root: null,
rootMargin: '0px',
threshold: 0.5
}
let observer = new IntersectionObserver(loadScrip, options);
observer.observe(document.querySelector('.content-box'));Con la siguiente función lo que hacemos es cargar un JS de un proveedor externo cuando llegue al elemento indicado.
function loadScript(entries, observer){
entries.forEach((entry) => {
if (entry.isIntersecting) {
var element = document.createElement('script');
element.defer = 'true';
element.src = 'https://www.ejemplo.com/main.js';
document.body.appendChild(element);
observer.unobserve(entry.target);
}
});
}Recordad parar la observación con «unobserve» para que no está llamando al JavaScript cada vez que el módulo entre en la parte visible de la pantalla al moverse por ella.
Cómo evitar y detectar imágenes pesadas en WordPress
La optimización de imágenes es un factor clave en la velocidad y el rendimiento de un sitio web. Las imágenes pesadas pueden tener un impacto negativo en la experiencia del usuario y en el posicionamiento en los resultados de búsqueda.
Es esencial comprobar el tamaño y la resolución de las imágenes antes de subirlas a tu sitio web. Si son demasiado grandes, redimensionarlas o comprimirlas puede ser una solución efectiva.
Finalmente, es importante utiliza herramientas de monitoreo para localizar imágenes pesadas, y posteriormente optimízalas, lo que mejorará la experiencia del usuario y el posicionamiento en los resultados de búsqueda.
Sustituir Lazyload por Eager y añadir atributo Decoding en la primera imagen.
Parece que WordPress no elimina el atributo «loading=lazy» en la primera imagen en todos los casos. Esto penaliza el LCP de las CWV. Vamos a mejorar la métrica LCP con un sencillo código.
En lugar de eliminar el atributo «loading» vamos a cambiar su valor por «eager», y aprovecharemos para añadir el parámetro «decoding». Si estamos en la home, lo haremos con el siguiente código.
add_filter ('the_content', 'bk_wpo_first_img');
function bk_wpo_first_img($content) {
if ( is_home() ) {
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName('img');
$index = 0;
if ( !empty($imgs) ) {
foreach( $imgs as $img ) {
if ( !$index ) {
$img->setAttribute('loading', 'eager');
$img->setAttribute('decoding', 'sync');
} else {
$img->setAttribute('decoding', 'async');
}
++$index;
};
$html = $document->saveHTML();
return $html;
}
return $content;
} else {
return $content;
}
}Solo añadiremos este código si estamos seguro de que la primera imagen es el mayor elemento del contenido renderizado en el viewport
Y esta es la mejora después de implementarlo.
En nuestra constante búsqueda por mejorar la métrica LCP con un código sencillo, hemos abordado el cambio del atributo de carga de ‘lazy’ a ‘eager’ y la adición del parámetro ‘decoding’.
Esto se ha aplicado especialmente en la primera imagen en los casos donde WordPress no elimina por defecto el atributo ‘loading=lazy’. Esta técnica ha demostrado ser eficaz para optimizar el LCP, una métrica crucial en las Core Web Vitals.
Sin embargo, es importante señalar que el mundo del desarrollo web está en constante evolución, y lo que es efectivo hoy puede no serlo mañana. En este sentido, es posible que esta técnica haya evolucionado o incluso se haya vuelto obsoleta con las nuevas versiones de WordPress.
Por eso, te invitamos a consultar nuestra publicación más reciente: Mejora la velocidad de carga de tus imágenes en WordPress, donde mostramos las últimas estrategias y herramientas disponibles para mantener tu sitio web al día con las mejores prácticas en velocidad y rendimiento de carga de imágenes.
Desactiva la llamada al script heartbeat.js de WP Rocket
Uno de los factores que pueden afectar la velocidad de carga de tu sitio es la inclusión de scripts adicionales, como el archivo heartbeat.js, que es proporcionado por el plugin WP Rocket.
Si prefieres una solución sin código para desactivar este script, WP Rocket ofrece una opción sencilla directamente en su interfaz. A continuación, te explicamos los pasos para desactivar el control del Heartbeat:
- Accede a la configuración de WP Rocket: Dirígete a Ajustes en tu panel de administración de WordPress y selecciona WP Rocket.
- Navega a la sección Heartbeat: En el menú lateral izquierdo, selecciona Heartbeat.
- Desactiva la opción «Controlar Heartbeat»: Marca la casilla para desactivar el control de la API Heartbeat.
Una vez desactivado, WP Rocket reducirá o eliminará la actividad de la API Heartbeat en tu sitio, lo que puede contribuir a mejorar el rendimiento al reducir la carga del servidor.
A continuación, puedes ver una captura de pantalla que ilustra este proceso:
Si prefieres una solución con código, puedes utilizar la función wp_dequeue_script() en WordPress para desactivar el script manualmente. Aquí tienes un ejemplo:
function bk_remove_heartbeat_script() {
wp_dequeue_script( 'heartbeat' );
}
add_action('wp_print_scripts', 'bk_remove_heartbeat_script', 100);
Esta acción se ejecuta en el hook wp_print_scripts con una prioridad de 100, asegurando que el script se desactive después de que se hayan cargado todos los demás scripts.
Ambas opciones, NoCode y con código, son efectivas para desactivar el script heartbeat.js, permitiéndote mejorar la velocidad de carga de tu sitio.
Gestiona los errores 404 de tu web de una forma eficaz y optimiza la carga de archivos estáticos
Cada vez que tu servidor debe presentar una página 404, WordPress lleva a cabo una serie de procesos internos complejos: invoca index.php, carga archivos esenciales como wp-config.php y wp-load.php, y ejecuta consultas a la base de datos. Todo este esfuerzo para generar una página que, en muchas ocasiones, no aporta ningún valor.
Imagina un escenario común: alguien intenta acceder a un archivo estático inexistente, como un CSS, JS, o JPG. No es necesario activar toda la infraestructura de WordPress solo para indicar que ese archivo no se encuentra disponible. Para evitar esta carga innecesaria, puedes configurar tu servidor para que gestione estas situaciones de manera más eficiente, devolviendo un simple error 404 sin la necesidad de involucrar a WordPress.
Aquí te mostramos cómo hacerlo tanto en servidores Apache como Nginx:
Configuración de ficheros estáticos en Apache
Para evitar que WordPress realice todo ese esfuerzo cuando un archivo estático no se encuentra, puedes añadir la siguiente regla en el archivo .htaccess de tu servidor Apache:
RewriteCond %{REQUEST_FILENAME) \-f
RewriteRule \.(jpg|jpeg|png|gif|webp|avif|svg|xls|doc|pdf|ico|eot|ttf|woff|woff2|otf|css|js|xml|zip|tar|gz|rar)$ - [NC,R=404,L]Con esta regla, cuando se intente acceder a un archivo con las extensiones mencionadas y el archivo no exista, el servidor devolverá un error 404 de manera inmediata, sin cargar toda la infraestructura de WordPress. Esto no solo ahorra recursos del servidor, sino que también mejora la velocidad y eficiencia de tu sitio web.
Configuración de ficheros estáticos en Nginx
Para los usuarios de Nginx, la implementación de una configuración similar es igualmente sencilla y efectiva. Puedes añadir la siguiente regla en tu configuración de Nginx:
location ~* \.(jpg|jpeg|png|gif|webp|avif|svg|xls|doc|pdf|ico|eot|ttf|woff|woff2|otf|css|js|xml|zip|tar|gz|rar)$ {
return 404;
}Con esta configuración, Nginx devolverá un error 404 cuando se intente acceder a archivos inexistentes con las extensiones especificadas, sin necesidad de procesar todo WordPress. Esto optimiza el rendimiento del servidor y mejora la experiencia del usuario.
¿Cómo deshabilitar el estilo en línea «global-styles-inline-css»?
La versión 5.9 de WordPress añade estilos en línea antes de la etiqueta del body, si no utilizas esos estilos lo mejor es eliminarlos para que no afecten a la velocidad de carga de la página y así optimizar el CSS de WordPress. Con el siguiente código solucionas el problema y puedes añadirlo, por ejemplo en el archivo «functions.php»
// REMOVE THEME.JSON
function bk_remove_wp_global_styles(){
wp_dequeue_style( 'global-styles' );
}
add_action( 'wp_enqueue_scripts', 'bk_remove_wp_global_styles', 100 );
Optimiza la carga de Script y CSS en formularios «Contact Form 7»
Al trabajar con el plugin Contact Form 7 en WordPress, es común que cargue archivos CSS y JavaScript en todas las páginas de tu web, incluso en aquellas donde el formulario no se muestra. Esto puede ralentizar la carga de tu sitio, afectando la experiencia del usuario y el rendimiento. Para optimizar esta carga, te mostraré cómo asegurarnos de que estos archivos solo se incluyan en la página de contacto.
¿Por qué optimizar la carga de Contact Form 7?
CF7 es uno de los plugins de formulario más populares, pero su implementación estándar puede añadir archivos innecesarios en páginas que no contienen formularios. Al reducir estos archivos adicionales, mejoramos el rendimiento del sitio, logrando tiempos de carga más rápidos, especialmente importante para SEO y la experiencia de usuario.
Código para eliminar archivos de Contact Form 7 en temas clásicos
En temas clásicos, donde definimos la estructura de la página de contacto mediante plantillas, podemos condicionar la carga de estos archivos a una página específica. A continuación, muestro cómo hacerlo con una condición en la acción wp_enqueue_scripts para cargar los archivos solo en la página de contacto.
add_action('wp_enqueue_scripts', function() {
// Verificamos si NO estamos en la plantilla de contacto
if ( !is_page_template('page-templates/contact.php') ) {
// Si no estamos en la página de contacto, eliminamos los archivos del formulario
wp_dequeue_script('contact-form-7'); // Elimina los archivos JS de Contact Form 7
wp_dequeue_style('contact-form-7'); // Elimina los archivos CSS de Contact Form 7
}
});Con esto, los archivos se cargarán únicamente cuando se visualice la página de contacto.
Código para eliminar archivos de Contact Form 7 en temas de Full Site Editing (FSE)
En temas que usan Full Site Editing (FSE), la carga condicional de los archivos se realiza de forma diferente. Aquí, verificamos el slug de la plantilla en lugar de un archivo específico de plantilla.
add_action('wp_enqueue_scripts', function() {
global $post;
// Obtenemos el slug de la plantilla de la página actual
$slug_tpl = get_page_template_slug($post->ID);
// Si el slug no corresponde al de la página de contacto, removemos los archivos
if ( 'page-contact' !== $slug_tpl ) {
wp_dequeue_script('contact-form-7'); // Quita los ficheros JS.
wp_dequeue_style('contact-form-7'); // Quita los ficheros CSS.
}
});
Con get_page_template_slug obtenemos el slug de la plantilla utilizada en la página actual y verificamos que el slug no sea «page-contact», asegurándonos de que los archivos solo se carguen en la página de contacto.
Implementando estos ajustes, optimizamos el rendimiento de nuestro sitio, limitando la carga de scripts y estilos de Contact Form 7 solo a las páginas necesarias. Esto no solo mejora el tiempo de carga, sino también la puntuación en herramientas como Core Web Vitals de Google, vital para el SEO y la experiencia del usuario.
Si tienes más dudas sobre Formularios con Contact Form 7 o quieres conocer otras recomendaciones de optimización, ¡no dudes en consultarnos!
Código para cargar los archivos de Contact Form 7 solo si se usa su shortcode
En algunos casos, es posible que utilices el formulario de Contact Form 7 en diferentes ubicaciones de tu sitio sin depender de una plantilla específica, como puede ser en una entrada del blog o dentro de un widget. Si es así, una estrategia más efectiva es cargar los archivos CSS y JS del plugin únicamente cuando el contenido incluya el shortcode del formulario.
Esto evita cargar scripts innecesarios en páginas donde no existe ningún formulario, lo que se traduce en tiempos de carga más rápidos y mejores resultados en Core Web Vitals, fundamentales para el SEO.
Agrega el siguiente código en el archivo functions.php de tu tema o en un plugin personalizado. Este fragmento verifica si el contenido de la página o entrada contiene el shortcode «Contact Form 7» antes de permitir que se carguen sus estilos y scripts.
add_action('wp_enqueue_scripts', function() {
// Solo en páginas individuales o entradas
if ( is_singular() ) {
global $post;
// Si el contenido NO incluye el shortcode de Contact Form 7, eliminamos los estilos y scripts
if ( !has_shortcode( $post->post_content, 'contact-form-7' ) ) {
wp_dequeue_script('contact-form-7'); // Desactiva el JS de Contact Form 7
wp_dequeue_style('contact-form-7'); // Desactiva el CSS de Contact Form 7
// Scripts adicionales que CF7 podría cargar
wp_dequeue_script('wpcf7-recaptcha');
wp_dequeue_script('google-recaptcha');
}
} else {
// Si no es una página o entrada individual, también eliminamos por si acaso
wp_dequeue_script('contact-form-7');
wp_dequeue_style('contact-form-7');
// Scripts adicionales que CF7 podría cargar
wp_dequeue_script('wpcf7-recaptcha');
wp_dequeue_script('google-recaptcha');
}
});
Recuerda revisar si tienes shortcodes de Contact Form 7 en otros lugares, como widgets o constructores visuales, para asegurarte de que este código cubra todos los escenarios de tu web.
Optimizar plugin Onesignal de WordPress para que tu web cargue más rápido.
Realizando la optimización de la web de un cliente detectamos que unos de los problemas que tenía la página era el plugin «OneSignal» , ya realiza muchas peticiones a diferentes archivos locales , y a un CDN externo.
Además, el mensaje que se muestra para aceptar las modificaciones, afectaba al LCP cuando estabas en móvil, y en según que páginas. Lo primero que hicimos fue desactivar que se inicializara «OneSignal», no quita todo lo que inserta, pero se nota bastante. Para hacerlo, nos vamos a su configuración, y marcamos la opción «Disable OneSignal initialization».
Luego lo inicializamos manualmente retrasándolo 8 segundos, añadiendo en el script con el hook wp_footer , en el footer, con el siguiente código.
add_action('wp_footer', 'bk_add_footer', 10);
function bk_add_footer(){
?>
<script>
setTimeout(() => {
window.OneSignal = window.OneSignal || [];
window.OneSignal.push(function() {
OneSignal.SERVICE_WORKER_UPDATER_PATH = "wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKUpdaterWorker.js";
OneSignal.SERVICE_WORKER_PATH = "wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/OneSignalSDKWorker.js";
OneSignal.SERVICE_WORKER_PARAM = { scope: "wp-content/plugins/onesignal-free-web-push-notifications/sdk_files/" };
delete window._oneSignalInitOptions.path
window.OneSignal.init(window._oneSignalInitOptions);
});
}, 7000);
</script>
<? } ?>Con este sencillo cambio, pasamos de 80 a 92 en PageSpeed.
Conclusión: ¿Por qué es importante optimizar la carga de recursos en WordPress?
A lo largo de este artículo hemos visto diferentes estrategias para mejorar la velocidad de carga de tu sitio web en WordPress, desde la optimización de scripts de terceros y CSS, hasta la carga condicional de recursos como los de Contact Form 7.
Implementar estas técnicas no solo mejora el rendimiento técnico del sitio, sino que también tiene un impacto directo en la experiencia de usuario y el SEO, dos pilares fundamentales para cualquier proyecto online.
- Reduce las solicitudes HTTP innecesarias, lo que disminuye el tiempo de carga inicial y acelera la respuesta de tu web.
- Minimiza el tamaño total de la página, mejorando métricas como el Time to Interactive (TTI) y el Largest Contentful Paint (LCP), aspectos clave para el posicionamiento en buscadores y para superar las exigencias de Core Web Vitals.
- Evita la carga de recursos en páginas que no los requieren, reduciendo el consumo de ancho de banda y mejorando el rendimiento en dispositivos móviles o conexiones lentas.
Si necesitas que tu sitio WordPress cargue más rápido y cumpla con las mejores prácticas de SEO, en Bubuku I Code podemos ayudarte a crear una estrategia de optimización completa, para que tu web cargue rápido, convierta mejor y posicione donde debe estar: en los primeros resultados de Google.
