Оптимизация JavaScript и CSS-файлов в Drupal | Drupal для новичков. Друпал для начинающих
Опубликовано: 01.11.2017
С чего начинается сайт?
Для браузера сайт начинается с GET-запроса страницы. Сервер на этот запрос высылает HTML-код страницы. Браузер разбирает код и начинает загрузку всех внешних файлов (JS, CSS, Flash и др.) в порядке их следования в коде. Обычно браузер использует не более 2х потоков для загрузки внешних файлов, а CSS и JS загружаются вообще в одном потоке. Время на каждый запрос зависит от размера возвращаемого ответа, загрузки сервера и активности на каждой машине на всем пути между браузером и сервером. Чем больше размер файла - тем дольше он будет доставляться браузеру. Чем больше количество файлов - тем дольше будет загружаться вся страница.
Как браузер рендерит страницу?
WordPress: Подгрузка JS и CSS из Footer а не из Head - ЗА 1 МИНУТУ!
До момента полной загрузки JS из HEAD пользователь видит "белую страницу". Когда все внешние скрипты загружены, начинается выполение JS в порядке следования на странице (сверху вниз), а пользователь уже начинает видеть контент страницы, и по мере загрузки CSS и картинок, страница отрисовывается полностью.
CodeKit 2: использование хуков
Таким образом, чтобы увеличить скорость загрузки страницы нужно:
Уменьшить размеры скриптов дабы ускорить первичный отклик страницы Уменьшить количество файлов (картинки объединяются в спрайты, а JS и CSS аггрегируются) Использовать HTTP-сжатие Увеличить количество хостов, с которых загружается статика сайта, чтобы браузер мог увеличить лимит одновременных соединений Поместить JavaScript в footer страницы, чтобы они загружались последними, а пользователь мог уже пользоваться страницей.Оптимизация графики и создание спрайтов - работа для дизайнера, а мы займемся оптимизацией JavaScript и CSS-файлов в Drupal.