лайфхак Ускорение загрузки шрифтов на странице

[danceban]

Приветствую,
хочу поделится несколькими шагами которые помогут ускорить время загрузки страниц BroCart/OpenCart/Любых других страниц которые используют шрифты и иконки. В этом материале буду концентрироваться на BroCart.

И так, почему это важно?

Создавая дизайн онлайн магазина Вы непременно будете использовать иконки типа font awesome, icomoon либо другие, так как это повышает привлекательность страниц, читабельность, навигация по сайту становится более интуитивной, а значит в целом - user experience повышается. Не последнею очередь в повышении UX также играет выбор и использование шрифтов для вашего текста. Это напрямую влияет на читаемость сайта и общий вид. Проблема в том что ваши посетители сайта заходят с разных девайсов и разных браузерах, а это значит что у всех прорисовка сайта будет разной. Мы же хотим чтобы сайт работал у всех более менее одинаково. Для этого мы должны использовать один шрифт, во избежание использования system font, которые разные на разных девайсах. BroCart по умолчанию использует шрифт Open Sans, универсальный шрифт который хорошо выглядит и с хорошей поддержкой charset.

В чём проблема?

1. Font awesome
По дефолту, при загрузке страницы, шрифты не прорисовываются пока они не будут загружены, а это значит что общее время загрузки страницы возрастает, а вместе с этим мы теряем балы в плане быстроты и отклика, что понижает наш рейтинг Google Page Insight, что в свою очередь влияет на SEO rank.

2. Web fonts
По дефолту, наш фонт Open Sans в BroCart загружается с серверов Google, что не обязательно плохо, особенно когда ваши посетители не из одного региона, а из самых разных стран. Тут CDN помогает так как загрузка шрифта происходит с ближайшего к посетителю CDN. В нашем случае, мы хотим хостить сами эти шрифты (это необходимо в случае использования кастомных шрифтов). Это поможет снизить время загрузки страницы.

Решение проблем

Перед тем как решить эти проблемы, хотел бы написать о важности использования SSL. BroCart это движок онлайн магазина, а это значит то что он будет оперировать с частными данными клиента как ФИО, адреса, телефоны, банковские данные и другие. По этому вы просто обязаны обеспечить полную зашифровку соединений с вашим сайтом. Что такое SSL? Сегодня многие хостеры дают бесплатные сертификаты SSL Let's encrypt так что вам/клиенту не надо будет на этом тратить деньги. Также, Google и некоторые браузеры маркируют сайты без SSL как не безопасные и понижает их SEO page rank, что нам также нужно избежать.

И так, добавляем шифрование соединений всем страницам BroCart:

1. Создайте сертификат для домена сайта в админке хостинга

2. Редактируем .htaccess из корня сайта и добавляем

# HTTPS ON
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

3. Редактируем config.php из корня сайта и меняем

// HTTP
define('HTTP_SERVER', 'http://site.com/');

// HTTPS
define('HTTPS_SERVER', 'https://site.com/');

4. Редактируем config.php из папки /admin/ и меняем

// HTTP
define('HTTP_SERVER', 'http://site.com/admin/');
define('HTTP_CATALOG', 'http://site.com/');

// HTTPS
define('HTTPS_SERVER', 'https://site.com/admin/');
define('HTTPS_CATALOG', 'https://site.com/');

Не забудьте поменять site.com на ваш домен

5. Очищайте кэши сайта и браузера и у вас должен появится зелёный замочек перед адресом сайта

А теперь вернёмся к нашим шрифтам.

1. Font awesome
Чтобы ускорить время загрузки страницы с шрифтами иконок редактируем .htaccess из корня сайта и добавляем

# FONTS CACHE
# Fonts
# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType application/x-font-woff2 .woff2
AddType image/svg+xml .svg

# Compress compressible fonts
# only uncomment if you dont have compression turned on already. Otherwise it will cause all other filestypes not to get compressed
# AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

ExpiresActive on

# Add a far future Expires header for fonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType application/x-font-ttf "access plus 1 year"
ExpiresByType application/x-font-opentype "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 year"
ExpiresByType application/x-font-woff2 "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"

Также редактируем stylesheet.css который находится в /catalog/view/theme/default/stylesheet/ и добавляем в самом начале файла

/* Font Icons Speed Patch */
@font-face {
    font-family:FontAwesome;
    src: url('/catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.eot') format('eot'), url('/catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.svg') format('svg'), url('/catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.ttf') format('ttf'), url('/catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.woff') format('woff'), url('/catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.woff2') format('woff2'), url('/catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.otf') format('otf');
    font-display: swap;
}

Это поможет нам решить проблему Ensure text remains visible during webfont load. Сохраняем и стираем кэши сайта и браузера.

2. Web fonts
В случаи когда всё же хотите загружать шрифты с серверов гугла, добавляйте следующий код в шапке перед загрузкой шрифта:

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

Добавляйте этот код только если используете шрифты с серверов google. Это поможет немного сократить время загрузки сайта. Подробнее об этом читайте по ссылке в конце статьи.

Мы же будем загружать шрифт Open Sans на своём хосте. Для этого я создал директорию fonts в папке /catalog/view/. Вы можете создавать эту папку где хотите, главное править пути к ней. В неё мы будем хранить наш Open Sans шрифт. Чтобы скачать сам шрифт, воспользуемся отличным инструментом Google Webfonts Helper. Там ищем наш шрифт Open Sans, задаём charset cyrillic и latin (в зависимости от ваших нужд), выбираем стили (я выбрал regular и 700) а ниже выбираем между Best Support (поддержка более старых браузеров) и Modern Browsers (более современные браузеры, хорошая поддержка). Скачиваем архив с нашим шрифтом.
После скачивания, разархивируем и заливаем эти файлы шрифта в нашу папку /catalog/view/fonts/.

Теперь правим наш header.twig из /catalog/view/theme/default/template/common/ и меняем

<link href="//fonts.googleapis.com/css?family=Open+Sans:400,400i,300,700" rel="stylesheet" type="text/css" />

на

<link rel="preload" as="font" type="font/woff2" href="/catalog/view/fonts/open-sans-v16-latin_cyrillic-regular.woff2" crossorigin>
<link rel="preload" as="font" type="font/woff2" href="/catalog/view/fonts/open-sans-v16-latin_cyrillic-700.woff2" crossorigin>

Также редактируем наш stylesheet.css из /catalog/view/theme/default/stylesheet/ и добавляем в самый верх файла

/* open-sans-regular - latin_cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
         url('/catalog/view/fonts/open-sans-v16-latin_cyrillic-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/catalog/view/fonts/open-sans-v16-latin_cyrillic-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }
  /* open-sans-700 - latin_cyrillic */
  @font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Open Sans Bold'), local('OpenSans-Bold'),
         url('/catalog/view/fonts/open-sans-v16-latin_cyrillic-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
         url('/catalog/view/fonts/open-sans-v16-latin_cyrillic-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
  }

Сохраняем и чистим кэши сайта и браузера.

Таким образом мы предзагружаем шрифт а так же кэшируем его заплаткой из первого пункта, так как и шрифт Open Sans и Font awesome в файлах woff2. Вместо Open Sans можете выбирать любой другой шрифт.

Для более глубокого понимания, читайте тут подробнее об ускорении загрузки веб шрифтов.

Результаты

Путём небольших манипуляций ускоряем время загрузки страниц и повышаем свой Page Insight и косвенно SEO rank.
PS. Статья написана в том числе для новичков, так что не судите за банальность. Если будут ошибки/дополнения, буду править, извините, русский язык не мой родной язык.

 

[SlaSoft]

Устаревшая инфа

И где здесь ускорение?

1. Особенно про конфиги порадовало

2. В большинстве случаев статика отдается ngnix
Поэтому правила кеширования в htaccess могут не работать

3. Замена адресов шрифтов хорошо для админки
Для фронта ... ну тут зависит от возможностей сервера, ведь вы увеличиваете количество соединений.
Как вариант - выносить на поддомены, или свои собственные cdn
Как правило, внешние cdn более шустры, но в случае медленного отклика и синхронной загрузки могут сильно тормозить сайт
Поэтому загрузку шрифтов можно вынести и в футер

crossorigin

Какой смысл этого атрибута?

даже больше

rel="preload" as="font"

я в курсе что это за пара атрибутов - каков ее тайный смысл при первой загрузке?

Я прекрасно понимаю, что возможно гуглопопугаи и поднимутся в глазах гугла, но в реальной сети это бессмысленно.
Т.е.

Ускорение загрузки страниц
Это фиктивное ускорение, влияющее на гуглопопугаев

Основной процент для попугаев
TTFB - грубо - ответ сервера
Уменьшение узлов DOM
адекватное сжатие картинок

 

[danceban]

Обьясните почему это устаревшая инфа? Я начинающий верстальщик и не знаю всех тонкостей ещё. Всё что выше написал, я тестировал на BroCart на своём шаринг хосте в поддомене. Скрины показывают до и после, там speed index уменьшился в двое.
Про htaccess я исхожу из своих условий, так как нету приватного сервера под хостинг сайтов. Если есть время, напишите про кэширование через nginx, дополним статью.
Я тоже думал про сабдомены для assets и шрифтов, но потом прочитал про HTTP/2 и пришёл к выводу что это особо ничего не изменит так как загрузка паралельная.
Загрузку шрифтов в футер буду тестировать, спасибо.
На счёт crossorigin и rel="preload" as="font", вы читали этот материал? Там написано про использование этих параметров. Грубо говоря задаёт приоритет загрузки и скачивает шрифт до парсинга и создания дома css.

Извините, я понял вашу точку зрения на счёт гуглопопугаев, поправлю название статьи.

 

[SlaSoft]

Обьясните почему это устаревшая инфа?

2. В большинстве случаев статика отдается ngnix

но потом прочитал про HTTP/2

- да, конечно

вы читали этот

Я много чего читаю, но выбор оставляю за ресурсами более уважаемыми,
https://developer.mozilla.org/ru/docs/Web/HTML/Preloading_content

Значение preload атрибута rel элемента <link> позволяет вам писать декларативные запросы на получение данных в элементе <head> вашего HTML, точно определяя ресурсы, которые понадобятся на вашей странице вскоре после загрузки и которые вы хотите загружать раньше в цикле загрузки страницы, до того как это сделает механизм отрисовки вашего браузера.

например, вы можете добавить rel preload для next страницы пагинации, таким образом предполагая, что пользователь возможно ее посетит, тогда загрузка действительно пройдет быстрее у ПОЛЬЗОВАТЕЛЯ, но не у гуглоспида...
Кстати, очень вредная штука, вы таким образом удваиваете(увеличиваете) нагрузку на сайт


вот в принципе пример, почему якобы ускорение

<head>

  <meta charset="utf-8">

  <title>JS and CSS preload example</title>

  <link rel="preload" href="style.css" as="style">
  <link rel="preload" href="main.js" as="script">

  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>bouncing balls</h1>
  <canvas></canvas>
  <script src="main.js"></script>
</body>

Это можно отнести и к шрифтам
Т.е. по сути это как бы асинхронная загрузка, но в отличие от async можно управлять порядком загрузки

 

[ALarik]

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