资源优化
本话题发布资源优化相关的问答文章和技术分享，将持续更新，为您推荐了22篇问答，访问即可查看更多精彩内容。
-
1
回答
30浏览
渐进式图片在 React 中怎么实现才有效？
我在做图片加载优化，听说渐进式 JPEG 能提升体验，但直接用普通 <img> 标签好像没效果。我试过把图片转成 progressive 格式，但在 React 组件里加载时还是从上到下一...
-
2
回答
36浏览
WebP图片在Safari上不显示怎么办？
我最近把项目里的JPG和PNG都转成WebP格式了，体积小了很多，但在Safari上图片直接裂开不显示。查了下说Safari 14之前不支持WebP，但用户还在用老版本，这咋办？ 试过用<pic...
-
2
回答
17浏览
Base64内联图片真的能提升性能吗？为什么我用了反而更慢了？
最近在做页面性能优化，听说把小图标转成 Base64 内联到 CSS 里可以减少 HTTP 请求，就试了一下。但上线后发现首屏加载反而变慢了，而且 HTML 文件体积明显变大。 我用的是 Webpac...
-
1
回答
23浏览
字体预加载没生效，是不是写法有问题？
我在 React 项目里用 next/font 加载自定义字体，但 Lighthouse 还是提示“确保文本在网页字体加载期间保持可见”，感觉预加载没起作用。我试过在 head 里加 link rel...
-
2
回答
46浏览
视频加载太慢，怎么优化首屏体验？
我们网站首页有个背景视频，但每次打开都卡半天，用户反馈很不好。我已经用了preload="metadata"，也压缩过 MP4 文件了，还是慢。 试过用 WebM 格式替代，但 Safari 不兼容；...
-
1
回答
31浏览
图片加载太慢该怎么优化？
我们网站首页的 banner 图片特别大，用户打开页面时要等好几秒才显示出来，体验很差。 我已经试过把 PNG 转成 WebP 了，也用了 <picture> 标签做格式兼容，但首屏加载还...
-
2
回答
29浏览
Icon太多导致页面加载慢，怎么优化才合理？
我们项目里用了很多小图标，现在首屏加载特别慢，Lighthouse提示“避免大量小请求”。我试过把几个常用 icon 合成雪碧图，但维护起来太麻烦，而且有些 icon 只在特定页面用。有没有更现代、更...
-
1
回答
40浏览
Icon太多导致首屏加载慢，该怎么优化？
项目里用了几十个 SVG icon，现在首屏加载明显变慢，Lighthouse 评分也掉得厉害。我试过把它们合并成雪碧图，但维护起来太麻烦，而且有些 icon 还要动态改颜色。 现在每个 icon 都...
-
2
回答
35浏览
Vue中图片懒加载不生效，是写法有问题吗？
我在用 Vue 3 做一个图片列表页，想用原生 Intersection Observer 实现懒加载，但滚动时图片根本没触发加载，一直显示 loading 占位图。我查了文档也加了 rootMarg...
-
2
回答
40浏览
字体加载太慢怎么优化？
我在项目里用了一个自定义的中文字体，但页面首次加载时明显卡顿，文字会先显示默认字体再闪成自定义字体，用户体验很差。我试过用 font-display: swap，但好像没完全解决问题。 现在想用 Ja...
-
2
回答
36浏览
视频在移动端加载太慢，该怎么优化？
我做的一个落地页里嵌了个宣传视频，PC端还好，但在手机上打开特别慢，经常转圈半天。已经试过把视频压缩到 10MB 以内了，格式是 MP4，用的是 <video> 标签。 也加了 prelo...
-
2
回答
37浏览
Icon Font 图标不显示怎么办？
我在项目里引入了自定义的 Icon Font，本地开发时图标都能正常显示，但一打包部署到线上就全变成方框或者空白了，这是啥情况？ 我检查了网络请求，字体文件确实加载了，而且路径也没错。之前试过把 fo...
-
2
回答
53浏览
Vue项目用了WebP图片但旧浏览器显示不出来怎么办？
最近在Vue项目里把图片都换成WebP格式了，发现Chrome显示正常，但测试IE11和部分安卓机完全看不到图片。我查了文档知道这些浏览器不支持WebP，试过用标签加srcset属性：<img ...
-
1
回答
43浏览
自定义字体加载时文字闪烁怎么解决？
我在项目里用@font-face引入woff2字体文件，但页面加载时总会出现文字闪烁。试过设置font-display: swap和预加载，但效果不明显，有没有更好的优化方法？ @font-face ...
-
2
回答
50浏览
合并CSS后部分页面样式错乱怎么办？
我在合并项目中的两个CSS文件时，发现登录页的按钮样式突然变成默认样式了。之前分别引入时没问题，合并后其他页面正常，就登录页出问题。试过调整合并顺序、检查选择器权重，都没解决。 合并前的HTML是这样...
-
2
回答
82浏览
为什么我的Vue项目中使用WebP图片在某些浏览器显示异常？
我在Vue项目里尝试用WebP格式优化图片资源，用标签直接引入.webp文件。在Chrome/Firefox都能正常显示，但测试时发现IE11和旧版Safari（比如14.1）显示空白。我检查过文件路...
-
2
回答
40浏览
移动端视频加载卡顿，自动播放设置有问题吗？
折腾了好几天移动端视频优化，发现视频在iPhone上加载特别卡顿，而且自动播放时偶尔会黑屏。我按照网上的方法设置了poster和muted，但效果不好。这是我的代码： <video class=...
-
2
回答
116浏览
为什么我的srcset图片在移动端显示模糊？
我在给图片组件设置srcset和sizes时遇到了问题，移动端设备明明匹配了小图，但显示还是模糊。 场景是卡片组件里的封面图，用CSS设置了最大宽度600px，图片宽度100%。我按照文档写了： &l...
-
2
回答
106浏览
SVG图标优化后显示模糊怎么办？
我给项目里加了好多SVG图标，压缩后反而变模糊了？ 最近在优化网页图标资源，把所有SVG图标用SVGO压缩后，虽然文件体积变小了，但在Retina屏上看明显发虚。之前直接这样引入的： <svg ...
-
2
回答
43浏览
React项目中同时使用WebP和AVIF图片导致旧浏览器白屏怎么办？
大家好，我在React项目里用标签的srcset属性同时提供webp和avif格式图片，结果在IE11和老版安卓机上直接显示空白了。之前用Can I Use查过这两种格式的支持情况，确实这些旧浏览器不...
