Второе на что больше всего влияет скорость загрузки сайта – количество подключаемых файлов (CSS, JS и т.д.) и самое распространенное их расположение. Почему? – спросите вы, а я отвечу. Каждый файл создает подключение к хосту, каждый раз когда пользователь заходит к вам на сайт, его браузер сначала делает подключение к хосту, получает первичные данные потом начинает грузится сам исходный код html страницы.
В коде браузер по ходу постройки дерева DOM натыкается на стили и скрипты, и для каждого файла, браузер начинает создавать новое подключение, которое требует ресурсов, трафика и памяти, и браузер не перейдет к следующей строчке кода пока не загрузится ваш стиль или скрипт.
Пример не оптимизированного и замусоренного сайта.
И так каждый раз, когда заходит на ваш сайт, и его кэш «устаревает». Еще к этому, большинство стилей и скриптов в последнее время весят очень не мало, иногда по >400кб. А это трафик, и он очень важен.
Чтобы как-то привести все это в порядок, стоит соблюсти несколько простых правил:
Стили в шапке – скрипты в подвале
Подключайте только «минимизированные» файлы
Шрифты загрузите на хостинг, и подключите в вашем основном CSS.
Объединяйте файлы между собой, сокращайте их количество.
Метрику и аналитику — вместе со скриптами, размещайте только в подвале!
Включите сжатие и кэширование на стороне сервера.
Первое что необходимо сделать, это разделить скрипты и стили, и почистить вашего сайта. Скрипты требуют не мало ресурсов для их обработки, поэтому пусть они грузятся в последнюю очередь. Если вы не понимаете как порядок файлов может влиять на загрузку сайта, советую ознакомится с этой страницей в википедии.
Пример оптимизированного сайта.
Google рекомендует держать даже стили в подвале сайта, а в шапке оставить лишь тег с основными стилями необходимыми для отображения первого экрана вашего сайта. Это не плохо и не правильно, у этого метода много нюансов. Предлагаю вам самим протестировать это. Сразу могу сказать — я не пользуюсь этим способом и вам не советую.
Второе и третье – это «минимизированные» и объединенные файлы. В этом нет ничего страшного, просто обрабатывайте ваши стили и скрипты через специальные сервисы, они очистят код от лишних пробелов, комментариев и тем самым уменьшат размер подключаемого файла.
Из-за этого файлы выглядят как каша из символов или вовсе написаны в одну строчку.
Пример обычного кода css.
Пример минимизированного кода css.
Объединение файлов необходимо чтобы сократить количество подключений клиента к хосту. Рекомендую изучить «комбинирование» файлов и настроить это у себя на сайте.