网站加载块状

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这将给你的指针作为到你的网站正在赢得而且它可以在网页速度方面得到改善