Форум Сайтостроение Веб-строительство

Google PageSpeed Insights vs Google Fonts

NL
На сайте с 29.01.2003
Offline
212
NULL
4411

Такая ситуация - на сайте грузится шрифт с Google Fonts. Если проверить страницу сайта на PageSpeed Insights, то естественно выползает красный Should Fix:

Your page has 1 blocking CSS resources. This causes a delay in rendering your page.

Смириться или можно что-то с этим поделать?

Если что шрифт - Open Sans (может его можно как-то через Webfonts загрузить?)

D_1
На сайте с 23.10.2008
Offline
128
D_1
#1

Есть решение.

Примерно такое:

$(document).ready(function() {
$("head").append("<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:300,500' rel='stylesheet' type='text/css'>");
})
rustelekom
На сайте с 20.04.2005
Offline
543
rustelekom
#2

Фонты можно скачать и подключить локально. Ругаться всё равно будет, но скорость увеличится. Идеального решения нет. Точно так же ругается и на джаваскрипты. Упрощать дизайн понятно не хочется, а варианты типа подменить реальную страницу заставкой, по сути проблемы не решают, а только скрывают.

60% скидка на VPS в США, 20% скидка в Нидерландах и 40% в Финляндии. Новые тарифы на AMD Ryzen 9950x с частотой до 5.7 ГГц со скидкой 40% RoboVPS https://www.robovps.biz
NGINX -- нетривиальная защита Лидирующая система статейного маркетинга. Оцените мой первый сайт
tommy-gung
На сайте с 22.11.2006
Offline
304
tommy-gung
#3
NULL:
Google PageSpeed Insights

вам шашечки или ехать? (с)

Здесь не могла быть ваша реклама
NL
На сайте с 29.01.2003
Offline
212
NULL
#4

D_1, rustelekom, спасибо!

VHS
На сайте с 28.09.2007
Offline
142
VHS
#5
D_1:
Есть решение.
Примерно такое:

Есть еще лучше ))) Примерно такое...

(function(){
function addFont() {
var style = document.createElement('style');
style.rel = 'stylesheet';
document.head.appendChild(style);
style.textContent = localStorage.Roboto;
}

try {
if (localStorage.Roboto) {
addFont();
} else {
var request = new XMLHttpRequest();
request.open('GET', '/css/fonts.css', true);

request.onload = function() {
if (request.status >= 200 && request.status < 400) {
localStorage.Roboto = request.responseText;
addFont();
}
}
request.send(); }
} catch(ex) { }
}());

Соответственно в /css/fonts.css base64 кодированный шрифт.

Е Блажеев
На сайте с 19.06.2016
Offline
5
Е Блажеев
#6
VHS:
Есть еще лучше ))) Примерно такое...

В этом случае, либо:

1. Нужно будет подгружать еще больше по размеру JS-файл: соответственно, и производительность еще больше упадет и предупреждение в Google PageSpeed не пропадет.

2. Нужно будет размещать большой кусок кода прямо в HTML-код страницы: соответственно, как и в первом варианте + большой кусок кода не будет кешироваться.

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

Парсеры, плагины, верстка (WordPress, OpenCart, PHP, JS, Google PageSpeed) (/ru/forum/944779)
Отношение ПС к js Как выводить кусок html Как так? Адаптивный блок

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий