（点选
英语：CODY ARSENAULT 原文：oschina
镜像：www.oschina.net/translate/front-end-optimization
但如好该文征稿，请点选 → 这里了解详细情况
现今位数世界，存在着不计其数的中文网站，每晚都须要处理各种不同的原因的出访。不过，那些中文网站很大一小部分变得轻巧，采用起来也很麻烦事。没怎么强化的中文网站会被各式各样的问题所苦，包括加载时间、不支持终端电子设备、应用程序兼容问题，之类。
这首诗讲诉能协助明显改善强化后端的技术，非常管用。主要就文本有清扫标识符、填充相片、填充内部天然资源、采用 CDN，以及许多其他方式。那些方式会为你的中文网站带明显的速率提高和整体操控性提高。
1. 清扫 HTML 文件文件格式
HTML，即LZ77记号词汇，几乎是所有中文网站的支撑点。HTML 为页面带来副标题、子副标题、条目和其他许多文件文件格式结构的文件格式。在前段时间预览的 HTML5 中，甚至能建立图象。
HTML 很容易被互联网食腐辨识，因此浏览器能根据中文网站的文本在一定程度上动态预览。在写 HTML 的这时候，你应该试著让它简约而有效。此外，在 HTML 文件文件格式中提及内部天然资源的这时候也须要遵循许多最差课堂教学方式。
正确置放 CSS
Web 斯特默讨厌在页面建立起主要就的 HTML 金属结构之后再来建立JSP。如此一来，页面中的JSP常常会放到 HTML 的前面，吻合文件文件格式结束的地方。不过所推荐的作法是把 CSS 放到 HTML 的下面部分，文件文件格式头内，这能保证恒定的图形过程。
<head>
<link href=https://yourwebsite.com/css/style.css rel=stylesheet type=text/css>
</head>
这个策略不能提高中文网站的读取速率，但它不会让出访者长时间看着空白屏幕或者无文件格式的文本（FOUT）等待。如果页面大部分可见元素已经读取出来了，出访者才更有可能等待读取整个页面，从而带来对后端的强化效果。这就是知觉操控性。
正确置放 Javascript
另一方面，如果将 JavaScript 置放在 head 标签内或 HTML 文件文件格式的上部，这会阻塞 HTML 和 CSS 元素的读取过程。这个错误会导致页面读取时间增长，增加用户等待时间，容易让人感到不耐烦而放弃对中文网站的出访。不过，您能通过将 JavaScript 属性置于 HTML 底部来避免此问题。
此外，在采用 JavaScript 时，人们通常讨厌用异步脚本读取。这会阻止<script>标签在 HTML 中的呈现过程，如，在文件文件格式中间的情况。
虽然对于页面设计师来说， HTML 是最值得使用的工具之一，但它通常要与 CSS 和 JavaScript 一起采用，这可能会导致页面浏览速率减慢。 虽然 CSS 和 JavaScript 有利于页面强化，但采用时也要注意许多问题。采用 CSS 和 JavaScript 时，要避免嵌入标识符。因为当您嵌入标识符时，要将 CSS 置放在样式记号中，并在脚本记号中采用 JavaScript，这会增加每次刷新页面时必须读取的 HTML 标识符量。
绑定文件? 不用担心
在过去，你可能会频繁绑定 CSS 脚本到单个文件，以在 HTML 标识符中提及内部文件。在采用 HTTP1.1 协议时，这是一项合理的课堂教学，不过这一协议不再是必需的。
感谢 HTTP/2，现在你能通过采用多路技术将单个 TCP 连接以异步方式收发 HTTP 请求和响应。
这意味着你不再须要频繁地将多个脚本绑定到单个文件。
2. 强化 CSS 操控性
CSS，即级联JSP，能从 HTML 描述的文本生成专业而又整洁的文件。很多 CSS 须要通过 HTTP 请求来引入（除非采用内联 CSS），所以你要努力去除累赘的 CSS 文件，但要注意保留其重要特征。
如果你的 Banner、插件和布局样式是采用 CSS 保存在不同的文件内，那么，出访者的应用程序每次出访都会读取很多文件。虽然现在 HTTP/2 的存在，减少了这种问题的发生，但是在内部天然资源读取的情况下，仍会花费较长时间。要了解如何减少 HTTP 请求以大幅度缩减读取时间，请阅读WordPress 操控性。
此外，不少中文网站管理员在页面中错误的采用 @import 指令 来引入内部JSP。这是一个过时的方式，它会阻止浏览并行下载。link 标签才是最好的选择，它也能提高中文网站的后端操控性。多说一句，通过 link 标签请求读取的内部JSP不会阻止并行下载。
3.减少内部HTTP请求
在很多情况下，中文网站的大部分读取时间来自于内部的 Http 请求。内部天然资源的读取速率随着主机提供商的服务器架构、地点等不同而不同。减少内部请求要做的第一步就是简略地检查中文网站。研究你中文网站的每个组成部分，消除任何影响出访者体验不好的成分。这些成分可能是：
不必要的相片
没用的 JavaScript 标识符
过多的 css
多余的插件
那些都是管理 HTTP 请求的最差选择。除此之外，减少DNS路由查找教程会教你如何一步一步的减少内部 HTTP 请求。
4. 填充 CSS, JS 和 HTML
填充技术能从文件中去掉多余的字符。你在编辑器中写标识符的这时候，会采用缩进和注释，那些方式无疑会让你的标识符简约而且易读，但它们也会在文件文件格式中添加多余的字节。
例如，这是一段填充之前的标识符。
.entry-content p {
font-size:14px!important;
}
.entry-content ul li {
font-size: 14px !important;
}
.product_item p a {
color: #000;
padding:10px 0px 0px 0;
margin-bottom: 5px;
border-bottom: none;
}
把这段标识符填充后就成了这样。
.entry-content p,.entry-content ul li{font-size:14px!important}.product_item p a{color:#000;padding:10px 0 0;margin-bottom:5px;border-bottom:none}
采用填充工具能非常简单地把无用的字节从你的 CSS、JS 和 HTML 文件修剪掉。关于填充的相关信息，能参阅如何填充 CSS、JS 和 HTML。
在真正须要之前
预先图形
”prefetch”,rel=”dns-prefetch”，或者 rel=”prerender” 记号。
6. 采用 CDN 和缓存提高速率
文本分发互联网能明显提高中文网站的速率和操控性。采用 CDN 时，您可以将中文网站的静态文本镜像到全球各地的服务器扩展互联网。如果您的中文网站观众遍布全球，这项功能十分管用。 CDN 允许您的中文网站出访者从前段时间的服务器读取数据。如果您采用 CDN，您中文网站内的文件将自动填充，以便在全球范围内快速分发。
CDN 是一种缓存方式，可极大明显改善天然资源的分发时间，同时，它还能实现许多其他的缓存技术，如，利用应用程序缓存。
合理地设置应用程序缓存，能让应用程序自动存储某些文件，以便加快传输速率。此方式的配置能直接在源服务器的配置文件中完成。
了解更多有关缓存和不同类型的缓存方式，请参阅缓存定义。
7. 填充文件
虽然许多 CDN 服务能填充文件，但如果不采用 CDN，您也能考虑在源服务器上采用文件压缩方式来改进后端强化。 文件填充能使中文网站的文本轻量化，更易于管理。 最常用的文件填充方式之一是 Gzip。 这是缩小文件文件格式、音频文件、PNG图像和等其他大文件的绝佳方式。
Brotli 是一个比较新的文件填充算法，目前正变得越来越受欢迎。 此开放源标识符算法由来自 Google 和其他组织的软件工程师定期预览，现已被证明比其他现有填充方式更好用。 这种算法的支持目前还比较少，但作为后起之秀指日可待。
了解更多信息，请阅读我们有关 Brotli 填充的完整该文。
对于那些不懂得后端强化的人来说，相片可能会是一个“中文网站杀手”。大量的写真集和庞大的高清相片会阻塞页面图形速率。没有强化的高清相片可能会有几兆字节（mb）。因此适当地对它们进行强化能明显改善页面的后端操控性。
每个图像文件都包含了许多与纯照片或相片无关的信息。比如 JPEG 相片，它包含了日期、地点、相机型号和许多其他不相关的信息。你能用许多如 Optimus 的强化工具来删除那些多余的图像数据来精简图像的冗长的读取过程。因为 Optimus 是一个无损的相片填充工具，它不会影响图像画质，只是填充相片体积。
另外，如果你想进一步的强化一张图片，你能采用有损填充，它会删除许多相片里面的数据，因此质量会受损。
进一步的学习有损和无损填充之间的区别，请阅读我们完整的教程。
9. 采用轻量级框架
除非你只用现有的编码知识构建中文网站，不然，你能试著采用一个好的后端框架来避免许多不必要的后端强化错误。虽然有许多更大，更知名的框架能提供更多功能和选项，但它们不一定适合你的 Web 项目。
所以说，不仅确定项目所需功能很重要，选择合适的框架也很重要——它要在提供所需功能的同时保持轻量。前段时间许多框架都采用简约的 HTML，CSS 和 JavaScript 标识符。
以下是几项能加快读取的轻量级框架：
Pure
Skeleton
Milligram
框架并不能代替页面设计，编程和维护。举个简单的例子，我们假设框架是一个新房子。房子干净整洁，但它是空的。在你添加家具，家电和装饰品时，你有责任保证房子不会变得凌乱。同样地，当您采用了一个框架，您就有责任保证它不会被冗余的标识符，大相片和过多的 HTTP 请求破坏。
后端强化 – 总结
进行后端强化似乎须要花费很大的精力，相信这篇应用指南中的许多小基本功能帮你极大明显改善中文网站读取速率。中文网站读取地越快，则用户体验越佳。因此, 对后端进行强化能使给你和你的用户都带来益处。如果你有任何其他好的强化方式，请在评论区留下您的宝贵建议。
觉得本文对你有协助？请分享给更多人
