后端开发教程 - Java、Spring Boot 实战 - msg200.com
5 个技巧让您的网站灯塔评分从平庸变为惊艳！
1. 使用响应式图像和艺术指导
2. 使用服务器端渲染和延迟加载
3. 精简资源
4. 使用压缩图像
5. 使用alt、aria-label和aria-labelledby
总结
感谢阅读
在创建用于生产环境的网站时，您当然希望它能为用户带来良好的使用体验。Lighthouse是实现此目的的最佳工具之一，它是一款Chrome 开发工具，可以分析您的网站在不同指标上的表现。
可惜的是，想要获得完美的Lighthouse评分并不容易。在创建我的作品集网站时，我的初始评分如下：
但经过几个简单的步骤，我成功地将每个类别的分数提高到了90 分以上
1. 使用响应式图像和艺术指导
最常用的图像使用方式是：
<img src="link-to-image">
但是，还有更多优化的图像使用方法：
<!-- Responsive images -->
<img
srcSet="link-to-img 480w, link-to-img@2x 720w, link-to-img@3x 960w"
sizes="(max-width: 1200px) 480px, (max-width: 2560px) 720px, 960px"
src="imgUrl@3x"
>
<!-- Art Direction -->
<picture>
<source media="(max-width: 1200px)" srcSet="link-to-img">
<source media="(max-width: 2560px)" srcSet="link-to-img@2x">
<source media="(min-width: 2560px)" srcSet="link-to-imgl@3x">
<img src="link-to-img@3x">
</picture>
使用这些方法可以让浏览器加载最适合您使用的屏幕尺寸的图像，通常可以避免不必要地下载大量数据。
要了解有关响应式图像和艺术指导的更多信息，请查看MDN 文档
2. 使用服务器端渲染和延迟加载
我的作品集最初是用React制作的（自带的create-react-app），但由于原生React是在客户端计算的，所以性能和SEO都不太理想。用Next.js重写了整个网站后，Lighthouse 评分有了显著提升。
另一个重要概念是延迟加载。它是一种编程风格，将资源的加载推迟到需要时才进行。这在网站初始加载时可以显著提升性能。在基于React的应用程序中实现延迟加载非常容易：
import React, { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function Component() {
return (
<div>
<Suspense
// fallback will be displayed while the lazy component loads
fallback={<div>Loading...</div>}
>
<LazyComponent />
</Suspense>
</div>
);
}
3. 精简资源
在生产环境中精简JavaScript和CSS始终是个好主意。这可以大大减少需要加载的项目的大小，并删除无用的代码。
Webpack是实现此目的的绝佳工具。它在生产环境中默认最小化JavaScript 。对于其他资源，例如CSS，您可以使用其他插件，例如css-minimizer-webpack-plugin。
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
},
};
要了解有关Webpack的更多信息，请查看本文
4. 使用压缩图像
WebP等下一代图像格式可以提供比PNG或JPEG更好的压缩率。这意味着更快的下载速度、更少的数据消耗，从而带来更快的网站整体速度。
您还可以使用矢量图形格式（例如SVG）来代替常用的光栅图形，这在性能提升方面也有很大的帮助。
5. 使用alt、aria-label和aria-labelledby
这些标签帮助您提高网站的可访问性。
-
alt：该alt属性是HTML文档中使用的HTML属性，用于指定当应用该属性的元素（通常是图像）无法呈现时要呈现的替代文本。<img src="link-to-img" alt="image-description"> -
aria-label：此aria-label属性用于定义标记当前元素的字符串。当文本标签在屏幕上不可见时，请使用此属性。<button aria-label="Close" onclick="dialog.close()"> X </button> -
aria-labelledby：类似于属性，但如果有可见文本标记元素，aria-label则应使用它。<div role="dialog" aria-labelledby="dialog-header"> <h2 id="dialog-header">Choose a File</h2> <!-- ... Dialog contents --> </div>
总结
我们介绍了一些技巧，可以全面提升您网站的灯塔评分。不妨在您的网站上运用这些技巧，亲眼见证奇迹的发生。
祝您获得完美的 100 分灯塔评分！
感谢阅读
需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我
想联系我吗？请在LinkedIn上联系我
关注我的博客，每两周在Medium上获取最新资讯
常问问题
这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。
-
我是初学者，该如何学习前端 Web 开发？
可以参考以下文章： -
你能指导我吗？
抱歉，我工作已经很忙了，没时间指导任何人。