Konstantinos/DERC-2019/Performance,accessibility score improvement (#…

…6028)

* fix: add partytown and fix aria error on language

* fix: partytown

* fix: remove debugging

* fix: images

* fix: images small compression

* fix: update gatsby node

* fix: check partytown + gtag

* fix: console errors

* fix: remove debug

* feat: update partytownProxiedURLs

---------

Co-authored-by: “konstantinosG-deriv” <“[email protected]”>

gatsby-config.js

@@ -48,6 +48,9 @@ module.exports = {
         `https://assets.customer.io/assets/track.js`,
         `https://static.deriv.com/scripts/cookie.js`,
         `https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js`,
+        `https://cdn.livechatinc.com/tracking.js`,
+        `https://www.google-analytics.com/analytics.js`,
+        `https://www.googletagmanager.com/gtm.js?id=${process.env.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID}`,
     ],
     plugins: [
         // [TODO] Enable this when we have a proper setup to enable caching, Otherwise it will cause one of them stop working.

gatsby-node.js

@@ -2,8 +2,13 @@
 const language_config = require(`./i18n-config.js`)
 const language_config_en = require(`./i18n-config-en.js`)
 const path = require('path')
+const { copyLibFiles } = require('@builder.io/partytown/utils')
 
 const translations_cache = {}
+
+exports.onPreBuild = async () => {
+    await copyLibFiles(path.join(__dirname, 'static', '~partytown'))
+}
 // Based upon https://github.com/gatsbyjs/gatsby/tree/master/examples/using-i18n
 exports.onCreatePage = ({ page, actions }) => {
     const { createRedirect, createPage, deletePage } = actions

gatsby-ssr.js

@@ -1,22 +1,25 @@
 import React from 'react'
+import { Partytown } from '@builder.io/partytown/react'
 import { WrapPagesWithLocaleContext } from './src/components/localization'
 import './src/components/localization/config'
 import GlobalProvider from './src/store/global-provider'
 
 export const wrapRootElement = ({ element }) => {
-  return <GlobalProvider>{element}</GlobalProvider>
+    return <GlobalProvider>{element}</GlobalProvider>
 }
 
 export const wrapPageElement = WrapPagesWithLocaleContext
 
 export const onRenderBody = ({ setHeadComponents }) => {
-  const gtmTrackingId = process.env.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID || ''
+    const gtmTrackingId = process.env.GATSBY_GOOGLE_TAG_MANAGER_TRACKING_ID || ''
 
-  setHeadComponents([
-    <script
-      key="partytown-vanilla-config"
-      dangerouslySetInnerHTML={{
-        __html: `partytown = {
+    setHeadComponents([
+        <Partytown key="partytown" forward={['dataLayer.push']} />,
+        <script
+            key="partytown-vanilla-config"
+            type="text/partytown"
+            dangerouslySetInnerHTML={{
+                __html: `partytown = {
           resolveUrl(url, location) {
             // Use a secure connection
             if (url?.protocol === 'http:') {
@@ -28,15 +31,16 @@ export const onRenderBody = ({ setHeadComponents }) => {
             return proxyUrl
           }
         }`,
-      }}
-    />,
-    gtmTrackingId && (
-      <script
-        key="gtm-script"
-        dangerouslySetInnerHTML={{
-          __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl+'';f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer', '${gtmTrackingId}');`,
-        }}
-      />
-    ),
-  ])
+            }}
+        />,
+        gtmTrackingId && (
+            <script
+                key="gtm-script"
+                type="text/partytown"
+                dangerouslySetInnerHTML={{
+                    __html: `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl+'';f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer', '${gtmTrackingId}');`,
+                }}
+            />
+        ),
+    ])
 }

package.json

@@ -5,6 +5,7 @@
     "author": "Deriv",
     "dependencies": {
         "@artsy/fresnel": "^6.1.0",
+        "@builder.io/partytown": "^0.8.1",
         "@deriv/analytics": "^1.3.4",
         "@deriv/deriv-api": "^1.0.11",
         "@hookform/resolvers": "^3.0.1",
@@ -147,6 +148,7 @@
     "scripts": {
         "analyze-bundle": "GENERATE_JSON_STATS=true gatsby build && npx webpack-bundle-analyzer -m static -r ./webpack-bundle-report/report.html ./public/stats.json",
         "build": "GATSBY_CPU_COUNT=2 gatsby build --log-pages",
+        "partytown": "partytown copylib public/~partytown",
         "develop": "GATSBY_CPU_COUNT=2 gatsby develop -o",
         "format": "prettier --write '**/*.js' '*.js'",
         "stylelint": "stylelint 'src/**/*.js' --formatter verbose",

src/components/hooks/use-livechat.tsx

@@ -16,6 +16,7 @@ export const useLivechat = (): [boolean, TLC_API] => {
 
     const loadLiveChatScript = (callback) => {
         const livechat_script = document.createElement('script')
+        livechat_script.type = 'text/partytown'
         livechat_script.innerHTML = `
         window.__lc = window.__lc || {};
         window.__lc.license = ${licence_key};

src/features/components/molecules/language-switcher/index.tsx

@@ -34,7 +34,7 @@ const LanguageSwitcher = () => {
             onOpenChange={setOpen}
         >
             <DropdownMenu.Trigger asChild>
-                <div className={styles.trigger}>
+                <div role="button" className={styles.trigger}>
                     <Typography.Paragraph size="medium" font_family={'UBUNTU'} weight="bold">
                         {currentLang.short_name}
                     </Typography.Paragraph>