译者 | Dimitris Kiriakakis
翻译者 | 风车云马
撰稿 | Jane
公司出品 | Python驻扎地（id：pythonnews）
【编者按】Angular、React、VueJS 是那时许多非主流的 JS 架构，那它在构筑中文网站或后端流程时，是怎样确保操控性，增加他们非议的？那时这首诗，就为大家如是说许多辅助工具或控制技术基本功，来协助后端技师确保合作开发操控性与工作效率，即便快过年了，要急忙把研制和强化都努力做到位，少上工！
假如中文网站网页少于 3 秒还未读取出，会是甚么结论？你会丧失近 50% 的来访者！或许那个位数让你很多意料之外。较长天数读取对插件的转换率会造成消极影响，而增加网页的读取天数能明显提高使用者新体验、降低成本、强化搜寻等，最后确保商品的错误率。
想确保构筑的中文网站或后端流程的操控性，能从四方面思索呢？接下去，他们就蒋以怎样来衡量，再谈怎样强化。
一、怎样来衡量操控性？
具体来说，他们要要有许多来衡量操控性的分项。在来衡量后端插件的操控性时，有两个辅助工具所推荐给他们：
（1） 谷歌浏览器 Lighthouse
（2） Speedcurve
这两款辅助工具都能跟踪主要的操控性 KPI（如网页响应速度指数 Pagespeed Index，网页变为可交互的天数 TTI，首次对使用者显示内容的天数 FCP等)。其中 Lighthouse 包含在 Chrome 合作开发辅助工具里，通过分析中文网站/插件提供许多非常有用的提示，从而告诉合作开发人员怎样提高相应的分项。使用 Speedcurve，能在任何天数监测所有这些 KPI 及其操控性。
Chrome 的 Lighthouse 提示信息
来衡量商品后端操控性之后，下一步就要强化他们的中文网站，使其发挥最大作用。
二、怎样强化？
（一）优化图像
任何一个中文网站，图像都是至关重要的部分。平均而言，图像类数据占 Web网页读取数据的 60%以上，因此，图像的强化也是最重要的一环，其实也是最容易实现的。为甚么这么说？能从哪几方面入手？
1、调整图像大小
怎样调整图像大小使其符合布局要求。最重要的一点是：检查图像的分辨率是否合适。此外，确保图像响应与布局响应相同。这方面能所推荐给他们一个很棒的辅助工具——响应图像生成器（Responsive Image Breakpoints Generator），它能生成不同版本的图像，能根据你的需要或习惯，以及可使用的 HTML5 代码。这些代码还能在任何后端插件或中文网站中使用。
假如对gulp感兴趣，能使用 gulp-responsive 插件自动执行此过程。
响应式布局需要响应式图像
2、确保延迟读取
延迟读取能通俗理解为不需要立即读取图像，但能在之后需要的时候读取显示。那个概念，结合一下使用实战经验就容易理解了。无论使用哪个架构，都能使用延迟读取图像的插件，如 VueJS 中的 v-lazy-image，当然合作开发者们也能自己构筑，不过需要检测元素进入或退出的天数。
3、图像传输：使用 CDN 进行
上面主要是从中文网站读取图像的大小和数量三个维度采取强化措施的，之后要考虑哪些问题呢？举一个例子，假如你想让你的中文网站在全球范围都是可用的，能怎么做？这里向他们如是说 CDN 方法——内容分发网络来实现。
CDN 在其全球分布的服务器网络上缓存映像。它是怎样协助强化的？举个例子，你在欧洲，一个澳大利亚的使用者向中文网站发送一个图像的请求，CDN 会从另一个，离这位澳大利亚使用者更近的站点发送图像，而不是从欧洲的服务器上检索并发送图像，这就增加了读取图像所需的往返天数。
（二）CSS, JS 和 HTML
几乎所有架构都提供了强化代码的方法，如代码拆分、摇树强化、压缩等，除了代码，还能强化甚么？
1.强化 HTML 文档
HTML（几乎）是所有 Web 插件的基础。在 HTML 文档中引用资源时，有下面两点建议想与他们撷取！
（1）将 CSS 引用放在 HTML 头文件的顶部，确保渐进呈现。
（2）将 JavaScript 属性放在 HTML 主体的底部，并选择异步脚本读取。这能防止任何
