首屏优化
本话题发布首屏优化相关的问答文章和技术分享，将持续更新，为您推荐了12篇问答，访问即可查看更多精彩内容。
-
2
回答
37浏览
首屏加载太多请求，怎么合并减少？
我们首页现在首屏要加载七八个CSS和JS文件，Lighthouse说请求数太多影响性能。我试过把小图标转成base64内联，但CSS还是拆成了好几个，比如 reset.css、header.css、b...
-
2
回答
25浏览
延迟加载JS会影响首屏渲染吗？
我在做首屏优化，把非关键JS用defer和动态import()延迟加载了，但发现首屏内容反而变慢了，这是为啥？ 比如我把一个工具库改成这样： document.addEventListener(�...
-
2
回答
49浏览
HTTP/2推送在Vue项目中真的能提升首屏加载吗？
最近在优化公司官网的首屏加载速度，听说 HTTP/2 Server Push 能提前推送关键资源，但我在 Nginx 上配置了 push 后，发现 Chrome DevTools 里显示资源还是被重复...
-
2
回答
32浏览
增量静态生成怎么做到首屏不白屏？
我们用 Next.js 做了个博客，文章页用了增量静态生成（ISR），但新页面首次访问时还是会白屏几秒，感觉跟 SSR 差不多。不是说 ISR 能提前生成好 HTML 吗？ 我试过在 getStati...
-
2
回答
59浏览
增量静态生成如何避免首屏重复请求？
我在用 Next.js 做一个博客，开启了 ISR（增量静态生成），但发现首屏加载时还是会发起一次 API 请求，明明页面已经预渲染了 HTML。这不就白做了吗？ 我试过在 getStaticProp...
-
2
回答
60浏览
为什么使用Gzip压缩后JS文件反而变大了？
我在用Gulp给项目文件做Gzip压缩时，发现某个.min.js文件压缩后的.gz文件比原文件大1KB左右，这正常吗？ 已经配置了gulp-gzip插件，并设置threshold: 0强制压缩。测试时...
-
2
回答
77浏览
async和defer到底该怎么用才能优化首屏加载？
最近在优化页面加载速度，把两个JS文件分别用了async和defer，但页面还是感觉卡顿。比如这个代码： <script src="main.js" defer></script&g...
-
2
回答
64浏览
Skeleton骨架屏如何动态匹配不同分辨率的图片占位？
最近在做首屏骨架屏优化时遇到个问题，当页面在不同分辨率下，我用固定宽高的div模拟的商品图片占位框，加载真实图片后总会出现比例错乱。 比如在移动端横屏时，.skeleton-img设置的width: ...
-
2
回答
60浏览
为什么内联关键CSS后首屏渲染反而更慢了？
我按照教程把关键CSS内联到HTML里了，但首屏渲染时间反而比之前多了500ms，这是为什么？ 之前用Webpack的ExtractTextPlugin把CSS抽离成单独文件，加载时间约1.2秒。按首...
-
2
回答
63浏览
React组件重复发起API请求怎么优化首屏加载？
在开发产品列表页时发现，每次刷新页面都会看到两次相同的商品数据请求。我用useEffect在组件里调用axios.get，但好像不管是否依赖项变化都会触发。看浏览器网络请求发现首屏有重复的请求： fu...
-
2
回答
96浏览
图片懒加载时占位容器高度塌陷怎么办？
在做图片列表懒加载时，用了Intersection Observer，但图片未加载时占位容器高度会塌陷，导致页面布局跳动。试过给图片设置固定高度，但不同图片尺寸差异大，效果不好： <div cl...
-
2
回答
86浏览
Next.js中使用ISR时，为什么首屏静态文件仍被阻塞加载？
我在用Next.js做博客项目，配置了getStaticProps+incremental static regeneration。按文档把文章列表页设为静态生成，详情页用revalidate=100...
