Я использовал аналитические данные Google PageSpeed, чтобы попытаться улучшить производительность своего сайта, и до сих пор он оказался чрезвычайно успешным. Такие вещи, как отсрочка скриптов, работали прекрасно, так как у меня уже была собственная версия jQuery .ready()
для отсрочки скриптов до полной загрузки страницы, все, что мне нужно было сделать, это вставить эту конкретную функцию и переместить полные скрипты в конец страницы. Это сработало отлично.
Но теперь я обнаружил, что смотрю на одну оставшуюся желтую точку в контрольном списке: «Устранить блокирующий рендеринг CSS в содержимом выше сгиба».
Мой CSS настроен так, чтобы иметь один глобальный _.css
файл, содержащий стили, которые применяются к общей структуре страницы или используются более чем в одном или двух местах на сайте. Большинство страниц тогда имеют связанный файл CSS (например, party.php
имеет party.css
), содержащий стили, специфичные для этой конкретной страницы. Все CSS-файлы кэшируются на неопределенный срок, так как я добавляю /t=FILEMTIME
имена файлов (а затем удаляю их с помощью .htaccess), чтобы гарантировать, что файлы обновляются при их изменении.
Так или иначе, Google рекомендует встраивать критические стили, необходимые для превосходного контента. Проблема в том ... ну, взгляните на этот скриншот: http://prntscr.com/1qt49e
Как вы можете видеть ... ВСЕ содержание выше! Люди ненавидят прокрутку, особенно в игре, которая включает в себя загрузку многих страниц. Поэтому я спроектировал сайт так, чтобы он помещался на одном экране (при условии достаточно хорошего разрешения). Так что это означает ... ВСЕ стили применимы к содержанию выше всяких похвал! Итак ... есть ли решение? Или я застрял с этой желтой отметкой на почти идеальном счете?
Ответы:
Ранее был задан связанный вопрос: что такое «содержание выше всех» в Google Pagespeed?
Во-первых, вы должны заметить, что это все о « мобильных страницах ».
Поэтому, когда я правильно истолковал ваш вопрос и скриншот, то это не для вашего сайта!
Напротив, выполнение некоторых вещей, рекомендованных Google в своих рекомендациях, будет хуже, чем лучше для «обычных» веб-сайтов.
И не все, что исходит от Google, является «святым Граалем» только потому, что оно исходит от Google. И сами они не являются хорошим примером для подражания, если вы посмотрите на их HTML-разметку.
Лучший совет, который я могу вам дать:
Кроме того, почему вы используете разные файлы CSS, а не только один?
Дополнительный запрос хуже, чем небольшой объем данных. И после первого запроса файл CSS все равно кэшируется.
Вещи, о которых всегда нужно заботиться:
И не ломайте голову над тем, как получить 100% инструмента Google PageSpeed Insights ...! ;-)
Дополнение 1: Вот страница, на которой Google показывает нам, что они рекомендуют для оптимизации доставки CSS .
Как уже было сказано, я не думаю, что это ни реалистично, ни имеет смысл для «нормального» сайта! Потому что, в основном, когда у вас адаптивный веб-дизайн, наиболее вероятно, что вы используете медиа-запросы и другие стили макета. Так что, если вы не собираетесь загружать свой CSS первым и блокировать его, вы получите FOUT ( Flash из Unstyled Text ). Я действительно не верю, что это «лучше», чем хотя бы еще несколько миллисекунд для рендеринга страницы!
Imho Google начинает новую «шумиху» (когда я смотрю на все вопросы об этом здесь, на Stackoverflow) ...!
источник
Как я получил 99/100 на Google Page Speed (для мобильных устройств)
TLDR: сожмите и вставьте весь свой сценарий CSS между вашими
<style></style>
тегами.Я преследовал этот неуловимый счет 100/100 в течение недели. Как и вы, последним оставшимся элементом было устранение «блокирования рендеринга CSS для содержимого, превышающего фолд».
Конечно, есть легко решить ?? Нет. Я опробовал решение loadCSS группы Filament . Слишком много .js на мой вкус.
Как насчет
async
атрибутов для CSS (например, JS)? Их не существуетЯ был готов сдаться. Затем меня осенило. Если связывание скрипта блокировало рендеринг, что если я вместо этого вложил весь CSS в голову. Таким образом, было нечего блокировать.
Казалось абсолютно НЕПРАВИЛЬНЫМ встраивать 1263 строки CSS в мой тег стиля. Но я обернулся. Я сжал его (и префикс) сначала с помощью:
postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/
Смотрите пакет NPM postcss .Теперь это была всего лишь одна длинная линия без космического пространства. Я поместил CSS в
<style>your;great-wall-of-china-long;css;here</style>
теги на моей домашней странице. Затем я пересмотрел информацию о скорости страницы.Я перешел с 90/100 на 99/100 на мобильном телефоне !!!
Это идет против всего во мне (и, вероятно, вы). Но это решило проблему. Я просто сейчас использую его на своей домашней странице и включаю сжатый css программно через PHP include.
YMMV (ваш пробег может отличаться) в зависимости от длины вашего css. Google может перебить вас за слишком большое содержание. Но не думай; тест!
Ноты
Пока что я делаю это только на своей домашней странице, поэтому люди получают БЫСТРЫЙ рендер на моей самой важной странице.
Ваш CSS не будет кэширован. Я не слишком беспокоюсь, хотя. Когда они попадут на другую страницу моего сайта, файл .css будет кэширован (см. Примечание 1).
источник
Несколько советов, которые могут помочь:
Вчера я сталкивался с этой статьей по оптимизации CSS: профилирование CSS для ... оптимизации
Много полезной информации о CSS и о том, что CSS вызывает наибольшую потерю производительности.
Я видел следующую презентацию на jQueryUK о «скрытых секретах» в Googe Chrome (Canary) Dev Tools: DevTools Может это сделать . Проверьте разделы на время до первой краски , перекраски и дорогостоящего CSS.
Кроме того, если вы используете загрузчик, такой как requireJS, вы можете взглянуть на один из плагинов загрузчика CSS, называемый require-CSS , который использует CSSO - оптимизатор, который также выполняет структурную оптимизацию, например. объединение блоков с одинаковыми свойствами. Я использовал его несколько раз, и он может сохранить довольно много CSS от случая к случаю.
Вне вопроса: я второй @Enzino в создании спрайта для всех маленьких иконок, которые вы загружаете. Размеры файлов настолько малы, что на самом деле не требуется обходной сервер для каждого значка. Также имейте в виду общее количество одновременных запросов http, которые может выполнить браузер. Таким образом, запросы на большее количество маленьких значков также «блокируют рендеринг». Хотя пустая страница сравнивается с вашей, мне нравится, например, как duckduckgo загружается.
источник
Пожалуйста, посмотрите на следующую страницу https://varvy.com/pagespeed/render-blocking-css.html . Это помогло мне избавиться от «Render Blocking CSS» . Я использовал следующий код для удаления « Render Blocking CSS ». Теперь в Google Speed Insight я не получаю проблемы, связанные с блокировкой рендеринга CSS.
источник
Я тоже боролся с этим новым показателем скорости страниц.
Хотя я не нашел практического способа вернуть мой счет до 100%, есть несколько вещей, которые я нашел полезными.
Объединение всех CSS в один файл очень помогло. Все мои сайты вернулись до% 95 -% 98.
Единственное, о чем я мог подумать, - это вставить все необходимые CSS (которые, как представляется, большинство из них - по крайней мере, для моих страниц) на первой странице, чтобы получить сладкий высокий балл. Хотя это может помочь вашей скорости оценки, это, вероятно, замедлит загрузку вашей страницы.
источник
Оптимальным решением для этого в 2019 году является HTTP / 2 Server Push .
Вам не нужны какие-либо хакерские решения на JavaScript или встроенные стили. Однако вам нужен сервер, поддерживающий HTTP 2.0 (любая современная версия сервера), который сам требует, чтобы ваш сервер запускал SSL. Однако с Let's Encrypt нет никаких причин не использовать SSL в любом случае.
Мой сайт https://r.je/ имеет оценку 100/100 для мобильных и настольных компьютеров.
Причина этих ошибок заключается в том, что браузер получает HTML, а затем должен дождаться загрузки CSS, прежде чем страница будет отображена. Используя HTTP2, вы можете отправлять как HTML, так и CSS одновременно.
Вы можете использовать HTTP / 2 push, установив заголовок Link.
Пример Apache (.htaccess):
Для NGINX вы можете добавить заголовок к вашему тегу местоположения в конфигурации сервера:
С этим установленным заголовком браузер получает HTML и CSS одновременно, что мешает CSS блокировать рендеринг.
Вы захотите настроить его так, чтобы CSS отправлялся только при первом запросе, но заголовок Link является наиболее полным и наименее хакерским решением «Устранить блокировку рендеринга Javascript и CSS».
Для подробного обсуждения посмотрите мой пост здесь: Устраните блокировку рендеринга CSS с помощью HTTP / 2 Push
источник
Подумайте об использовании пакета для автоматической генерации встроенных стилей из ваших CSS-файлов. Хорошим является Grunt Critical или Critical css для Laravel .
источник
Привет для jQuery Вы можете использовать только так
Используйте только async и type = "text / javascript"
источник