对网站进行性能优化需要花费大量的时间，而且如果优化是基于您自己的需求，可能会花费更多时间。 在这篇文章中，我将向你展示10种方法，可以在5分钟内用来快速优化Web性能。这种快捷方式对代码库和服务器配置的影响很小。这些方法简单易用，不需要深入了解其原理，并能…
对网站进行性能优化需要花费大量的时间，而且如果优化是基于您自己的需求，可能会花费更多时间。
在这篇文章中，我将向你展示10种方法，可以在5分钟内用来快速优化Web性能。这种快捷方式对代码库和服务器配置的影响很小。这些方法简单易用，不需要深入了解其原理，并能为你带来好的性能？产生重大影响
一、使用文字压缩。
通过文字压缩，可以最小化在网络上传输的字节数。压缩算法有多种。Gzip是最流行的，但是Brotli是一个更先进，甚至更好的压缩算法。您可以使用Brotli.pro工具，检查服务器是否支持Brotli。
如果您的服务器不支持Brotli，您可以遵循下面的简单指导进行安装：
NginxonLinux
Apache
NodeJs-Express
二、图像压缩。
非压缩图像是潜在的性能瓶颈。在没有压缩图像的情况下，它将消耗大量的带宽。现在有一些有用的工具可以快速压缩图像，而不会降低图像的可见性。我经常用Imagemin该软件支持多种图像格式，您可以在命令行界面下使用该软件。
imageminimg/*--out-dir=dist/images
你可以将npm模块用到webpack、gulp或grunt等打包程序中。
constimagemin=require('imagemin');
constimageminMozjpeg=require('imagemin-mozjpeg');
(async()=>{
constfiles=awaitimagemin(
['img/*.jpg'],
{
destination:'dist/img',
plugins:[
imageminMozjpeg({quality:60}),
]
}
);
console.log(files);
})();
一般情况下可将4MB大小的文件减小到100kB。可以在Github中查看演示代码。
单位文件大小，无压缩压缩文件大小文件大小减少百分比
三、图片格式
采用现代的图像格式可以真正地提高性能。与JPEG和PNG相比，WebP图像通常小25%~35%。WebP受到广泛的浏览器支持。
利用imageminnpm包并为其添加WebP插件。下面的代码可以将WebP版本的图片输出到dist文件夹。
constimagemin=require('imagemin');
constimageminWebp=require('imagemin-webp');
(async()=>{
constfiles=awaitimagemin(
['img/*.jpg'],
{
destination:'dist/img',
plugins:[
imageminWebp({quality:50})
]
}
);
console.log(files);
})();
再次查看文件大小：
单元文件大小，不压缩的压缩文件大小减少百分比。
实验结果表明，与原始图像相比，文件大小减少98%,WebP对图像的压缩比JPG文件的压缩效果更明显。Web版比JPEG压缩版小43%。
四、图像加载延迟。
图片延迟加载是一种稍后加载屏幕上暂时没有显示的图片的技术。解析器一遇到图像就加载的话，会降低初始页面的加载速度。通过延迟装载，可以加速页面装载过程，并在以后装载图像。通过lazysizes可以很容易地实现。您可以编写如下代码：
<imgsrc="image.jpg"alt="">
改为：
<imgsrc="image.jpg"class="lazyload"alt="">
lazysizes库还处理其他工作，可以使用浏览器验证。开启您的网站，找到图片标签。假如class从lazyload转换为lazyloaded，那么它就会正常工作。
五、缓存资源：HTTP缓存头。
快取是一种快速提升网站速度的方法。这会减少老用户加载页面的时间。假如您有访问服务器缓存的权限，使用起来就很简单。
可使用下列API缓存：
Cache-Control
ETag
Last-Modified
六、嵌入式关键CSS：推迟非关键CSS。
渲染被CSS阻止。这就是说，在绘制像素之前，浏览器必须下载并处理所有CSS文件。可以通过内嵌CSS大大加速这一过程。
您可以遵循下列步骤：
识别关键的CSS
如果你不知道你的关键CSS是什么，则可以通过Critcal、CriticalCSS或Penthouse来帮忙。这些库都用来从给定视口中可见的HTML文件中提取CSS。
下面是使用criticalCSS的例子。
varcriticalcss=require("criticalcss");
varrequest=require('request');
varpath=require('path');
varcriticalcss=require("criticalcss");
varfs=require('fs');
vartmpDir=require('os').tmpdir();
varcssUrl='https://web.dev/app.css';
varcssPath=path.join(tmpDir,'app.css');
request(cssUrl).pipe(fs.createWriteStream(cssPath)).on('close',function(){
criticalcss.getRules(cssPath,function(err,output){
if(err){
thrownewError(err);
}else{
criticalcss.findCritical("https://web.dev/",{rules:JSON.parse(output)},function(err,output){
if(err){
thrownewError(err);
}else{
console.log(output);
//将其保存到文件以进行第2步
}
});
}
});
});
内联关键CSS
当HTML解析器遇到style标签时会立即处理关键的CSS。
<head>
<style>
body{...}
/*...其余的关键CSS*/
</style>
</head>
延迟不重要的CSS
非关键的CSS不需要立即进行处理。浏览器可以在onload事件之后再加载它，使用户不必等待。
<linkrel="preload"href="/assets/styles.css"as="style"onload="this.onload=null;this.rel='stylesheet'">
<noscript><linkrel="stylesheet"href="/assets/styles.css"></noscript>
七、JavaScript异步及延迟加载
JavaScript是HTML解析器阻止的。浏览器必须等待JavaScript执行才能完成对HTML的解析。但是你可以告诉浏览器等待JavaScript执行。
异步加载JavaScript
通过async属性，你可以告诉浏览器异步加载脚本。
<scriptsrc="app.js"async></script>
DeferJavaScript
defer属性告诉浏览器在HTML解析器完成文档解析之后再运行脚本，但在事件发生之前，将会触发DOMContentLoaded。
<scriptsrc="app.js"defer></script>
调整内联脚本的位置
内联脚本会立即执行，浏览器对其进行解析。因此，你可以将它们放在HTML的末尾，紧接在body标记之前。
八、使用资源提示加快交付速度。
资源提示能够诉浏览器以后可能加载什么页面。该规范定义了四个原语：
preconnect（预连接）
dns-prefetch（DNS预取）
prefetch（预取）
prerender（预渲染）
另外，关于资源提示，我们将preload关键字用于link属性。
preconnect
下面的代码告诉浏览器你要建立与另一个域的连接。浏览器将为此连接做准备。使用预连接链接标签可以将加载时间缩短100–500ms。那么什么时候应该用它呢？直白的说：当你知道在哪里拿东西但不知道该怎么拿。比如哈希样式文件（styles.2f2k1kd.css）这类的东西。
<linkrel="preconnect"href="https://example.com">
dns-prefetch
如果你想告诉浏览器将要建立与非关键域的连接，则可以用dns-prefetch进行预连接。这大约能够为你节省20–120毫秒。
<linkrel="dns-prefetch"href="http://example.com">
prefetch
使用预取，你可以告诉浏览器下载链接标记中所指的整个网站。你可以预取页面或资源。预取在加快网站速度方面非常有用，但是要注意有可能降低网站速度的情况。
低端设备或网速较慢的情况下可能会遇到问题，因为浏览器会一直忙于预取。你可以考虑将预取与自适应加载结合使用，也可以将智能预取与quicklink和Guess.js结合使用：
<linkrel="prefetch"href="index.html"as="document">
<linkrel="prefetch"href="main.js"as="script">
<linkrel="prefetch"href="main.css"as="style">
<linkrel="prefetch"href="font.woff"as="font">
<linkrel="prefetch"href="image.webp"as="image">
prerender
<linkrel="prerender"href="https://example.com/content/to/prerender">
使用预渲染时，将会先加载内容，然后在后台渲染。当用户导航到预渲染的内容时，内容会立即显示。
preload
借助预加载功能，浏览器会得到引用的资源很重要的提示，应尽快获取。现代浏览器很擅长于对资源进行优先级排序，所以应该只对关键资源使用预加载。可考虑用预连接和预取代替，或者尝试使用instant.page。
<linkrel="preload"as="script"href="critical.js">
九、使用GoogleFonts
GoogleFonts很不错。他们提供了优质的服务，并且应用广泛。如果你不想自己托管字体，那么Google字体是一个很不错的选择。但是你应该注意如何实现它们。HarryRoberts写了一篇非常出色的文章，内容涉及怎样用GoogleFonts来为网站加速。强烈建议阅读。
如果你只想知道怎样用，可以通过下面的代码段进行Google字体集成，但功劳归功于Harry。
<linkrel="preconnect"href="https://fonts.gstatic.com"crossorigin/>
<linkrel="preload"as="style"href="https://fonts.googleapis.com/css2?family=...&display=swap"/>
<linkrel="stylesheet"href="https://fonts.googleapis.com/css2?family=...&display=swap"media="print"onload="this.media='all'"/>
<noscript><linkrel="stylesheet"href="https://fonts.googleapis.com/css2?family=...&display=swap"/></noscript>
十、用serviceworker来缓存你的资源
serviceworker是浏览器在后台运行的脚本。缓存是最常用的功能之一，也是你最应该使用的功能。我认为这不是选择问题。通过serviceworker实施缓存，可以使用户与你的站点之间的交互速度更快，而且即使用户断网也可以访问你的网站。
