網(wǎng)站加載圖片速度慢如何優(yōu)化

問題描述：

如圖所示，中間那張圖是我們官網(wǎng)的加載時間線(已經(jīng)去掉了每次的緩存)，上下兩張是其它網(wǎng)站做為對比的。我發(fā)現(xiàn)我們網(wǎng)站加載類似大小的圖片所花費的時間較長，甚至有十倍之多網(wǎng)站優(yōu)化，請問這是前端的問題還是服務(wù)器帶寬的問題網(wǎng)站優(yōu)化，如何優(yōu)化加載速度呢？

另外，我們公司官網(wǎng)加載速度確實很慢，老板讓我做優(yōu)化，請問各位有沒有前端速度優(yōu)化的方法提供一下，我自己研究使用，非常感謝。

各位大神可以幫小弟分析一下我們官網(wǎng)的問題嗎，關(guān)于加載速度，圖片壓縮大小方面的，網(wǎng)址上面有了，非常感謝。

第 1 個答案：

圖片優(yōu)化，無非壓縮、合并、CDN、緩存、延時加載、獨立域名

第 2 個答案：

看看的這個

優(yōu)化網(wǎng)站的所有相關(guān)資料看這個：

第 3 個答案：

1.走動態(tài)資源和靜態(tài)資源分離,

圖片走，/image/logo.png

css走,/css/index.css

js走, /js/index.js

2.圖片全部采用CDN解析，緩存住

第 4 個答案：

從你的截圖可以看出網(wǎng)站的所用圖片太大，需要壓縮，另外小的一些圖片可以做成雪碧圖或者直接生成編碼嵌入網(wǎng)頁中，還有現(xiàn)在在網(wǎng)站上可以使用webp，不過這個貌似在移動端用的多，你可以看看

第 5 個答案：

可以試試七牛圖片處理鏈接

第 6 個答案：

大的圖片最好壓縮一下，小圖片可以放在一個雪碧圖上邊用，一般都是200k以內(nèi)比較好

第 7 個答案：

圖片大了，可以試著把圖片放到阿里OSS或者七牛上

第 8 個答案：

快慢永遠(yuǎn)是相對的，建議檢查以下：

1、壓縮圖片、js、css，色彩較少的建議用git格式

2、開啟服務(wù)器的gzip、open-cache

3、有條件時，可以把不需要程序渲染的文件加入CDN

4、根據(jù)具體的業(yè)務(wù)需求，可以考慮異步加載圖片，避免影響用戶操作

5、如果做了多級nginx代理，建議在對外的nginx服務(wù)中開啟靜態(tài)資源緩存，避免每次去子服務(wù)器獲取

6、根據(jù)具體業(yè)務(wù)需求，考慮頁面是否確實需要加載這么多圖片

優(yōu)化網(wǎng)站性能，需要前后端同時考慮，甚至包括設(shè)計。

第 9 個答案：

可以采用動態(tài)添加的方式，先讓圖片容器加載一個動效，css就可以實現(xiàn)一個，然后設(shè)置幾秒之后動態(tài)添加一個圖片地址，new IMage的方式添加地址，據(jù)說效果不錯，你可以試試，關(guān)鍵是圖片你得處理一下，你那圖片有點大

第 10 個答案：

我的網(wǎng)站也是，這和帶寬和服務(wù)器空間都有影響；然后可以設(shè)緩存和圖片壓縮；

第 11 個答案：

壓縮和緩存

第 12 個答案：

圖片應(yīng)該怎么壓縮？網(wǎng)站打開速度太慢

下一節(jié)：點擊下載壓縮文件

效果如一下網(wǎng)站效果：