Rendimiento multilingüe de WordPress: 7 formas de mantener un sitio traducido rápidamente

Resume este post con: 9 minutos de lectura

ChatGPT Perplejidad Grok Inteligencia artificial de Google

Un sitio multilingüe de WordPress se mantiene rápido cuando cada versión de idioma se trata como su propio conjunto de páginas almacenables en caché: proporcione a cada idioma una URL separada, asegúrese de que el caché de su página y la CDN almacenen cada uno por separado, cargue fuentes solo para los scripts que usa una página y elija un método de traducción que proporcione HTML terminado y traducido en lugar de intercambiar texto después de que se cargue la página. Luego mida Core Web Vitals por idioma, porque una página de inicio rápida en inglés no dice nada sobre la japonesa.

Conclusiones clave

• Mida cada idioma por separado. Los umbrales “buenos” de Google son LCP dentro de 2,5 s, INP por debajo de 200 ms y CLS por debajo de 0,1, en el percentil 75 de cargas de página.
• URL específicas del idioma (/de/, /fr/) se puede almacenar en caché como cualquier otra página. El idioma elegido por cookie normalmente no puede.
• Borre el caché de páginas traducidas cuando las traducciones cambien o los visitantes verán texto obsoleto.
• Dividir fuentes web por script con unicode-range, por lo que un visitante alemán no descarga glifos japoneses.
• Evite las redirecciones automáticas de idioma en cada visita; cada redirección es un viaje de ida y vuelta adicional antes de que se muestre algo.

Por qué los sitios multilingües de WordPress se ralentizan

Agregar idiomas multiplica el número de páginas sin cambiar su servidor. Cinco idiomas en un sitio de 200 páginas significan alrededor de 1000 URL para almacenar en caché, rastrear y mantener actualizadas. Los problemas de rendimiento suelen provenir de uno de cinco lugares:

1. Falta caché. Las páginas traducidas no se almacenan en caché o se almacenan en caché con la clave incorrecta.
2. Trabajos de traducción bajo petición. Las traducciones se buscan o generan mientras el visitante espera.
3. Intercambio del lado del cliente. La página se carga en el idioma original, luego JavaScript reemplaza el texto, lo que retrasa el contenido final y puede cambiar el diseño.
4. Fuentes pesadas. Agregar chino, japonés, coreano o árabe agrega archivos de fuentes grandes.
5. Redirigir saltos. La detección de idioma que redirige cada primera visita agrega un viaje de ida y vuelta.

Cada uno tiene una solución sencilla.

Paso 1: medir por idioma

Google recomienda lograr buenos Core Web Vitals, lo cual, según dice “, se alinea con lo que nuestros sistemas de clasificación principales buscan recompensar” (Centro de búsqueda de Google). Los objetivos:

Web.dev recomienda juzgarlos en el percentil 75 de cargas de páginas, dividido por dispositivos móviles y de escritorio (web.dev).

Cómo medir por idioma:

• Ejecute PageSpeed Insights en la misma página en cada idioma (/pricing/, /de/pricing/, /ja/pricing/). Las diferencias apuntan directamente a problemas específicos del idioma, como fuentes o texto largo que provocan cambios de diseño.
• En el informe Core Web Vitals de Search Console, abra las URL de ejemplo en cada grupo de problemas y observe qué carpetas de idiomas aparecen.
• Pruebe desde las regiones a las que presta servicio. Un sitio alojado en EE. UU. tendrá mayor latencia para los visitantes en Asia, independientemente del idioma.

Paso 2: dale a cada idioma su propia URL almacenable en caché

El almacenamiento en caché de páginas es la mayor ventaja. El manual de administración avanzada de WordPress dice que los complementos de almacenamiento en caché sirven páginas como archivos estáticos y “pueden mejorar el rendimiento varios cientos de veces para páginas bastante estáticas” (Recursos para desarrolladores de WordPress).

Esto sólo funciona si cada idioma tiene una URL distinta. Cuando el idioma se elige mediante una cookie o mediante la configuración del navegador y se sirve en la misma URL, un caché de página almacena un idioma para todos o debe omitirse. Google también prefiere URL separadas para SEO: recomienda “URL diferentes para cada versión de idioma de una página en lugar de usar cookies o configuraciones del navegador” (Centro de búsqueda de Google).

Lista de verificación para su complemento de almacenamiento en caché:

• Caché de páginas en /de/, /fr/ y así sucesivamente, y verifique que no haya ninguno en la lista de exclusión.
• Si el complemento puede precargar el caché, incluya las URL traducidas; la precarga desde su mapa del sitio es más fácil si el mapa del sitio las enumera.
• No varíe el caché mediante una cookie de idioma a menos que no tenga otra opción.
• Purgue la URL traducida cuando su traducción cambie, no solo cuando se edite la publicación original.

Paso 3: servir HTML traducido, no texto intercambiado después de la carga

La forma en que su herramienta de traducción produce una página traducida es tan importante como el almacenamiento en caché.

• Traducción del lado del servidor genera el HTML traducido en el servidor. El visitante recibe la página terminada y un caché de páginas puede almacenarla.
• Traducción del lado del cliente envía la página original, luego JavaScript obtiene traducciones y reemplaza el texto en el navegador. Funciona en cualquier plataforma, pero el contenido traducido llega más tarde y el texto traducido más largo puede mover elementos después de pintarlos, lo que aparece como un cambio de diseño.

En WordPress, prefiere un método del lado del servidor para sus idiomas principales. Si un script del lado del cliente es su única opción en una parte del sitio, reserve espacio para el texto que crece (especialmente botones y menús) y pruebe CLS en cada idioma.

Paso 4: dividir las fuentes por script

Las fuentes latinas son pequeñas; las fuentes CJK (chinas, japonesas, coreanas) completas pueden ser muchas veces más grandes. Cargar cada script en cada página desperdicia ancho de banda.

Utilice el @font-face unicode-range Descriptor. MDN explica que si una página no usa ningún carácter en el rango “la fuente no se descarga” y que el descriptor existe, un sitio “con muchas localizaciones” puede proporcionar recursos de fuente separados para cada script (MDN).

@font-face {
  font-family: 'Brand Sans';
  src: url('/fonts/brand-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153;
  font-display: swap;
}
@font-face {
  font-family: 'Brand Sans';
  src: url('/fonts/brand-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF;
  font-display: swap;
}

Además:

• Autohospede archivos WOFF2 y precargue solo el archivo latino (o de script principal) utilizado encima del pliegue.
• Considere utilizar una buena fuente de sistema para scripts que la fuente de su marca no cubre, en lugar de una fuente web grande.
• Uso font-display: swap entonces el texto se muestra inmediatamente en una fuente alternativa.

Paso 5: mantenga las imágenes y los scripts eficientes en todos los idiomas

• Imágenes localizadas. Si reemplaza imágenes por idioma, comprime y dimensiona cada versión como la original, es fácil cargar un banner de 4 MB no optimizado para un mercado.
• Carga diferida. WordPress agrega loading="lazy" a imágenes de forma predeterminada; asegúrese de que su imagen de héroe no esté cargada de forma diferida en todas las plantillas de idioma.
• Scripts de terceros. Los widgets de chat, las insignias de pago y los rastreadores específicos del mercado se suman. Cárguelos sólo en los idiomas o páginas que los necesiten.

Paso 6: evitar redirecciones innecesarias

Las redirecciones automáticas basadas en el idioma del navegador agregan un viaje de ida y vuelta antes del primer byte de la página correcta. Google también desaconseja redirigir a los usuarios a una versión de idioma “según cuál crea que puede ser el idioma del usuario”, porque puede impedir que los usuarios y los motores de búsqueda lleguen a todas las versiones (Centro de búsqueda de Google).

Mejores opciones:

• Permita que las personas elijan un idioma con un conmutador visible y se vinculen internamente a las URL traducidas para que permanezcan en su idioma.
• Si realiza una redirección, hágalo sólo en la primera visita a la página de inicio y recuerde la elección.
• Apunte hreflang y los enlaces internos a las URL finales, no a las URL que redirigen.

Paso 7: familiarice con los conceptos básicos en el servidor

Las páginas traducidas no cambian los fundamentos. El manual de WordPress señala el almacenamiento en caché, una CDN para archivos estáticos y el ajuste del servidor como las principales palancas:

• Mantenga PHP actualizado y OPcache habilitado.
• Agregar un caché de objetos persistente (Redis o Memcached) si su host lo admite, especialmente para WooCommerce o sitios de membresía donde el almacenamiento en caché de página completa es limitado.
• Utilice una CDN para imágenes, CSS y JS, y para páginas completas si su configuración lo permite, para que los visitantes alejados de su servidor las obtengan desde cerca.
• Mantenga la lista de complementos corta. Cada complemento activo se ejecuta en cada solicitud no almacenada en caché, en todos los idiomas.

Cómo encaja el complemento de WordPress ConveyThis

El complemento ConveyThis traduce páginas en el servidor y sirve a cada idioma en su propia subcarpeta o subdominio, por lo que las páginas traducidas se pueden almacenar en caché como las originales. Mantiene un caché local de traducciones para cada página e idioma, por lo que las solicitudes repetidas no esperan al servicio de traducción y, cuando cambia una traducción, borra el caché de la página en complementos de almacenamiento en caché populares como WP Rocket, W3 Total Cache, WP Super Cache y WP Fastest Cache.

Otras configuraciones que vale la pena conocer:

• Excluir páginas o secciones que no necesitan traducción, como áreas de contabilidad, para mantener el trabajo de traducción donde importa.
• La redirección automática por idioma del navegador está desactivada a menos que la habilite y utiliza el idioma del navegador en lugar de búsquedas de IP; ver redirección automática.
• Las palabras se cuentan sólo cuando se muestra contenido traducido a los visitantes; los bots no cuentan.

El Página de integración de WordPress cubre la instalación y configuración, y planes y precios enumera los límites de palabras e idiomas por plan. Para traducir las cadenas temáticas en sí, consulte nuestra guía Traduciendo un tema de WordPress.

Preguntas frecuentes

¿Agregar idiomas ralentiza un sitio de WordPress?

No tiene por qué ser así. Cada idioma agrega páginas, no el peso por página, siempre que las páginas traducidas se almacenen en caché en sus propias URL y las traducciones se apliquen en el servidor. Las ralentizaciones suelen provenir de páginas traducidas sin almacenar en caché, intercambio de texto del lado del cliente, fuentes pesadas o redirecciones.

¿Las páginas traducidas deben almacenarse en caché por separado?

Sí. Cada idioma debe tener su propia URL, y el caché de su página y su CDN deben almacenar cada URL por separado. Purgue una página traducida cuando su traducción cambie.

¿Cómo mido el rendimiento de cada idioma?

Ejecute PageSpeed Insights en la misma página en cada idioma y compare y verifique qué carpetas de idiomas aparecen en el informe Core Web Vitals de Search Console. Intente alcanzar LCP en 2,5 segundos, INP en 200 milisegundos y CLS en 0,1.

¿Son los subdirectorios o subdominios más rápidos para un sitio multilingüe?

Ninguno de los dos es inherentemente más rápido. Los subdirectorios comparten un host, caché y configuración de CDN, lo cual es más sencillo de administrar; los subdominios se pueden alojar por separado si necesita servidores más cercanos a una región.

¿Cómo puedo evitar que las fuentes grandes ralenticen las páginas traducidas?

Divida las fuentes por script con el descriptor de rango Unicode para que los navegadores solo descarguen fuentes para los caracteres que usa la página, sirvan WOFF2 y utilicen el intercambio de visualización de fuentes.

Mantenlo rápido a medida que creces

Tanto la velocidad como la calidad de la traducción dependen de cómo se producen las páginas traducidas. Puedes crear una cuenta ConveyThis, instale el complemento de WordPress y compare sus páginas traducidas con las originales.