谷歌推荐的页面加载时间：十大Web开发框架可更快地加载页面

如果您运行的是 Google Ads，则需要优化页面加载时间。Google 推荐的页面加载时间低于 3 秒。原因很明显：更快的页面等于更好的用户体验。因此，谷歌将以更好（更便宜）的广告出价来奖励你。

谷歌为什么这样做？因为如果用户在使用他们的产品时有很好的体验，他们就更有可能留下来。这意味着谷歌将获得更多的广告收入。因此，他们在鼓励广告商取悦用户方面具有既得利益。另一方面，他们会因为着陆页速度慢而惩罚您。

在本文中，我们将探讨 Google 推荐的页面加载时间，以便您了解如何让搜索引擎和潜在客户对您的页面速度感到满意。

 

满足 Google 推荐的页面加载时间可提高您的质量得分

您的质量得分将有助于确定您为广告支付的费用。它是在 1 到 10 的范围内。您的质量得分越高，您支付的费用就越少，这使得改善该指标成为一项具有成本效益的努力。质量得分会将您的关键字、广告和着陆页考虑在内。您的着陆页越相关且用户友好，它就越能提高您的分数。页面加载速度是此计算中的一个因素，还有其他重要方面，如相关内容、链接和轻松导航。

改进目标网页后质量得分的变化速度有多快？

Google 拥有定期检查您的 Google Ads 着陆页的算法。如果您最近进行了改进，他们最终会调整您的质量得分。但是，最好在几个月或几周而不是几天的时间轴上期待这一点。

我的网站布局也会影响转化吗？

您的网站布局和内容会以各种方式影响转化。这里有几个例子：

• 您的网站导航不佳。用户不容易访问菜单和其他选项。因此，用户可能会到达您的网站，但由于挣扎，几分钟后就离开了。此外，较高的跳出率会对您的质量得分产生负面影响，使问题更加复杂。
• 您的着陆页内容并未兑现与您的 Google 广告相同的承诺。这会让用户感到困惑，但也会告诉谷歌降低你的质量得分。结果：转化次数减少，价格更高，以吸引新访客回访。

哪些框架有助于加快着陆页加载速度？

特定的开发框架和工具可以帮助您提高速度以满足 Google 推荐的页面加载时间。

加速移动页面 (AMP) 是当今比较流行的选项之一。它非常快。但是，它确实有一些限制。也就是说，您不能添加自己的自定义 JavaScript (JS)。如果以任何方式添加自定义 JavaScript，它将不会被验证为 AMP 页面。因此，Angular 是快速、响应迅速且现代的登录页面的最佳选择。

当然，还有其他选择。但由于 Angular 往往是满足 Google 推荐的页面加载时间的最佳选择，所以让我们从这里开始。

1.AngularJS _

Angular 基于 typescript，是领先的 Web 应用程序前端框架。谷歌工程师 Misko Hevery 和 Adam Abrons 于 2010 年创建了 AngularJS（“Angular 1”），并于 2016 年推出了修订后的 Angular 2 版本。

有多少网站使用这个框架？

目前大约有 350,000（30 万）个网站使用 AngularJS。这包括亚马逊、Lyft 和谷歌等大公司。

AngularJS 的优点

• 数据绑定：除了双向绑定之外，angular 2 及之后的版本还支持 3 种其他类型的数据绑定，即单向属性绑定、事件绑定和插值。
• 增强的 RXJS：导致大约闪电般的快速编译时间。2.9 秒并修改启动 HttpClient。
• 丰富的资源和支持：Google 提供丰富的资源宝库，每 6 个月推出一次新的更新和改进。
• 支持渐进式 Web 应用程序： Angular 是第一个集成渐进式 Web 应用程序开发功能的框架。
• MVVM（模型-视图-视图模型）允许开发人员独立地在同一个应用程序和数据池上工作。
• 本机移动应用程序：由 Angular 提供支持的本机脚本支持为 iOS 和安卓开发本机移动应用程序。
• 单页应用程序：最适合单页应用程序。

AngularJS 的缺点

• 困难的语法—— 在 angular2 及以后的版本中采用 Typescript 后，Angular 在语法复杂性方面有了很大的飞跃。然而，对于任何从 vanilla JS 或 jQuery 过渡的人来说，它都构成了一个陡峭的学习曲线。
• 迁移——从旧版本的 Angular 迁移到新版本会带来独特的问题。
• 大学习曲线——Angular 在主要前端框架中拥有最陡峭的学习曲线。这在历史上导致了很高的放弃率。
• 需要的 MVC 知识——有必要了解模型-视图-控制器 (MVC) 架构，但并非每个开发团队都具备。

2.ReactJS _

React 用于创建交互式用户界面 (UI)。Facebook 工程师乔丹·沃克 (Jordan Walke) 于 2013 年编写了该软件。就用户群而言，React 已经超越了 Angular。React 具有无需重新加载页面即可呈现数据和更新信息的优势。它擅长网络应用程序和移动应用程序。它可以成为满足 Google 推荐的页面加载时间的有用工具。

有多少网站使用这个框架？

React 在大约 400,00 个网站上使用，包括 ESPN 和 Microsoft 等公司。

ReactJS 的优点

• 性能——React 以灵活高效着称。它还可以轻松地与其他框架很好地集成。您可以选择让它从客户端或服务器端获取资源。所有这些都有助于提高性能（速度）和 Google 推荐的页面加载时间。
• 资源——由于 Facebook 有一个维护 React 的团队，因此有很多文档都得到了很好的解释。此外，还有许多行业领先的博客和其他资源可帮助您学习和优化该框架。
• 向后兼容性——如果您使用 CodeMods，则可以相对容易地转换到新版本或旧版本以满足您的需求。
• 易于维护的组件结构： ReactJS 的基于组件的架构有助于提高代码的可重用性，并使大型项目的维护变得更加容易。
• 丰富的社区： React 在 GitHub 上有近 1300 名贡献者，比任何其他库/框架都多。
• 单向数据流：单向/单向向下仅数据绑定通过流量控制做出反应有助于确保对子元素结构所做的任何更改都不会影响父元素结构。

ReactJS 的缺点

• 臃肿——这似乎有悖常理。但是，与其他一些框架相比，它几乎可以提供太多选择。它适用于它擅长的大型站点和应用程序。
• SEO 问题——Google、Yahoo 和 Bing 在尝试使用 React 抓取和索引网站时可能会遇到问题。反过来，它不适合那些严重依赖搜索引擎优化 (SEO) 来获取网络流量的人。
• JSX：JSX的使用增加了另一层复杂性。JSX 是一个预处理器，它为 JS 添加了 XML 语法扩展。尽管 JSX 有助于代码以更安全、更快速的方式做出反应，但新开发人员很难掌握。
• 需要组装工具： React 需要大量组装工具才能正常运行并与其他库和框架兼容。

3.View.js _

Vue 是另一个旨在简化 UI 设计的 JS 框架。它是 Evan You 于 2014 年创建的开源框架。根据 2018 年谷歌“JS 现状”调查，它最近越来越受欢迎，甚至取代了 AngularJS。它的主要吸引力在于维护它的开发团队不断提供更新和创新。它大量借鉴了它的同类 Angular 和 React，以提供轻量级但功能强大的选项。

有多少网站使用这个框架？

大约 400,000 个网站实施了 Vue。这包括 gitlab、Upwork 和 Zoom。

Vue.js 的优点

• 快速配置——通过集成的 MVC 模型，与 React 和 Angular 等其他框架相比，配置快速简便。
• 灵活——使用灵活的模块，Vue 可以帮助具有其他框架经验的开发人员。他们可以毫不费力地快速适应术语。
• 快速学习曲线——Vue 以比 Angular 或 React 更快的学习曲线而闻名。通过对 HTML 和 JavaScript 的一些粗略了解，您可以快速开始工作，根据需要实施解决方案。
• 轻量级——与其他框架相比，Vue 非常轻量和紧凑。压缩后，Vue 的大小为惊人的 18 kb。这是保持在 Google 推荐的页面加载时间之内的关键。
• 集成——无论你是需要一个 SPA 用于登录页面还是一个大型应用程序，Vue 都可以满足这些需求。它还允许与服务器端软件（如 Django 和 Laravel）轻松集成。
• 过渡——Vue 允许您使 DOM（文档对象模型）元素响应更轻松的实时过渡。

Vue.js 的缺点

• 支持不佳——与其他选项相比，Vue 因其相对较小的学习资源池而未能给人留下深刻印象。为框架的新用户找到支持或答案可能需要更长的时间。
• 小型社区——缺乏对说英语的开发人员的支持的部分原因是社区中的许多人来自东欧。额外的语言障碍和小社区加剧了为紧迫问题寻求帮助的难度。然而，Vue 仍在崛起，因此这种情况可能会发生变化，宜早不宜迟。

4.Human.js

这个开源前端框架是基于 JS 构建的。它以前被称为 Sprout Core，直到 2011 年 Yehuda Katz 改变了它的名字并将它带向了一个新的方向。它源自 MVM（模型-视图-模型）模式。得益于它使用的 Glimmer 引擎，Ember 提供了快速的渲染速度。它的检查工具以其在错误调试中的易用性而闻名。此外，它跨链接属性绑定数据的能力使其从许多竞争对手中脱颖而出。

有多少网站使用这个框架？

全球约有 40,000 个网站在使用 Ember，其中包括 LinkedIn。

Ember.js 的优点

• 模板——Ember 倾向于用户友好。这在很大程度上归功于它为 UI 创建提供的大量模板。Handlebars 构成了这些模板的核心，它消除了不必要的代码以提高效率。
• CLI – Ember 的命令行界面 (CLI) 带有内置的 Ember Stack。对于严重依赖 Sass/Less、Handlebars 或 Coffee Script 的 Web 开发人员，他们会很高兴知道它与这些框架很好地集成。

 

Ember.js 的缺点

• 市场份额下降——Ember 的增长速度不如其他框架。Netflix 和 Airbnb 是两家已经转向 React 的著名公司。
• 缺乏更新的支持——由于社区的萎缩，在线资源的缺乏使得寻求帮助变得困难。
• 复杂 – IT 很难学习，对于较小的项目，配置时间太长。有更简单的方法可以达到 Google 推荐的页面加载时间。

5.流星

Meteor JS 是一个开源后端，由 Meteor Development Group 开发。它是一个用 Node JS 编写的 JS 框架，旨在用于跨平台的 Web 和移动应用程序。它适用于 iOS 和 Android。Meteor 带有 Blaze 引擎。它解决的一个主要痛点是需要有多个库是最新的。Meteor 仅使用 Vanilla（标准）JavaScript。

有多少网站使用这个框架？

Meteor 在全世界大约 13,000 个网站上使用，包括 MTV。

流星的优点

• 简单——Meteor 让生活变得简单。它可以处理客户端代码、前端任务和后端任务。它无需学习其他 JavaScript 框架即可完成所有这些工作。出于这个原因，它经常被吹捧为对初学者来说很容易。那些拥有相对绿色开发团队的人可能会选择 Meteor，因为他们可以更快地启动和运行应用程序。
• 有用的库和包——虽然你只需要 JS，但社区中的人们创建和共享了许多不同的库。它们往往是可靠的和更新的。
• 实时测试——在开发应用程序和登录页面时，测试至关重要。为此，Meteor 带有自己的内置工具。它被称为速度并且与大多数常见的 JS 框架集成。这包括 Jest、Jasmine 和 Mocha。
• 有用的社区——Meteor 社区中有许多在线教程。他们还提供文档以帮助初学者缩短学习曲线。
• 数据库——MongoDB 正在迅速成为更受欢迎的数据库之一。Meteor 与 MongoDB 无缝协作，MongoDB 提供了优于 SQL 和其他遗留技术的优势。
• 实时重新加载——当一段代码被修改时，Meteor 将实时加载页面。仅重新加载已更改的 DOM 元素，从而节省计算资源和时间以增强用户体验。
• 本地移动应用程序——Meteor 是多才多艺的。它不仅可以用于构建 Web 应用程序，还可以在 iOS 和 Android 上构建健壮的原生应用程序，使其跨平台。

流星的缺点

• 品牌推广——由于品牌推广不佳，Meteor 的用户数量有所下降。这缩小了可用的社区和知识库。
• 集成度低——与其他技术相比，集成 Meteor 是出了名的困难。
• 有限的数据库支持——它不支持关系型 SQL 数据库。相反，它只支持 NoSQL 和 MongoDB。

6.聚合物

Polymer 是另一个可以创建跨平台和跨浏览器应用程序的开源 JS 库。它利用可重用和通用的 Web 组件。谷歌的大部分主要网络服务都使用 Polymer。这包括 Google Play 音乐、YouTube、Allo 和 Google 地球。作为开发人员，您可以使用 HTML 和 CSS 来创建自己的组件。

有多少网站使用这个框架？

估计有 65,000 个网站在使用 Polymer。

聚合物的优点

• 定制——有时，定制是必要的。聚合物使这变得无缝。
•  闪电般的速度——与基于 JS 构建的类似前端框架相比，它的速度令人印象深刻。更有可能实现 Google 推荐的页面加载时间。
• 绑定——单向或双向数据绑定可以同样容易地实现。
• 跨浏览器兼容性——跨浏览器测试不仅仅是事后的想法——它是 Polymer 的主要特性。它在 Chrome 和 Safari 上运行得特别好。

聚合物的缺点

• 不在服务器端呈现——这会产生额外的瓶颈，从而降低速度。
• 稀缺资源——由于它主要供谷歌内部使用，因此没有太多关于 Polymer 的公开信息。

7. 骨干网.JS

Backbone 为 Web 应用程序提供底层结构。它提供绑定到自定义事件的模型。有各种功能和视图的强大 API。它的事件处理允许您通过 Restful JSON 接口连接到您当前的 API。

有多少网站使用这个框架？

大约有 100 万个网站使用它，包括 Reddit.com。

Backbone.js 的优点

•  jQuery –您可以使用 jQuery 快速部署小型应用程序。
• 消除混乱——您可以使用事件驱动的通信来代替混乱的代码。
• 同步——简化了 RESTful API。
• 最小编码——使用标准的 Backbone 约定，您可以用更少的代码实现更多。

使用 BackBone.js 的缺点

• 难以理解– JS 新手会发现语法复杂且令人困惑
• 更多开发时间——您可能会消耗宝贵的开发资源或推迟截止日期。

8.颤振

这个 UI 软件开发工具包是开源的。Google 创建它是为了简化 Linux、Mac、Android、Windows 和 iOS 应用程序的开发。

有多少网站使用这个框架？

目前尚无准确估计使用此框架的网站数量，但开发人员也很感兴趣地尝试使用此框架。

颤振的优点

• 快速开发——有状态热重载允许快速开发。小部件易于访问，并为富有创意、美观的本机界面提供了一系列丰富的功能。
• 富有表现力的用户界面——该架构是分层的，以允许在本地环境中快速交付新功能。
• 本机性能——Flutter 允许的本机性能是加速开发的关键。代码、图标和编译器都是让您的生活更轻松的软件套件的一部分。

颤振的缺点

• 新——这项技术仍然相对较新，并且还在不断发展。这意味着您不会立即获得对您需要的每个库的支持。
• IOS：因为 Flutter 是 Google 的产品！Flutter 构建的应用程序在 Android 中非常有趣，但在 iOS 中面临一些困难。应用程序的大小也更大。

9.离子

Ionic 是一个完全开源的软件开发工具包 (SDK)，用于移动应用程序开发。Max Lynch、Adam Bradley 和 Ben Sperry 是该软件的幕后推手，最初于 2013 年发布。它是流行的 AngularJS 框架的一个分支。

有多少网站使用这个框架？

虽然确切数字未知，但据信有成千上万的开发人员使用该软件在移动设备上创建本机应用程序。

离子的优点

•  一次开发——Ionic 提供卓越的跨平台开发。一旦您开发了一次应用程序，它就可以无缝地部署在 Windows、Android 和 iOS 上。
• 强大的应用程序开发——因为它是基于 Angular 构建的，所以这是一个强大的 SDK，允许您以几乎任何您认为合适的方式自定义您的应用程序。
• 很少维护——几乎没有维护可言，因为它依赖于久经考验的真正网络技术，如 HTML、CSS 和 JavaScript。

离子的缺点

• 性能可能会受到影响——你在跨平台兼容性和简单性方面获得了什么，但你却失去了速度。Ionic 可能会导致您超出 Google 推荐的页面加载时间范围。
• 特定知识——需要一套非常特定的技能才能在 Ionic 中有效发展。
• 复杂——在应用程序中构建导航的过程很复杂，因为 UI 过程隐藏在成堆的文档之后。

10. 加速移动页面 (AMP)

AMP 是一个基于 HTML 的开源框架。它由 AMP 开源项目维护。谷歌创建它是为了与 Facebook Instant Articles 和 Apple News 竞争。它的构建主要是为了以最快的方式交付移动页面。它几乎就像是为了满足 Google 推荐的页面加载时间而设计的。

有多少网站使用这个框架？

大约有 50 万个网站正在使用 AMP。

AMP 的优点

• 快速加载时间——AMP 几乎可以瞬间加载页面，让您可以在各种设备上快速创建移动页面。
• 可转换 –即使您使用的是 Drupal、WordPress 或其他内容管理系统，您也可以很容易地将您的页面转换为 AMP。
• 流行 – Twitter、Bing，当然还有 Google 一贯使用 AMP。对于那些希望提高对 AMP 的理解和使用的人来说，资源比比皆是。
• 可以使用 CSS——能够使用 CSS 是一个巨大的好处。稍后，您可以自定义页面样式并获取其他资源以创建吸引访问者的用户界面。
• 开箱即用的优化 –优化您的网站可能需要时间。幸运的是，AMP 消除了进行这些调整的大部分需求，开箱即用。
• 开放源代码——通过开放源代码，您可以确切地知道幕后获得的代码是什么。

AMP 的缺点

• 难以实施——除非您使用的是 WordPress，否则一开始启动和运行可能具有挑战性。
• Little Analytics——对于分析爱好者来说，缺乏数据分析会带来很多挫折感。

包起来

由于 Google 推荐的页面加载时间是您的广告系列效果和用户参与率的重要因素，因此当您使用更轻、更快的框架时，您将获得更大的成功。这样做可以让您获得更快的时间，从而有利于访问者、您的广告成本和您的转化。

 

本文中的框架各有优缺点。如果您的开发主要是为了移动体验并相应地驱动广告，那么 AMP 似乎是明显的领先者。但是，您应该选择符合团队技能、当前设置和特定广告目标的框架。