0

我正在开发一个网站,它几乎是托管的。由于页面加载速度低,我已经通过gtmetrix.com测试了我的网站页面速度性能。因此,它的报告产生了两个问题作为页面速度低的原因。

影响页面加载速度的问题

  • 使用 CSS 精灵组合图像

    以下来自 abc.com 的图像应使用 CSS sprite 组合成尽可能少的图像。

    使用 CSS sprite 将图像组合成尽可能少的文件可以减少往返次数和下载其他资源的延迟,减少请求开销,并且可以减少网页下载的总字节数。

  • 指定图像尺寸

    以下图像缺少宽度和/或高度属性。

    为所有图像指定宽度和高度可以通过消除不必要的回流和重绘来加快渲染速度。

    ...abc.com/banner.jpg(尺寸:512 x 33)

这是瀑布

瀑布 图片 02

我对 CSS 精灵没问题

.

系统规格

  • 拉拉维尔 5.5
  • 引导程序 3.3.7

为了响应图像,我添加了引导类

<img src="../abc.com/banner.jpg" class="img-responsive" alt="Responsive image" id="banner">.

所以我通过使用向图像添加了自定义 CSSid="banner"

#banner{
  min-width : 512px ;
  min-height: 33px ;
}

我的问题是当我添加自定义 css 网站时,它失去了响应能力。

所以有人可以帮忙吗?我想指定图像的尺寸,而且它应该是响应式的。因为这会影响我的网站速度。

4

1 回答 1

1

让我试着回答这个问题。

尝试更改以下代码:

<img src="../abc.com/banner.jpg" class="img-responsive" alt="Responsive image" id="banner">

进入:

<img src="../abc.com/banner.jpg" width="512" height="33" class="img-responsive" alt="Responsive image">

您需要删除 id "id="banner"" 以重新启用您的横幅响应能力。

您可以查看我的博客http://qibug.com以查看解决“指定图像尺寸”问题的真实示例;我在不牺牲响应能力的情况下指定了我的图像尺寸。尝试打开帖子页面以检查特征图像上的相同内容。

我希望你能接受我的回答。

于 2019-07-26T03:20:41.187 回答