Устранение ресурсов, блокирующих рендеринг Google PageSpeed Insight

#javascript #css #optimization #mobile #google-pagespeed

#javascript #css #оптимизация #Мобильный #google-pagespeed

Вопрос:

Я пытаюсь улучшить мобильную скорость в Google PageSpeed Insight. Вот ссылка на результат: https://rb.gy/x6rppd

Я уже использую SG Optimizer, Autoptimize для минимизации, уже объединяю css и js. Кто-нибудь может помочь?

Комментарии:

1. Отчет ссылается на страницу, объясняющую ресурсы, блокирующие рендеринг . Эта статья является хорошей отправной точкой для начинающих по критическому CSS , и здесь приведена дополнительная информация о CSS, блокирующем рендеринг . На данный момент вы на самом деле не задали вопрос, на который мы можем ответить, поэтому прочитайте, а затем задайте несколько вопросов, если вы застряли, и мы сможем помочь

2. Спасибо за ответ. Я на самом деле пытаюсь улучшить скорость мобильной связи, но, как вы можете видеть, у нее очень низкий балл, а FCP совсем не хорош. Кроме того, если вы проверите, есть много неиспользуемых Javascript и CSS.

3. Оптимизация требует многого, основные причины вашего медленного FCP заключаются в том, что вы не встроили свой критический CSS (то есть CSS, который необходим для отображения начального содержимого страницы «над сгибом»). Таким образом, браузер должен дождаться загрузки файла CSS, прежде чем он сможет начать рендеринг. Поскольку вы объединили свой CSS, этот файл большой, и поэтому загрузка занимает много времени. Прочитайте статьи, на которые я ссылался, поскольку вам нужно базовое понимание, прежде чем мы сможем предложить какие-либо рекомендации. Кроме того, при 8,5 МБ ваша страница очень тяжелая, поэтому вам нужно подумать об уменьшении веса страницы. Наконец, 108 запросов — это много.

4. Я бы посоветовал вам открыть каждый элемент, о котором сообщает Lighthouse (как в разделе «возможности», так и в разделе «диагностика»), и прочитать, о чем этот раздел. Вы можете сделать это, просто нажав на элемент. Имея базовое представление, вы можете задавать конкретные вопросы, и мы сможем помочь лучше, в нынешнем виде вы, по сути, просите нас оптимизировать сайт для вас (с очень плохой начальной позиции). Требуется некоторое время, чтобы узнать достаточно, чтобы понять, где проблемы, но просто начните читать, и вы получите это, я обещаю.

5. Хорошо. После прочтения и выполнения всего, что я обнаружил, что шрифт «iconsmind.woff» находится под огромной нагрузкой на выплату по сети, т.е. 1150,8 КБ. Как я могу удалить этот шрифт? Мои CSS и JS составляют около 140 КБ, поэтому я не думаю, что это вызывает проблему здесь.