HTML，CSS优化页面上有太多图像[关闭]答案

【问题标题】：HTML, CSS Optimizing page with too many images on it [closed]HTML，CSS优化页面上有太多图像[关闭]
【发布时间】：2019-02-07 05:18:57
【问题描述】：

我创建了一些餐厅网站，它有一个包含不同食物的菜单页面。问题是上述页面在首次加载时加载速度太慢。首先，我认为当你进入菜单页面时，所有带有适当图像（大约 200 张图像）的项目都在加载，这是问题的根本原因，但后来我设置了 JS 触发器，它点击页面上的某些菜单项-加载并仅加载 6 张图像。然而，它没有帮助。所以请描述一些优化我的页面以实现快速加载的方法。

提前非常感谢！ :)

【问题讨论】：

应该优化什么？帖子中没有可优化的代码。
@Teemu 我的意思是，任何避免图像加载的方法。我无法发布代码，因为它太大且不合适。
如您所见，如果没有代码，我们只能推测可能出了什么问题。您必须进行自己的研究以缩小代码范围。例如。删除脚本，直到页面加载速度更快，这样您就会发现正在减慢页面速度的脚本。如果所有的脚本都被删除了，页面仍然很慢，请删除其他源链接（如 CSS 样式表），到时候你会找出原因。
@Teemu 好吧，我试试，谢谢

标签： javascript html css web

【解决方案1】：

即使只加载 6 张图片，根据图片的大小，它也会很慢。考虑调整图像大小以优化速度。

您可以使用 Gimp / Photoshop 或此网站：https://tinypng.com

[编辑]

不要在生产环境中使用所有这些分离的文件：

<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/nivo-lightbox.css">
<link rel="stylesheet" href="css/nivo_themes/default/default.css">
<link rel="stylesheet" href="css/hover-min.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/style.css">

HTML 中的 CSS

你真的需要那么多 JS 文件吗？

<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/jquery.sticky.js"></script>
<script src="js/jquery.backstretch.min.js"></script>
<script src="js/isotope.js"></script>
<script src="js/imagesloaded.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/jquery.parallax.js"></script>
<script src="js/smoothscroll.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/custom.js"></script>

不要以这种方式使用，缩小所有并确保您使用的是缩小版的jquery，而不是jquery.js。

在这里查看：https://code.jquery.com/

试试 Grunt 来帮助你实现代码的自动化和最小化：https://gruntjs.com/

或者直接使用这个网站：https://www.minifier.org/

【讨论】：

6 张图片中的每张图片重约80 KB，是否足以减慢加载速度？
网站是什么？是在线的吗？其他事情正在使情况变得更糟。在此处或 CodePen 链接中发布您的代码
alfreda.com.az - 转到导航菜单，点击任何项目
你调用了太多的 CSS 文件和 JS 库。尝试将其全部缩小并仅放入一个/

【解决方案2】：

您应该优化所有图像：您可以为此使用在线工具： Compress jpeg
网址：https://compressjpeg.com/

Compress png 网址：https://compresspng.com/

您可以在上面上传许多图片，这将压缩图像的压缩文件夹。

优化所有图片后，您的网站速度将会提高。

【讨论】：

【解决方案3】：

使用 java script ajax 并为列表创建分页。即您将从数据库中获取数据并一次仅显示 10 个值。对于图像.. 选择一些常见的图像并创建精灵.. 这两件事对您的帮助最大。在你的每一个项目中..

【讨论】：