La carga y precarga de fuentes suele ser un gran problema en la mayoría de webs, estos problemas vienen principalmente, de que la web llama a Google-Font o carga algún script con le hace ralentizar la web.
NIVEL DE DIFICULTAD: AVANZADO, Si sigues los paso es simple de realizar, pero bueno considero que hay que tener conocimientos avanzados de WPO para realizar la tarea correctamente. Cada web es un mundo, y el tema cache muchas veces juega malas pasadas o se quedan guardadas fuentes que no son… etc. Si necesitas contratar profesionales para la precarga avísanos.
El objetivo de este post, cargar las fuentes directamente en tu web subirlas a local y que no tengan que tardar tiempo en actualizarse.
Requisitos previos.
- Tener una web con WordPress
- Tener acceso al servidor para revisar las fuentes
- Tener Wp-Rocket
QUIERES TENER WP_ROCKET EN TU WEB? Escríbenos y te podremos facilitar la licencia de original y el plugins, a un precio económico.
1.- Que fuentes esta cargando mi web
Analizar la velocidad de carga: Como de grave es el problema en tu web?
Analizar el problema Accede al pagespeed de google y revisa la siguiente línea tipo Css family, hay podrás ver todas las fuentes que se cargan, por defecto coge todas las combinaciones de negrita o cursiva, pero nosotros solo aplicaremos las básicas.
En pingdom podemos ver lo cuanto pesa la fuente de google:
También podemos analizar donde esta actualizado (Si al principio de la carga o al final… o de donde viene google Font o gtatic.) cuanto tiempo tarda en cargar en la web, muchas veces nos interesa que carguen al finalizar. aunque yo prefiero asi (Sino tendra que cargar la fuente por defecto y luego la nueva y no tendria sentido).
Ya tenemos detectado el problema… o las fuente… y ahora qué?
2.- Revisar las fuentes de la web
Tal como te comentaba revisa todas las fuentes de tu web y estable solo una para títulos, header, contenido, bloques, Footer… etc. y con solo dos tipos de peso (negrita) y sin cursiva.
RECOMENDACIONES Y TAREAS A REALIZAR
- Intenta usar solo un tipo de letra… una fuente.
- Revisa toda la página una a una cada sección e intenta usar solo esa fuete en todo (Fuente por defecto del tema si usas Elementor o similar), dos tipos de negrita (Por ejemplo valor para párrafos de 400 y para títulos de 700. Y no uses cursiva ni subrayado. (Piensa que cada tipo hará múltiples combinaciones y deberíamos elegir una a una).
- Tener Wp-Rocket: Quizás se puede hacer por código ( Supongo )pero aquí lo haremos con Rocket, lo que se hace es precargar las fuente
- Si tienes Elementor, Desactivar fuentes por defecto y accede a las opciones del tema en personalizar y revisa los títulos o encabezados de las secciones… el objetivo es dejar solo una fu9ente por defecto y que el resto del tema las herede.
3.- CREAR EN LOCAL LA NUEVA FUENTE
Vamos a ponerlos con lo realmente importante, Debemos de generar las nuevas fuentes, subirlas a la web y generar un nuevo Css
Objetivo. En tu hosting se va a crear de forma automática las fuente y el Css para precargar, revisa que esta carpeta está vacía (SI hacemos muchas pruebas con las fuente, quizás te queden fuentes por algunas ya precargadas y luego te dará problemas… si ves que te carga fuentes de más quizás esté ahí el problema)
RUTA. En tu hosting: /wp-content/uploads/omgf
Instalamos el plugins OMGF
Después de activarlo vamos a sus opciones y pulsamos en auto detectar, en este caso debería salir solo una fuente que es la que usamos…
La seleccionamos en latín y marcamos las pre load… (YO puse 3, la de 400, 500 y 700 que son las negritas que uso… FONT STYLE la normal.
Pulsamos en download Fonts (Las subirá a la carpeta). Generar hoja de styles.
Vacías cache si es necesario.
IMPORTANTE: En ajustes avanzados marcar eliminar automáticamente. (En mi caso se quedaban alguna fuentes en pre load), si veis que en los test os siguen marcado esta es vuestra opción, sino desactivarlo
4.- Precargar las fuentes con WP-rocket
Para ello usamos el plugins de Wp-Rocket en sus últimas versiones permite esta función.
- Seleccionamos Optimizar Google Fonts (Dentro de las opciones de WP-rocket)
- Y en Precarga > Google Fonts añadirnos la Url de las fuentes…
- Esta Url la puedes ver desde el servidor: /wp-content/uploads/omgf/ busca el archivo Css y ábrelo con el visor de tu hosting (O descárgalo y revísalo con algún notepad o similar)
- Podrás ver todas las fuentes.
- Coge solo las que te interesen y el archivo woff2 y añádelo en Wp-Rocket
Ya está todo actualiza y revisado. Guardo los cambios, vacía cache y demás y realiza las pruebas que se indican en el paso 1.
CUANTO HEMOS MEJORADO AL OPTIMIZAR GOOGLE-FONTS
NO me voy a meter con temas de pagespeed, solo centrado en la optimizacion de google-fonts Font han bajado de 177 a 57kb, respuesta un 5% menos y contenido del dominio bloque las gtatics…
Ultimos recomendaciones
Una vez este todo ok, puedo eliminar el plugins OMGF? No, osea por poder puedes.. si analizars con el pagespeed se ve que carga las fonts estaticas . (Quizas si en tu caso no tienes fuentes estaticas Puedas eliminarlo.. pero no te lo recomiendo [Para comprobarlo ve al pagespeed y mira la seccion de «Evita encadenar solicitudes críticas» ahi veras las peticiones
Puedo eliminar las fuente que no necesito del OMGF? Creo que si yo las he eliminado y no he notado nada, pero quizás en el futuro si añades esas fuente puede darte problemas. Si lo haces genera de nuevo el Css
Te ha gustado el articulo? Tu como optimizas las fuentes.
ESCRIBE TU COMENTARIO AQUI SI TE HA VALIDO.
