¿Las páginas de WordPress se cargan lentamente? Optimice la carga de fuentes con Perfmatters

Las fuentes web pueden parecer pequeñas, pero pueden ser un factor importante a la hora de ralentizar la carga de las páginas de WordPress. Especialmente cuando se utilizan Google Fonts o fuentes personalizadas, si no se configuran correctamente, las fuentes pueden atascar la renderización de la página, provocar rebotes de página e incluso afectar al SEO y a la experiencia del usuario.Perfmatters es un ligero plugin de optimización del rendimiento de WordPress que proporciona controles de carga de fuentes fáciles de usar. Este artículo presenta de forma sistemática el impacto de la carga de fuentes en el rendimiento y te enseña paso a paso cómo optimizar la carga de fuentes a través del plugin Perfmatters Lograr la optimización.

I. ¿Qué es el plugin Perfmatters? Cómo ayuda a optimizar la carga de fuentes en WordPress?

Perfmatters es un plugin para WordPress desarrollado por un antiguo ingeniero de Google que se centra en la optimización del rendimiento. Permite a los usuarios desactivar funciones predeterminadas innecesarias, gestionar la carga de secuencias de comandos y controlar la precarga de recursos con un solo clic sin afectar al diseño original del sitio, lo que lo convierte en una de las herramientas ideales para acelerar sitios web.

Para la optimización de fuentes, Perfmatters ofrece las siguientes funciones:

Desactivar Google Fonts (evitar peticiones externas)
Conexión previa a servidores de fuentes para reducir el tiempo de búsqueda de DNS
Precarga de recursos de fuentes clave para una renderización más rápida
Control de la carga de fuentes para reducir los problemas de CLS y FCP
Adaptación de soluciones locales de alojamiento de fuentes, compatibles con otros plugins de optimización

Con estas características, Perfmatters reduce significativamente el impacto de la carga de fuentes en la velocidad de la página, haciendo que los sitios web sean más fluidos.

En segundo lugar, el impacto de la carga de fuentes en el rendimiento de WordPress.

2.1 Retrasos de carga causados por fuentes externas

(gran) mayoría WordPress Los temas (por ejemplo, Astra, OceanWP, Kadence, etc.) integran Google Fonts de forma predeterminada. Estos recursos de fuentes se alojan en los servidores de Google y requieren búsquedas DNS, intercambios TLS y solicitudes HTTP adicionales cada vez que se cargan. Estas solicitudes adicionales pueden provocar retrasos en la carga de la página, especialmente en dispositivos móviles o en usuarios con poca velocidad de Internet.

2.2 Repercusiones negativas en el núcleo vital de la web

Una carga de fuentes no optimizada puede afectar negativamente a las siguientes tres métricas web fundamentales:

LCP (trazado de contenido máximo)Bloqueo de fuentes, lo que retrasa la carga del contenido principal;
CLS (Desplazamiento de diseño acumulativo): Las fuentes se reescriben cuando terminan de cargarse, lo que provoca saltos en la página;
FID (primer retardo de entrada)El proceso de carga de fuentes ocupa el hilo principal del navegador y afecta a la velocidad de respuesta.

III. Pasos completos para optimizar la carga de fuentes con Perfmatters

3.1 Desactivar Google Fonts

En Perfmatters Settings, introduzca por orden:

General > Fuentes
empezar a utilizar Desactivar Google Fonts

Esta configuración impedirá que los temas y plugins llamen a fonts.googleapis.com y fonts.gstatic.com para evitar peticiones externas.

3.2 Configuración de la precarga de fuentes (Preload)

La precarga permite al navegador cargar los archivos de fuentes por adelantado, lo que mejora la velocidad de representación de la primera pantalla de contenido.

mostrar (una entrada) Perfmatters > Precarga pestañas
existe Precarga para añadir una ruta de fuente local, por ejemplo: /wp-content/temas/tu-tema/fonts/roboto.woff2
Tipo de selección "Fuente"

3.3 Activación de la preconexión al servidor de Google Fonts (para Google Fonts no desactivado)

Si sigues utilizando Google Fonts, puedes reducir el retardo de la primera carga conectándote previamente:

en la misma página Preconectar Añade un enlace a la zona: https://fonts.googleapis.com
Habilite la compatibilidad con "CrossOrigin" para mejorar la compatibilidad de carga de fuentes entre dominios.

3.4 Racionalización del número de llamadas y pesos de las fuentes

Aunque el propio Perfmatters no controla los detalles de la llamada a la fuente, debería controlarse en el tema:

Utilice sólo 1-2 fuentes
Cargar sólo los pesos de las palabras más utilizadas

Cuantas más fuentes tenga, más lenta será la carga. Las combinaciones de fuentes sencillas son estéticas y eficaces.

Cuatro, detección de efectos de optimización y preguntas frecuentes

4.1 ¿Cómo detectar si la fuente se ha cargado correctamente?

hacer uso de Chrome DevTools > Red para ver si las fuentes están correctamente precargadas o cargadas localmente.
Compruebe el estado de retorno del archivo de fuentes para precarga Marcador.
hacer uso de PageSpeed Insights tal vez GTmetrix A ver si el LCP ha mejorado.

4.2 ¿Por qué cambia el estilo cuando se carga la fuente?

Si Google Fonts está desactivado y no se establecen fuentes alternativas, pueden producirse cambios de estilo. Se recomienda configurar las fuentes en CSS o temas, por ejemplo:

font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

4.3 ¿Tiene algún efecto cargar varios estilos de fuente?

puede ralentizar considerablemente la carga. Se recomienda utilizar un máximo de dos fuentes y cargar sólo los estilos y pesos más utilizados (por ejemplo, justificado y negrita).

V. Resumen

pasar (una factura o inspección, etc.) Perfmatters que se puede implementar:

Desactivar solicitudes de fuentes innecesarias
Control preciso del orden y la forma en que se cargan las fuentes
Rendimiento óptimo con alojamiento local de fuentes
Mejorar las puntuaciones de PageSpeed,Rendimiento SEOy la experiencia del usuario

Tanto si desea optimizar un blog, un sitio web corporativo o una página de comercio electrónico.Perfmatters All es una gran herramienta de aceleración. Instálela y configúrela, su sitio web dirá adiós a la carga lenta de fuentes y mejorará el rendimiento en general. Si este post no responde a su pregunta, póngase en contacto con nuestro servicio de atención al cliente en línea.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres