網站加載塊狀

Question

我發佈了我的第一個網站（www.dirkwolthuis.nl）。它是一個包含大量圖像和元素的單頁網站。在我的Mac上的鉻加載罰款和滾動沒關係。在iPad或iPhone上，元素的渲染速度比用戶滾動的要慢。這是一個網頁網站的常見問題嗎？我能做點什麼嗎？

Answer 1

頁面加載不應該是一個很大的問題。但一些圖像相當大，尤其是那些爲您的文章圖像服務的圖像，其中一些圖像寬度超過1000像素，但僅在450像素或更少的情況下使用。

由於這些都是CSS背景圖片，因此可以通過媒體查詢輕鬆處理。

例如：

.article-card.privacy { 
    url(/images/articles/whatsapp-small.jpg); 
} 

@media (min-width: 720px) { 
    .article-card.privacy { 
     url(/images/articles/whatsapp-medium.jpg); 
    } 
} 

@media (min-width: 960px) { 
    .article-card.privacy { 
     url(/images/articles/whatsapp-large.jpg); 
    } 
} 

你顯然需要創建三個不同的圖像，每個的大小，當然。

您可以通過進一步壓縮它們來加速下載時間。嘗試使用在線服務，例如https://kraken.io，即使您已經在photoshop中保存爲網頁，您總是可以從中擠出更多。

而且這個你可以利用Google's page speed insights這將給你的指針作爲到你的網站正在贏得而且它可以在網頁速度方面得到改善