Critical CSS и Шрифты

Критические стили - это inline css для корректного отображения первого экрана сайта.

https://github.com/filamentgroup/loadCSS

<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'; this.onload=null;">

А ЛУЧШЕ

<link rel="preload" href="/path/to/my.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Для создания критичных стилей, которые вставляются инлайн ВЫШЕ первого файла стилей
https://jonassebastianohlsson.com/criticalpathcssgenerator/
https://www.sitelocity.com/critical-path-css-generator

Для удаления неиспользуемых стилей (можно указать несколько шаблонных страниц сразу)
https://purifycss.online/
https://unused-css.com/ (платный)

Минификация с удалением дублей правил в стилях
https://www.toptal.com/developers/cssminifier

Ещё один минификатор (не знаю на сколько хорош) https://clean-css.github.io/

Шрифты
Чтобы скачать шрифты Google Fonts без парсинга формата woff/woff2 и загрузить на сервер, используйте сервис
https://google-webfonts-helper.herokuapp.com/fonts
https://gwfh.mranftl.com/fonts

• Выбираем нужный шрифт
• Выбираем «Select charsets» — latin и cyrillic без EXT
• Выбираем «Select styles», которые нужны
• Переключаем на «Modern Browsers», чтобы остались только woff и woff2
• Скачиваем и подключаем так, как рекомендовано, только добавляя при этом font-display: swap;

if(strripos($wsstylebuff, ' media=') == false) {
    $wsstylebuff = str_replace(' rel=', ' media="all" rel=', $wsstylebuff);
}
$wsstylebuff = preg_replace('/ media="([^>"]*)"/', ' media="print" onload="this.media=\'$1\'; this.onload=null;"', $wsstylebuff);

Стек системных шрифтов

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

• Определите список шрифтов, используя font-family.
• Браузер ищет каждый последующий шрифт, отдавая предпочтение первому, если это возможно, и возвращается к следующему, если не может найти шрифт (в системе или определенный в CSS).
• -apple-system, используется на iOS и macOS (но не в Chrome).
• BlinkMacSystemFont, используется в macOS Chrome.
• 'Segoe UI' используется в Windows 10.
• Roboto используется на Android.
• Oxygen-Sans используется в Linux с KDE.
• Ubuntu используется в Ubuntu (все варианты).
• Cantarell используется в Linux с оболочкой GNOME.
• 'Helvetica Neue' и Helvetica используется в macOS 10.10 и ниже.
• Arial это шрифт, широко поддерживаемый всеми операционными системами.
• sans-serif является резервным шрифтом без засечек, если ни один из других шрифтов не поддерживается.

.system-font-stack {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

Есть новый параметр system-ui и ui-sans-serif

.system-font-stack {
    font-family: system-ui, sans-serif;
}

Специальный резервный шрифт

Если всё же нужно использовать не стандартные шрифты, то качаем их себе только в формате woff2, как указано выше.
Добавляем font-display: swap;
Подбираем подходящий вариант резервного шрифта с использованием ресурса
https://meowni.ca/font-style-matcher/

Список системных шрифтов:
https://www.w3.org/Style/Examples/007/fonts.ru.html
https://habr.com/ru/articles/68189/

А затем переопределяем добавляем скриптом класс font-loaded к тегу body, в котором переопределяются атрибуты шрифта.
Источник:
https://css-tricks.com/books/greatest-css-tricks/perfect-font-fallbacks/

Ну и есть ещё https://www.zachleat.com/web/glyphhanger/ с помощью которого можно почистить сам файл шрифтов, удалив из него целую кучу ненужных символов.