Как трейдеры, мы часто сталкиваемся с проблемой создания быстрых, отзывчивых сайтов, одновременно интегрируя третьи участники, такие как кнопки социального обмена, инструменты аналитики или данные реального времени. Эти инструменты могут значительно повлиять на производительность, особенно если они загружены синхронноВ области
Содержание
- 1 Синхронно против асинхронного
- 2 Почему это важно для основной жизненно важной сети
- 3 Местный async и defer Атрибуты
- 4 Post -load Script Inprection с помощью JavaScript
- 5 Пример jQuery для инъекции пост -загрузки
- 6 Диспетчер тегов Google: загрузить после загрузки страницы
- 7 Их введение на практике
- 8 Заключение
Синхронно против асинхронного
Понимание разницы между синхронными и асинхронными нагрузками важно, если вы хотите оптимизировать как скорость, так и пользовательский опыт. То, как вы действуете с загрузкой JavaScript-особенно для сторонних сценариев,-это напрямую влияет на основную веб-жизнь Google (CWV), которые измеряют результаты реального мира, такие как время нагрузки, интерактивность и стабильность макета.
Видение ниже показывает разницу:
Синхронно
Синхронное размножение листа блока сценария. Когда сценарий включен без каких -либо модификаторов, браузер должен остановить анализ страницы, загрузить скрипт и выполнить, прежде чем продолжить. Такое поведение может привести к значительным задержкам в частности, загружая сторонний контент из социальных сетей, рекламных серверов или аналитических платформ.
Асинхронный
С другой стороны, асинхронные сценарии позволяют браузеру продолжать анализировать HTML, пока сценарий загружается и выполняется в фоновом режиме. Это уменьшает влияние на время рендеринга и помогает быстрее загружать критический контент.
Асинхронные являются двумя основными подходами к загрузке сценариев:
- Использование поддержки браузера
asyncилиdeferатрибуты - Инъекция сценариев после завершения страницы (post -load)
Оба подхода помогают не блокировать основной контент от рендеринга.
Почему это важно для основной жизненно важной сети
Google Base Web Vitals фокусируется на трех областях производительности:
- Самый большой довольный цвет (LCP): как быстро становится видимым основным содержанием
- Первые входные задержки (FID): как быстро страница реагирует на взаимодействие с пользователем
- Кумулятивное изменение макета (CLS): Насколько стабильна макет во время загрузки
Синхронные сценарии повредили все три. Они откладывают загрузку видимого содержания, блокируют взаимодействия и часто вводя изменения макета, когда введены выше складки, такие как социальные кнопки или реклама.
Асинхронные методы позволяют некритическим сценариям загружаться, не мешая первичному процессу рендеринга, помогая вашим индикаторам CWV и, в свою очередь, для производительности поиска.
Местный async и defer Атрибуты
Современные браузеры поддерживают два основных атрибута, которые позволяют загружать JavaScript, блокируя остальную часть страницы: async и deferВ этой области оба атрибута добавляются в Отметьте, как изменить, как и когда сценарий загружается и выполняется, но они ведут себя по -разному, и важно выбрать правильный, основываясь на вашем использовании.
Что происходит без обоих атрибутов?
Когда вы включите следующий сценарий:
Браузер останавливает HTML, принося сценарий, немедленно выполненный, а затем возобновляет оставшуюся часть страницы. Он блокирует загрузку листьев, задерживая содержание контента и взаимодействие с пользователем, особенно для плохой производительности и основной жизненно важной сети.
До async Атрибут
С asyncБраузер загружает сценарий параллельно с HTML -анализом. Однако, как только сценарий заканчивается загрузкой, он останавливает анализ HTML, чтобы немедленно выполнить сценарий.
Основные особенности async:
- Сценарии загружаются независимо и бегают, как только они будут готовы
- Заказ о выполнении не гарантируется - хотя сценарий загружается первым
- Лучше всего использовать для отдельных сценариев, которые не полагаются на другие сценарии или элементы DOM
Хорошие примеры: Аналитические скрипты, теги сетевой сети, отслеживание пикселей
До defer Атрибут
С deferБраузер загружает сценарий параллельно, как asyncНо подавляйте свое выполнение, пока HTML полностью проанализирован (незадолго до DOMContentLoaded Пожары событий).
Основные особенности defer:
- Сценарии загружаются параллельно HTML -анализу
- Сценарии выполняются в том порядке, в котором они появляются в HTML
- Идеально подходит для сценариев, которые взаимодействуют с элементами DOM или зависят друг от друга
Хорошие примеры: Основные файлы JavaScript на вашем сайте, библиотеки, такие как jquery.js с последующими зависимыми сценариями
Быстрое сравнение
| Атрибут | Загрузка параллельно? | Правоприменение | Представляя блоки? | Выполнить, когда? |
|---|---|---|---|---|
| Никто | Нет | Как вы видете | Да | Немедленно |
async |
Да | Непредсказуем | Нет | Однажды готов |
defer |
Да | Как видно в HTML | Нет | После HTML -анализа |
Правильно понимая и используя эти атрибуты, вы можете значительно улучшить воспринимаемую скорость вашего сайта. Всегда спрашивайте: Этот сценарий должен работать сразу и в порядке? Или он может ждать, пока страница будет видна пользователю?
Используйте, когда это возможно defer Для ваших сценариев и резервировать async Изолированные, не блокируя третьи партийные инструменты. Если сценарий не предлагает какую -либо опцию, рассмотрите возможность загрузки вручную с помощью JavaScript или использования Google Tag Manager после полной страницы загрузки.
Post -load Script Inprection с помощью JavaScript
Чтобы полностью управлять при загрузке сценариев, и предотвратить любое отрицательное влияние на производительность - вы можете ввести их после полной загрузки страницы.
(function() {
function async_load(){
var s = document.createElement('script');
s.type="text/javascript";
s.async = true;
s.src=" // Replace with actual script URL
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent) {
window.attachEvent('onload', async_load);
} else {
window.addEventListener('load', async_load, false);
}
})();Эта модель гарантирует, что сценарий не работает, пока все остальное не будет полностью загружено. Даже если третий сторонний скрипт по существу синхронно, его нагрузка не позволяет ему блокировать вашу страницу.
Использование: загружайте кнопки социального обмена, динамические цены или пиксели отслеживания, которые не должны быть сразу видимы.
Пример jQuery для инъекции пост -загрузки
Если ваш сайт использует jQuery, та же логика становится проще:
$(window).on('load', function() {
$.getScript("
});Или динамически введите HTML:
$(window).on('load', function() {
$("#placeholder").load("/ajax/live-count.php");
});Случай использования: Поместите статистику или пользователей в данном элементе после загрузки страницы.
Диспетчер тегов Google: загрузить после загрузки страницы
Google Tag Manager (GTM) позволяет настроить теги, запускаемые после того, как страница полностью загружена, помогая убедиться, что они не мешают вашему LCP или CLS.
Загруженный триггер
- Создать пользовательский HTML -тег: Вставьте свой сценарий или iframe:
- Создать триггер: Выбирать Загружено окно Как триггерное событие. Это гарантирует, что сценарий не работает до тех пор, пока все активно не загружено.
- Разместите свои изменения
Случай использования: Нагрузочные пиксели отслеживания, инструменты динамического контента или даже испытательные сценарии A/B, которые не требуются для начальной штукатурки.
Их введение на практике
В зоне Martech мы использовали этот точный подход, чтобы отложить все несущественные третьи партийные сценарии. Ранее, если источник сценария отставал, вся нагрузка на страницу будет пострадать. Теперь, используя асинхронную нагрузку и производительность пост -загрузки, основной контент быстро воспроизводится, а социальные функции загружаются впоследствии, не влияя на производительность или стабильность.
Мы видели, как основные веб -жизненные данные улучшаются и увеличивают участие пользователей, поскольку посетители могут взаимодействовать со страницей намного быстрее.
Заключение
Если ваш сайт загружает сценарии синхронно-особенно третьи стороны, вы, вероятно, повредит своей производительности и классификации. Современная веб -производительность предназначена для приоритета для пользовательского опыта: сначала воспроизвести, улучшить второе.
Асинхронная нагрузка и последующая загрузка впрыска сценария являются мощными методами для баланса функциональности на скорости. Независимо от того, пишете ли вы JavaScript вручную, привлекая jQuery или настройку Google Tag Manager, есть способы оптимизировать производительность сайта - без значительной интеграции.
