⚡ Optimización de Elementor para Google PageSpeed: desactivar Google Fonts, Font Awesome y Eicons

Elementor construye páginas a partir de widgets, estilos y scripts, y cada solicitud a un recurso externo añade milisegundos al tiempo de carga. Google Fonts, Font Awesome, Eicons: tres solicitudes de fuentes que el plugin genera por defecto, incluso si usted no las está usando conscientemente.

El resultado: puntuaciones más bajas en PageSpeed Insights, una cascada de recursos inflada en GTMetrix y visitantes que se van antes de que la página se renderice por completo. Sin embargo, el propio Elementor proporciona herramientas para desactivar cada una de estas solicitudes; solo necesita saber qué palancas accionar.

A continuación encontrará tres optimizaciones específicas que, en conjunto, pueden reducir hasta un segundo el tiempo de carga sin necesidad de plugins de caché ni de una CDN. Cada una incluye código listo para usar en functions.php.

💡 Resumen rápido:

Desactive Google Fonts de Elementor mediante un ajuste integrado o un hook en su tema, y aloje las fuentes localmente
Sustituya el Font Awesome de Elementor por una versión Critical local para que el navegador cargue solo los iconos que realmente se usan
Cambie Eicons (los iconos propios de Elementor) por Font Awesome mediante CSS: un solo archivo en lugar de dos paquetes de fuentes

1. Desactivar Google Fonts de Elementor

Solicitudes de Google Fonts desde Elementor en el panel Red

Por defecto, Elementor carga Google Fonts para cada fuente utilizada en su diseño, incluso si usted ya aloja esas fuentes localmente. En la cascada de solicitudes, esto aparece como una llamada HTTP independiente a fonts.googleapis.com que bloquea la renderización del texto hasta que se carga por completo.

El enfoque más sencillo es el ajuste integrado de Elementor. Vaya a Elementor → Settings → Performance y active Desactivar Google Fonts. Después de esto, el plugin dejará de generar solicitudes a la CDN de Google y usted podrá conectar las fuentes localmente mediante un tema hijo o un plugin como OMGF (Optimize My Google Fonts).

Si el ajuste no está disponible por algún motivo o necesita un control programático, añada este código al functions.php de su tema hijo:

1 add_action( 'wp_enqueue_scripts', function() {
2     wp_dequeue_style( 'google-fonts-1' );
3     wp_dequeue_style( 'google-fonts-2' );
4 }, 99 );

El hook con prioridad 99 se ejecuta después de que Elementor encola sus estilos y los elimina antes de que se impriman en el <head>. Tras la desactivación, conecte las fuentes localmente: descargue los pesos necesarios en WOFF2, colóquelos en la carpeta de su tema y añada las reglas @font-face en sus estilos.

2. Sustituir el Font Awesome de Elementor por una versión local

Elementor carga el paquete completo de Font Awesome (cientos de iconos) cuando un sitio típico solo usa entre 5 y 7. Los bytes restantes simplemente consumen su presupuesto de carga.

La solución es una Critical Font local. Los plugins de caché (Swift Performance, LiteSpeed Cache) y las herramientas especializadas (OMGF) pueden escanear la página, recopilar una lista de los iconos realmente utilizados y generar un webfont.css reducido que contenga solo los glifos necesarios. El archivo se coloca en /wp-content/fonts/ de su servidor: cero solicitudes externas.

Para evitar que Elementor cargue su versión y que en su lugar se use la suya local, añada esto a functions.php:

1 add_action( 'wp_enqueue_scripts', 'replace_elementor_fa', 3 );
2 add_action( 'elementor/frontend/after_enqueue_styles', function() {
3     wp_dequeue_style( 'font-awesome' );
4 } );
5  
6 function replace_elementor_fa() {
7     wp_enqueue_style(
8         'font-awesome-local',
9         get_stylesheet_directory_uri() . '/fonts/fontawesome/webfont.css',
10         array(),
11         '1.0.0'
12     );
13 }

La primera línea encola su versión local con prioridad alta. La segunda elimina la versión de Elementor con el identificador font-awesome justo después de que el plugin la registre. La función replace_elementor_fa especifica la ruta del archivo; sustitúyala por la generada por su plugin de caché.

Después de la configuración, compruebe la cascada en GTMetrix: la solicitud a font-awesome.min.css de Elementor debería desaparecer y el webfont.css local debería cargarse desde su dominio.

3. Sustituir los iconos de Elementor (Eicons) por Font Awesome

Solicitudes a la fuente eicons en la cascada de GTMetrix

Elementor usa su propia fuente Eicons para los iconos en los widgets: flechas del slider, icono del menú hamburguesa, botón de cierre. El paquete completo se carga siempre que se usa cualquier icono, lo que añade otra solicitud y un retraso en la renderización.

Detalles de la solicitud HTTP del archivo eicons en el informe de GTMetrix

Dado que ya tiene Font Awesome local (paso 2), tiene sentido cambiar Eicons a esta fuente: un solo archivo de fuente en lugar de dos. Esta técnica reemplaza las clases CSS .eicon y .eicon-menu-bar por glifos de Font Awesome.

Primero, elimine Eicons de la cola. Este código va en functions.php:

1 add_action( 'elementor/frontend/after_enqueue_styles', 'js_dequeue_eicons' );
2  
3 function js_dequeue_eicons() {
4     if ( is_admin() || current_user_can( 'manage_options' ) ) {
5         return;
6     }
7     wp_dequeue_style( 'elementor-icons' );
8 }

La función omite el área de administración para que el editor de Elementor siga funcionando sin problemas y solo elimina el identificador elementor-icons en el frontend.

Ahora añada el reemplazo CSS, ya sea a través de Appearance → Customize → Additional CSS o en la hoja de estilos de su tema hijo:

1 .eicon,
2 .eicon-menu-bar {
3     display: inline-block;
4     font: normal normal normal 14px/1 FontAwesome;
5     font-size: inherit;
6     text-rendering: auto;
7     -webkit-font-smoothing: antialiased;
8     -moz-osx-font-smoothing: grayscale;
9 }
10  
11 .elementor-menu-toggle i:before {
12     content: "\f0c9";
13     font-family: FontAwesome;
14 }
15  
16 .elementor-menu-toggle.elementor-active i:before {
17     content: "\f00d";
18     font-family: FontAwesome;
19 }

El primer bloque reasigna las clases base de Eicons a la tipografía FontAwesome. El segundo y el tercero establecen glifos específicos: \f0c9 para el icono de hamburguesa (fa-bars) y \f00d para el botón de cierre (fa-times). Otros iconos se reemplazan de la misma manera: abra las herramientas de desarrollo, encuentre la clase del widget y añada content con el código del glifo de la chuleta de Font Awesome.

Después de la implementación, compruebe la consola del navegador en busca de errores de carga de fuentes y pase la página por PageSpeed Insights. La solicitud a eicons.woff2 debería desaparecer del informe.

⁉️🤔 Preguntas frecuentes

¿Funciona este método en las versiones actuales de Elementor?

Sí, los tres consejos son pertinentes para la línea actual de Elementor. Los hooks elementor/frontend/after_enqueue_styles y wp_enqueue_scripts forman parte de la API pública del plugin y mantienen compatibilidad hacia atrás. La documentación oficial de Elementor sobre cómo desactivar Google Fonts describe el interruptor integrado en Elementor → Ajustes → Rendimiento. Para el consejo n.º 1, utilícelo primero y conserve el código como alternativa para temas no estándar.

¿Qué debo hacer si los iconos desaparecen en el editor después de reemplazar Eicons?

El código de desactivación de Eicons omite el área de administración. Las comprobaciones is_admin() y current_user_can( 'manage_options' ) garantizan que la fuente se mantenga en el editor de Elementor. Si los iconos siguen desapareciendo, asegúrese de haber añadido el código al functions.php de su tema activo, no a través de un plugin de fragmentos que también podría ejecutarse en las páginas de administración.

¿Necesito instalar un plugin de caché para estas optimizaciones?

Para los consejos n.º 1 y n.º 3 no se requiere un plugin de caché; el código en functions.php es suficiente. Para el consejo n.º 2 (Critical Font), necesita una herramienta que genere un Font Awesome reducido: Swift Performance, LiteSpeed Cache, OMGF Pro o el ensamblaje manual mediante la utilidad fonttools. Sin este paso, simplemente cambia la carga completa de Font Awesome desde la CDN de Elementor a su servidor, sin apenas ahorro.

¿Cuánta mejora real en la puntuación de PageSpeed proporcionan estos tres consejos?

Cada caso es diferente, pero esta es una referencia: desactivar Google Fonts reduce entre 200 y 400 ms el tiempo de carga, el Font Awesome local ahorra otros 150 a 300 ms y reemplazar Eicons elimina una solicitud HTTP y ahorra entre 50 y 150 ms. En total, hasta un segundo de tiempo de carga completo, lo que en un alojamiento típico de 10 a 20 $/mes eleva la puntuación móvil de PageSpeed Insights entre 5 y 15 puntos.

¿Puedo prescindir por completo de Font Awesome y Eicons?

Puede hacerlo, si está dispuesto a reconstruir todos los iconos de Elementor como SVG. Esto implica reemplazar manualmente los iconos en los widgets con archivos SVG subidos o usar un plugin como Iconic. El esfuerzo es alto (docenas de widgets en un sitio), pero el resultado es el frontend más ligero posible. Para la mayoría de los proyectos, una Critical Font local (paso 2) es un compromiso adecuado.

¿Qué consiguen estos cambios en un sitio real?

Las tres técnicas descritas no requieren plugins premium, una CDN ni un cambio de alojamiento. Se trata de trabajar exclusivamente con las solicitudes de fuentes, el gasto de velocidad más subestimado en los sitios de Elementor.

Si aún no ha realizado una optimización básica de WordPress, comience con la guía completa de velocidad del sitio, que cubre el almacenamiento en caché, la compresión de CSS/JS y la optimización de imágenes. Cuando llegue a las fuentes, vuelva a estos tres pasos e impleméntelos uno por uno, comprobando PageSpeed Insights después de cada uno.

Pruebe en una copia de su sitio, haga una copia de seguridad antes de editar functions.php y exprima la máxima velocidad de Elementor.

1	add_action( 'wp_enqueue_scripts', function() {
2	wp_dequeue_style( 'google-fonts-1' );
3	wp_dequeue_style( 'google-fonts-2' );
4	}, 99 );

1	add_action( 'wp_enqueue_scripts', 'replace_elementor_fa', 3 );
2	add_action( 'elementor/frontend/after_enqueue_styles', function() {
3	wp_dequeue_style( 'font-awesome' );
4	} );
5
6	function replace_elementor_fa() {
7	wp_enqueue_style(
8	'font-awesome-local',
9	get_stylesheet_directory_uri() . '/fonts/fontawesome/webfont.css',
10	array(),
11	'1.0.0'
12	);
13	}

1	add_action( 'elementor/frontend/after_enqueue_styles', 'js_dequeue_eicons' );
2
3	function js_dequeue_eicons() {
4	if ( is_admin() \|\| current_user_can( 'manage_options' ) ) {
5	return;
6	}
7	wp_dequeue_style( 'elementor-icons' );
8	}

1	.eicon,
2	.eicon-menu-bar {
3	display: inline-block;
4	font: normal normal normal 14px/1 FontAwesome;
5	font-size: inherit;
6	text-rendering: auto;
7	-webkit-font-smoothing: antialiased;
8	-moz-osx-font-smoothing: grayscale;
9	}
10
11	.elementor-menu-toggle i:before {
12	content: "\f0c9";
13	font-family: FontAwesome;
14	}
15
16	.elementor-menu-toggle.elementor-active i:before {
17	content: "\f00d";
18	font-family: FontAwesome;
19	}

Todo para WordPress, el desarrollo web — y mucho más

🚀 Cómo acelerar un sitio de Elementor: 3 consejos para PageSpeed Insights en 2026

1. Desactivar Google Fonts de Elementor

2. Sustituir el Font Awesome de Elementor por una versión local

3. Sustituir los iconos de Elementor (Eicons) por Font Awesome

⁉️🤔 Preguntas frecuentes

¿Qué consiguen estos cambios en un sitio real?