Эффективность использования Head.JS

06 January 2011 #javascript #webdesign

Недавно познакомился со скриптом Head.JS, и в последнее время стараюсь использовать его во всех своих проектах. О том, как работать с данным скриптом я описывал в статье Использование Head.JS. Но тогда не смог провести тестов результативности использования данного скрипта.

Теперь же, я провел исследование и спешу поделиться результатами.

Все эксперименты проводились на одном и том же сайте juev.info. Измерение скорости загрузки проводилось с помощью интернет-сервиса www.webpagetest.org.

Результаты работы представлены на страницах:

  1. стандартное подключение скриптов
  2. с использованием Head.JS

На странице представлены следующие скрипты:

  1. google analytics
  2. apture
  3. evernote

Скрипты небольшие, но из-за того, что они загружались последовательно, скорость загрузки очень сильно падала. Порядок загрузки файлов без использования Head.JS и использования подключения комментариев facebook с помощью обычного скрипта:

Порядок загрузки файлов с использованием Head.JS и использования подключения комментариев facebook с помощью асинхронного скрипта:

Бросается в глаза, что все скрипты теперь грузятся одновременно и при этом на их загрузку тратиться гораздо меньше времени. А использование асинхронного скрипта facebook позволяет существенно уменьшить количество обращений к серверу и выполнять его обработку во время загрузки других файлов.

В итоге время полной загрузки страницы уменьшилось с 8 до 2.8 секунды! На мой взгляд, хороший показатель эффективности работы.