Оптимизация Google Web Fonts

Google Web Fonts – это огромная коллекция шрифтов, доступных для использования на сайтах и веб-приложениях. Однако, использование этих шрифтов может замедлить загрузку сайта и ухудшить его производительность. В этом случае необходимо произвести оптимизацию Google Web Fonts.

Перечень ключевых мероприятий по оптимизации Google Web Fonts:

Выбор легких шрифтов
Одним из способов оптимизации Google Web Fonts является выбор легких шрифтов. Менее многослойной структурой они обеспечивают более быструю загрузку страницы и улучшают производительность сайта.

Ограничение количества шрифтов
Несмотря на искушающую богатство Google Web Fonts, ограничение количества выбранных шрифтов для каждого сайта, ускоряет его загрузку. Старайтесь использовать только те шрифты, которые действительно необходимы для вашего сайта.

Использование локальных файлов
Если у вас есть файлы шрифтов в своем распоряжении, то предпочтительнее использовать их вместо Google Web Fonts. Это позволит значительно ускорить загрузку страницы и улучшить ее производительность.

Кэширование шрифтов
Если вы используете Google Web Fonts, то одним из способов ускорить загрузку страницы — кэширование. Это позволяет сайту загружать шрифты только один раз, что значительно сокращает время загрузки при повторных посещениях страницы.

Использование локальных CDN
Google Web Fonts хранятся на серверах Google, которые могут находиться далеко от вашего сайта. Это может замедлять загрузку шрифтов. Использование локальных CDN поможет решить эту проблему и ускорит загрузку шрифтов.

Чтобы не загружать с серверов Google шрифт большого веса, есть возможность перечислить какие именно символы требуются — так сокращаем объем получаемого файла. Для этого используется параметр «text» в url подключаемого шрифта. К примеру, нам нужно подключить шрифт, только для заголовка «Javascript»:

<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Philosopher&text=Javascript">

Так же можно перечислять просто необходимые символы. А для того, чтобы с каждой HTML страницей не приходила строка со указанием подключаемого шрифта, перенесем подключение в CSS:

@import url("http://fonts.googleapis.com/css?family=Philosopher&text=aciprtsJv");

h1 {
	font-family: Philosopher;
}

Оптимизация Google Web Fonts может значительно улучшить производительность сайта и сократить время его загрузки. Следуйте вышеперечисленным рекомендациям, чтобы достичь максимального эффекта и обеспечить своим пользователям удобство и комфорт в работе с вашим сайтом.

Материалы

• Google Web Fonts — https://developers.google.com/webfonts/docs/getting_started#Optimizing_Requests
• Пример двукратного ускорения загрузки шрифта — https://habrahabr.ru/post/130172/