Запретить загрузку всей таблицы стилей CSS - загрузить только необходимый контент?

Question

Я пытаюсь улучшить скорость своего сайта, поскольку я интегрирую определенные функции темы, которую я приобрел на своем сайте, и наткнулся на эту интересную функцию на веб-сайте указанной темы.

Проблема, с которой я столкнулся, - это моя таблица стилей CSS, абсолютно массивная (220kb) и занимает возраст (3-4 секунды) для загрузки. Я работаю над тем, чтобы уменьшить это, но это совсем другая история ...

Когда я пытаюсь загрузить ту же самую страницу на веб-сайте темы, она загружается намного быстрее. После проверки на моем веб-сайте я нахожу, что размеры стилей «Размер» и «Содержание» в инструментах dev примерно одинаковы.

На странице разработчика размер намного меньше, чем содержание. Означает ли это, что ТОЛЬКО элементы, вызываемые в HTML, загружаются из таблицы стилей? Если да, то как это сделать, потому что это звучит чрезвычайно эффективно.

Я также думал, что это потому, что страница разработчика кэшировала контент в моем браузере, но я отключил кеш, и он по-прежнему загружает только часть содержимого.

Кэш моего сайта работает, кстати, меня просто интересует ускорение начального времени загрузки.

Любые мысли?

Соответствующие изображения:

Cache Отключено:

сайт Dev с малым отношением размер/контента - http://i.imgur.com/B3uhOWF.png

Мой сайт с ~ 1: 1 размер/соотношение содержания - http://i.imgur.com/Ymu2YRz.png

Answer 1

Off в верхней части головы вы можете минимизировать свой CSS. Есть несколько бесплатных инструментов, включая страницу Speed ​​Insights для Chrome.

См https://developers.google.com/speed/docs/insights/MinifyResources

Похоже, ваш CSS уже в уменьшенной файле, но, возможно, содержание нет!

---

Просто так люди не смущены. Решение состояло в том, чтобы включить gzip на сервере, о котором вы можете узнать больше в https://developers.google.com/speed/articles/gzip (но все же минимизируйте свой css).

Answer 2

Благодаря пользователю worldofjr, я нашел ответ на включение GZIP на сервере.

Невероятное увеличение скорости.

Это должно быть необходимо прочитать, когда кто-то подписывается на веб-хостинг. Я не могу поверить, что мой сайт прошел 1 год без этого, когда потребовалось 2 секунды, чтобы включить !!!

Answer 3

«На странице разработчика размер намного меньше, чем содержание. Означает ли это, что ТОЛЬКО элементы, вызываемые в HTML, загружаются из таблицы стилей? Если да, то как это можно сделать, потому что это звучит потрясающе эффективный «.

Это не так, как работает css. И то, что вы описываете, может быть не очень эффективным, даже если вы каким-то образом его реализуете.Сервер должен знать, какие стили отправлять, что потребует от браузера загрузки страницы и отправки ее списка, и серверу придется генерировать пользовательский css и отправлять его обратно ...

Вы, безусловно, можете ограничить который css загружает где - и вы должны. Но это нужно делать вручную, по крайней мере, по моему опыту.

Во всяком случае, несколько вещей, чтобы рассмотреть, прежде чем продолжить:

Я думаю, 200k действительно, действительно большой для таблицы стилей. Большинство сайтов, на которых я работаю с общим весом CSS, могут составлять 20 тыс. Или менее. Я бы расследовал, почему ты такой огромный. Может, что-то пошло не так. Минификация может помочь, но она не собирается сбивать вас с толку на порядок.

Однако, даже если это самый большой в мире файл CSS, 200k не является большим. Не 4-5 секунд. Я работаю над сайтом прямо сейчас, когда целая страница весит ~ 350 кбайт, и я загружаю ее через секунду. Опять же, я подозреваю, что что-то еще пошло не так. Размер этого CSS, вероятно, указывает на что-то, но я подозреваю, что это не просто время, которое требуется для загрузки файла.