文本内容
1 .压缩文字
2 .jquery不是必须全部.http://youmightnotneedjquery.com/#toggle_class
3 .使用的一些方法可以直接写
图片内容
1 .按需加载，删除不必要的图片
2 .选择适当的图片类型，PNG,JPEG，GIF,WEBP格式
3 .删除图片的元数据,38k？？ 10%的大小
4 .调整图片大小
1 .所有的图片大小都应该根据预期用途进行适当的调整，而不是应该浏览器去调整大小
2 .降低图片的大小 。https://kornel.ski/en/faircomparison 比较图片的质量
3 .压缩图片，使用压缩工具可以进一步压缩PNG和JPG图像，从而减少文件大小，而不影响图像尺寸或视觉质量
5 .https://web.dev/fast/#optimize-your-images 其余的方法
HTTP请求
1 .js脚本位置和内敛推送
2 .完成文章 https://www.html5rocks.com/en/tutorials/speed/script-loading/
3 .不要将关键脚本放在单独的文件中并在<script>...</script>页眉中引用，而是在页眉或正文中添加一个块，然后插入脚本本身（不是文件引用，而是实际的脚本代码）在需要的时候。假设脚本不是太大，则此方法将脚本与HTML一起加载并立即执行，并避免了将其放在页面头部的额外HTTP请求开销
<h1>Our Site</h1>
<h2 id="greethead">, and welcome to Our Site!</h2>
<script>
//insert time of day greeting from computer time
var hr = new Date().getHours();
var greeting = "Good morning";
if (hr > 11) {
greeting = "Good afternoon";
}
if (hr > 17) {
greeting = "Good evening";
}
h2 = document.getElementById("greethead");
h2.innerHTML = greeting + h2.innerHTML;
</script>
<p>Blah blah blah</p>
比如这样的，直接写在html里面
4 .https://developers.google.com/web/fundamentals/performance/speed-tools 速度测试工具
5 .查看各个资源的加速速度
// Get Navigation Timing entries:
performance.getEntriesByType("navigation");
// Get Resource Timing entries:
performance.getEntriesByType("resource");
6 .将性能指标发送到服务器
// Caution: If you have a _lot_ of performance entries, don't send _everything_ via getEntries. This is just an example.
let rumData = JSON.stringify(performance.getEntries()));
// Check for sendBeacon support:
if ('sendBeacon' in navigator) {
// Beacon the requested
if (navigator.sendBeacon('/analytics', rumData)) {
// sendBeacon worked! We're good!
} else {
// sendBeacon failed! Use XHR or fetch instead
}
} else {
// sendBeacon not available! Use XHR or fetch instead
}
//可以以非阻塞方式发送请求，这对于RUM分析或不需要等待响应的其他类型的请求非常理想
优化内容效率
减小不必要的下载
1 .清点网页上的自由财产和第三方资产
2 .评估每个资产的表现，其价值及其技术性能
3 .
图像优化高级
1 .将gif转换为视频，创建webM视频
2 .动画GIF具有视频需要复制的三个主要特征：
他们会自动播放。
它们连续循环（通常，但是可以防止循环）。
他们保持沉默。
3 .替换为webP，大小会减少25%
4 .使用CDN，切换到图像CDN可以节省40%-80%的文件大小
1 .图像CDN专门从事图像的转换，优化和交付。您也可以将它们视为用于访问和操作网站上使用的图像的API。对于从图像CDN加载的图像，图像URL不仅指示要加载的图像，还指示大小，格式和质量等参数。这样可以轻松为不同的用例创建图像的变体
2 .映像CDN与构建时映像优化脚本的不同之处在于它们会根据需要创建映像的新版本。结果，与构建脚本相比，CDN通常更适合于为每个单独的客户端创建大量定制的映像
3 .图像CDN所使用的图像URL传达了有关图像的重要信息以及应应用于图像的转换和优化。URL格式将根据图像CDN有所不同，但是从高级的角度来看，它们都具有相似的功能
4 .图像CDN提供数十种（有时甚至数百种）不同的图像转换。这些转换是通过URL字符串指定的，同时使用多个转换没有任何限制。在网络性能方面，最重要的图像转换是尺寸，像素密度，格式和压缩。这些转换是为什么切换到图像CDN通常会导致图像大小显着减小的原因
5 .延迟加载
1 .您到达页面，并在阅读内容时开始滚动。
2 .在某个时候，将占位符图像滚动到视口中
3 .<img loading=lazy> 浏览器自带
4 .使用<picture>元素定义的图像也可以延迟加载
