Exploring the Benefits of CloudFlares Next-Generation CDN for Global Content Delivery

hwyzw

    英文：Robin

    译文：南北

    内容分发网络（CDN）

    CDN 能够将网站的资源分发至世界各地。它有助于提升网站的响应速度。不过，对于那些特殊地区的用户而言，其效果是比较小的。

    它的强大之处在于能够成为你的 DNS 服务器，而 CDN 只是它诸多服务中的一个组成部分。如此一来，针对你的网站发起的所有请求都会经由它来处理。

    在过去十五年的设计与发展过程中，我们的 CDN 并非一味守旧和固步自封。我们的专利技术充分运用了最新的技术进步，像硬件、web 服务器以及网络路由等都在其中得到了应用。也就是说，我们创新性地构建了下一代的 CDN。新的 CDN 配置较为简单，价格也较为低廉，其性能必然比你以往使用过的任何传统 CDN 都要出色。

    CSS 正在使用来托管所有的静态资源。它能够与 W3 的所有缓存资源无缝融合。因此，我们无需进行特殊处理，就可以将资源移入 CDN，并且能够确保链接的准确性。

    对于一个博客而言，其中的大文件主要是 、CSS 以及图片，并非视频等类型。这些文件所占用的贷款数量真的很多。

    我们的 CDN 服务是一个网站加速器，同时也是一个实时控制中心。创建它的目的，是让网站的用户能够从下一代 CDN 中获得最大收益，也让运维能够从下一代 CDN 中获得最大收益。

    亚马逊网络服务（AWS）版本的 CDN。

    亚马逊是一个提供内容分发网络服务的平台。它能够与其他的亚马逊网络服务产品无缝融合。为开发者和企业提供了一种将内容分发到最终用户手中的简单方式。这个过程具有低延迟的特点，同时转换速度也很高。并且没有强制要求最小使用量。

    上述的 CDNs 无法托管你任意的资源，它们通常只是托管最常被用到的文件。对于线上产品而言，将资源和服务器托管到私有的 CDN 上并非最佳方式，不过这种方式在分发资源方面依然是快速且简单的。

    能帮你找到最快且最值得信赖的 CDNS，使你的网站速度更快且更有活力。

    性能测试

    这些性能测试工具，以量化的方式对网站中的一些表现进行了测试，比如首字节加载时间（time to first byte）或者渲染时间等。有些工具会检查资源是否被缓存，还会检查多个 CSS 或 JS 文件是否值得合并。

    性能测试的黄金标准是它，它为性能测试提供了多方面的量化指标，其中包括一个用于评价当前页面优化水平的基本评分，一个显示页面加载后视觉效果的截图，以及一个浏览器加载资源的瀑布流。

    根据用户浏览器真实的连接速度，在全球范围内展开网页速度测试，同时提供详细的优化建议。

    可以通过使用 API ，把  的相关服务添加到 NPM 模块中。也可以通过使用 API ，把  的相关服务添加到命令行工具中。

    -：将  的测试数据转换为可读的文档格式。

    WPT Bulk ：可以使用 Docs 来测试多个 URLs。如果你拥有 API key，也能够用它来做这件事。或者使用其他公开可访问的实例来进行测试。

    Yslow

    Yslow 依据 Yahoo 的高性能网页教条，对网页的性能进行分析，并且给出响应缓慢的原因。

     根据网页最佳实践分析和优化测试的网页。

    存在一个 CLI（Line）工具，名为 PSI（带有）。

    在构建进程里，能够运用 PSI 来测试移动端的性能，也能够用 PSI 来测试桌面端的性能，最终会获得可读性良好的测试结果。

    我的网站都开销到哪里去了？

    评估网站在世界各地为每个移动端用户支出的维护成本。

     网站速度测试

    输入 URL 地址，便能测试页面的加载速度，还能对其进行分析并找出性能方面的瓶颈。

   

    你可以追踪竞争对手的性能表现，也可以追踪自己的性能表现。使用它时，能查看某个因素在不同站点的速度表现。移动用户希望网站在手机上加载比电脑快，若感到加载迟缓，会迅速关上网页，因此，网站的响应速度对他们很重要。

    能够追踪页面的加载时间，也能追踪页面的大小。对于问题页面（Janky page），会直接告知你哪些页面存在问题。

    GT

    GT 结合了某一事物以及 YSlow，能够助力开发者打造出快速的网页浏览体验，也能让网页浏览体验变得高效，还能使网页浏览体验实现全面优化。

    perf.js

    在开发过程中，将性能的时序情况显示在页面上。

    perf bar

    一种可快速进行网页性能收集与查看的简单方式，它既提供了预先设定好的量化标准，又能支持用户自定义的量化标准。

    grunt-

    用于评估性能的 Grunt task 。在特定的 URL 处，使用公有或私有实例进行测试。它会对比测试结果与预期的性能期望，若小于预期，该 task 顺利完成；若超过预期性能期望，则报告失败，并帮助分析超出预期的原因。

    .io 是一个开源工具，它基于最佳实践以及一些加载时序等量化标准。这个工具有助于开发者分析网页的加载速度和渲染性能。它会从开发者的站点收集多个页面的数据，然后依据最佳实践等规则来对这些网页进行分析，最后将结果以 HTML 的形式输出，或者以数值的形式发送到指定的地方。

    该网站允许你借助.js 来收集任何公开站点的性能数据。它会进行五次运行，并且会展示一个友好的图示，以此帮助开发者了解当前页面的加载进程。

    gulp size

    显示项目大小。

    浏览器工具盒插件

     开发者工具

    在开发者工具里，有两个对评估性能很有用的标签，一个是 ，另一个是 。

    审计面板是用来分析加载的页面的。它能够给出优化方面的建议，从而减少页面的加载时间，让页面的响应速度加快。

    面板以动态且实时的方式展示了资源的请求与下载。辨析和定位这些请求比纯粹加载页面花费的时间要多一些，然而这些消耗对指导页面的性能优化极为重要。

    火狐开发者浏览器

    该浏览器是为开发者所创造的。它专注于为开发者的工作流提供服务。在历史上，这是首次将构建、测试和扩展等服务集中在一起。

    更多信息请查看 MDN 上的  。

    Page

    这个扩展插件可用于浏览器，能够快速对当前页面的性能进行分析。若浏览器开启了多个标签，此插件便会自动分析当前页面的性能表现。

    审查

    我们对页面的加载和渲染性能进行审查。如果页面响应缓慢且令人反感，或者存在问题页面，我们有责任提供快速、稳定且准确的页面。

     让追踪页面的渲染性能变得无比简单。

    SVG 和图片

    它是一个免费的应用，能减少图片体积，也能提高加载速度，并且不会牺牲图片质量。它优化了压缩参数，还移除了无用的头信息以及非必要的颜色配置信息。

   

    它也可以被集成到 Grunt 和 Gulp 中。

    SVGO

    SVG  是一个基于  的 SVG 矢量图形优化工具。

    如果你需要的是进行交互界面的操作，而非 CLI，那么就可以去下载这个 APP。

    SVGO 的 GUI 进行了缩写，其目的是揭露 SVG 文件的主要问题，并且它不具备 SVGO 的完整可配置项。

    手动优化 SVGs

    SVG 如同其他图形文件一样，也应当在上线之前进行优化。有许多类似的工具能够帮助你完成这种优化，然而，最好的办法是深入领会其细节并进行一些手动的优化。

    它是一个用于扩平台的工具，具备 GUI 和 CLI 两种形式，专门用来优化网站的图片文件。它会组合运用一些技术，并且会根据文件的类型进行优化，在最新版本中，已经能够支持 PNG 和 JPG 这两种文件类型。

    CSS

    CSS

    该网站用于展示以下内容：哪些 CSS 属性能够影响浏览器的布局；哪些 CSS 属性能够影响浏览器的渲染；哪些 CSS 属性能够影响浏览器的其他组合操作。

    更多有关 CSS- 的消息，可以点击这里查看。

    CSS Stats

    该网页应用展示了开发者项目中有关 CSS 的统计信息，且是以可视化的形式。

    CSS

    CSS 压缩工具。因为 CSS 属于页面渲染的核心文件，故而必须保持轻盈，以便能够快速响应和渲染。

    uncss

    UnCSS 是一个工具，它的作用是移除脚本中的无用 CSS。它能够审查多个文件，同时也可以审查由注入的 CSS。

    它也可以被集成到 Grunt 和 Gulp 中。

     path

    提取和整合 HTML 中关键的 CSS。

    HTML

    它是一个高度可配置的工具，经过了完善的测试，是以 为基础的 HTML 压缩工具，同时还内置了代码审查类的工具。

    gulp-

    用于压缩 HTML 的 gulp 插件。

    grunt--

    用于压缩 HTML 的 grunt 插件。

     解析器、混淆、压缩和美化工具集。

    它也可以被集成到 Grunt 和 Gulp 中。

    你也许并不需要某些  插件

    这些工具及其附属的部分都是很优秀的项目，使用它们通常能让开发工作变得轻松且快捷。

    一方面，若你在开发一个库，那就得思考一下是否确实需要依赖于某个东西。或许只需引入几行代码，就能放弃引入一个库来实现某些功能。倘若你的库只是针对高级浏览器，那么或许直接调用浏览器的内置函数就能够实现相关功能了。