Web Worker Offloading
Este plugin descarrega a execução do JavaScript para um web worker, melhorando o desempenho ao liberar a execução principal. Isso deve se traduzir em melhoria nas métricas Interação com Próxima Exibição (INP).
⚠ Esta funcionalidade é experimental. ⚠
Para fazer com que um script seja descarregado para um worker, basta adicionar dados de um worker a um script registrado. Por exemplo,
se você tiver um script registrado com o handle de foo, você pode descarregá-lo para um web worker fazendo:
wp_script_add_data( 'foo', 'worker', true );
Diferentemente das estratégias de carregamento de scripts (assíncrono/diferido), quaisquer scripts inline associados ao script registrado também serão descarregados para o worker correspondente, ao passo que em estratégias de script, um script inline posterior impediria o script original de ser atrasado.
De outra maneira, no momento, o plugin já contém o código para descarregar o Google Analytics para um web worker para o seguinte plugin:
Uma vez ativado, acompanhe suas estatísticas para garantir que todos os eventos esperados estejam sendo registrados. Ao mesmo tempo, revise as métricas INP para avaliar se há melhorias.
Este plugin depende da biblioteca Partytown 🎉 da Builder.io, disponível sob a licença MIT. Esta biblioteca está em beta e há alguns erros ainda não resolvidos.
A configuração do Partytown pode ser modificada por meio do filtro plwwo_configuration. Por exemplo:
<?php
add_filter( 'plwwo_configuration', function ( $config ) {
$config['mainWindowAccessors'][] = 'wp'; // Make the wp global available in the worker (e.g. wp.i18n and wp.hooks).
return $config;
} );
Entretanto, nem todas as opções de configuração podem ser serializadas dessa forma em um JSON; por exemplo, a configuração resolveUrl é uma função. Para especificar isso, você pode adicionar um script inline como a seguir.
<?php
add_action(
'wp_enqueue_scripts',
function () {
wp_add_inline_script(
'web-worker-offloading',
<<<JS
window.partytown = {
...(window.partytown || {}),
resolveUrl: (url, location, type) => {
if (type === 'script') {
const proxyUrl = new URL('https://my-reverse-proxy.example.com/');
proxyUrl.searchParams.append('url', url.href);
return proxyUrl;
}
return url;
},
};
JS,
'before'
);
}
);
Há também muitas opções de configuração que não estão documentadas; consulte as definições do TypeScript para saber mais.