Partytown

サードパーティのスクリプトは、メインスレッドをブロックすることにより、初期ページの読み込みを大幅に遅くします。

Partytownは、Webワーカーを使用することにより、Google Analytics、Facebook Pixelなどのサードパーティのスクリプトをメインスレッドから遅延させることを可能にするツールです。このツールの詳細については、Partytownドキュメントをご覧ください。

使い方

次のQwikスタータースクリプトを使用すると、Partytownを簡単に追加できます。

npm run qwik add partytown

前のコマンドは、アプリを更新し、vite.config.tsに正しい構成を設定します。

また、componentsフォルダに新しいファイルを追加します。

src/root.tsx

import { QwikPartytown } from './components/partytown/partytown';
 
export default component$(() => {
  return (
    <QwikCityProvider>
      <head>
        <meta charSet="utf-8" />
        <QwikPartytown forward={['gtag','dataLayer.push']} />
        <script
          async
          type="text/partytown"
          src="https://#/gtag/js?id=G-XXXXXXX"
        />
        <script
          type="text/partytown"
          dangerouslySetInnerHTML={`
            window.dataLayer = window.dataLayer || [];
            window.gtag = function() {
              dataLayer.push(arguments);
            }
            gtag('js', new Date());
            gtag('config', 'G-XXXXXX');
          `}
        />
      </head>
      <body lang="en"></body>
    </QwikCityProvider>
  );
});

高度な設定

Partytownをさらに多くのオプションで構成するには、Partytownドキュメントをご覧ください。

貢献者

このドキュメントをより良くするために貢献してくださった皆様に感謝します！