在這篇文章中，主要介紹10種快速提高網站效能的方法，你只需5分鐘內就可以將它應用到你的網站上，廢話不多說，讓我們進入正題。
檔案壓縮，可以減少網路傳輸的位元組數。有幾種壓縮演算法。 Gzip是最受歡迎的，但是對於Brotli，你可以使用一種更新的、甚至更好的壓縮演算法。如果想要檢查您的伺服器是否支援Brotli，可以使用 Brotli.pro。
如果你的伺服器不支援Brotli，可以按照以下簡單指南進行安裝：
imagemin img/* --out-dir=dist/images
imagemin-mozjpeg，可以將JPEG影像壓縮到原有的60%：
const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');
(async() => {
const files = await imagemin(
['img/*.jpg'],
{
destination: 'dist/img',
plugins: [
imageminMozjpeg({quality: 60}),
]
}
);
console.log(files);
})();4MB減少到100kB:
25％-35％。 WebP 也被瀏覽器廣泛支援。
dist資料夾中。
const imagemin = require('imagemin');
const imageminWebp = require('imagemin-webp');
(async() => {
const files = await imagemin(
['img/*.jpg'],
{
destination: 'dist/img',
plugins: [
imageminWebp({quality: 50})
]
}
);
console.log(files);
})();
98% ，與壓縮的JPG 檔案相比，WebP 對影像的壓縮效果更加明顯，WebP版本比壓縮的JPEG版本小43%。
lazysize腳本和瀏覽器對loading屬性的支持，你可以這樣優化：
<img alt="10 種快速優化 Web 效能的手段（分享）" >
<img alt="10 種快速優化 Web 效能的手段（分享）" >
lazyload更改為lazyloaded，它就可以運作。
的，這表示瀏覽器必須先下載並處理所有CSS文件，然後才能繪製像素。透過內聯關鍵的 CSS，可以大大加快這個過程。我們可以透過以下步驟完成此動作：識別關鍵的 CSS
criticalCSS 事例如下：
var criticalcss = require("criticalcss");
var request = require('request');
var path = require( 'path' );
var criticalcss = require("criticalcss");
var fs = require('fs');
var tmpDir = require('os').tmpdir();
var cssUrl = 'https://web.dev/app.css';
var cssPath = path.join( tmpDir, 'app.css' );
request(cssUrl).pipe(fs.createWriteStream(cssPath)).on('close', function() {
criticalcss.getRules(cssPath, function(err, output) {
if (err) {
throw new Error(err);
} else {
criticalcss.findCritical("https://web.dev/", { rules: JSON.parse(output) }, function(err, output) {
if (err) {
throw new Error(err);
} else {
console.log(output);
// save this to a file for step 2
}
});
}
});
});內聯關鍵 CSS
<style>
body {...}
/* ... rest of the critical CSS */
</style>
滯後非關鍵CSS
<link> <noscript><link></noscript>
HTML 也是阻塞渲染,浏览器必须等待 JS 执行后才能完成对HTML的解析。但是我们可以告诉浏览器等待JavaScript执行。
使用属性async，可以告诉浏览器异步加载脚本。
<script></script>
defer属性告诉浏览器在 HTML 解析器解析完文档之后运行脚本，但在事件发生之前，DOMContentLoaded会被触发。
<script></script>
内联脚本立即执行，浏览器对其进行解析。 因此，您可以将它们放在HTML的末尾，紧接在body标记之前。
HTML5的资源提示(Resource Hints)可以简单地理解为预加载，浏览器根据开发者提供的后续资源的提示进行有选择性的加载和优化。“有选择性”这一项是必须的且极其重要的，也是有别早先替代方案的重点，因为很多情况下，预加载会受到所分配到的计算资源以及带宽资源的限制，浏览器有权放弃那些成本较高的加载项。
资源提示帮助开发人员告诉浏览器稍后可能加载的页面。该规范定义了四种原语
此外，对于资源提示，我们使用了链接属性的preload关键字。
预链接, 使用方法如下：
<link>
我们访问一个站点时，简单来说，都会经过以下的步骤：
使用preconnect后，浏览器会针对特定的域名，提前初始化链接(执行上述三个步骤)，节省了我们访问第三方资源的耗时。需要注意的是，我们一定要确保preconnect的站点是网页必需的，否则会浪费浏览器、网络资源。
DNS 预解析, 这个大多数人都知道，用法也很简单：
<link>
DN S解析，简单来说就是把域名转化为ip地址。我们在网页里使用域名请求其他资源的时候，都会先被转化为ip地址，再发起链接。dns-prefeth使得转化工作提前进行了，缩短了请求资源的耗时。
什么时候使用呢？当我们页面中使用了其他域名的资源时，比如我们的静态资源都放在cdn上，那么我们可以对cdn的域名进行预解析。浏览器的支持情况也不错。
预拉取, 使用方法如下：
<link> <link> <link> <link> <link>
link标签里的as参数可以有以下取值：
audio: 音频文件 video: 视频文件 Track: 网络视频文本轨道 script: javascript文件 style: css样式文件 font: 字体文件 image: 图片 fetch: XHR、Fetch请求 worker: Web workers embed: 多媒体<embed>请求 object: 多媒体<object>请求 document: 网页</object></embed>
预拉取用于标识从当前网站跳转到下一个网站可能需要的资源，以及本网站应该获取的资源。这样可以在将来浏览器请求资源时提供更快的响应。
如果正确使用了预拉取，那么用户在从当前页面前往下一个页面时，可以很快得到响应。但是如果错误地使用了预拉取，那么浏览器就会下载额外不需要的资源，影响页面性能，并且造成网络资源浪费。
这里需要注意的是，使用了prefetch，资源仅仅被提前下载，下载后不会有任何操作，比如解析资源。
预渲染，使用方法如下:
<link>
prerender比prefetch更进一步。不仅仅会下载对应的资源，还会对资源进行解析。解析过程中，如果需要其他的资源，可能会直接下载这些资源。这样，用户在从当前页面跳转到目标页面时，浏览器可以更快的响应。
<link> <link>
注意preload需要写上正确的as属性，才能正常工作喔(prefetch不需要)。但是它们有什么区别呢？
Google字体很棒，它们提供优质的服务，并被广泛使用。 如果你不想自己托管字体，那么Google字体是一个不错的选择。 你需要的是学习如何引用它们，哈里·罗伯茨（Harry Roberts）写了一篇有关《The Fastest Google Fonts》的出色深度文章。 强烈建议你阅读它。
如果你快速取用，那么可以使用下面集成片段的谷歌字体：
<link> <link> <link> <noscript><link></noscript>
service worker是浏览器在后台运行的脚本。缓存可能是最常用的特性，也是你应该使用的特性。我认为这不是一个选择的问题。通过使用 service worker实现缓存，可以使 用户 与站点的交互更快，并且即使用户不在线也可以访问站点。
在这篇文章中，展示了 10 种快速的网络性能，你可以在5分钟内应用到你的网站，以提高你的网站速度。
感谢大家的观看与支持，我们下期再见，不要忘了三连哦。
原文：https://dev.to/marcradziwill/10-web-performance-quick-wins-you-can-and-should-apply-in-under-5-minutes-1dj2
作者：Marc
更多编程相关知识，请访问：编程入门！！
以上是10 種快速優化 Web 效能的手段（分享）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
