Заметки

Отложенная загрузка Веб-шрифтов

Очень удобно использовать веб шрифты Google Fonts, однако они оказывают сильное влияние на первую загрузку сайта и им нельзя задать свойство "font-display: swap;". Следующий пример показывает как можно обойти это и добавить очков pagespeed:

 

const loadFont = (url) => {
  // the 'fetch' equivalent has caching issues
  var xhr = new XMLHttpRequest();
  xhr.open('GET', url, true);
  xhr.onreadystatechange = () => {
 if (xhr.readyState == 4 && xhr.status == 200) {
 let css = xhr.responseText;
 css = css.replace(/}/g, 'font-display: swap; }');

 const head = document.getElementsByTagName('head')[0];
 const style = document.createElement('style');
 style.appendChild(document.createTextNode(css));
 head.appendChild(style);
 }
  };
  xhr.send();
}

loadFont('https://fonts.googleapis.com/css?family=Rammetto+One');

from: https://webformyself.com/google-fonts-i-font-display-osobennosti-vzaimodejstviya/

< link href="/fonts/source-serif-pro-400-latin.woff2" rel="preload" as="font" crossorigin="">

Дополнительное преимущество такого подхода заключается в том, что он полностью избавляет меня от проблемы, известной как FOUT — (flash of unstyled text, вспышка обычного шрифта).

Афоризм дня:
Кому попался хороший зять, тот приобрел сына, а кому дурной – тот потерял и дочь. (646)

2 years ago

Вот спасибо! Полезная статья по придаче скорости загрузке сайта. Не зря тебя Яндекс в ТОП 10 ставит. Так держать! Добился 85% из 100 по оценке гугла скорости с мобильных устройств, благодаря тебе. Помог просто второй твой код на чёрном фоне, даже без первого. Жму руку, нигде не находил решений, как ни вбивал поисковый запрос.

2 years ago

Отлично, рад слышать!

Leave a reply

Яндекс.Метрика