做网站都需要什么技术,怎么做营销策划方案,龙岗网站建设_公司推广,七牛云存储wordpressPageSpeed Insights 性能测试 今天测试网站性能的时候发现一个问题#xff0c;一个h2标签内容为什么会占据这么长的渲染时间#xff0c;甚至有阶段测到占据了7000多毫秒#xff0c;使用了很多方法都不能解决#xff0c;包括了修改标签#xff0c;样式大小等#xff0c;当… PageSpeed Insights 性能测试 今天测试网站性能的时候发现一个问题一个h2标签内容为什么会占据这么长的渲染时间甚至有阶段测到占据了7000多毫秒使用了很多方法都不能解决包括了修改标签样式大小等当我把它彻底删掉才没有出现这个问题但是这个地方是不能删除这个标题的以至于一直卡在这个地方并将我的性能评分卡在30-40内。最后是怎么解决的呢。 首先这个网站字体样式使用了字体包在未下载完字体包时阻碍了页面的显示这就是为什么单这个标签的内容就渲染了这么久。解决方式也很简单在使用字体包的引入中使用 font-display 属性这个属性特别适用于自定义字体加载时的用户体验。
font-face {font-family: Inter;src: url(./fonts/Inter.ttf);font-display: swap;
}
这个属性在自定义字体下载完成之前使用后备字体显示文本确保用户可以阅读页面内容而不是看到无样式的文本或乱码。
