Инженер из компании Google, автор трёх книг по веб-производительности и оптимизации, Стив Содерс (Steve Souders) опубликовал презентацию "JavaScript Perfomance" о том, какие методы нужно применять, чтобы скрипты меньше тормозили загрузку страниц.
По статистике WebPagetest, блокировка загрузки файлов .js на сайтах из Alexa Top 100 снижает среднее по медиане время загрузки страницы c 3,65 с до 2,487 с, то есть на 31%. Если вы видите медленную загрузку веб-страниц и хотите улучшить этот показатель, то, по мнению Стива Содерса, первым делом нужно посмотреть на JavaScript.
В качестве примера оптимизации Стив Содерс приводит сниппет Google Analytics.
Особое внимание он обращает на строчку
Этот параметр означает, что скрипт
Ещё один момент — инструкция
Стив Содерс сделал специальную страничку, чтобы выявить те версии браузеров, которые игнорируют инструкцию ga.async = true при наличии
В презентации "JavaScript Perfomance" Стив Содерс говорит о модуле для ускорения загрузки скриптов ControlJS, а также об использовании localStorage в качестве кэша.
По статистике WebPagetest, блокировка загрузки файлов .js на сайтах из Alexa Top 100 снижает среднее по медиане время загрузки страницы c 3,65 с до 2,487 с, то есть на 31%. Если вы видите медленную загрузку веб-страниц и хотите улучшить этот показатель, то, по мнению Стива Содерса, первым делом нужно посмотреть на JavaScript.
В качестве примера оптимизации Стив Содерс приводит сниппет Google Analytics.
var ga = document.createElement(‘script’);
ga.type = ‘text/javascript’;
ga.async = true;
ga.src = (‘https:’ == document.location.protocol ? ‘https://ssl’ : ‘http://www’) + ‘.google-analytics.com/ga.js’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(ga, s);Особое внимание он обращает на строчку
ga.async = true;Этот параметр означает, что скрипт
ga.js не будет блокировать исполнение других асинхронных скриптов.Ещё один момент — инструкция
insertBefore. Оказывается, некоторые браузеры блокируют выполнение скриптов, если ещё не загружен скрипт с инструкцией insertBefore. Естественно, это замедляет загрузку страницы. Другими словами, такие браузеры будут ждать, пока на странице не загрузится модуль Google Analytics, и до этого момента все остальные скрипты блокируются. Параметр ga.async = true исправляет ситуацию во многих современных браузерах. Но не во всех.Стив Содерс сделал специальную страничку, чтобы выявить те версии браузеров, которые игнорируют инструкцию ga.async = true при наличии
insertBefore. Он собрал статистику с 60+ различных браузеров — как видно в таблице по ссылке, главным «нарушителем» является браузер Opera. Запустить тест и провериться можно здесь.В презентации "JavaScript Perfomance" Стив Содерс говорит о модуле для ускорения загрузки скриптов ControlJS, а также об использовании localStorage в качестве кэша.
