Volver a Proyectos Listado de Artículos

Trucos para mejorar la velocidad de tu sitio web

Luis Ruiz

Escrito por Luis Ruiz Actualizado el

A lo largo de este artículo mostraremos código o recomendaciones para mejorar la carga de tu sitio web, algunos orientados a 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 WordPress.

Carga los scripts de terceros de forma más eficiente, y optimiza el JavaScript de publicidad

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.

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

Para desactivar que se inicialice OneSignal

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.

Mejora LCP al aplicar loading eager y decoding sync
Mejora LCP al aplicar loading eager y decoding sync
Primera imagen con loading=lazy
Primera imagen con loading=lazy
Imagen con Loading eager y Decoding sync
Imagen con Loading eager y Decoding sync

¿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. 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 );
Código en línea que añade WordPress 5.9

Añadir lazyload a las imágenes del menú multiidioma generado por WPML

En ocasiones tenemos que añadir en el footer de la web un selector multiidioma con sus banderas. Al cargar la página se realizan las peticiones de esas imágenes. Al estar en el footer, y no ser necesarias, lo mejor es retrasar la carga con un lazyload. Para añadir el selector mediante código se hace de la siguiente forma:

do_action('icl_language_selector');

Una solución muy sencilla de añadir el lazyload a las imágenes es almacenar el selector en el búfer de salida con «ob_start()», y añadir el lazyload en el búfer de la siguiente manera para luego imprimirlo.

ob_start();
do_action('icl_language_selector');
$language = ob_get_contents();
ob_end_clean();

// remplazamos el texto «src» por «loading="lazy" src» y lo imprimimos en la página
echo str_replace('src', 'loading="lazy" src', $language);

Con este simple código mejoramos la velocidad de la página

Optimizar WordPress multiidioma realizadas con WPML

Si te manejas con CSS, y prefieres dar estilo al menú de WPML, recuerda eliminar su CSS, así evitas reescribir sus estilos aumentando tu CSS y te ahorras una petición.

Buscamos en la vista de código del navegador el ID que tiene el link del CSS y lo ponemos en el código. En este caso era « <link rel=»stylesheet» id=»wpml-menu-item-0-css» href=»…. .css»> »

// Remove CSS WPML
define('ICL_DONT_LOAD_LANGUAGE_SELECTOR_CSS', true);
add_action( 'wp_enqueue_scripts', 'bk_dequeue_unnecessary_wpml', 20 );
function bk_dequeue_unnecessary_wpml() {
    wp_dequeue_style( 'wpml-menu-item-0-css' ); // ID del link del CSS a eliminar
    wp_deregister_style( 'wpml-menu-item-0-css' ); // ID del link del CSS a eliminar
}

Optimizar 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. 
}

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;
}