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中保存了网页，也可以随时挤出更多内容。

除此之外，您还可以使用Google's page speed insights，它可以指导您的网站获胜的位置以及可以在页面速度方面进行改进的地方

网站加载块

1 个答案: