【干貨】優(yōu)化網(wǎng)站加載速度方案（上篇）

時間：2023-04-18 23:00:01 | 來源：網(wǎng)站運營

時間：2023-04-18 23:00:01 來源：網(wǎng)站運營

【干貨】優(yōu)化網(wǎng)站加載速度方案（上篇）：

前言

很多的網(wǎng)民在瀏覽網(wǎng)頁的過程中會發(fā)現(xiàn)并不是所有的網(wǎng)站頁面都能夠快速被打開并可以順利瀏覽，尤其是在遇到內(nèi)容豐富且價值高的網(wǎng)站加載速度極慢，而這必定會降低用戶體驗的效果，影響訪問者的等待耐心，流失一定的客源。那么，今天我就來講講幾個可以快速提升網(wǎng)站加載速度的優(yōu)化方案以及它們需要注意的點，收藏這篇文章，讓你的個人博客網(wǎng)站或者你老板的公司官網(wǎng)能夠擁有更良好的用戶體驗吧！

如何測試網(wǎng)站的加載速度呢？

谷歌提供的強無敵的網(wǎng)站加載速度測試入口:

https://developers.google.com/speed/pagespeed/insights/

只要輸入目標網(wǎng)址，便可以測出手機版和電腦版兩種設備的網(wǎng)頁加載速度，最強的地方在于，它不但會給網(wǎng)站速度進行打分，還會檢測出影響網(wǎng)站加載速度的各種因素按大到小排序，還會提供給用戶非常詳細的改善方案，小編也是詳讀了谷歌提供的各種改善方案之后，總結了幾點最有效果的，以及它們在提升速度的同時，會帶來哪些負面的影響。（谷歌官網(wǎng)的手機版也才85分，一般沒有做過優(yōu)化的普通網(wǎng)站也就只有20-30分）

4點親測有效的網(wǎng)站加載速度改善方案

1.Lazy Loading（懶加載）【安全】
2.更改圖片壓縮方式【不安全】
3.Improving First Contentful Paint (FCP )【不安全】
4.Enable text compression (對手機版極為有效果) 【安全】

Lazy Loading（懶加載）

在加載正常網(wǎng)頁的時候，通常需要先加載出網(wǎng)頁上所有的圖片以及字體元素，即使這些圖片和文字在用戶需要向下滾動屏幕的時候才能看到的位置。懶加載即對于需要滾動才能看到的圖片和文字等元素的延遲加載，換句話說，用戶永遠停留在頁面最上方的話，那么就不會花費用戶的時間去加載隱藏的部分圖片和文字，會隨著用戶邊滑動頁面邊加載元素。就是這樣一個感覺很自然的一種方式，就可以很有效的提升網(wǎng)站的加載速度。
具體的做法也很簡單，對于html中的圖片元素，在img標簽中加入loading='lazy'屬性，對于字體元素，在font的link標簽中加入ref='preload'（這個其實是預加載）。

更改圖片壓縮方式

圖片，一直是網(wǎng)頁加載速度慢的罪魁禍首之一，如果是一張2K分辨率的圖片，使用一般的格式像jpg或者png的話，大小也要2M左右，可能會拖延數(shù)秒鐘的加載時間，有沒有什么方法可以在保證圖片視覺不失真的前提下縮小體積呢？答案就是將圖片轉(zhuǎn)化成WebP格式，而不是使用jpeg或者png格式。WebP是谷歌于2010年提出的一種新的圖片壓縮方式，WebP為網(wǎng)絡圖片提供了無損和有損兩種壓縮選擇，據(jù)官方實驗表明：無損WebP相比PNG減少26%大小；有損WebP相比JPEG減少25%~34%的大小，總結就是：圖片體積大幅減小，但是視覺效果仍然很棒。
具體的實現(xiàn)方法就是將網(wǎng)頁里的圖片格式都改為WebP格式就可以了，圖片格式轉(zhuǎn)化可以在網(wǎng)上搜索在線的WebP轉(zhuǎn)化器，或者可以參考谷歌的官方文檔進行轉(zhuǎn)化。

https://developers.google.com/speed/webp/docs/cwebp

需要注意的是，現(xiàn)有的大多數(shù)瀏覽器均已支持WebP格式圖片的呈現(xiàn)，但仍然有像IE瀏覽器這樣的異端不支持，這意味著IE瀏覽器的用戶看不到你網(wǎng)頁上的WebP格式的圖片，所以在使用此方法前，你需要權衡利弊。



以上的兩種方法對于電腦版網(wǎng)頁加載速度的優(yōu)化效果極為明顯，可以讓網(wǎng)頁的跑分從30分升到60分，但是對手機版網(wǎng)頁的效果不太顯著，關于手機版網(wǎng)頁的優(yōu)化我會在“【干貨】優(yōu)化網(wǎng)站加載速度方案（下篇）”中繼續(xù)介紹，敬請大家期待！