【发布时间】：2019-07-26 02:09:17
【问题描述】：
我正在开发一个网站，它几乎是托管的。由于页面加载速度低，我通过gtmetrix.com 测试了我的网站页面速度性能。所以它的报告产生了两个问题作为页面速度低的原因。
影响页面加载速度的问题
-
使用 CSS 精灵组合图像
以下来自 abc.com 的图片应使用 CSS sprite 组合成尽可能少的图片。
使用 CSS sprite 将图像组合成尽可能少的文件可以减少往返次数和延迟 下载其他资源，减少请求开销，并且可以减少 网页下载的总字节数。
-
指定图片尺寸
以下图片缺少宽度和/或高度属性。
为所有图像指定宽度和高度，通过消除不必要的回流来加快渲染速度 并重新粉刷。
...abc.com/banner.jpg（尺寸：512 x 33）
这是瀑布
我对 CSS 精灵没问题
。
系统规格
- Laravel 5.5
- 引导程序 3.3.7
为了响应图像，我添加了引导类
<img src="../abc.com/banner.jpg" class="img-responsive" alt="Responsive image" id="banner"> 。
所以我通过使用id="banner"向图像添加了自定义CSS
#banner{
min-width : 512px ;
min-height: 33px ;
}
我的问题是，当我添加自定义 CSS 网站时，它失去了响应能力。
所以有人可以帮忙吗？我想指定图像的尺寸，而且它应该是响应式的。因为这会影响我的网站速度。
【问题讨论】：
-
奇怪的是，一张图片会导致您的网站加载缓慢。除非它很大并且没有经过优化。看到您的网站加载的瀑布图会很有趣。
-
@ngearing 实际上这不是一张图片。本网站的登陆页面包含 100 多张图片。我会用瀑布图更新我的问题
标签： html css twitter-bootstrap-3 responsive gtmetrix