Опубликовано Оставить комментарий

StoreFront — Google Fonts

Source Sans Pro — https://www.fonts-online.ru/font/Source-Sans-Pro шрифт используемый в теме Storefront

StoreFront грузит фонты с сайта Google и это сильно тормозит общую загрузку — WP+StoreFront https://pagespeed.web.dev/ — 93, если убрать внешнюю загрузку фонтов https://pagespeed.web.dev/ — 100

За загрузку фонтов отвечает эта строка на итоговой html странице

<link rel='stylesheet' id='storefront-fonts-css'  href='https://fonts.googleapis.com/css?display=swap&family=Source+Sans+Pro%3A400%2C300%2C300italic%2C400italic%2C600%2C700%2C900&#038;subset=latin%2Clatin-ext&#038;ver=3.9.1' media='all' />

Берется из файла \wp-content\themes\storefront\inc\class-storefront.php

wp_enqueue_style( 'source-sans-pro', '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,300italic,400italic,700,900', array(), $storefront_version );

По ссылке https://fonts.googleapis.com/css?display=swap&family=Source+Sans+Pro приходит файл CSS со ссылками на реальные файлы шрифтов с разным весом и начертанием — всего 49 вариантов — https://vahro.ru/other/css-fajl-google-fonts-source-sans-pro/

Для увеличения скорости загрузки ни font-display: swap; (Плагин Swap Google Fonts Display) ни прелоад <link rel=’dns-prefetch’ href=’//fonts.googleapis.com‘ /> не помогает.

Убираем внешнюю загрузку вообще — https://vahro.ru/other/snippet-dlya-otklyucheniya-google-fonts-tema-storefront/

На 12.01.2021 решение такое — потом нужно будет разбираться

Еще можно почитать

Should you self-host Google Fonts? — https://www.tunetheweb.com/blog/should-you-self-host-google-fonts/

Стоит ли хранить Google Fonts на своём сервере? — https://habr.com/ru/company/vdsina/blog/490366/

The Fastest Way To Load Google Fonts In WordPress! — https://metabox.io/load-google-fonts-wordpress/#how-to-load-google-fonts-in-wordpress-themes

Link types: preload — https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types/preload

Google Common Recipes — https://developers.google.com/web/tools/workbox/guides/common-recipes

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *