Из чего состоит сайт?
Красивые современные сайты состоят не только из html-кода, как правило современный сайт состоит из множества файлов загружаемых в браузер пользователя при входе на сайт. Это сам файл с html-кодом страницы, файлы JavaScript, таблицы стилей CSS и CSS3, фотографии, графики, иллюстрации и др. изображения, дополнительные объекты Flash, Java, Silverlight, а также содержимое iframe или динамический контент.
Таким образом, в браузере пользователя для полного отображения всех элементов страницы веб-сайта создается по одному запросу на получение каждого файла с включением и создаются запросы на получение динамического контента после которые генерируют уже загруженные в браузер файлы.
Почему много файлов тормозят загрузку?
Загрузка каждого отдельного файла CSS, JavaScript или отдельного изображения производится созданием отдельный запроса из браузера к серверу, а это требует время на установление соединение и передачу запрошенного файла с сервера. Чем больше подгружается изображений и файлов, тем больше времени уйдет на обработку всех запросов и тем медленнее будет сайт у пользователя.
По статистике, на продвинутом сайте может быть 20-30 CSS файлов (стилей сайта), 10-20 файлов кода javascript и до 50 файлов различных изображений. Каждый из перечисленных в html-странице файлов начинает загружаться после отправки запрос на предшествующий файл и он был передан с сервера в браузер.
Как оптимизировать сайт?
Загрузку страницы можно оптимизировать слудующими шагами:
- Объединить все файлы стилей в один CSS файл;
- Объединить все файлы Javascript в один файл;
- Cжать файлы CSS и Javascript;
- Включить асинхронную загрузку;
- Включить отложенный запуск джава-скриптов;
- Переместить загрузку css и js файлов вниз html-страницы.
Интересный момент: можно поступить иначе – включить все CSS, javascript прямо внутрь html-страницы. Страница получится большая, однако если на сервере включено сжатие трафика то такое можно сделать без потери скорости сайта.