WordPress divi主题

如何缩小网站的 CSS、HTML 和 Javascript

by | May 15, 2022 | Divi主题使用教程 | 0 comments

5分钟生成10篇英文软文article forge软件试用

当您缩小网站的 CSS、HTML 和 Javascript 文件时,您可以从网站的页面加载速度中节省一些宝贵的时间。 现在我们不是在谈论将您的页面加载速度减半或任何东西,但是当涉及到您网站的速度时,任何一点点都有帮助。 您的网站加载速度不仅对首次访问者很重要,而且对于移动搜索引擎排名也很重要。

google广告开户

术语“缩小”是编程术语,描述了删除源代码中不必要字符的过程。 这些字符包括空格、换行符、注释和块分隔符,它们对我们人类很有用,但对机器来说是不必要的。 我们会缩小包含 CSS、HTML 和 Javascript 代码的网站文件,以便您的网络浏览器可以更快地阅读它们。

这是一个 CSS 缩小的示例。

缩小前的 CSS

/* Layout helpers

----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

缩小后的 CSS

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

显然,这只是一个使用 CSS 代码片段的小例子,但您可以想象在压缩数千行代码时节省的空间量。 因此,如果您想手动执行此操作,从技术上讲是可以的。 但是你会冒很大的错误风险,并且不必要地浪费宝贵的时间或你的生命!

接受我的建议并使用您可以使用的工具。

手动缩小文件的在线工具

值得庆幸的是,您不必成为开发人员或了解任何编程语言即可缩小您的站点文件。 缩小已成为网页设计领域的标准做法,因此得知有许多出色(且免费)的工具可以为您完成工作,您应该不会感到惊讶。

以下是一些帮助您入门的有用工具的列表。 由于其中许多可以缩小不止一种代码类型,因此我在括号中包含了代码类型选项。

WordPress divi主题
  • Closure Compiler(仅限 JS)- Closure Compiler 是 Closure Tools 的一部分,这是 Google Developers 提供的一套工具。 它允许您缩小 Javascript 以及其他有用的优化。 您可以通过输入 js 文件位置的 URL 来提取您的 Javascript,然后选择您希望如何优化和格式化代码。 例如,您选择仅在需要时针对 Whitespace 优化代码。 一旦你点击编译按钮,它会为你缩小(或编译)代码,并检查你的代码是否有任何错误。
  • cssminifier.com 和 javascript-minifier.com(CSS 和 JS)—— Andrew Chilton 的这两个缩小器易于使用。 只需粘贴您的代码,然后单击“缩小”按钮即可输出缩小后的代码。 为方便起见,您甚至可以将输出代码下载为文件。
  • csscompressor.net(仅限 CSS)——这款在线 CSS 压缩器快速、简单且免费使用。
  • jscompress.com(仅限 JS)- 这个 JavaScript 压缩工具允许您通过复制和粘贴来压缩 JavaScript 代码,但您也可以一次上传多个 JavaScript 文件。 这非常适合将 JavaScript 文件合并到一个文件中以提高页面加载速度。
  • refresh-sf.com(HTML、CSS 和 JS)——这个压缩器将缩小 JavaScript、CSS 和 HTML 代码类型。 如果您需要,它还包括每种代码类型的所有压缩器选项。
  • htmlcompressor.com(HTML、CSS 和 JS)——这个在线压缩/压缩工具支持 HTML、CSS 和 JS 代码类型。 它甚至支持不同的代码类型组合,如 CSS + PHP 和 JavaScript + PHP。 您甚至可以检查压缩代码是否有错误。
  • minifycode.com(HTML、CSS 和 JS)——该网站提供 JavaScript、CSS 和 HTML 的缩小器,具有简单干净的 UI,只需单击一个按钮即可缩小您的代码。 它还包括一个“美化器”工具,用于解压缩压缩代码以使其易于阅读(基本上与压缩相反)。
  • Dan’s Tools – Dan’s Tools 提供了一个 CSS Minifier 和一个 JavaScript Minifier。 这两种工具都有一个非常干净的用户界面,易于使用。 它们不提供任何高级选项,但非常适合常见的缩小目的。

如果您正在寻找一些离线工具来在本地缩小您的 HTML CSS 或 JavaScript,这里有几个选项:

如何缩小网站的 CSS、HTML 和 Javascript

订阅我们的 Youtube 频道

如何使用在线工具缩小 HTML、CSS 和 JavaScript

其中许多在线工具都有类似的过程,包括以下步骤:

粘贴您的源代码或上传源代码文件。
优化特定输出的设置(如果选项可用)
单击按钮以缩小或压缩代码。
复制缩小的代码输出或下载缩小的代码文件。

对于此示例,我将使用来自 minifycode.com 的缩小工具。

首先,在您的站点文件中找到 css 文件(通常命名为 style.css)并使用页面编辑器打开该文件。 然后将整个 css 代码复制到剪贴板。

minfy html css javascript

转到 minifycode.com 并单击 CSS minifier 选项卡。 然后将 CSS 代码粘贴到输入框中,然后单击 Minify CSS 按钮。

minfy html css javascript

fiverr建站WordPress程序员

生成新的缩小代码后,复制代码。

minfy html css javascript

然后回到你网站的css文件,用新的缩小版本替换代码。

就是这样!

重复相同的过程以缩小您网站的 JavaScript 和 Html 文件。

独立站选品工具

如何使用插件在 WordPress 中缩小 HTML、CSS 和 JavaScript

在 WordPress 中缩小 HTML、CSS 和 JavaScript 的最简单方法是使用插件。 这使您可以通过单击几下按钮自动优化您的 WordPress 站点文件以减少页面加载时间。

有很多插件可以完成这项工作,但我将简要提及一些出色的插件。

自动优化(免费)

minfy html css javascript
Autooptimize 可能是目前最流行的缩小插件。 它很受欢迎,因为它易于使用且具有强大的性能功能。 它可以聚合(组合脚本)、缩小和缓存您的代码。 作为奖励,您可以使用其他选项来优化 Google 字体、图像等。

要使用 Autoptimize,您可以从 WordPress 仪表板的插件 > 添加新的下下载、安装和激活插件。

minfy html css javascript

高质量外链购买

激活插件后,导航到设置 > 自动优化。 然后在主设置选项卡下,检查您要优化的代码(HTML、CSS 和/或 JavaScript),然后单击保存更改。

minfy html css javascript

您还可以单击页面顶部的“显示高级设置”按钮,进一步自定义您希望如何优化代码。

minfy html css javascript

就是这样! 非常简单而强大。

JasperAI 10000字免费额度试用

快速缩小(免费)

minfy html css javascript

Fast Velocity Minify 是另一个流行的、免费的和强大的 WordPress 插件,它不仅仅是缩小。 它缩小并结合您的 CSS 和 Javascript 以减少对服务器的 HTTP 请求,从而名副其实地为您提供快速的页面加载时间。 有可用的其他优化选项,但默认设置对大多数网站都适用。

要使用该插件,首先从您的 WordPress 仪表板安装并激活 if,方法是导航到插件 > 添加新的。 然后搜索“fast velocity minify”,一旦它在搜索结果中弹出,点击安装并激活它。

minfy html css javascript

激活插件后,您的文件将自动缩小并优化以获得最佳性能。 那很简单!

WordPress备份工具updrafplus

跳转到插件设置页面(设置 > 快速缩小)以查看所有可用选项。 在状态选项卡下,您可以看到已处理的 JavaScript 和 CSS 文件的有用列表。

minfy html css javascript

在“设置”选项卡下,您可以自定义优化文件的方式。 由于 HTML、CSS 和 JavaScript 的缩小已经处于活动状态,您可以使用这些设置来调整默认选项或禁用某些代码类型的缩小。 甚至还有优化 Google Fonts 和 Font Awesome 的选项。

minfy html css javascript

就是这样!

W3 总缓存(免费)

minfy html css javascript
W3 Total Cache 是一个很棒的缓存插件,包括缩小 HTML、JS 和 CSS 的选项。

minfy html css javascript

WP 最快缓存(免费)

minfy html css javascript
WP Fastest Cache – 这些免费的 WordPress 缓存插件非常受好评。 该插件执行各种性能优化,包括组合和缩小 HTML CSS 和 JavaScript 以获得更好的性能。

安装插件后,只需单击 WordPress 仪表板侧边栏中的 WP Fastest Cache 选项卡(带有惊人的猎豹图标的选项卡)。 在设置选项卡下,您将找到组合和缩小 HTML 和 CSS 文件的选项。 尽管缩小 JavaScript 仅在专业版中可用。

minfy html css javascript

最后的想法

如果您想要更快的页面加载时间和更好的性能分数,您将希望缩小 HTML、CSS 和 Javascript 文件。 借助所有可用的在线工具,您可以轻松地为任何网站缩小代码。 对于您的 WordPress 用户,有一些强大的插件可以通过点击几下自动缩小这些文件。 上面的插件只是其中一些出色的插件,它们可以处理其他性能优化中的缩小。 事实上,你可能已经有一个性能类型的插件,它已经可以缩小。 例如,许多缓存插件都包含缩小选项。 我希望这篇文章可以帮助您确定最适合您的选择。

我期待在下面的评论中收到您的来信。

干杯!

5分钟生成10篇英文软文article forge软件试用
tiktok
WordPress divi主题