今天，我们很高兴地宣布Rocket Loader的正式GA，这是我们的JavaScript优化功能，它将通过改进的移动设备支持，比以往任何时候都更快地将内容呈现在访问者面前。在测试中网站我们发现在我们的页面上，访问者的第一次满意的绘画时间减少了45%（几乎1秒）。SpaceX/Unsplash摄影我们最初在2011年6月发布了Rocket Loader作为beta测试版，用于异步加载网站的JavaScript，从而显著提高页面加载时间。从那时起，数十万我们的客户从一次点击选项中受益匪浅，从而提高了内容的速度。在这个版本中，我们对Rocket Loader进行了极大的改进和优化，使其能够与移动和桌面浏览器一起工作，以便在加载网页时优先考虑最重要的内容：您的内容。访问者不会等待页面"加载"简单地说，加载时间是浏览器何时完成加载文档（HTML）和该文档引用的所有资产的度量。当你点击访问这篇博文时，你是否在等待浏览器选项卡上的旋转轮开始阅读此内容？你可能没有，你的访客也没有。我们习惯于一旦内容出现就开始消费。然而，业界过于关注负载事件的时间安排，忽视了用户的感知和行为。谷歌分析的数据显示，如果一个移动网站加载时间超过3秒，53%的访问会被放弃。如果你想起上一次你匆匆浏览一个网站的时候，这是有意义的-如果屏幕上没有任何东西快速呈现，你就更有可能去其他地方。绘制时间度量更接近于用户对速度的感知。简单地说，绘画时间是衡量屏幕上显示的东西的时间，可以测量和报告绘画的各个阶段，我们将在进行解释时对此进行解释。分析你的表现其中一个方法，你可以了解更多关于你的网站的性能是使用其中一个伟大的综合分析工具。Chrome中的Lighthouse工具可以在页面上模拟典型的移动设备和连接来运行性能审计。我在Cloudflare的主页上运行了以下内容，以说明页面随时间推移的加载方式：在这个移动设备模拟中，第一个有意义的绘制（FMP）需要4.8秒。FMP不测量第一次绘制的时间，但它会等待任何web字体呈现，并等待最大的高于折叠的布局更改发生。在4.8秒时绘制的红线显示了我们在本次测试中的FMP。那么我们能做些什么来改进呢？渲染阻塞脚本是绘制时间的问题大多数工具都会为您提供建议，而Lighthouse称之为这些机会，并根据其估计的节省时间订购这些机会：试着在你的网站上运行一个灯塔审计，看看你得到了什么机会。剧本的进行曲现在是量化JavaScript在web上传播的好时机。使用优秀的HTTP存档项目，我们可以回顾过去几年来Alexa排名前50万的网站的构成。使用他们的数据，我们可以看到移动设备上的JavaScripts的中位数已经从2011年6月Rocket Loader发布时的5个增加到2018年5月的19个。因此，我们大多数人的网站上都有大量的JavaScript，很有可能它会在众多的性能机会中占据很高的位置，以改善访问者的体验。实现此建议需要您更改源应用程序的代码，以异步加载、延迟或内联脚本。在某些情况下，这可能是不可能的，因为您无法控制应用程序的代码，或者没有实现这些策略的专业技能。火箭装载机来营救！火箭装载机的工作原理没有火箭装载机用火箭装载机newrocket Loader通过在HTML页面中定位JavaScripts并在页面加载期间暂时将其隐藏在浏览器中，从而优先考虑绘制时间。这允许浏览器继续解析HTML的其余部分，并开始发现呈现页面所需的其他资产，如CSS和图像。完成后，Rocket Loader会动态地将脚本插入到页面中，这样浏览器就可以加载这些脚本了。使能火箭装载机这一点相当劳动密集，所以请仔细观察：测量影响让我们在主页上再次运行灯塔，现在我们启用了火箭加载器：在灯塔测试中，一次点击就可以让人印象深刻了！为了推动这一目标的实现，我们确定的机会灯塔现在正式成为"通过审核"：让我们开始吧（用户测量）为了用真实的用户和设备来衡量这一点，上周我们在网站其中50%的页面浏览量是使用Rocket Loader优化的，因此我们可以比较启用和不启用它的性能。正如上面的灯塔审计所示，我们的主网站是Rocket Loader的一个很好的用例，因为虽然我们在页面的一些交互方面使用了大量JavaScript，但对我们的访问者来说，最重要的是阅读有关Cloudflare网络、产品和功能的信息。所以简而言之，内容应该优先于JavaScript。为了说明我们观察到的变化，下面是一个图表，它显示了网站测试期间真实用户的访问。TTFCP测量文档对象模型（DOM）中的内容首次在页面上绘制的时间。对于主要用于内容消费而不是大量交互的网站，这是一种更接近用户对网站速度的感知，而不是测量加载时间。更多的访客在我们的屏幕上看到更多的橙色内容。事实上，火箭装载机在网站测试时间缩短0.93秒，比第一次油漆含量高出约45%。繁荣！火箭装载机有什么新功能所以Rocket Loader继续推动JavaScript网站的性能改进，但是很多都在幕后发生了变化。以下是关键更改的摘要：提高了首次绘制速度的时间，而不仅仅是加载时间现在兼容超过93%的移动设备[1]很小！小于先前版本大小的10%降低了复杂性，并与您的现场和第三方JavaScripts更好地兼容符合更严格的内容安全策略（CSP）更多的移动用户现在得到了优化我们已经预测，到2018年底，手机使用率将达到60%。此外，从2018年7月起，谷歌将开始在移动搜索排名中使用页面速度。有鉴于此，为移动设备提供快速体验比以往任何时候都重要。火箭加载器beta版于2012年首次推出，当时网络上的移动设备使用率约为15%。这个版本的Rocket Loader截获了页面上的JavaScript，并在一个虚拟沙盒中执行：这是一个熟悉的世界，但行为在幕后发生了改变。不幸的是，我们选择的创建这个虚拟沙箱的技术并不能在所有移动浏览器上都很好地工作。6年前，这被认为是一种不受欢迎但可以接受的权衡，但如今，至关重要的客户可以在移动设备上利用这项技术。由于我们的方法降低了复杂性，新的火箭加载器可以在目前使用的93%[1:1]的移动设备上工作。对于那些不兼容的设备，我们只需正常交付网站，而无需进行此优化。更瘦更吝啬新火箭装载机的JS重量为2.3KB。我们在2017年进行了大量的重构，将运行Rocket Loader所需的JS大小从47KB减少到32KB，并在全球范围内节省了惊人的213 TB传输量。由于新的火箭装载机工作方式简单-装载机.min.js结果产生了一个小于10%大小的JS文件，当火箭加载器完成它的工作时，每年大约又节省了417tb的传输量与内容安全策略的兼容性newrocket Loader不会修改JavaScript的内容，它只会更改加载的时间，这意味着它可以很好地使用您定义的任何内容安全策略（CSP）。使用Rocket Loader beta版，如果您想设置一个CSP，只允许在您的域上托管执行脚本，那么您需要禁用Rocket Loader，因为这也会通过您的域组合和加载外部JavaScripts。newrocket Loader不使用这种方法，而是让浏览器正常加载和缓存文件。由于我们还为所有客户启用了HTTP/2，任何第一方脚本都将通过单个TCP连接加载，而第三方脚本仍然是异步加载的，这意味着我们可以在不代理此内容的情况下优化其加载。所有这些都意味着修改CSP以适应Rocket Loader非常简单，只需允许脚本src forhttps://ajax.cloudflare.com销售代表那个火箭装载机本身可以装载。如何启用新的火箭装载机？如果你已经启用了火箭加载器今天你的网站正在使用新版本。您可以通过访问Cloudflare设置的"速度"部分随时修改设置。如果你禁用了火箭加载器或处于手动模式，只需单击速度部分的按钮即可打开火箭加载器。我还能用Cloudflare做什么来优化我的网站？与以往一样，实现良好的性能通常需要多种方法，Rocket Loader专门处理JavaScript。您还应确保启用了其他一些非常简单的优化：缓存-缓存您可以缓存的所有内容，这样内容就可以直接从我们150多个数据中心中的任何一个提供，而不必等待您的来源。缩小和压缩-在你的速度设置中启用你的HTML，CSS和JS的缩小，以无损地减少总数