Влияет ли размер css файла на загрузку страницы?

#html #css #вёрстка

К примеру у меня в css файле написано более 1к строк или к примеру файл весит более
1 мб... Может ли это повлиять на загрузку страницы?

Если к примеру для каждой страницы(к примеру) писать отдельный css файл, получается
страница будет быстрее загружаться?
    

Ответы

Ответ 1

Вес всего, что вы размещаете на странице будет влиять на её загрузку. Однако, есть
и вторая сторона вопроса. Разбив файл на множество мелких, подгружая их в каждом нужном
разделе, вы увеличиваете количество запросов, необходимых для чтения этих файлов.

Что же делать, в такой ситуации?

1) Используйте сжатие. Пример, тут.

2) Уменьшайте количество стилей путем переноса в нужные страницы, но, только там,
где страницы не индексируются или находится единичный элемент. 

Пример:


Код формы или страницы регистрации можно вынести в отдельный файл. В общем-то, для
всех служебных участков, которые закрыты от индексации можно писать отдельные стили.
Если основной слайдер на главной странице более нигде не размещается, тогда вынесите
его стили в inline.


Если говорить обобщенно, в основной таблице оставляйте только те стили, которые участвуют
на всех видимых страницах по несколько раз.

3) Некоторым стилям задавайте отдельные классы и используйте их при работе с HTML.

Например:

Запишите transition: all .5s; таким образом:

.transition {
 -webkit-transition: all .5s;
 -o-transition: all .5s;
 transition: all .5s;
}


Затем подставляйте этот класс непосредственно при работе с кодом страницы.

...


Таким образом вы существенно уменьшите количество повторов для таких стилей как user-select,
элементов Flexbox и других.

Все эти советы применимы и к файлам JS.

Обобщенно говоря, ваша задача максимально уменьшить размер всего, что загружается
на странице, не только файлов, но и их количества.

Если кто-то что-то добавит, будет вообще супер!


Ответ 2

Конечно влияет. Но только при первом обращении, далее любой нормальный браузер просто
закеширует его. Если хотите чтобы уж очень быстро, используйте inline стили, но это
сами понимаете не очень красиво и тем более не очень удобно и практично. Хотя я использовал
такой подход при работе с Vue.js например для разработки админ панели. Если для вас
важно СЕО, думаю это не очень хорошая идея. Насчет разбить на страницы, можно с точки
зрения удобства разработки, но не забывайте что это повлечет за собой и увелечение
кол-ва запросов к серверу.
Хотя если вы используете какой нибудь Webpack то это не проблема насколько я знаю.


Ответ 3

Может ли это повлиять на загрузку страницы?


Логически да, практически (и да и нет).


Сжатие.


Если у вас в css комментарии, пробелы, переносы строк, то первое о
чем вам стоит задуматься, это об оптимизации css, а точнее о его
сжатии, максимальном. Т.е. когда вы откроете файл, там все будет в 1
строку, без лишних пробелов и т.д и т.п.

Кэширование статических файлов.


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