什么是缩小以及如何缩小 CSS、JS 和 HTML?

什么是缩小?

缩小是从文件中删除不必要的空格、格式和注释的过程。 一般HTML、CSS、JS文件类型都应该缩小,以提高页面加载速度。 由于谷歌等搜索引擎惩罚加载缓慢的页面,因此有必要优化这些资源文件。 此外,网站上的所有图片都应针对搜索引擎进行优化,以便页面加载速度更快并提供更好的用户体验。

如何创建缩小文件?

有许多工具可用于缩小文件。 如果您使用的是 WordPress 等内容管理系统,那么任务很简单。 W3 Total Cache 等免费插件将为您执行 CSS 和 JS 压缩以及 HTML 压缩任务。 像 WP Smush 这样的插件可以在不损失质量的情况下进行图像压缩。 但对于 Weebly 或 Wix 等其他网站建设者,您上传的每个外部文件都应在自行上传之前进行缩小。

为了减少您的工作量,您可以使用以下免费的 SEO 工具:

  • CSS 缩小器
  • JS 缩小器
  • HTML 缩小器
  • 图像压缩器

让我们看看如何使用这些工具来创建 CSS、JS 和 HTML 文件的缩小版本。 我们还包括用于优化搜索引擎图像的图像压缩器工具。

CSS 缩小工具

转到 CSS minifier 工具,您将看到以下两个选项:

  • 粘贴内容——如果您只有一个 CSS 文件需要压缩,则复制文件内容并将其粘贴到文本框中。 输入验证码并单击提交按钮以在屏幕上获得缩小的输出。 您还可以下载缩小的 CSS 文件并将其上传到您的网站 .min.css 延期。
  • 如果您有多个文件,请导航至“上传 CSS 文件“ 标签。 在这里,您一次最多可以上传 10 个文件,每个文件大小为 2MB。 从您的计算机中选择文件,然后单击“压缩文件” 按钮来获得缩小的输出。 您可以将文件下载到本地计算机并上传到您的服务器。

压缩结果将显示如下进度条:

CSS 缩小工具
CSS 缩小工具

JS 压缩工具

与 CSS minifier 类似,我们有一个免费工具来压缩您的 JavaScript 文件。 您可以上传多个文件并获取压缩文件,也可以粘贴单个文件的内容以通过下载选项在线获取输出。 您可以在此处访问 JS minifier 工具。

JS 压缩工具
JS 压缩工具

HTML 缩小器

HTML 缩小也是提高页面加载速度的重要因素。 您可以使用我们的免费 HTML 压缩工具获得 HTML 文件的缩小版本。 您最多可以上传 10 个文件并获取可以下载到您的站点的压缩文件。

HTML 压缩工具
HTML 压缩工具

图像压缩工具

提供优化的图像非常重要,因为网页上的每个图像都会向服务器发送单独的 HTTP 请求。 可以使用免费的图像优化工具删除不必要的数字数据。 您一次最多可以上传 10 张图片,每张图片的大小应小于 2MB。 该工具支持 PNG 和 JPG 图像格式。

图像压缩工具
图像压缩工具

奖金 – GZIP 压缩检查器

GZIP 是用于通过网络服务器压缩文件以节省带宽的文件格式。 大多数情况下,所有服务器都应该启用 GZIP 压缩,以便在请求时提供压缩文件。 您可以使用我们的免费工具检查 GZIP 压缩的状态。 该工具将向您显示使用 GZIP 压缩保存的数据大小。

GZIP 压缩检查器
GZIP 压缩检查器

该工具将向您显示 HTTP 标头信息,例如从服务器接收到的状态代码,可用于故障排除。

正常和缩小内容的示例

让我们尝试使用以下 CSS 找出正常和缩小的内容的外观:

/* Slider Comment1*/

#slider ul {
  position: relative;
  margin: 0;
  padding: 0;
  height: 200px;
  list-style: none;
}

/* Slider Comment 2*/

#slider ul li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  width: 500px;
  height: 300px;
  background: #ccc;
  text-align: center;
  line-height: 300px;
}

具有上述 CSS 缩小器收费的缩小版本如下所示:

#slider ul{ position:relative; margin:0; padding:0; height:200px; list-style:none;}#slider ul li{ position:relative; display:block; float:left; margin:0; padding:0; width:500px; height:300px; background:#ccc; text-align:center; line-height:300px;}

如您所见,所有注释和空格都已从原始版本中删除。 通常,文件的缩小版本标有 .min 扩展名,如“style.min.css”。

  如何从百度站长工具生成 Robots.txt 文件?

类似文章