amp 优化_在没有AMP的情况下优化您的网站：优化清单

最新推荐文章于 2024-09-22 17:12:26 发布

daique1908

最新推荐文章于 2024-09-22 17:12:26 发布

阅读量294

点赞数

文章标签： python java 人工智能编程语言大数据

amp 优化

如果您想不使用AMP等现成的方法手动优化网站的性能，您需要采取哪些关键步骤？

在我的课程“ 不使用AMP来优化您的网站”中的这段视频中，您会发现一个简单的清单，可以用来确保您的网站加载速度与AMP一样快，甚至更快。

在没有AMP的情况下优化您的网站：优化清单

优化清单

这是我们将使用的基本优化清单：

加载速度应等于或快于同一站点的AMP版本。
尽早加载网络字体以使它们进入。
高效，小巧CSS在头部分内联加载。
在外部文件中编写CSS，以进行更实际的开发。
合并并缩小JavaScript。
设置构建过程以使以上两件事发生（我们将使用Gulp）。
仅使用异步JavaScript。
延迟JavaScript，以免阻止渲染（在正确的时间运行JS）。
Vanilla JS，因此没有JS依赖关系以最小化要加载的代码量。
首选简单的JS。
尽可能不创建JS后备广告。
在图片和iframe（视频等）上使用延迟加载。
防止回流以避免布局重新计算。

如您所见，此清单是我们需要完成的部分任务，是我们需要遵循的部分原则，也是我们要实现的目标。让我们更详细地研究它们中的每一个。

加载速度快于或快于同一站点的AMP版本

我们列表中的第一件事是一个目标，也就是说，我们希望我们的站点加载速度比同一站点的AMP版本快或快。在开发过程中不断检查加载时间是一个好主意，因此这就是我们在完成所有工作时要做的事情。

尽早加载Web字体

现在让我们进入需要做的技术工作。首先要考虑的是，我们希望尽快加载将要使用的所有Web字体。

网络字体通常是相对较大的文件，在加载这些网络字体之前，您无法正确显示内容。因此，我们将确保在图片中尽早加载这些网络字体，这可能是第一件事。

头部分中高效的内联CSS加载

我们要做的下一件事是确保CSS非常高效且尺寸很小。

有时，您可能会想走捷径，将大量CSS库包含到您的站点中，以帮助加快开发过程，即使大多数CSS不是必需的。

放入大量CSS文件可能有助于加快开发速度，但可能会减慢您的网站速度并降低搜索引擎中网站的性能。我说这是因为加载速度现在是排名因素。因此，对于您CSS来说，尽可能地小巧高效是很重要的。

您还将使用该CSS并将其内联加载到站点的头部。这是AMP使用的技术，也是一种出色的优化技术。因此，这肯定是我们自己的优化过程所要坚持的。

在外部文件中编写CSS

即使我们CSS将在开头部分内联，我们仍然希望在单独的文件中使用CSS。试图直接将CSS写入HTML文件的开头部分实际上不是很实用。因此，我们将进行所有设置，以便我们可以在外部处理CSS文件，然后稍后将它们内联到HTML文件中，以便我们两全其美。

合并并缩小JavaScript

我们要做的下一件事是确保最大程度地组合并缩小我们正在使用JavaScript。

使用AMP的缺点之一是您必须引入多个JavaScript文件，并且每个文件都必须单独进入。但是，在最大可能的范围内，我们将使用我们JavaScript并将其组合到一个文件中，以使浏览器请求的绝对数量最小。

设置构建过程

为了使这两种情况同时发生（在外部使用CSS并结合并缩小JavaScript），我们将建立一个构建过程，以使这两种情况自动发生。

我们将使用Gulp来做到这一点。这意味着您需要在系统上安装Node，并且还需要花一点时间来使用终端。但是在课程中，我将逐步指导您完成操作，因此，即使您没有使用终端，也应该没问题。

仅使用异步JavaScript

接下来，我们将只使用异步（异步）JavaScript。这意味着我们将要加载JavaScript的方式不会阻止页面上的其他任何内容同时加载。

延迟JavaScript

我们将用JavaScript进行的另一件事是我们将推迟它。这意味着我们将把我们JavaScript推到渲染过程的最后。在我们完全不使用JavaScript进行任何操作之前，我们将确保网站上的所有其他内容均已完全加载。

仅适用于JavaScript

我们还将确保我们使用的所有JavaScript都是原始JavaScript，并且这样做是为了确保没有依赖性。例如，如果我们使用依赖于jQuery的灯箱，那么现在我们必须将jQuery加载到我们的网站中，这将增加文件大小和浏览器处理的处理量。

通常不必使用多个JavaScript库。通常，您可以使用原始JavaScript来实现所需的功能。

喜欢简单JavaScript

我们还将更喜欢简单JavaScript。因此，我们将尝试将JavaScript的文件大小减小到绝对最小。我们不需要太多的风吹草动。我们希望保持一切紧密和高效。

创建无JavaScript后备

关于JavaScript的最后一点是，我们要确保最大程度地迎合关闭JavaScript的人们。

使用我们将要创建的AMP版本的网站，如果我们关闭JavaScript，您会发现我们没有太多内容要看。

我们可以使用此网站做更多的事情，以使其对后备更加友好。但是在大多数情况下，AMP完全依赖JavaScript才能提供任何类型的内容。

使用我们的非AMP版本，我们的背景图片仍然可以正常显示，实际上，我们也在这里还为字体图标插入了一些后备内容，因为经常会阻止JavaScript的人也会阻止字体。

我们有一则消息，让人们知道为什么无法显示YouTube视频，以及CodePen所在的位置。

我们的图库仍然显示相同，然后在底部显示，如果没有JavaScript，我们只是将推文的文本版本显示为备用。

使用延迟加载

我们还将确保在图片和iframe上都使用延迟加载。如果您的网站很长，通常该人员会先查看该网站顶部的内容，然后他们会向下滚动并查看其余内容。

但是，您不想让他们等待内容的其余部分加载，然后他们才可以开始查看内容顶部的内容。因此，使用延迟加载，您只需要首先加载顶部的内容，然后随着人员向下滚动而逐渐加载其余内容。

防止回流

最后，我们还将确保防止回流。您经常会看到的是，特别是在移动设备上，随着加载较慢的元素（例如图像），页面布局的其余部分必须围绕新加载的图像重新调整自身。

这是不好的，原因有两个：

对于用户而言，这确实很烦人。他们将目光集中在一个地方，然后整个布局发生变化，他们丢失了正在阅读的文本，因此不得不再次查找。然后，它再次回流，整个体验非常糟糕。
浏览器要做的最昂贵的事情之一就是计算布局，并且您要确保浏览器只计算一次布局。因此，即使在图像加载之前，也要确保已为这些图像分配了正确的空间。因此，第一个加载的布局是正确的布局。