请帮助解决此问题
我正在建立一个动态网站，用于显示现场比赛分数和统计数据，一切都很好。
在服务器上部署之前，我们在登台环境上测试性能和压力测试。
在性能测试中，手机成绩为50分，桌面成绩为80分。
lighthouse报告google tag manager和dfp需要时间来执行，初始服务器响应时间需要时间
我的问题是如何减少服务器初始响应时间和javascript执行时间。下面详细介绍了我在代码中所做的工作
如何在不阻塞时间的情况下加载第三方脚本，如google tag manager和dfp脚本。我在_document.js和使用react dfp包的dfp上添加了ga代码，但这会降低性能
header、header2和右栏以及post列表组件应该在我使用useffect（）hook的1分钟间隔后刷新
在axios的帮助下，从getinitialprops内部的api获取页眉、页脚、右栏、左栏组件数据。这些组件对于所有页面都是通用的
在axios包的帮助下获取getserversideprops中的滑块和post列表组件数据
页眉，页眉2，左，右，页脚
上面的组件是使用 dynamic () import 作用于 ssr:false 通常在组件下方导入
滑块，帖子列表
下面是示例代码。
**********_app.js**********
MyApp.getInitialProps = async (appContext) => {
const appProps = await App.getInitialProps(appContext);
const header = await axios(header_api)
const header2 = await axios(header2_api)
const left = await axios(left_api)
const right = await axios(right_api)
const footer = await axios(footer_api)
return {
appProps:{
header,
header2,
left,
right,
footer
}
}
}
*************Home.js***********
export async function getServerSideProps(context){
const slider = await axios(slider_api)
const postlist = await axios(postlist_api)
return {
props :{
slider,
postlist
}
}
***********_document.js***************
class MyDocument extends Document {
render() {
console.log('__document.js');
return (
<Html lang="en">
<Head>
*******other third party scripts***
<script async 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','XXXXXXXXX');`}}/>
</Head>
<body id="body-wrap">
<noscript dangerouslySetInnerHTML={{ __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=XXXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>`}}></noscript>
<Main />
<NextScript />
</body>
</Html>
)
}
}
暂无答案！
目前还没有任何答案，快来回答吧！