爲響應式移動網站開發加載速度。

我在這裏準備採取我們的網站，並使其完全移動響應，從而擺脫我們的米。網站。我可能會利用Bootstrap。爲響應式移動網站開發加載速度。

我一直在做一些研究，並且遇到了一些很好的資源。雖然，我很好奇加載速度和移動設備。

例如：

可以說，在2秒內和轉讓3 MB數據的我的網站加載的桌面版本。

現在我打開手機進入我的網站。移動斷點版本是否仍會傳輸全部3MB數據以加載頁面？

我不確定開發人員如何根據移動與否來減少請求大小並縮短加載時間。

我假設如果我加載我的瀏覽器並將其調整到移動斷點，它仍將使用與桌面相同的資源。

我希望我的問題有道理。我真的不知道該怎麼說。

讓我知道！謝謝。

來源

2017-10-04 Learn12

除非另有說明，否則移動瀏覽器會將與桌面瀏覽器完全相同的內容拉低。

您可以做些事情來減少移動設備的頁面大小，例如在手機上拉下較小的圖像。這樣做的一種方法是使用HTML圖片標籤，根據屏幕寬度指定不同的圖像大小。 https://www.w3schools.com/tags/tag_picture.asp

<picture> 
    <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> 
    <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> 
    <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> 
</picture>

您還可能有JavaScript代碼反作用於屏幕尺寸，拉下或反應事件不同，以減少帶寬佔用或使頁面看起來加載更快。一個例子是延遲加載，延遲加載是JavaScript，它可以在DOM加載後拉下屏幕外的圖像。

這裏有一個關於延遲加載一個偉大的指南頁面圖像https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/

最後，Web瀏覽器緩存中的內容。因此，頁面之間共享的任何樣式表，JavaScript文件或圖像都應該存儲在設備緩存中，這樣可以減少瀏覽器在每次頁面加載時一次又一次下載相同文件的需求。

來源

2017-10-04 23:34:09 TidyDev

感謝您的回答TidyDev，我不知道圖片標籤以及它如何根據寬度顯示。我看過懶惰的加載和緩存，我也發現一些服務器端的東西，這將有助於取決於平臺。 – Learn12

爲響應式移動網站開發加載速度。

回答

相關問題