最近遇到一个客户，网站放在阿里云（洛杉矶），云服务器的配置一般般，但是由于做谷歌推广的原因，对于网站速度要求还是比较高的。

他的网站目前的问题是：网页打开速度慢，页面排版错位导致跳失率过高。

解决办法：

1. 页面重新排版

2. 网页前端优化+服务后端优化

网页前端优化

1. 优化图片大小
   

2. 增加DNS预解析

3. 降低请求总数，压缩合并相关资源文件

4. 调整css/js加载顺序

5. 采用谷歌评分优化建议

后端优化

1. 由原来的PHP5.4，更换为PHP7.4；
   

2. 使用PHP加速组件进行加速；

3. 使用后端系统生成缓存文件，达到静态文件级效果

4. web服务软件升级（首选NGINX）

部分细节：

1. DNS Prefetch，

   即DNS预获取，是前端优化的一部分。一般来说，在前端优化中与 DNS 有关的有两点： 一个是减少DNS的请求次数，另一个就是进行DNS预获取 。
   DNS Prefetch 应该尽量的放在网页的前面，推荐放在 <meta charset="UTF-8"> 后面。具体使用方法如下：
   

< meta  http-equiv="x-dns-prefetch-control" content="on">
< link  rel="dns-prefetch" href="//www.zhix.net">
< link  rel="dns-prefetch" href="//api.share.zhix.net">
< link  rel="dns-prefetch" href="//bdimg.share.zhix.net">

如果需要禁止隐式的 DNS Prefetch，可以使用以下的标签：

< meta  http-equiv="x-dns-prefetch-control" content="off">

2.css背景图片切片

   切割图片这里不是真正的切割，只是用CSS取图片中的一部分而已。这样做的好处就是减少了打开网页时请求图片的次数。主要有两种方式，一是做为某一元素的背景图片，二是用img元素的属性。

方法一：

background : transparent   url ( 123 .jpg) no-repeat   scroll   -140px   -20px ;

transparent  表示透明无颜色
url(123.jpg) 表示背景图片
no-repeat 表示图片不重复
scroll 表示背景图片随浏览器下拉而滚动
-140px 表示水平位置在图片的-140px处（以图片的左上角为0,0）
-20px 表示垂直位置在图片的-20px处（以图片的左上角为0,0）

方法二：

用img的clip属性中的 rect ， clip:rect(y1 y1 x2 x1) 参数说明如下：

y1=定位的y坐标(垂直方向)的起点
x1=定位的x坐标(水平方向)的起点
y2=定位的y坐标(垂直方向)的终点
x2=定位的x坐标(水平方向)的终点

注:坐标的起点是在左上角 下方为示例代码

img{
    position:absolute;
    clip:rect(20px 100px 50px 20px);
}

css js文件压缩

这个没啥说的，找个工具直接压缩就好了