Cómo mejorar la velocidad de tu sitio web de WordPress

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.

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.

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.

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.

Desactiva eficientemente el Script heartbeat.js de WP Rocket

Uno de los factores que pueden afectar la velocidad de carga es la inclusión de scripts adicionales, como el archivo «heartbeat.js» proporcionado por el plugin WP Rocket.

La función wp_dequeue_script() es una función que permite desvincular y eliminar scripts específicos en WordPress. Aquí tienes un ejemplo concreto para eliminar la petición:

function bk_remove_heartbeat_script() {
    wp_dequeue_script( 'heartbeat' );
}
add_action('wp_print_scripts', 'bk_remove_heartbeat_script', 100);

La 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.

¿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»

Si utilizas el plugin Contact Form 7 te carga ficheros CSS y JS en todas las páginas. Añadiendo esté código en la acción wp_enqueue_scripts solo lo llamamos en la página de contacto.

if ( !is_page_template('page-templates/contact.php') ) {
    // Si no estamos en la página de contacto quitamos los ficheros del form.
    wp_dequeue_script('contact-form-7'); // Quita los ficheros JS.
    wp_dequeue_style('contact-form-7');  // Quita los ficheros CSS. 
}

Si necesitas más información sobre Formularios con Contact Form 7 u otras recomendaciones de optimización del plugin.

Cómo evitar poner imágenes en el fichero css

En algunas ocasiones necesitas insertar flechas en el CSS para indicar la dirección en un slider, apertura de desplegables, etc. Normalmente, añadimos una url de una imagen o la ponemos en base64. Los dos casos anteriores afectan a la carga del CSS. El primero tiene que hacer una petición retrasando la carga del CSS, y el segundo añade peso al fichero CSS.

Siempre que sea posible, lo mejor es sustituirlo por caracteres ASCII. Para la flecha derecha podemos usar la que vemos en esta url y la izquierda en esta otra, y lo aplicaríamos como se muestra en el siguiente código.

.arrow-left:after{
   content: '‹';
   font-weight: 700;
   color: #ff0000;
}