Для веб-сайта за CDN имеет ли смысл объединить JavaScript в один файл и разместить его на моем сервере?

Повышение производительности

Ответ сводится к уравновешиванию. В дополнение к вашему JS, я бы также уделил столько же внимания вашему CSS.

Раньше вы могли самостоятельно размещать все, что не является популярной библиотекой, которую ваши пользователи, вероятно, уже кэшировали (например, FontAwesome или jQuery). Теперь большинство современных браузеров больше не будут делиться своим кэшем библиотек между веб-сайтами из-за разделения кэша HTTP, поэтому больше нет никаких бонусов из-за библиотека уже кэшируется.

Вы можете комбинировать js, если вам нужно, но если вы все делаете правильно, вам не нужно этого делать. Это уменьшит количество запросов, но в зависимости от того, как вы его загружаете и размера файла, это может стоить вам совсем немного. Я думаю, что есть лучшие решения.

Используйте функцию HTTP2 Cloudflare

HTTP/2

В соответствии с HTTP/1 браузеры будут загружать только пару файлов с одного домена в одно время. Наличие большого количества небольших файлов создавало узкие места для загрузки, которые могли замедлить рендеринг вашего сайта. Если вы не можете использовать HTTP/2, объединение файлов в один большой файл было способом обойти это.

HHTP/2 является асинхронным , и поскольку это двоичный протокол, а не текстовый, он мультиплексирует запросы по одному TCP-соединению (с двоичными потоками. Все еще есть первоначальный запрос на HTML, но запросы на все остальные ресурсы происходят в параллель.

Преимущество в скорости самостоятельного размещения (по протоколу HTTP/2) в значительной степени связано с тем, что TCP-соединение уже разогрето, что приводит к более высокой скорости загрузки.

Если вы уже используете Cloudflare, включение этого будет очень простым обходным решением. Это включено в бесплатные планы.

Cloudflare также предлагает Улучшенную приоритизацию HTTP/2, но для этого требуется профессиональный план или выше.

Определите Свои накладные расходы

Мы можем получить много информация из инструментов разработки - просматривая вкладку "Сеть", вы можете найти возможности для самостоятельного размещения.

Вкладка Сеть

Имейте в виду вещи, которые, кажется, загружаются очень медленно на мобильных устройствах при подключениях 3g/4g - это хорошие кандидаты для самостоятельного размещения.

Если у вас всего несколько отдельных файлов сценариев и на вашем сайте включен HTTP/2, вам, вероятно, лучше сохранить их в виде отдельных, индивидуально загруженных файлов.

Я рекомендую использовать <link rel="preconnect"> для информирования браузер, в котором ваша страница намеревается установить соединение с сторонним ресурсом. По сути, он сообщает браузерам, что вы хотели бы, чтобы он начал этот процесс как можно скорее. Вы можете прочитать больше о preconnect здесь.

Я бы также рекомендовал использовать элемент <link rel="preload"> для уведомления клиента о подресурсах, которые, как ожидается, ему понадобятся. Вы можете прочитать больше о предварительной загрузке здесь.

Вкладка Производительность Профиль производительности а затем нажмите отчет снизу вверх. Это также позволяет вам Группировать по домену в раскрывающемся списке.

Контент выше - это то, что пользователи видят на вашем веб-сайте в первую очередь, который может включать навигацию и другие элементы. Поэтому очень важно правильно оформить и визуализировать эту часть сайта как можно быстрее.

Если вы используете библиотеки, такие как Bootstrap, например, вы можете извлечь критический CSS из таблиц стилей фреймворка и загружайте фактическую платформу асинхронно.

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

В зависимости от сценариев, на которые вы ссылаетесь, вам может потребоваться изменить их поведение. Например, если вы помечаете сценарий как "асинхронный" или "отложенный", браузер может сохранить обрабатывайте документ и выполняйте js всякий раз, когда сценарии становятся доступными.

Если сценарии не помечены как асинхронные или отложенные, браузер должен прекратить обработку документа до тех пор, пока сценарий не будет загружен и выполнен, прежде чем продолжить.

Для самостоятельного размещения кода я бы рекомендовал пройти через это на вашем сайте, а затем протестировать то, что вы можете встроить, с целью минимизировать время блокировки основного потока браузера. Но с включенным HTTP/2 для третьей стороны сценарии, извлеченные из CDN, я не думаю, что это необходимо.

Один из случаев, когда имело бы смысл объединить ваши файлы, - это если вы используете импорт для управления зависимостями (даже по протоколу HTTP/2) по соображениям производительности.

Кэширование сервера

Это может быть излишним для вашего сайта, но если вы самостоятельно размещаете код, я рекомендую Кэшировать лаком, но обратный прокси-сервер добавляет много сложностей.

Лак работает, обрабатывая запросы до того, как они будут сделаны это для вашего бэкэнда. Если у него нет кэшированного запроса, он перенаправит запрос на ваш сервер, а затем кэширует его вывод.

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