Я работаю над тем, чтобы увеличить скорость страницы. Я использую Critical Path CSS Generator tool для определения вышеописанного CSS. Затем я встраиваю критический CSS as suggested и загружаю полный css асинхронно.Как удалить критический CSS из файла main.css
Но в итоге я получаю много дубликатов CSS, что не так оптимально. Так что я задал себе вопрос:
Как удалить критический CSS из файла main.css?
Заранее спасибо.
Хотя это может показаться анти-шаблоном, все вышеописанные CSS, которые вы встроили в свой документ СЛЕДУЕТ дублироваться в вашем внешнем документе CSS. Таким образом, вы можете создать единый пакет для всего сайта, который можно получить один раз для всего сайта, но эта начальная загрузка страницы будет ускорена. В то время как это приводит к дополнительным «потерянным» KBs upfront, преимущество заключается в том, что у вас есть небольшой подмножество необходимого CSS, доступного вам, как только HTML отправляется клиенту, сокращая время, необходимое для визуализации первоначального представления клиента ,
Кроме того, чтобы быть понятным, если вы правильно следуете этой практике, каждая страница на сайте будет иметь другой набор вышеперечисленных css, поскольку каждая страница имеет разные контенты/теги выше что сделало бы невозможным удалить вышеописанный CSS из полного внешнего файла (предполагая, что вы объединяете все CSS в один файл).
Подробнее о практике вышеописанного css here.
Если вы действительно обеспокоены дублированием кода (хотя в этом случае вы не должны быть), вы можете использовать файлы cookie для отслеживания того, посетил ли пользователь сайт раньше. Если пользователь не был раньше, вы можете встроить вышеописанный CSS. Если пользователь был раньше, вы можете предположить, что пользователь уже имеет полный файл CSS и что файл CSS будет извлечен из кеша браузеров.
Есть куча статей о том, насколько ненадежным является кеш браузера, поэтому моя рекомендация заключается в том, что вы просто выполняете то, что уже делаете для удовлетворения требований клиентов.
Еще одна вещь, о которой следует упомянуть, заключается в том, что эта практика будет в значительной степени уходить, как только HTTP/2 станет более распространенным, поскольку последующие HTTP-запросы не будут столь дорогими, как сегодня. Учитывая интенсивный инструментарий/усилие, которое требуется для этой практики (особенно, если у вас есть будущая проверка против HTTP/2), может быть лучше (я думаю, это так) просто полностью избежать этого.
Зачем нужно дублировать CSS во внешней таблице стилей? – acjay
Предполагая, что вы следуете другим рекомендациям, ваш внешний лист должен быть одним файлом со всем CSS для вашего сайта. Вам нужно, чтобы это было в кеше браузера, когда пользователь посещает другую страницу вашего веб-сайта, поскольку вышеописанный CSS должен меняться в зависимости от того, на какой странице вы находитесь. –
Gotcha. Это то, что я предполагал, но это было непонятно из вашего ответа. Я отредактировал, чтобы уточнить. Я бы сказал, что «лучшее» является спорным, поскольку это зависит от специфики того, что обслуживается, и как часто развертываются изменения стиля, а также есть несколько подходов к оптимизации (и, как вы цитируете, HTTP/2 снова меняет игру). Отличный ответ в целом, хотя :) – acjay
сделал запуске audit в браузере, прежде чем будет PageSpeed Insights
там вы можете увидеть предложения удалить неиспользуемые правила CSS и производительность инлайн.
обязательно писать весь style в начальных страницах и избежать этих тегов между страницей, которая влияет на Perfomance
и важно, inline должны быть для thumbnails, но не для укладки на странице с
примера:
<p style="padding:2px">something to have some padding</p>
@DhruvJoshi Почему это не попытка ответить на вопрос? Запустите аудит, перейдите к описанию страницы, следуйте рекомендациям по удалению встроенной производительности. Мне кажется, что это может быть ответ? – Trilarion
Я не понял! :-( –
На мой взгляд, некоторые из этих инструментов выходят за борт над предложениями «над складкой». Если ваш css минирован, сжат и загружен из одного файла, он не будет сильно замедлять вашу страницу.Вытягивание определенных стилей из листа для встроенного стиля «над складками» просто делает для грязного, неуправляемого кода, который не будет заметно быстрее. Показатель Pagespeed - хорошая рекомендация, но это еще не все. –
Согласен, но клиент настаивает на результатах Google PageSpeed. –
Затем вы просто должны поместить файл css в нижний колонтитул и иметь встроенные стили в верхней части файла только для элементов, видимых при загрузке страницы (выше складки). Вам нужно будет сделать эту страницу за страницей. –