欧元符号,郝,白果-工厂牛仔裤,最全折扣信息,欧洲打折季攻略

admin 2019-07-16 阅读:249

最近,咱们把 Universe.com 的主页功用进步了 10 几倍。让咱们一同来探究一下咱们是怎么完成这个成果的,触及到了哪些技能。

一开端,咱们先来看看,为什么网站功用如此重要(在本文结尾附有本事例研讨的链接):

  • 用户体会:糟糕的功用导致无呼应,从 UI 和 UX 视点来看,这或许会让用户感到懊丧。
  • 转化率和收入:一般,呼应缓慢的网站会导致客户丢失,并对转化率和收入发作欠好的影响。
  • SEO:从2019 年 7 月 1 日开端,谷歌将对全部新网站默许启用移动优先索引。假如网站在移动设备上的呼应缓慢,而且没有合适移动设备的内容,那么它们的排名会下降。

在本文中,咱们将扼要介绍协助咱们进步页面功用的以下几个首要方面:

  • 功用丈量:试验室和现场测验东西。
  • 烘托:客户端和服务器端烘托,预烘托和混合烘托办法。
  • 网络:CDN、缓存、GraphQL 缓存、编码、HTTP/2 和服务器推送(Server Push)。
  • 阅览器中的 JavaScript:包巨细预算、代码拆分、异步和推迟脚本、图画优化(WebP、推迟加载、渐进)和资源提示(预加载、预取、预衔接)。

针对某些状况,咱们的主页是用 React(TypeScript)、Phoenix(Elixir)、Puppeteer(无头 Chrome)和GraphQL API(Ruby on Rails )构建的。在移动设备上的界面如下所示:

Universe homepage 和 explore

功用丈量

没有数据,只不过是空谈。—— W. Edwards Deming

试验室测验东西(Lab instruments)

试验室测验东西答应在受控环境中,用预界说设备和网络设置收集数据。凭借这些东西,调试任何功用问题和具有杰出重现性的测验就变得愈加简略。

Lighthouse是在本地核算机上审阅 Chrome 页面的超卓东西。它还供给一些关于怎么进步功用、可拜访性、SEO 等有用技巧。下面是一些模仿 Fast 3G 和 4 倍 CPU 减速的 Lighthouse 功用审阅陈述:

用 First Contentful Paint (FCP) 进步 10 倍功用的前后对照

可是,只运用试验室测验东西的缺陷是:它们纷歧定能发现实在国际的瓶颈问题,这些问题或许取决于终端用户的设备、网络、方位和许多其他要素。这便是为什么运用现场测验东西也很重要的原因。

现场测验东西(Field instrument)

现场测验东西使咱们能够模仿和丈量实在的用户页面负载。有许多有助于从实践设备中获取实在功用数据的服务:

  • WebPageTest——答应在不同方位的实践设备上履行来自不同阅览器的测验。
  • Test My Site——运用依据 Chrome 运用状况核算的 Chrome 用户体会陈述(Chrome User Experience Report,简称CrUX);它对大众敞开,并每月更新一次。
  • PageSpeed Insights——结合了试验室(Lighthouse)和现场(CrUX)数据。


WebPageTest 陈述

烘托

烘托内容的办法有许多,每种办法都有其优缺陷:

  • 服务器端烘托(Server-side rendering,简称 SSR)是在服务器端为阅览器获取终究 HTML 文档的进程。长处:查找引擎能够爬取网站而不履行 JavaScript(SEO)、快速初始页面加载、代码只存在于服务器端。缺陷:没有丰厚的网站交互、从头下载整个页面,对阅览器功用的拜访有约束。
  • 客户端烘托是运用 JavaScript 在阅览器中烘托内容的进程。长处:丰厚的网站交互、在初始下载后依据路由改变快速烘托、能够拜访现代阅览器功用(如,Service Workers的离线支撑)。缺陷:不支撑 SEQ、初始页面加载速度慢、一般需求在服务器端履行单页面运用程序(Single Page Application、简称 SPA)和 API。
  • 预烘托和服务器端烘托相似,可是它是在构建时期提早发作的,而不是在运转时发作的。长处:服务构建静态文件一般比运转服务器简略、支撑 SEO、初始页面加载快。缺陷:假如代码有任何改变,需求预先预烘托全部或许的页面、从头加载整个页面、站点交互不行丰厚、拜访阅览器功用受限。

客户端烘托

之前,咱们把咱们的主页和 Ember.js 结构一同完成为具有客户端烘托的 SPA。咱们遇到的一个问题是,Ember.js 运用程序包太大。这意味着,在阅览器下载、解析、编译和履行 JavaScript 文件时,用户只能看到一个空白的屏幕。

白屏

咱们决议用React重建该运用程序的某些部分。

  • 咱们的开发人员现已了解构建 React 运用程序(如,嵌入式小部件)。
  • 咱们现已有了一些 React 组件库,能够在多个项目之间同享它们。
  • 新页面有一些交互式 UI 元素。
  • 有一个具有许多东西的巨大的 React 生态体系。
  • 凭借阅览器中的 JavaScript,能够构建具有许多杰出功用的渐进式 web 运用程序(Progressive Web App)。

预烘托和服务器端烘托

例如,用React Router DOM构建的客户端烘托运用程序的问题, 依然和 Ember.js 的相同。JavaScript 开支大,而且需求一些时刻才干看到阅览器中的初次内容制作(First Contentful Paint)。

当咱们决议运用 React 后,咱们立刻就用其它潜在的烘托选项进行试验,以让阅览器更快地烘托内容。

运用 React 的惯例烘托选项


  • Gatsby.js使咱们能够用 React 和 GraphQL 预烘托页面。Gatsby.js 是个很棒的东西,它支撑许多开箱即用的功用优化。可是,对咱们来说,预烘托没有用,由于咱们或许有无数个页面,它们包含用户生成的内容。
  • Next.js是盛行的 Node.js 结构,它答应服务器端用 React 烘托。可是,Next.js 很自我,需求运用其路由、CSS 解决方案等等。咱们现有的组件库是为阅览器而构建的,与 Node.js 不兼容。

这便是咱们为什么决议测验一些混合办法的原因,测验从每个烘托选项中取得最佳作用。

运转时预烘托

Puppeteer是个 Node.js 库,它答应运用无头 Chrome。咱们期望让 Puppeteer 试试在运转时进行预烘托。这支撑运用一种风趣的混合办法:服务器端用 Puppeteer 烘托,客户端用激活烘托。这里有一些谷歌供给的有用诀窍,关于怎么运用无头阅览器来进行服务器端烘托。

用于运转时预烘托 React 运用程序的 Puppeteer


运用这种办法有如下长处:

  • 能够运用 SSR,对 SEO 来说,这很棒。爬虫程序不需求履行 JavaScript 就能看到内容。
  • 答应构建简略阅览器 React 运用程序一次,然后把它用在服务器端和阅览器中。让阅览器运用程序更快地主动让 SSR 更快,这是双赢。
  • 在服务器上用 Puppeteer 烘托页面一般比在终端用户的移动设备上更快(衔接更好, 硬件更好)。
  • 激活答运用对 JavaScript 阅览器功用的拜访来构建丰厚的 SPA。
  • 咱们无需事前知道全部或许的页面来预烘托它们。

可是,咱们在运用这个办法时遇到了一些应战:

  • 吞吐量是首要问题。在独自的无头阅览器进程中履行每个恳求耗费了许多资源。你能够运用单个无标题阅览器进程,并在独自的选项卡中运转多个恳求。可是,运用多个选项卡将会使整个进程的功用下降了。


运用 Puppeteer 进行服务器端烘托的体系结构


  • 安稳性。扩展或缩小许多无头阅览器,让流程坚持“热度”及平衡作业负载是个应战。咱们测验了不同的保管办法:从 Kubernetes 集群自保管到用 AWS Lambda 和 Google Cloud Functions 的无服务器。咱们注意到,后者在用到 Puppeteer 时有一些功用问题:


在 AWS Lambdas 和 GCP 函数上的 Puppeteer 呼应时刻


跟着咱们越来越了解 Puppeteer,咱们现已迭代了咱们的初始办法(如下所示)。咱们还进行着一些风趣试验,经过一个无头阅览器来烘托 PDF。还能够运用 Puppeteer 来进行主动端到端测验,甚至都不必写任何代码。现在,除了 Chrome,它还支撑 Firefox。

混合烘托办法

在运转时运用 Puppeteer 很具应战性。这是咱们为什么决议在构建时运用它,并凭借一个在运转时能够从服务器端回来实践用户生成内容的东西。与 Puppeteer 比较,它更安稳,而且吞吐量更大。

咱们决议测验一下 Elixir 编程言语。Elixir 看起来像 Ruby,可是运转于 BEAM(Erlang VM)之上,旨在构建容错且安稳的体系。

Elixir 运用Actor 并发模型。每个“Actor”(Elixir process)只占用很少的内存,约为 1-2KB。这样答应一起运转数千个独立进程。Phoenix是一个 Elixir web 结构,支撑高吞吐量,并在独立的 Elixir 进程中处理每个 HTTP 恳求。

咱们结合了这些办法,充分利用了它们各自的长处,满意了咱们的需求:

Puppeteer 用于预烘托,而 Phoenix 用于服务器端烘托


  • Puppeteer在构建时用咱们期望的办法预烘托 React 页面,并以 HTML 文件方式保存它们(App Shell 来自PRPL 形式)。

咱们能够持续构建一个简略的阅览器 React 运用程序,不需求在终端用户设备上等候 JavaScript 就能够快速加载初始页面。

  • 咱们的Phoenix运用程序服务于这些预烘托页面,并动态地把实践内容注入到 HTML 中。

这让内容 SEO 变得很友爱,答应依据需求处理许多不同的页面,而且更简单扩展。

  • 客户端接纳并当即显现 HTML,然后激起Recat DOM状况以持续作为惯例 SPA。

这样,咱们能够构建高度交互的运用程序,和拜访 JavaScript 阅览器功用。

运用 Puppeteer 进行预烘托、运用 Phoenix 进行服务器端烘托和激起运用 React


网络

内容分发网络(CDN)

运用 CDN 能够完成内容缓存,并能够加速其在国际范围内的分发。咱们运用Fastly.com,它为超越 10% 的互联网恳求供给服务,并为各种公司运用,如 GitHub、Stripe、Airbnb、Twitter 等等。

Fastly 答应咱们经过运用名为VCL的装备言语编写自界说缓存和路由逻辑。下图显现了一个根本恳求流的作业原理,依据路由、恳求标头等等来自定制每个进程:

VCL 恳求流

另一个进步功用的挑选是在边际运用 WebAssembly(WASM)和 Fastly。把它幻想成运用无服务器,可是在边际运用这些编程言语,如 C、Rust、Go、TypeScript 等等。Cloudflare 有个相似的项目支撑Workers上的 WASM.

缓存

尽或许多地缓存恳求对进步功用很重要。CDN 级别上的缓存能够更快地为新用户供给呼应。经过发送 Cache-Control 头来缓存能够加速阅览器中重复恳求的呼应时刻。

大多数构建东西(如Webpack)答应给文件名添加哈希值。能够安全地缓存这些文件,由于更改文件将创立新的输出文件名。

经过 HTTP/2 缓存和编码的文件

GraphQL 缓存

发送 GraphQL 恳求最常见的办法之一是运用 POST HTTP 办法。咱们运用的一种办法是在 Fastly 级缓存一些 GraphQL 恳求:

  • 咱们的 React 运用程序注释了能够缓存的 GraphQL 恳求。
  • 发送 HTTP 恳求前,咱们经过从恳求正文构建哈希值来附加 URL 参数,该恳求正文包含 GraphQL 恳求和变量(咱们运用Apollo Client自界说 fetch)。
  • 默许状况下,Varnish(和 Fastly)运用整个 URL 作为缓存键的一部分。
  • 这答应咱们持续在恳求正文中运用 GraphQL 查询发送 POST 恳求,并在边际缓存,而不会拜访咱们的服务器。


发送带有 SHA256 URL 参数的 POST GraphQL 恳求


以下是一些其它潜在的 GraphQL 缓存战略:

  • 在服务器端缓存:整个 GraphQL 恳求,在解析器级别上或经过注释形式声明性地进行缓存。
  • 运用耐久的 GraphQL 查询和发送 GET/graphql/:queryId 以便能够依靠 HTTP 缓存。
  • 经过运用主动化东西(如Apollo Server 2.0)或运用 GraphQL 特定的 CDN(如FastQL)与 CDN 集成。

编码

全部干流阅览器都支撑带有Content-Encoding头的 gzip 来紧缩数据。这能够让咱们给阅览器发送的字节更少,这一般意味着内容传递会更快。假如阅览器支撑的话,你还能够运用更有用的 brotli 紧缩算法。

HTTP/2 协议

HTTP/2是 HTTP 网络协议(在 DevConsole 中是 h2)的新版本。切换到 HTTP/2 能够进步功用,这归结于它和 HTTP/1.x 的这些不同之处:

  • HTTP/2 是二进制的,不是文本。解析更高效,更紧凑。
  • HTTP/2 是多路复用的,这意味着 HTTP/2 能够经过单个 TCP 衔接并行发送多个恳求。它让咱们不必忧虑每个主机约束和域分片的阅览器衔接。
  • 它运用头紧缩来削减恳求 / 呼应巨细开支。
  • 答应服务器主动推送呼应。该功用适当风趣。

HTTP/2 服务器推送

有许多编程言语和库并不彻底支撑全部 HTTP/2 功用,原因是它们为现有东西和生态体系(如,rack)引进了破坏性更改。可是,即便在这种状况下,依然能够运用 HTTP/2,至少能够部分运用。如:

  • 在惯例 HTTP/1.x 服务器前运用 HTTP/2 设置代理服务器,如h2o或nginx。例如 Puma 和 Rails 上的 Ruby 能够发送Early Hints,这能够启用 HTTP/2 服务器推送,但遭到一些约束。
  • 运用支撑 HTTP/2 的 CDN 供给静态财物。例如,咱们用这种办法给客户端推送字体和一些 JavaScript 文件。


HTTP/2 推送字体

推送要害的 JavaScript 和 CSS 也能够很有用。仅仅不要过度推送,并防范某些圈套。

阅览器中的 JavaScript

包巨细的预算

第一条 JavaScript 功用规则是不要运用 JavaScript。我这么以为。

假如咱们现已有现成的 JavaScript 运用程序,那么设置预算能够改善包巨细的可见性,并让全部人都停留在同一个页面上。超预算迫使开发人员三思而后行,并把规划的添加控制在最小程度。关于怎么设置预算,在此举几个比如:

  • 依据咱们的需求或一些推荐值运用数字。例如,小于 170KB的缩小和紧缩的 JavaScrip。
  • 把当时的包巨细作为基准,或测验把它削减,例如 10%。
  • 试试咱们的竞争对手中最快的网站,并相应地设置预算。

咱们能够运用 bundlesize 包或 Webpack 功用提示和约束来追寻预算:

Webpack 功用提示和约束

删去依靠项

这是由 Sidekiq 的作者所写的一篇抢手博文的标题

没有代码能比没代码运转得更快。没有代码能比没代码有更少的过错。没有代码能比没代码运用更少的内存。没有代码能比没代码更简单让人了解。

不幸的是,JavaScript 依靠项的现实是,咱们的项目很有或许运用数百个依靠项。试试 Is node_modules | wc -l。

在某些状况下,添加依靠项是有必要的。在这种状况下,依靠项包的巨细应该是在多个包之间进行挑选时的规范之一。我强烈推荐运用BundlePhobia:

BundlePhobia 发现向包中添加 npm 包的本钱

代码拆分

运用代码拆分或许是明显进步 JavaScript 功用的最佳办法。它答应拆分代码,并只传递用户当时需求的那部分。以下是一些代码拆分的比如:

  • 在独自的 JavaScript 块平分别加载路由
  • 页面上能够不当即显现的组件,例如,在页面下方的模态、页脚。
  • 在全部干流阅览器中,polyfills和ponyfills都支撑最新的阅览器功用。
  • 经过运用 Webpack 的 SplitChunksPlungin,防止代码重复。
  • 依据需求定位文件,以防止一次性发送全部咱们支撑的言语。

凭借 Webpack动态导入和具有Suspense的React.lazy,咱们能够运用代码拆分。

凭借动态引进和具有 Suspense 的 React.lazy 的代码拆分

咱们构建了一个替代 React.lazy 的函数来支撑命名导出,而不是默许导出。

异步和推迟脚本

全部干流阅览器支撑脚本标签上的异步和推迟特点


加载 JavaScript 的不同办法

  • 内联脚本关于加载小型要害 JavaScript 代码十分有用。
  • 当用户或任何其他脚本(例如,剖析脚本)不需求该脚本,要获取 JavaScript 而不阻止 HTML 解析时,运用带async的脚本十分有用。
  • 从功用的视点看,要获取和履行非要害 JavaScript,而且不阻止 HTML 解析,那么,运用带defer的脚本或许是最佳办法。此外,它保证调用脚本时的履行次序,假如一个脚本依靠另一个脚本,那么这个办法会很有用。

以下显现了在头标签中这些脚本之间的差异:

脚本获取和履行的不同办法

图画优化

虽然 JavaScript 的 100KB 与图画的 100KB 比较,功用本钱有很大的不同,可是,一般来说,尽量让图画坚持比较小的文件巨细很重要。

一种减小图画巨细的办法是,在受支撑的阅览器中运用更轻量级的WebP图画格局。关于那些不支撑 WebP 的阅览器来说,能够运用以下战略:

  • 退回到惯例 JPEG 或 PNG 格局(一些 CDN 依据阅览器的 Accept 恳求头主动履行)
  • 在检测到阅览器支撑后,加载并运用WebP polyfill。
  • 运用 Service Workers 来侦听以获取恳求,假如 WebP 遭到支撑,那么就更改实践的 URL 以运用 WebP。



WebP 图画

仅当图画在坐落或挨近视图端口时才推迟加载图画,关于具有许多图画的初始页面加载来说,这是最明显的功用改善之一。咱们能够在支撑的阅览器中运用 IntersectionObserver功用,或运用一些可替换的东西来完成相同的成果,例如,react-lazyload。

在翻滚期间推迟加载图画

其他一些图画优化或许包含:

  • 下降图画的质量以削减图画的尺度。
  • 调整巨细并尽或许加载最小的图画。
  • 运用srcset图画特点为高分辨率视网膜显现器主动加载高质量图画。
  • 运用渐进式图画,先当即显现出含糊的图画


加载惯例图画和渐进图画的比照

咱们能够考虑运用一些通用 CDN 或专用图画 CDN,它们一般完成了这些图画优化的大部分作业。

资源提示

资源提示让咱们能够优化资源的交给,削减往复次数,以及资源的获取,以便在用户阅览页面时更快地传递内容。

带有 link 符号的资源提示

  • 预加载(preload)在当时页面加载的后台下载资源,并会实践用于当时页面(高优先级)。
  • 预取(prefetch)的作业原理和预加载相似,都是获取资源并缓存它们,但用于未来用户的导航(低优先级)。
  • 预衔接(preconnect)答应在 HTTP 恳求在实践发送到服务器之前,设置前期衔接。


提早预衔接以防止 DNS、TCP 和 TLS 往复推迟

还有其他一些资源提示,如预烘托或DNS 预取。其中有一些能够在呼应头上指定。在运用资源提示时,请当心行事。很简单一开端就形成太多不必要的恳求和下载太多数据,特别是假如用户在运用蜂窝衔接。

定论

在不断添加的运用中,功用是永无止境的进程,该进程一般需求在整个栈中不断更改。

这个视频提示我,咱们期望削减运用程序包的巨细——我的搭档


把全部你现在不需求的东西都扔出飞机!——电影《珍珠港》


以下是一个列表,表中是咱们在运用或方案测验的其他未提及的潜在功用改善:

  • 运用 Service Workers 进行缓存、脱机支撑及卸载主线程。
  • 内联要害 CSS 或运用功用性 CSS,以便长时刻减小尺度巨细。
  • 运用如 WOFF2 而不是 WOFF 的字体格局(最高可紧缩一半巨细)。
  • 阅览器列表坚持更新。
  • 运用webpack-bundle-analyzer进行构建块的可视化剖析。
  • 优选较小的包(例如,date-fns)和答应减小尺度巨细的插件(如,lodash-webpack-plugin)。
  • 试试preact、lit-html或svelte。
  • 在CI 中运转 Lighthouse。
  • 渐进激起和用React进行流处理。

令人兴奋的主意无穷无尽,咱们都能够拿来测验。我期望这些信息和这些事例研讨能够启示咱们去考虑运用程序中的功用。

据亚马逊核算,页面下载速度每下降 1 秒就或许形成年销售额削减 13 亿美元。沃尔玛发现,加载时刻每削减 1 秒,将使转化量添加 2%。每 100ms 的改善还会带来高达 1% 的收入添加。据谷歌核算,查找成果每怠慢 0.4 秒,那么每天的查找次数有或许削减 8 百万次。重构 Pinterest 页面的功用使等候时刻削减了 40%,而 SEO 流量添加了 15%,注册转化率添加了 15%。BBC 发现,其网站加载时刻每添加一秒,就会多丢失 10% 的用户。对新的更快的 FT.com 的测验标明,用户参加度进步了 30%,这意味着更多的拜访次数和更多的内容消费。Instagram 经过削减显现谈论所需 JSON 的呼应巨细,将展现次数和用户个人资料翻滚互动量添加了 33%。

点击“了解更多”,获取更多优质阅览