¿Cuál es más eficiente teniendo en cuenta el tiempo de carga de la página, utilizando los archivos de fuentes locales o las fuentes web de Google?

Estoy usando fuentes personalizadas en mi sitio web. Podría utilizar un archivo de fuentes locales:¿Cuál es más eficiente teniendo en cuenta el tiempo de carga de la página, utilizando los archivos de fuentes locales o las fuentes web de Google?

src: local('Ubuntu'), url('fonts/ubuntu.woff') format('woff');

o simplemente usar Google de:

src: local('Ubuntu'), url('http://themes.googleusercontent.com/static/fonts/ubuntu/v4/_xyN3apAT_yRRDeqB3sPRg.woff') format('woff');

Lo que sería más rápido, teniendo en cuenta el tiempo de carga de página?

Fuente

2012-03-25 fj123x

API de Google sería una mejor opción porque ma Es posible que la fuente que usaste no esté instalada en la computadora de todos los usuarios, pero en el caso de la API de Google no hace diferencia y creo que normalmente la fuente no es muy grande en tamaño, así que la fuente no hace diferencia en la velocidad de carga y una vez el usuario carga la página que la fuente guardará en la memoria caché. –

Busque la red de entrega de contenido en la web. Veriosn de Google podría ser más rápido. – HerrSerker

Configuré una aplicación GAE con dos páginas de prueba, una usando Google Web Fonts y otra usando un archivo local. Me aseguré de que no hubiera memoria caché y grabé cuánto tardaba cada página en cargarse. Esto se repitió 20 veces en Chrome.

Resultados

El tiempo medio de carga (Google Web Fonts): 486.85 ms
tiempo de carga promedio (archivo local): 563.35 ms

enter image description here

Código

fonts-google.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>title</title> 
     <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'> 
     <link href='both.css' rel='stylesheet' type='text/css'> 
    </head> 
    <body> 
     <h1>This is a heading</h1> 
    </body> 
</html>

fuentes-local.html

<!DOCTYPE html> 
<html> 
    <head> 
     <title>title</title> 
     <link href='fonts-local.css' rel='stylesheet' type='text/css'> 
     <link href='both.css' rel='stylesheet' type='text/css'> 
    </head> 
    <body> 
     <h1>This is a heading</h1> 
    </body> 
</html>

fuentes-local.css

@font-face { 
    font-family: 'Ubuntu'; 
    font-style: normal; 
    font-weight: normal; 
    src: local('Ubuntu'), url('ubuntu.woff') format('woff'); 
}

both.css

h1 { 
    font-family: 'Ubuntu'; 
}

Fuente

2012-03-25 12:18:07 melhosseiny

Buen enfoque, pero realmente depende de la configuración de su propio servidor y la ubicación del visor. – alias51

¿Cuál es más eficiente teniendo en cuenta el tiempo de carga de la página, utilizando los archivos de fuentes locales o las fuentes web de Google?

Respuesta

Cuestiones relacionadas