Что более эффективно, учитывая время загрузки страницы, использование локальных файлов шрифтов или веб-шрифтов Google? - PullRequest
Новая
       112

Что более эффективно, учитывая время загрузки страницы, использование локальных файлов шрифтов или веб-шрифтов Google?

7 голосов
/ 25 марта 2012

Я использую пользовательские шрифты на своем сайте. Я мог бы использовать локальный файл шрифта: 

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

или просто используйте Google: 

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

Что будет быстрее, учитывая время загрузки страницы?

1 Ответ

13 голосов
/ 25 марта 2012

Я настроил приложение GAE с двумя тестовыми страницами, одна из которых использует Google Web Fonts, а другая - локальный файл. Я удостоверился, что кэширование отсутствует, и записал, сколько времени потребовалось для загрузки каждой страницы. Это повторилось 20 раз на Chrome.

Результаты

  • Среднее время загрузки (Google Web Fonts): 486,85 мс
  • Среднее время загрузки (локальный файл): 563,35 мс

enter image description here

Код

шрифты-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>

шрифты-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>

шрифты-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';
}
...