¿Qué ventajas WPO ofrece sobre otros themes?

Principalmente destacamos las siguientes:

Carga de recursos estáticos (JS y CSS) solo si realmente se necesitan

No se cargará código que no se vaya a renderizar. Esto históricamente con HTTP/1.1 era una mala práctica, porque implica realizar un mayor número de peticiones HTTP, con la consecuente latencia, pero quedó obsoleto cuando se implantó HTTP/2 y la descarga paralela de recursos.

Esto permite ahorrar en bytes transmitidos y procesar los recursos a medida que se van encontrando en el DOM. Más info: https://deliciousbrains.com/performance-best-practices-http2/

Inline de código CSS

Gracias al cambio anterior, también puede resultar muy interesante hacer “inline” todo el código CSS para que la percepción visual de carga sea instantánea de cara al usuario.

¿Por qué es interesante? Porque solo se “inyectará” el código que vaya a ser usado, ni más ni menos, sin necesidad de generar CSS “crítico” antes de hacer “inline”. Esta opción viene deshabilitada por defecto, pero se puede habilitar desde el panel.

De esta forma se emula, en cierta forma, la práctica que imponen proyectos como AMP. Más info: https://amp.dev/es/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/

dns-prefetch a recursos de afiliados

Añade la etiqueta “<link rel=”dns-prefetch”> en las páginas donde se usan recursos obtenido a partir de las APIs de afiliados (por ejemplo, imágenes de producto).

De esta forma conseguimos reducir la latencia, resolviendo el DNS antes de que se realice la petición del recurso.

No añade código HTML que redundante

Esta es una mala práctica (comúnmente denominada “divitis” y “classitis”) en la que generalmente se cae para agilizar la labor del diseño. Si conseguimos no caer en ella:

  1. Reducimos el número de elementos que se insertan en el DOM: menor CPU se requiere para procesar y menos datos se utilizan para trasmitir por la red.
  2. Mejoramos la semántica.

Para ello, además de desarrollar la propia plantilla en base a esos criterios, también se ha desarrollado un módulo que elimina el código redundante que añade WordPress (clases extra, código de emojis, anidaciones extra en menús, etc.)

Imágenes de fondo con carga optimizada

En las imágenes de fondo de landings y de categorías, se usa un “hack” que carga las imágenes de más pequeña a más grande, evitando así cargar la imagen completa en dispositivos móviles.

Este es un error que cometen mucho los plugins de slider o de “hero image”.

Carga instantánea de fuentes de Google

Carga de fuentes de Google con “font-display: swap” para que el usuario no vea el típico segundo la página sin texto.
Si la fuente no está cargada, cualquier elemento que intente usarla debe mostrar una fuente alternativa. Esto es configurable desde el panel.

Caché de API de afiliados

Todas las peticiones a APIs de afiliados (Amazon, eBay, etc.) se guardan en caché para evitar consumir recursos y mejorar la velocidad en futuras peticiones.

SVG inline

En el caso de usar SVG, por ejemplo, para los iconos de las categorías, la plantilla lo inserta directamente en HTML sin cargar el recurso, evitando así realizar peticiones extra al servidor (http://designingforperformance.com/optimizing-images/#svg)

Lazy-load

Carga diferida de imágenes configurable desde el panel de administración e integrada de forma nativa en el Wasabi Theme.

Carga diferida de scripts

Mueve la carga de scripts al footer, logrando no bloquear la construcción del DOM y mejorando ligeramente sobre técnicas como la carga de scripts asíncronos. Configurable desde el panel de administración. Más info: https://javascript.info/script-async-defer

Minificar HTML

Elimina los espacios extra en el documento HTML para ganar algunos milisegundos en la velocidad de carga. Configurable desde el panel de administración.

Eliminar parámetros de consulta de recursos estáticos

Esto realmente no aporta casi nada, pero ayuda a mejorar la puntuación en herramientas como GTmetrix. Lo añado por si alguien se pregunta qué hace la opción en el panel de administración.

Artículos relacionados en la documentación



Otro tipo de contenido en el blog de Wasabi