我的网站的性能报告
Performance report for myweb site
我正在开发一个网站，它即将被托管。由于页面加载速度低，我已经通过 gtmetrix.com 测试了我的网站页面速度性能。所以它的报告产生了两个问题作为页面速度低的原因。
影响页面加载速度的问题
使用 CSS 精灵组合图像
应使用 CSS 精灵将来自 abc.com 的以下图像组合成尽可能少的图像。
使用 CSS sprites 将图像组合成尽可能少的文件可以减少往返次数和延迟
下载其他资源，减少请求开销，并且可以减少
网页下载的总字节数。
指定图像尺寸
以下图像缺少宽度 and/or 高度属性。
为所有图像指定宽度和高度可以通过消除不必要的回流来加快渲染速度
并重绘。
...abc.com/banner.jpg（尺寸：512 x 33）
这就是瀑布
我可以使用 CSS 精灵
.
系统规格
- Laravel 5.5
- Bootstrap 3.3.7
我添加了响应式图片 bootstrap class
<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 网站时失去响应能力。
有人可以帮忙解决这个问题吗？我想指定图像的尺寸，而且它应该是响应式的。因为这会影响我的网站速度。
让我试着回答这个问题。
尝试更改您的以下代码：
<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 以查看解决问题的真实示例 "Specify image dimensions"；我在不牺牲响应能力的情况下指定了我的图像尺寸。尝试打开 post 页面以检查特色图片上的相同内容。
希望你能接受我的回答。
我正在开发一个网站，它即将被托管。由于页面加载速度低，我已经通过 gtmetrix.com 测试了我的网站页面速度性能。所以它的报告产生了两个问题作为页面速度低的原因。
影响页面加载速度的问题
使用 CSS 精灵组合图像
应使用 CSS 精灵将来自 abc.com 的以下图像组合成尽可能少的图像。
使用 CSS sprites 将图像组合成尽可能少的文件可以减少往返次数和延迟 下载其他资源，减少请求开销，并且可以减少 网页下载的总字节数。
指定图像尺寸
以下图像缺少宽度 and/or 高度属性。
为所有图像指定宽度和高度可以通过消除不必要的回流来加快渲染速度 并重绘。
...abc.com/banner.jpg（尺寸：512 x 33）
这就是瀑布
我可以使用 CSS 精灵
.
系统规格
- Laravel 5.5
- Bootstrap 3.3.7
我添加了响应式图片 bootstrap class
<img src="../abc.com/banner.jpg" class="img-responsive" alt="Responsive image" id="banner">。
所以我通过使用 id="banner"
#banner{
min-width : 512px ;
min-height: 33px ;
}
我的问题是当我添加自定义 css 网站时失去响应能力。
有人可以帮忙解决这个问题吗？我想指定图像的尺寸，而且它应该是响应式的。因为这会影响我的网站速度。
让我试着回答这个问题。
尝试更改您的以下代码：
<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 以查看解决问题的真实示例 "Specify image dimensions"；我在不牺牲响应能力的情况下指定了我的图像尺寸。尝试打开 post 页面以检查特色图片上的相同内容。
希望你能接受我的回答。