Использование JavaScript позволяет улучшить взаимодействие с пользователем и сэкономить время разработки, но не лишено рисков и ошибок. На что следует обратить внимание?
1. Избегание распространения JavaScript.
Сначала нужно избежать увеличения числа файлов JavaScript на сайте.
Численность файлов JavaScript может вырасти и стать чрезмерной, если не уделять этому должного внимания, особенно если каждый компонент пользовательского интерфейса находится в отдельном файле, потому что загружаемый файл требует дополнительных затрат, особенно для сайтов, поддерживающих только HTTP/1. И наоборот, уменьшение числа файлов JavaScript загруженных браузером, может повысить производительность сайта.
Чтобы найти проблему и проанализировать количество файлов JavaScript, можно воспользоваться одним из бесплатных инструментов, например, PageSpeed Insights, инструмент, который объединяет данные реальных пользователей и тесты. Чтобы использовать этот инструмент, нужно ввести URL-адрес общедоступной страницы сайта и просмотреть раздел отчета «Возможность», в котором перечислены конкретные рекомендации для домена; например, рекомендация «держать количество запросов на низком уровне, а размер передачи небольшим» в расширенном виде суммирует количество и размер запрошенных типов ресурсов, включая файлы JavaScript.
Есть несколько методов, которыми можно воспользоваться для уменьшения количества загружаемых файлов, но решение проблемы также зависит от гибкости используемой платформы или инструментов. Например, многие системы управления контентом ограничивают доступ к JavaScript, чтобы упростить работу создателей контента и снизить риск ошибок, но это может затруднить решение проблем, которые платформа не решает.
Поэтому Google предлагает практичный вариант — если есть большое количество небольших файлов JavaScript, может быть более эффективно объединить эти файлы вместе, чтобы загрузить один файл большего размера. По сути, для большей эффективности можно объединить файлы в несколько больших файлов, которые можно загружать параллельно, и при наличии контроля над файлами JavaScript на сайте, можно найти инструменты объединения JavaScript, такие как Webpack, полезные для упрощения этого процесса.
Поддержка HTTP/2 на сайте может повысить производительность без объединения файлов, поскольку HTTP/2 повышает эффективность одновременной загрузки нескольких небольших файлов.
2. Ограничение поиска DNS для файлов JavaScript, на которые есть ссылки.
Второй совет: избегать чрезмерных запросов DNS к файлам JavaScript, на которые есть ссылки, поскольку это может замедлить первый визит пользователя на сайт.
Если файлы JavaScript загружаются с разных доменных имен, для каждого домена, на который делается ссылка, могут возникать дополнительные затраты на поиск в DNS. Если их много, это может замедлить первое посещение пользователем веб-страниц.
Опять же, отчеты в PageSpeed Insights могут отображать список доменных имен, используемых в URL-адресах, особенно в разделе сокращения времени выполнения JavaScript, но также может быть полезно использовать вкладку «Сеть» в инструментах разработчика Chrome, которая является более надежным способом обнаружения всех упомянутых доменных имен.
В отличие от файлов cookie, будет нелегко запросить очистку кэша DNS, что затрудняет выявление проблем с DNS. Однако, чтобы уменьшить количество запросов DNS, можно рассмотреть возможность размещения копии файлов JavaScript с внешними ссылками на своем сайте.
Бывает трудно решить, следует ли самостоятельно размещать файлы JavaScript на своем сайте – например, загружая популярный файл JavaScript с центрального сайта, он может уже находиться в кэше браузера, поскольку пользователь посетил другой сайт, который использует ту же библиотеку – и размещение копии на сайте может сэкономить поиск DNS, но при более высокой стоимости загрузки файла во второй раз.