Вы здесь

Оптимизация быстродействия сайта путём сокращения CSS и JavaScript

Я думал о быстродействии своего сайта и связанной с этим эргономике. Плохое быстродействие затрагивает самые настоящие этические вопросы. Быстрый сайт доступнее, поэтому больше людей продолжают с ним взаимодействовать, особенно открывающие его с мобильных устройств или точек мира, где медленный или дорогой Интернет. Поэтому я решил посмотреть, как я могу улучить быстродействие. Для этого я воспользовался сервисом webpagetest.org и одной из страниц сайта, чтобы протестировать его скорость.

Оптимизация быстродействия сайта путём сокращения CSS и JavaScript

На изображении видно, что браузеру потребовалось 0,722 секунды для скачивания и рендеринга страницы (синяя вертикальная линия):

  • Первые 210 миллисекунд уходят на установку соединения, которая включает поиск DNS, рукопожатие TCP и согласование SSL
  • Следующие 260 миллисекунд уходят на скачивание и рендеринг HTML, двух CSS- и одного JavaScript-файла
  • После того, как всё скачано, последние 330 миллисекунд уходят на создание макета страницы, выполнение кода JavaScript и скачивание значка сайта

По большинству стандартов — 0,722 секунды это очень быстро. По данным HTTP Archive средняя страница на настольном компьютере готова через 2,4 секунды. Несмотря на это я видел, что длина моих горизонтальных зелёных и жёлтых полос намного длиннее синей полосы. Другими словами, много времени тратится на скачивание CSS (две зелёные полоски) и JavaScript (жёлтая полоска) в сравнении с HTML (синяя полоска). Чтобы исправить это я сделал 2 вещи:

  • Использовал очищенный и сжатый JavaScript. Заменил свой JavaScript на основе jQuery очищенным и сжатым вариантом файлов. Без снижения функциональности сайта, размер JavaScript уменьшился с 45 Кб до 699 байт, что сэкономило больше 6 000 процентов
  • Использовал подключение CSS по условиям. Например, для подсветки кода я использую Prism.js. В результате файл prism.css скачивался при каждом запросе страницы, даже если кода на странице не было и подсвечивать было нечего. Используя систему рендеринга Друпала, легко настроить подключение CSS на основе условий. Воспользовавшись этим, я смог уменьшить размер стилей на 90 процентов — с 4,7 Кб до 2,5 Кб

По данным HTTP Archive на 1 января 2019 года, при открытии страницы в среднем скачивается 396 Кб JavaScript и 60 Кб CSS. Я горд, что у моего сайта показатели намного лучше.

Тип файла dri.es / До dri.es / После В среднем по сайтам
CSS 4,7 Кб 2,5 Кб 60 Кб
JavaScript 45 Кб 0,7 Кб 396 Кб

Так как новые файлы CSS и JavaScript значительно меньше, то браузеру требуется меньше времени для скачивания, обработки и рендеринга. В результате, та же самая страница доступна теперь через 0,465 секунды вместо 0,722 секунды, то есть на 35% быстрее. После запуска нового тестирования на webpagetest.org можно увидеть, что полоски для CSS- и JavaScript-файлов стали заметно короче:

Оптимизация быстродействия сайта путём сокращения CSS и JavaScript

Было.

Оптимизация быстродействия сайта путём сокращения CSS и JavaScript

Стало.

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