Quantcast
Channel: Diseño Web · SEO · Marketing » Performance
Viewing all articles
Browse latest Browse all 10

Usa las fuentes de Google Font API y optimiza la carga de tu sitio — #WordPress

$
0
0

Lo admito, la semana pasada he estado ausente total.. Ni un solo artículo. Y lo cierto es que la cosa es mas dura de lo que yo pensaba, he tenido mucho trabajo últimamente cosa que por un lado es muy bueno pero por el otro no me alcanza el tiempo para hacer grandes artículos como los que me gustan (los cuales me toman 2 horas o mas en muchos casos), es por ello, que antes de restar calidad a los artículos, prefiero restar artículos en la semana.. De modo que lo mas seguro será que actualice el blog 4 días o 5 a la semana (y no todos los días como lo venía haciendo). Pero basta de palabrerías que a muchos lo mismo les trae sin cuidado.. :D  Vamos al lío.

Hoy, PERFORMANCE, si señor :) Anteriormente habíamos visto un método muy pero que  muy intuitivo sobre Cómo añadir fuentes en WordPress con un simple plugin.  (Recomendado para principiantes).

Pero quizás este método no es del todo “óptimo” si queremos aumentar el rendimiento de nuestro sitio, ya que estamos usando un “plugin” unicamente para ello, estamos agregando a nuestros ficheros un archivo que tiene un peso importante, y todo esto nos “resta” un poco de velocidad y/o rendimiento.. De modo que para aquellos usuarios intermedios vamos a mirar un método mas “óptimo”.

Cómo usar las fuentes de Google Font API

Google Font API es una herramienta (por supuesto de Google) que nos permite incluir tipografías Open Source en nuestro sitio web (blog) modificando simplemente un par de lineas de nuestro código, algo realmente fácil.Google guarda este repertorio de tipografías en un directorio (externo para nosotros) el cual podemos usar con unos simples pasos:

1.- Lo primero sería acceder al Directorio de Fuentes de Font API, buscar la fuente que deseamos utilizar y seleccionarla haciendo click en ella.

Cómo usar las fuentes de Google2.- En la siguiente pantalla veremos toda la información que necesitamos, 4 características de las cuales todas nos interesan, echemos un vistazo a 3 de ellas;

La primera (una de las mas importantes si buscamos mejorar la velocidad y el rendimiento de nuestro sitio) nos mostrará los estilos que podemos seleccionar y además nos dirá el impacto que tiene con respecto a su peso y la carga en tu sitio, (entre menos, mejor).

Cómo usar las fuentes de GoogleLa segunda y la tercera, nos mostrará los códigos que debemos usar en nuestra plantilla para incluir la tipografía.

Cómo usar las fuentes de Google-53.- Finalmente para agregar y usar la fuente seleccionada todo es cuestión de usar el código de cabecera y el código para usar en nuestros estilos (css). Un ejemplo sería este:

Cómo usar las fuentes de GoogleY el resultado sería este:

Cómo usar las fuentes de GoogleComo complementaria, vamos a mencionar algunos PROS y CONTRAS:

PRO: Reducción del peso de tus archivos
PRO: Funcionalidad y Compatibilidad total con navegadores obsoletos (muy antiguos)
PRO: Cargar de “primero” la fuente (algo ‘importante’ a no ser que sea muy pesada)
PRO: Uso de servidor externo (ahorro de peticiones..)

Sin Google Font API:

Cómo usar las fuentes de GoogleCon Google Fon API:

Cómo usar las fuentes de Google

CONTRA: Usamos los servicios de Google, por lo tanto, si cae Google caemos todos! Siempre que usemos Fuentes y Librerías de Google, dependeremos de él para que nuestra web funcione correctamente. (algo que en modo local “cuando trabajamos” no será posible).

Es el único contra que se me ocurre y que por otro lado podemos decir que las probabilidades de que Google “caiga” son bajas, y si lo hace, es que ya la vida no tiene sentido!! jejeje..


Viewing all articles
Browse latest Browse all 10