已授权原作者翻译。在本文中，我主要介绍10种快速提升网站性能的方法。您可以在5分钟内将其应用到您的网站。话不多说，进入正题。1.文件压缩文件压缩可以减少通过网络传输的字节数。有几种压缩算法。Gzip是最流行的，但是通过Brotli，您可以使用更新甚至更好的压缩算法。如果你想检查你的服务器是否支持Brotli，你可以使用Brotli.pro。如果你的服务器不支持Brotli，你可以按照这个简单的指南安装它👍:NginxonLinuxApacheNodeJs-Express2。图像压缩未压缩的图像是一个巨大的潜在性能瓶颈。如果在将图像提供给用户之前未对其进行压缩，则会传输不必要的字节。有几种有用的工具可用于快速压缩图像而不损失可见质量。我主要使用Imagemin。它支持多种图像格式，您可以将其用作命令行界面或npm模块。imageminimg/*--out-dir=dist/images也可以在项目中引入npm，使用imagemin-mozjpeg将JPEG图片压缩到原来的60%：constimagemin=require('imagemin');constimageminMozjpeg=require('imagemin-mozjpeg');(async()=>{constfiles=awaitimagemin(['img/*.jpg'],{destination:'dist/img',plugins:[imageminMozjpeg({quality:60}),]});console.log(文件);})();在我的例子中，它将文件大小从4MB减少到100kB:3。图像格式使用现代图像格式确实可以提高性能。WebP图像比JPEG和PNG小，通常小25%-35%。WebP也得到了浏览器的广泛支持。我们使用imageminnpm包并向其中添加WebP插件。以下代码将我的图像的WebP版本输出到dist文件夹中。constimagemin=require('imagemin');constimageminWebp=require('imagemin-webp');(async()=>{constfiles=awaitimagemin(['img/*.jpg'],{destination:'dist/img',插件：[imageminWebp({quality:50})]});console.log(files);})();我们再看一下文件大小：原来文件大小比原图缩小了98%，和压缩后的JPG文件相比，WebP对图片的压缩更明显，WebP版比原图小了43%压缩的JPEG版本。4.图像的延迟加载图像的延迟加载是一种延迟而不是提前加载屏幕外图像的技术。当解析器遇到正确加载的图像时，它会减慢初始页面加载速度。使用延迟加载，您可以加快进程并在以后加载图像。使用lazysize很容易做到这一点。使用lazysize脚本和浏览器支持加载属性，你可以这样优化：-src="https://s6.51cto.com/oss/202010/20/dd7f123d7a9b62d1a239a064cce7193c.jpg"class="lazyload"alt="">库会处理剩下的，您可以使用浏览器验证这个有点转到您的网站并找到您的图片标签。如果类从lazyload更改为lazyloaded，它会起作用。5.缓存HTTP标头缓存是提高站点速度的快速方法。它减少了访问者的页面加载时间。我们可以告诉浏览器在特定时间缓存文件。如果你对后台有所了解，那么配置缓存就不难了。我们可以使用以下API进行缓存：Cache-ControlETagLast-Modified6。内联关键CSSCSS是渲染阻塞的，这意味着浏览器必须在绘制像素之前下载并处理所有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);//savethistoafileforstep2}});}});});内联关键CSSHTML解析器遇到样式标签并立即处理关键CSS。
body{...}/*...关键CSS的其余部分*/Lag非关键CSS非关键CSS不需要立即处理。浏览器可以在onload事件之后加载它，因此用户不必等待。