Этот пост был первоначально опубликован на calibreapp.com и размещен здесь с разрешения автора. Если вы заинтересованы в том, чтобы взять Caliber за спин, вы можете начать бесплатную 14-дневную пробную версию сегодня .
Существует множество причин, по которым наличие JavaScript (что он делает, как работает и насколько он тяжелый) следует рассматривать немного более вдумчиво.
Сегодня веб-трафик состоит из более чем 50% мобильных устройств , причем многие из этих устройств работают в условиях крайне нестабильных сетевых подключений — во многих ситуациях загрузка только сценариев менее чем за 10 секунд почти невозможна .
Если вы работаете с одностраничным приложением без разумных резервных копий только для контента, это может быть гораздо более опасным, чем вы думаете — пользователи будут долго смотреть на белый экран с частичным контентом.
Производительность важна , в этом нет никаких сомнений, но какое негативное влияние JavaScript оказывает на наши сайты? Как мы сейчас оцениваем производительность?
Давайте кратко (но конструктивно) посмотрим на стоимость JavaScript
При общем аудите влияния JavaScript на производительность мы обращаем внимание на:
- Количество скриптов блокировки рендера, присутствующих на странице
- Сколько времени занимает загрузка скриптов и количество передаваемых данных
Но что мы часто упускаем, так это то, что происходит после этого …
Как только устройство загрузит сценарии, они должны быть проанализированы, преобразованы в байт-код, скомпилированы и затем выполнены.
Время разбора и компиляции — две причины, по которым один и тот же сайт, который отлично работает на вашем MacBook за 3000 долларов, чувствует себя немного неуклюжим на 2-летнем смартфоне.
На приведенном выше графике сравнивается время синтаксического анализа / компиляции Chrome в обычном настольном браузере, а также для мобильного устройства с низким энергопотреблением. Это изображение взято из отличной статьи Адди Османи под названием « Производительность JavaScript при запуске ».
Ой .
Скажем, в качестве эксперимента мы удалили все сценарии, чтобы установить базовый уровень производительности , чтобы ответить на вопрос «Насколько быстрым это может быть?».
Калибр существует, чтобы упростить для команд более четкое представление о большем количестве областей производительности и пользовательского опыта, поэтому, в духе этого, вы можете теперь запускать прямое сравнение своего сайта с или без JS — в качестве профиля тестирования .
You’reТеперь вы тестируете с и без JavaScript
Я включил возможность отключения сценариев и провел несколько тестовых прогонов с популярными глобальными новостными сайтами, как с JavaScript, так и без него.
Результаты были ошеломляющими — ниже, The Guardian.
Слева: нет JS, 3G-соединение, iPhone 6 — весь контент полностью виден менее чем за 5 секунд. Справа: 3G-соединение, iPhone 6 — весь контент полностью виден примерно через 10 секунд, onLoad вызывается около 20 секунд.
Время визуальной полноты
Начиная с версии «не-js» (левое изображение) — весь контент виден менее чем за 5 секунд . На 3G. Впечатляет 
Тем не менее, для издания with-js история немного отличается — изображение ведущей статьи появляется где-то около 9,5 секунд, с небольшими изменениями (погода, шрифты, больше шрифтов и, наконец, статья «последние новости») вплоть до примерно 20 секунд.
Данные
С помощью JavaScript Guardian доставил 3,41 МБ по 115 запросам , при этом количество передаваемых данных сократилось более чем на 50% — 1,59 МБ с 61 запроса . Здоровенный налог на погоду, шрифты и ссылку на последнюю статью.
Понятно, что передаваемые данные — это не все JS, это дополнительный контент, значки и, возможно, даже некоторые стили, но дело ясное: этот контент несущественен и ухудшает производительность этой страницы.
Используйте Calibre, чтобы узнать, как быстро ваш сайт может быть
Там у нас есть это, надежная и воспроизводимая базовая характеристика, чтобы ответить на вечный вопрос: «Как быстро это может быть?». Что если бы мы смогли применить эти правила (в разумных пределах) до тех пор, пока клиентам не будет предоставлен самый легкий и быстрый опыт?
Совершенство наконец достигается не тогда, когда уже нечего добавить, а
когда уже нечего забирать.
—Антуан де Сент-Экзюпери
Если вы являетесь клиентом Caliber и заинтересованы в мониторинге как с использованием сценариев, так и без них, все, что вам нужно сделать, это установить флажок « Отключить выполнение JavaScript» . (Ваш сайт → Настройки → Тестовые профили).
Мне бы очень хотелось услышать, как вы планируете использовать тестовые профили; если у вас есть какие-либо вопросы, идеи или мысли, пожалуйста, поделитесь ими!
Если вы еще не используете Caliber, то вы можете начать бесплатную 14-дневную пробную версию Caliber сегодня .
И если эта статья заставила вашу команду разработчиков спорить о том, существует ли сеть без JavaScript или нет, извините. 