网站如何优化-(英文网站优化)

网站如何优化-(英文网站优化)

在建站的过程中，我们常常忙于专注于设计、内容推广等，以至于忘记了保持商业网站快速更新的最基本的部分：网站性能优化。事实上，速度是运营一个成功网站的关键因素，它应该始终是网站管理员的首要任务。

Web 性能优化始终是重中之重，尤其是现在竞争如此激烈。众所周知，更快的网站下载速度已被证明可以提高访问者的保留率和忠诚度以及用户满意度，尤其是对于网络速度较慢和使用移动设备的用户！

常见的网页优化方法 1.减少HTTP请求

一个完整的请求需要经过队列等待、DNS寻址、与服务器建立连接、发送请求、等待服务器响应、下载数据等“漫长”而复杂的过程。一般来说，网页请求的 HTTP 越多，加载速度就越慢。因为浏览器限制了单个域名下的一定数量的同时连接（通常是6-12）。为了避免瓶颈，使用资源合并、精灵图等来减少单个页面的请求数。这减少了 HTTP 请求和网页加载所需的往返次数。减少 HTTP 请求是影响最大的最重要的优化技术。

2.文件压缩

网页由 HTML、CSS 和其他代码文件组成。随着网页的复杂性增加，它们的代码文件和随后的加载时间也会增加。文件压缩可以将代码文件减少多达 80%，从而提高站点响应能力。通常使用 gulp 或 grunt 来压缩 web 代码，用于压缩图像。

3.浏览器缓存

缓存优化可以减少服务器负载、带宽使用和延迟，如果允许浏览器缓存您的站点文件（外部样式表、文件、图像等）意味着您无需在每次用户请求您站点上的网页时都下载文件. 这可以加快用户在导航到另一个网页时的体验，因为样式表、图像和字体等内容不需要重新下载，因为它们已经存储在用户的浏览器缓存中。

那么，我们如何让浏览器缓存文件呢？

当浏览器从我们的 Web 服务器请求文件时，服务器会做的一件事就是发送文件的 HTTP 标头。文件的 HTTP 标头包含有关所请求文件的元数据，以及有关浏览器应如何处理文件的说明。

我们可以指定的标准 HTTP 标头字段之一是 Cache- 设置我们希望如何缓存，Cache- 允许我们定义我们希望浏览器如何缓存文件。我们可以使用 Cache- 字段来告诉浏览器是否应该缓存文件网站如何优化，以及缓存多长时间。

您可以在中看到缓存字段

Cache-Control: max-age=2592000

顺便说一句，max-age 以秒为单位指定。2,592,000 秒 = 30 天。

对于文件将被缓存多长时间没有具体规则，但最佳做法是尽可能长时间地缓存文件。

缓存持续时间取决于您更新站点文件的频率以及要缓存的文件类型。例如，您可以为不经常更改的文件设置更长的 max-age，例如网站的 logo、JS 文件和 CSS 文件。

| 文件类型 | 缓存持续时间 | | --- | --- | | CSS | 1 年 | | | 1 年 | | 图片（例如PNG、JPG、GIF）| 1 个月 | | HTML | 不要使用缓存 |

对于 SVG 文件，我们可以使用 svg-- 来创建我们自己的图标库：

4.启用GZIP

虽然开启 GZIP 压缩可以在很大程度上压缩资源文件，但有一些注意事项：

如果您将其用作服务器，则可以使用插件来启用 gzip。如果使用 nginx 作为静态资源服务器，启用 gzip 的方法如下：

gzip  on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_http_version 1.0;
gzip_comp_level 6;
gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css image/jpeg image/jpg image/gif image/svg image/png;
gzip_disable "MSIE [1-6]\.";
gzip_vary on;

5. DNS -DNS

这会通知客户端我们稍后需要通过特定的 URL 获取资产，以便浏览器能够尽快解析 DNS。假设我们需要从网站下载 URL 中的图像或音频文件等资源。在 HTML 中，添加以下代码：

<link rel="dns-prefetch" href="//www.gogoing.site">

然后，当我们请求文件时，我们将不再需要等待 DNS 查找。一直在做类似的事情。如果您在 URL 栏中仅键入部分域名，它将自动预解析 DNS（有时甚至预渲染页面），从而节省每个请求的关键毫秒数。

资源预取 -

<link rel="prefetch" href="//cloud.gogoing.site/files/2020-08-07/95baf0bf-5878-4723-8ea0-159822f693ed.jpg">

与 DNS 相同。应该主要用于预加载静态资源网站如何优化，例如图像、CSS 和文件。整个文件将被下载并保存在浏览器缓存中。HTML 文档也可以预取。

但是，您不能依赖正在下载的资源。浏览器在空闲且没有其他任务要执行时下载资源文件。如果用户的网络连接速度较慢，它也会完全忽略大文件。

子资源 -

<link rel="subresource" href="//cloud.gogoing.site/files/2020-08-07/95baf0bf-5878-4723-8ea0-159822f693ed.jpg">

同。两者都从服务器预先下载指定的文件并将其存储在浏览器的缓存中。但不同的是，根据文档，它是这样工作的：

LINK rel="" 提供了一种与 LINK 语义不同的新型链接关系。rel="" 为后续页面提供低优先级资源下载，而 rel="" 允许在当前页面中提前加载资源。

因此，如果当前页面需要资产，或者早点而不是晚点，最好使用它，否则使用它。

预渲染——

预渲染是这里介绍的最强大的技术。从根本上确保具有所有必要静态资源的 URL 在后台完全加载和设置。您可以想象它会在新选项卡中预先打开 URL，但在用户实际打开页面之前它会一直隐藏。并且在实际页面下载期间发生的所有活动都将在后台发生。

但由于兼容性问题，一般情况下，我们会同时使用 和 来预加载 HTML 文档。

任何丢失的文件都会产生 HTTP 404 错误。如果请求一个不存在的脚本文件，因为浏览器在请求脚本文件时即使返回404，也会尝试按照方法解析响应的内容。这无疑会增加很多处理时间。

6.重绘和回流

在查看重绘和重排之前，让我们回顾一下浏览器的工作原理：

重绘——

由于节点属性的变化或样式的变化（例如更改、颜色、-color），需要更新屏幕的某些部分。此屏幕更新称为 ()。

回流焊 -

渲染树的一部分（或整个树）需要重新计算，包括元素的位置、宽度和高度，以及边框等几何图形，而所有其他受影响的元素的位置都由浏览器重新绘制，这个过程称为回流。更改单个元素会影响所有子元素、祖先元素和兄弟元素。

回流肯定会导致重绘。

通常，重排是由以下原因引起的： 激活伪类，例如 :hover 内容输入，例如输入输入 添加、删除样式表 添加、删除、更新 DOM 节点 使用和动画 DOM 节点以及使用 JS 操作块中的 DOM 节点 使用：无（重绘和重排）或：（仅重绘，因为不改变位置并且不影响后续节点的显示）隐藏 DOM 节点以防止用户操作，例如调整窗口大小、更改字体大小或滚动

如何减少重绘和回流 避免使用表格进行布局 通过为容器设置固定高度来限制受影响元素的使用，并且先缓存到局部变量中时，不要每次都直接从元素属性中读取 试试通过添加 / 修改来控制节点样式并减少 CSS 规则层次结构并使用复杂的 CSS 选择器来批量更新 DOM 并减少 DOM 深度。用于操作 DOM 更改数据。更新/克隆/替换节点时，先将节点样式设置为：none，替换后删除：none样式（共2次和2次）， 7.避免301重定向

重定向是性能杀手，应尽可能避免。重定向会产生额外的往返时间 (RTT)，因此在浏览器甚至开始加载其他资源之前，加载初始 HTML 文档所需的时间将迅速翻倍。

8.浏览器存储

使用浏览器存储（或）存储网站中使用的不可变数据，以保持页面加载并减少不必要的请求。在某些情况下（如商场），还可以保存首页数据，保证首页快速加载，减少白屏时间。

9.避免404错误