个人网页优化

由于个人服务器质量差价格低廉导致加载网速慢，而网页中包含部分图片与视频，对访问者体验感不好
所以进行优化

图片优化

方法一

尽可能在保持美观前提下 压缩图片大小

方法二

将图片格式从baseline JPEG尽量存为processive JPEG
processive JPEG就是先加载一个模糊的后更清晰的
baseline JPEG就是一行一行的
提升体验

方法三

设置图片加载顺序
因为用户打开，首先映入眼帘的是首页的图片，所以应优先加载首页图片，待其后再依次加载

	<script>
		$(document).ready(function () {
	
			function loadImage(url, callback) {
				var img = new Image();
				img.onload = function () {
					img.onload = null;
					callback(img);
				}
				img.src = url;
			}
	
			function call(img) {
				//console.log("此处是添加到box");
				console.log("DOM is ready , going to load section no.1 background picture .");
			}
	
			loadImage('./static/bg4.jpg', call);
		});
	
		window.onload = function () {
			var bgTwo = "./bg2.jpg";
			var bgThree = "./bg1.jpg";
			console.log("page is ready , going to load all of pictures .");
			$("#sectionTwo").css("cssText", "--bg: url(" + bgTwo + ")");
			$("#sectionThree").css("cssText", "--bg: url(" + bgThree + ")");
		};   
	</script>

我取巧利用了ready（）方法与onload（）方法

其实对于img标签更简单 ， 但我的使用的是背景图片 很复杂
img可以看下面这篇文章
https://blog.csdn.net/qq_39903567/article/details/115290905

方法四

对nginx开启gzip压缩

https://blog.csdn.net/qq_26975307/article/details/89399758

参考

https://blog.csdn.net/qq_29837295/article/details/98955489

https://blog.csdn.net/fangkang7/article/details/88747331

例子

可以访问我已经部署的网站
查看效果
http://www.liudonghui.top/sakura/
服务器有效期一年 从2022年2月开始到2023年2月