一、优化图片
1、使用正确的图片格式
在选择图像格式时需要考虑不只图片质量和大小，还要考虑图像格式。图片格式的选择直接影响页面加载速度，下面列出了最常见的三种图片格式:
- JPEG（有损压缩，对于复杂的图像，颜色变化较多的图像效果不是很好）
- PNG（无损压缩，对于透明度的处理比较好）
- GIF（支持动画）
2、压缩图片
一般来说，我们需要在不影响图片质量的前提下，将图片尽可能的压缩，以减少加载时间。
//html代码实例 <img src="example.jpg" alt="A beautiful example"/>
二、CSS和JavaScript文件的加载位置
1、CSS和JavaScript文件的加载位置对于性能的影响
CSS和JavaScript文件的加载位置的影响会更高。这个时候，请使用defer属性，在页面渲染完毕后，再开始加载解析这些标签。这样能让DOM加载速度更快，进而让页面响应时间更快。
2、优化JavaScript文件
尽量减少JavaScript文件的体积，压缩文件和用精炼的代码能有效的减少文件大小。
//html代码实例 <head> <link href="example.css" rel="stylesheet"> <script src="example.js" defer></script> <script src="example2.js" defer></script> </head>
三、减小页面大小
1、减小DOM
使用合适的不冗余的HTML标签
2、减少HTTP请求
减少所需资源的HTTP请求数量能够大大提高性能。
3、避免重复的代码
当有一段代码被使用多次时，可以将其封装为一个函数并将其放置在共享.js文件中，以避免在文档中重复出现。
4、服务端渲染
如果您使用的是显示用户信息的动态页面，可以使用服务器端渲染后，将HTML文件传递给浏览器以减少页面大小。
//html代码实例
<!doctype html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<div>Hello World!</div>
</body>
</html>
四、Lazy loading
Lazy Loading是一种在展示内容时，根据用户的滚动来加载可见图像的方法。这是一种提高页面性能和用户体验的简单但强大的技术。Lazy Loading的主要目标是加载进入视图的图片，而不是页面上的所有图片。这可以大大减少首次加载页面时的负载时间。
//html代码实例 <img loading="lazy" src="example.jpg" alt="A beautiful example">
五、使用后端缓存技术
使用后端缓存技术能够大大减少执行时间和资源的使用，提高用户体验和页面性能。
//php代码实例
<?php
//输出编译并缓存的HTML
function output_cached_html($cache_path, $ttl) {
// 检查页面是否已经缓存
if(file_exists($cache_path) && time() - filemtime($cache_path) <= $ttl) {
// 缓存还未过期
readfile($cache_path);
return true;
} else {
// 缓存已经过期或没有找到
return false;
}
}
//写入更新后的HTML
function write_html_to_cache($cache_path, $html) {
// 将HTML写入新的缓存文件
file_put_contents($cache_path, $html);
}
?>