html - 网站加载 block 状

Question

我发布了我的第一个网站 ( www.dirkwolthuis.nl)。这是一个包含大量图像和元素的单页网站。在我的 mac 上的 chrome 中，它加载正常并且可以滚动。在 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 中为 web 保存，您也总能从中挤出更多。

除此之外，您还可以使用 Google's page speed insights这将为您指出您的网站在哪里获胜以及在页面速度方面可以改进的地方