Как использовать шрифты Google на моем сайте без ущерба для скорости страницы сайта

Я использую шрифты Google и типографию моего сайта. Выглядит отлично, но это добавляет большие накладные расходы. Есть ли способ, которым я все еще могу получить такой же внешний вид для своего сайта без ущерба для скорости сайта?

Я анализирую свой сайт здесь https://developers.google.com/speed/pagespeed, и когда я использую шрифты Google, я получаю очень низкий балл около 60, но если Я удаляю эти шрифты, тогда у меня хороший результат. Есть ли способ использовать эти шрифты без ущерба для качества веб-страницы? Мой приоритет - оптимизация страницы.

ОТВЕТЫ

Ответ 1

Короткий ответ: нет. Немного более длинный ответ: нет, вы можете попробовать, но маловероятно, что вы побьете то, что уже предлагает вам Google WebFonts. Теперь давайте рассмотрим проблему немного подробнее...

Во-первых, у вас должна быть довольно легкая страница, если добавление одного внешнего ресурса (webfont) оказывает такое негативное влияние на ваш показатель PageSpeed ​​- возможно, мы должны исправить это на стороне PageSpeed. Теперь вернемся к веб-сайтам!

Нулевой нуль: добавление любого внешнего ресурса на вашу страницу негативно скажется на общей производительности вашей страницы. С webfonts это может быть еще более серьезной проблемой, потому что CSS считается "критическим ресурсом", который будет удерживать рендеринг до появления шрифта - если бы мы пропустили этот шаг, тогда пользователь мог бы получить "вспышку несвязанного контента" ( FOUC), где страница отображается с одним шрифтом, а затем рестайлинг, когда шрифт прибывает. Это неприятный опыт - вы определенно не хотите этого.

Шаг второй: Использование webfont означает, что мы должны включить внешний файл CSS - в этом случае, обслуживаемый серверами Google. Эти серверы сильно оптимизированы для низкой латентности, но в то же время здесь нет никакой магии - это все равно займет некоторое время!

Шаг 3: Что внутри CSS файла? Именно здесь многие критикуют Google WebFonts. Таблица стилей предоставляет url() ссылки на файлы webfont. Почему не base64/inline шрифт? Ну, Google WebFonts ежедневно обрабатываются миллиардами страниц, поэтому мы решили использовать URL-адреса специально потому, что шрифт, скорее всего, будет в вашем кеше браузера. Если вы обновляете свою страницу с помощью холодного кеша (как и следовало ожидать) для проверки загрузки первой страницы, вы всегда будете получать шрифт, но это не тот опыт, который мы оптимизируем.

Кроме того, почему бы не просто вставить шрифт на свою страницу? Ну, на каждой платформе есть разные форматы файлов, которые он принимает (woff, eot, ttf и т.д.), А Google WebFonts динамически обслуживает наиболее оптимизированный формат на основе вашей текущей платформы. Если вы просто загрузите WebFont (ex, woff) и включите его, тогда это может сработать для вас, но не для ваших посетителей на разных платформах. Кроме того, сжатие за этими шрифтами всегда улучшается - если вы придерживаетесь серверов Google, вы автоматически наследуете эти улучшения. Если вы откажетесь от своего собственного, тогда вы застряли.

Вкратце: если вы хотите сворачивать свои собственные, то убедитесь, что вы оптимизируете шрифты для каждой платформы, обслуживаете условные шрифты на платформе и не отстаете от улучшений сжатия с течением времени. Если вы можете сделать все это, тогда вы можете сделать лучше, чем это предусмотрено.: -)

И последнее, но не менее важное. Не бойтесь использовать webfonts. Да, они добавляют дополнительное время, но также важны вопросы презентации. Это ваш звонок. Если наложенная латентность неприемлема, тогда придерживайтесь стандартных шрифтов. Но, пытаясь победить то, что инфраструктура Google WebFonts/CDN вряд ли доставит вас очень далеко.

P.S. Один из последних советов: убедитесь, что вы используете все используемые вами веса и шрифты. Многие люди выбирают целые семьи (на всякий случай) и не используют их вообще, что в некоторых браузерах приводит к ненужным загрузкам.

Ответ 2

Да, вы можете.

  • загрузите ваши файлы шрифтов Google.
  • Загрузите их в веб-генератор белка белка
  • выберите "Настройки эксперта" и отметьте: Base64 CSS.
  • при загрузке шрифта через base64 вы не дожидаетесь завершения внешнего HTTP-вызова.
  • это приведет к удалению Flash Unstyled Content (FOUC)

Ссылка: https://robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/, и вы можете найти в Интернете много других статей. Я также пробовал это на своем сайте, и он работает.