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.

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