|
|
当您拥有 CSS 文件时，您只需对外部文件进行更改，这些更改就会应用到整个网站。 拥有外部 CSS 文件还有其他好处。它允许您删除内联格式（例如字体标签），并将其替换为指示要应用的样式的 CSS 标签。这会减少网页上混乱的代码。 更少的代码意味着更小的文件大小。。 外部化 JavaScript 的好处 为 JavaScript 创建外部文件也有类似的好处。当您将 JavaScript 从各个网页移至外部文件时，您的网页只需要一行代码来调用 JavaScript 文件以获取信息。 JavaScript 往往又长又麻烦，因此做这一简单的事情可以将网页的大小减少一半。 你的 JavaScript 和 CSS 已经外部化了吗？ 检查 CSS 和 JavaScript 是否外部化很容易。转到您的网站主页并查看源代码。要查看源代码，请右键单击页面并选择：“查看页面源代码”。 BruceClay.com 上“查看页面源代码”的屏幕截图。 BruceClay.com 上“查看页面源代码件时的样子： <link rel=”stylesheet” href=”styles.css”> 如何外部化 JavaScript 首先要提到的是，有时网页上需要有 JavaScript 代码，例如，为了准确的跟踪或页面功能。 除了跟踪和功能之外，并非所有 JavaScript 代码都会损害页面速度并应外部化。
事实上，在某些情况下，使用内联 JavaScript 可以加快页面加载时间和性能，例如，在 JavaScript 阻止页面渲染的情况下。 在页面顶部使用内联 JavaScript 可以使页面顶部的内容对用户可见，而无需等待大型 JavaScript 文件加载。 因此，以下是外 沙特阿拉伯电报号码 部化 JavaScript 的方法： 通过使用网页的 HTML 源代码定位开始和结束 <script> 标记来识别要外部化的 JavaScript 代码。 剪切 <script> 和 </script> 之间的 javascript 代码。 使用记事本等文本编辑器创建一个新文档并将 JS 代码粘贴到新的空白文档中。 使用文件扩展名“.js”保存文件。 将文件上传到您的服务器并记下其路径。 返回原始 html 文件并插入以下内容，其中“path/filesource.js”是新创建的 .js 文件的 URL： <script language=”JavaScript” src=”path/filesource.js”></脚本> 现在，嵌入的 JavaScript 代码仅被一行替换。 当搜索引擎抓取网页时，它们只会阅读一行代码，然后才会继续访问页面的其余部分。 随后，更新，特别是首次输入延迟。（请注意，FID 将于2024 年 3 月被 Interaction to Next Paint (INP) 取代。） 如何外部化 CSS 要外部化样式表，只需按照与 JavaScript 文件相同的说明进行操作，不同之处在于使用 .css 文件扩展名保存文件。在原始网页代码中，您将用以下内容替换所有 CSS 编码： <link href=”cssfilename” rel=”stylesheet” type=”text/css”> 再次，您的原始页面上只剩下一行代码，以便为蜘蛛提供更简单的站点索引。
小步骤，大影响 外部化 JavaScript 和 CSS 并不能解决您的网站性能问题，但这是一个很好的开始。 我们合作的一位客户实施了这两个最佳实践，并将代码从 20,000 行减少到 1,500 行。随后，该网站的排名显着提高，并移至许多关键词的自然搜索结果的顶部。 因此，是的，当您提高网页性能时，它是有效且良好的起点。 需要帮助提高您网站的速度和搜索排名吗？联系我们获取免费的建议。 常见问题解答：如何使用涉及 CSS 和 JavaScript 的两个简单步骤来增强网站的性能？ 在动态的网络开发环境中，优化网站的性能对于用户满意度和搜索引擎排名至关重要。有效地利用 CSS 和 JavaScript 可以显着提高网站的速度和功能。让我们深入研究两种简单但强大的技术来提高网站的性能。 缩小并连接 CSS 和 JavaScript 文件 在优化网站速度时，减小文件大小至关重要。将多个 CSS 或 JavaScript 文件合并为一个文件可以最大限度地减少 HTTP 请求，从而缩短加载时间。缩小删除不必要的字符（空格、注释）而不改变代码功能。 富有洞察力的提示： 使用 Grunt 或 Gulp 等构建工具来实现自动缩小和串联过程。考虑使用内容交付网络 (CDN) 来加快文件交付速度。
|
|
发表于 2024-2-15 12:19:51