Google Tag Manager-Code einbinden, ohne das Rendering zu blockieren

Wer den Google Tag Manager in seine Webseite einbinden möchte, steht wie bei anderen Google Diensten (z.B. Google Adsense) vor dem Problem, dass PageSpeed Insights selbst denn eingebunden JavaScript-Code der Google-Dienste ankreidet, dass dieser das Rendering der Seite blockiert.

Hier hält sich Google schon seit je her nicht an seine eigenen Vorgaben.

Das beste Beispiel ist die Einbindung des Google Tag Manager-Codes. Google fordert die Einbindung des Code-Snippet ganz oben im <head> der Seite, was eigentlich nicht nötig wäre.

Wer den Code-Snippet des Google Tag Managers performant in seine eigene Webseite einbinden möchte, ohne dass das Rendering der Seite blockiert wird, der kann die folgende Implementation verwenden:

<html>
    <head>
        <script>
            dataLayer = [{'gtm.start': new Date().getTime(), 'event': 'gtm.js' }];
        </script>
        ...
    </head>
    <body>
        ...
        <script>
            dataLayer.push({ /* Deine DataLayer-Implementierung, wenn gewünscht });
        </script>
        ...
        <script src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXXX" async></script>
    </body>
</html>