前端網頁載入速度緩慢優化策略

最近遇到一個客戶，網站放在阿里雲（洛杉磯），雲伺服器的配置一般般，但是由於做谷歌推廣的原因，對於網站速度要求還是比較高的。

他的網站目前的問題是：網頁開啟速度慢，頁面排版錯位導致跳失率過高。

解決辦法：

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="//
< 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檔案壓縮

這個沒啥說的，找個工具直接壓縮就好了