Быстрый сайт быстро.

Руководство для ленивых программистов по оптимизации скорости с минимальными усилиями.

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

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

Инструменты разработчика Chrome

Многие люди используют инструменты разработчика Chrome, но не в полной мере. Я тоже виноват. Не бояться. Это не так сложно, как вы думаете.

  1. Откройте свой сайт в режиме инкогнито Chrome. Инкогнито, поэтому расширения исключены, потому что они могут добавить шума в нашу статистику.
  2. Откройте инструменты разработчика Chrome. На вкладке "Сеть":
    * установите флажок "Отключить кеш"
    * Установите для параметра Дросселирование сети значение "Быстрый 3G".

3. На вкладке «Производительность» нажмите кнопку перезагрузки (не кнопку обновления браузера!) с надписью «Начать профилирование и перезагрузить страницу».

Результаты профайлера

В конце вы получите красивый график. Для моего приложения это выглядело так.

Посмотрим, сможет ли мой примитивный разум понять это.

  1. Я использую webpack для создания одного пакета js для своего приложения. Я поставил скрипт на отсрочку, чтобы он не блокировал синтаксический анализ html. ПОЛЕЗНО:отложенные скрипты не блокируют синтаксический анализ HTML. Они загружаются асинхронно в отдельных потоках. Однако они выполняются до DomContentLoaded. Таким образом, в моем случае гигантский основной пакет загружается за 15 секунд при быстром соединении 3G, и это задерживает DomContentLoaded.
  2. Браузер компилирует и выполняет пакет после завершения загрузки.
  3. Запускается событие DomContentLoaded. Это означает, что HTML-документ был полностью загружен и проанализирован, не дожидаясь завершения загрузки таблиц стилей, изображений и подфреймов — скопировано из Mozilla
  4. Запускается событие Load. Это означает, что страница полностью загружена.

В моем случае было легко увидеть, что единственный гигантский пакет был узким местом в производительности. Лучший способ — разделить пакет на более мелкие части: часть приложения и часть поставщика (или, возможно, даже несколько частей поставщика).

Вывод

В следующем посте я поделюсь результатами разделения приложения на куски. Для этого я буду использовать CommonChunksPlugin из webpack. Будет кровь (и прирост производительности)! А пока загляните на reactjunkie.com, чтобы найти другие мои посты, связанные с разработкой и javascript.

Надеюсь, я подогрел ваш аппетит. Оптимизация производительности для ускорения работы на самом деле очень увлекательна и увлекательна! Это похоже на модификацию автомобиля, тонкую настройку двигателя, чтобы он ехал быстрее. Это именно так. Удачного тюнинга!