Técnicas de optimización web, de Javascript a funciones nativas

En este artículo veremos como mejorar la performance de nuestra aplicación o sitio web siguiendo los estándares de la web. Sustituiremos algunas de las interacciones que normalmente realizamos con Javascript o con funciones de WordPress, por las nuevas soluciones disponibles y soportadas de forma nativa por los navegadores modernos.

Estas técnicas nos ayudarán a desarrollar mejor nuestros temas de WordPress basados en Javascript e implementarlas en el FSE (full site editing).

Inconvenientes cuando utilizamos Javascript:

  • Páginas con tiempos de carga largos.
  • La página no se puede utilizar hasta que se carga el JavaScript.
  • La página no carga si tiene errores.
  • Falta de usabilidad, reactividad y accesibilidad, si no se tiene un equipo con los medios y recursos para prestarles atención.
  • Webs menos sostenibles.

Truncar el numero de lineas que queremos mostrar

En ocasiones tenemos un desarrollo con un diseño que requiere que se acorten los textos para evitar romper el diseño. Con esta técnica tendremos que tener en cuenta:

  • Número de caracteres a limitar.
  • Prestar atención al espaciado entre letras o la tipografía (no siempre va a ser igual para todas las variables y puede romper el diseño)
  • Los diseños cambian con el tiempo, hay que tenerlo en cuenta.

En WordPress tenemos una funcionalidad wp_trim_words() que sirve para limitar el número de palabras a mostrar, por ejemplo, es habitual utilizarlo para limitar el contenido a mostrar en un extracto o resumen de un listado o grid.

Podemos limitar parte del contenido con esta función de WordPress.

<?php echo wp_trim_words( get_the_content(), 40, '...' ); ?>

También se puede acortar el titulo con una función como esta.

<?php echo wp_trim_words( get_the_title(), 15 ); ?>

Para hacerlo de forma nativa, ahora disponemos de la propiedad line-clamp de CSS. El único inconveniente es la obligación de utilizar prefijos, para dar soporte a todos los navegadores antiguos. Empieza a usarlo en tus desarrollos de temas con WordPress para controlar las alturas de los resúmenes o títulos.

-webkit-line-clamp

Puedes ver el soporte tan alto que tiene en los navegadores:

Data on support for the css-line-clamp feature across the major browsers from caniuse.com

Con line-clamp podemos conseguir lo mismo con menos y con un mejor resultado. Puedes verlo en el siguiente ejemplo.

See the Pen Titulos truncados con CSS by israel (@chicho) on CodePen.

¿Necesitas un desarrollo web con WordPress a medida?

Me especializo en desarrollar sitios webs avanzados, programando soluciones personalizadas para proyectos web.

Smooth scrolling (desplazamiento suave)

Implementar esta funcionalidad en Javascript es un poco engorrosa, es cierto que hay cientos de scripts para copiar, pegar y modificar según tus necesidades (te dejo uno más abajo hecho con jQuery).

Estos scripts tienen una serie de problemas como:

  • Si nuestro sitio tiene una cabecera (header) con la posición fija, tendremos que modificar el script para restar el alto del total de la cabecera en el desplazamiento desplazamiento, si no, al desplazarse nos dejará la parte superior del contenido desplazado por debajo de la cabecera.
  • Tienes que indicar el tiempo de duración de la animación dentro del script, entonces, según el tiempo que le indiques y cuanto de desplazamiento haya hasta el punto de ancla, notarás que unas veces va muy lento y otras el desplazamiento es muy rápido. (se vuelve complicado determinar cuantos segundos tiene que durar la animación)

Siempre he utilizado este script de jQuery para WordPress, modificando el scrollTop según si tiene el header o cabecera fija, en tal caso en este script, donde pone 70, equivaldría a 70px del total de altura. Por lo tanto, lo cambiamos por el alto correspondiente en pixeles a nuestra cabecera fija. Y seguido donde pone 500 esto se corresponde a medio segundo de duración del desplazamiento. También lo modifico para ajustarlo a las necesidades del proyecto.

jQuery(document).ready(function( $ ){
//Universal function to animate href anchors
    $("a").on('click', function(event) {
	if (this.hash !== "") {
            event.preventDefault();
      
            var hash = this.hash
      
            $('html, body').animate({
                scrollTop: ($(hash).offset().top - 70)
            }, 500);
        } //e
    });
    $('course__menu-item a').on('click', function() {
        $('course__menu-item a').removeClass('active_anchor');
	$(this).addClass('active_anchor');
    });
});

De forma nativa con CSS, aparece el método scroll-behavior: smooth. Soportado con un porcentaje alto de los navegadores a excepción de Safari, el nuevo internet explorer. Se implementa de esta forma tan sencilla y es un buen recurso para incorporar en tus próximos desarrollos.

html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

El soporte en los navegadores aún no es del 100%, puedes seguir su evolución en esta tabla.

Data on support for the css-scroll-behavior feature across the major browsers from caniuse.com

Aquí puedes ver un ejemplo de como quedaría una página con un menú con anclas y el desplazamiento suave controlado de forma nativa con CSS. ¿A qué esperas para ponerlo en tu tema de WordPress personalizado?

Mantener los elementos más importantes siempre visibles

Hay elementos de un sitio o aplicación web que tienen que permanecer siempre a la vista del usuario como pueden ser:

  • Encabezado (header)
  • Carrito de compra
  • Icono de WhatsApp
  • Top Bar

Antes teníamos que escuchar eventos de desplazamiento de los elementos mediante Javascript, los cuales se disparaban muchisimas veces.

A día de hoy, esto ya lo podemos solucionar con Javascript mediante la API IntersectionObserver. Con esta API solo recibimos los eventos cuando el elemento entra o sale de la ventana gráfica. Eso es mucho más eficiente. Pero sigue siendo Javascript con todos sus inconvenientes de performance.

Cuando se detecta el elemento solo tenemos que cambiar la posición del elemento de position: relative a position: fixed

En la versión nativa, logramos este comportamiento aplicando al elemento mediante CSS un position: sticky. Más sencillo no puede ser.

Mejora sin duda los problemas de rendimiento, capacidad de respuesta y los saltos de contenido.

Se requiere de prefijos para su correcta implementación y compatibilidad con antiguos navegadores.


-webkit-sticky

Espero que estos consejos te sirvan de ayuda y mejores los tiempos de carga de tus desarrollos. Si tienes alguna duda o pregunta o si te ha gustado lo que has leído puedes dejar un comentario. Muchas gracias por tu visita.