前言
Progressive Web App (PWA) 是一种类似于原生应用的 Web 应用程序，可以在不同的平台上运行，并且可以在离线状态下访问。然而，在移动设备上使用 PWA 时，加载速度往往不够理想。其中，图片加载是影响 PWA 性能的重要因素之一。
在本文中，我将分享一些技巧来优化 PWA 中的图片加载速度，这些技巧涉及低质量图片替换、延迟加载、WebP 格式图片使用以及响应式图片设计等。
1. 低质量图片替换
在加载图片时，首先考虑的是图片的大小。具体来说，检查使用的图片是否过大，是否可以将其压缩或使用低质量图片替换。尽量使用尺寸更小的图片来减少加载时间，但仍要确保图像的清晰度。
以下是使用 Lighthouse 工具测试内容：
如上图所示，在加载图片时，压缩或使用低质量图片替换可以明显减少资源加载时间和页面的总脚本时间。
2. 延迟加载
当您的 PWA 包含大量图片时，使用延迟加载可以显著提高网站的加载速度。这种技术要求您仅在用户滚动到页面上图片的位置时才加载它们。
以下是 jQuery 插件 Lazy Load 的一个示例：
<img data-original="example.jpg" src="blank.gif" class="lazy">
使用上述代码，您可以使图片在页面渲染完成后等待，直到用户滚动到它所在位置时才加载它。
3. 使用 WebP 格式图片
WebP 是一种由 Google 开发的图片格式，它可以胜任 JPEQ 和 PNG 的所有任务，并将图像文件大小减少了约 30％。使用 WebP 图片格式可显著减少图像文件的大小，从而提高用户移动设备上的加载速度。
以下是检查浏览器是否支持 WebP 然后添加 WebP 或 JPEG 路径的示例代码：
// www.javascriptcn.com code example
const supportsWebP = () => {
const img = new Image();
img.onload = () => {
webpAvail = (img.width > 0) && (img.height > 0);
};
img.onerror = () => {
webpAvail = false;
};
img.src = 'data:image/webp;base64,UklGRjY ... xy3';
let webpAvail = false;
return () => webpAvail;
};
const webpSupport = supportsWebP();
const backgroundImages = ['image1.jpg', 'image2.jpg'];
const imageType = webpSupport ? 'webp' : 'jpg';
const imageString = `url('${imageBasePath}${backgroundImages[0]}.${imageType}')`;4. 响应式图片设计
当用户在移动设备上访问 PWA 时，您需要为所有分辨率设备优化您的网页。要减少 PWA 图像大小，可以使用响应式设计制作 Web 应用程序。例如，使用不同的图片大小，缩放或裁剪图像以适应屏幕大小。
以下是使用 image-set 属性和响应式图片设计来加载不同设备上的不同大小的图片的示例：
// www.javascriptcn.com code example
.banner {
background:url(images/banner-small.jpg) 0 0 / cover;
background-image: -webkit-image-set(
url(images/banner-small.jpg) 1x,
url(images/banner-medium.jpg) 2x,
url(images/banner-large.jpg) 3x
));
background-image: image-set(
url(images/banner-small.jpg) 1x,
url(images/banner-medium.jpg) 2x,
url(images/banner-large.jpg) 3x
);
}
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.banner {
background-image: url(images/banner-medium.jpg);
}
}
@media (-webkit-min-device-pixel-ratio: 3),
(min-resolution: 350dpi) {
.banner {
background-image: url(images/banner-large.jpg);
}
}结尾
综上所述，优化图片加载速度是优化 PWA 性能的重要一步。通过使用低质量、延迟加载、WebP 格式图片以及响应式图片设计等技术。优化您的 PWA 图像可以提高网站性能并增强用户体验。我希望这些技巧可以帮助您设计更快和更好的 PWA 应用程序。
Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67cfccf0e46428fe9ebd0e9a