—般说来 WordPress 网站制作前端指网站业务逻辑之前的部分,包括浏览器载入、网站检视模型、图片服务、 CDN 服务等,主要优化手段有优化浏览器访问、使用反向代理、 CDN 等。
1. 减少 http 请求
HTTP 协议是无状态的应用层协议,意味著每次 HTTP 请求都需要建立通讯链路、进行资料传输,而在站群服务器端,每个 HTTP 都需要启动独立的执行绪去处理。这些通讯和服务的开销都很昂贵,减少 HTTP 请求的数目可有效提高访问效能。
减少 HTTP 的主要手段是合并 CSS 、合并 JavaScript 、合并图片。将浏览器一次访问需要的 JavaScript 、 CSS 合并成一个档案,这样浏览器就只需要一次请求。图片也可以合并,多张图片合并成一张,如果每张图片都有不同的超链接,可通过 CSS 偏移响应滑鼠点选操作,构造不同的 URL 。
2. 使用浏览器快照
对一个网站而言,CSS 、 JavaScript 、 Logo 、图示这些静态资原始档更新的频率都比较低,而这些档案又几乎是每次 HTTP 请求都需要的,如果将这些档案快照在浏览器中,可以极好地改善效能。通过设定 HTTP 头中 Cache-Control 和 Expires 的属性,可设定浏览器快照,快照时间可以是数天,甚至是几个月。
在某些时候,静态资原始档变化需要及时应用到客户端浏览器,这种情况,可通过改变档名实现,即更新 JavaScript 档案并不是更新 JavaScript 档案内容,而是生成一个新的 JS 档案并更新 HTML 档案中的引用。
使用浏览器快照策略的网站在更新静态资源时,应采用批量更新的方法,比如需要瞬时响应:网站的高效能架构更新 10 个图示档案,不宜把 10 个档案一次全部更新,而是应一个档案一个档案逐步更新,并有一定的间隔时间,以免多用户浏览器突然大量快照失效,集中更新快照,造成站群服务器负载骤增、网络堵塞的情况。
3. 启用压缩
在站群服务器端对档案进行压缩,在浏览器端对档案解压缩,可有效减少通讯传输的资料 M 。文字档案的压缩效率可达 80% 以上,因此 HTML 、 CSS 、 JavaScript 档案启用 GZip 压缩可达到较好的效果。但是压缩对站群服务器和浏览器产生一定的压力,在通讯频宽良好,而站群服务器资源不足的情况下要权衡考虑。
4. CSS 放在页面最上面、 JavaScript 放在页面最下面
浏览器会在下载完全部 CSS 之后才对整个页面进行渲染,因此最好的做法是将 CSS 放在页面最上面,让浏览器尽快下载 CSS 。 JavaScript 则相反,浏览器在载入 JavaScript 后立即执行,有可能会阻塞整个页面,造成页面显示缓慢,因此 JavaScript 最好放在页面。但如果页面解析时就需要用到 JavaScript, 这时放在底部就不合适了。
5. 减少 Cookie 传输
一方面,Cookie 包含在每次请求和响应中,太大的 Cookie 会严重影响资料传输,因此哪些资料需要写入 Cookie 需要慎重考虑,尽量减少 Cookie 中传输的资料景。另一方面,对于某些静态资源的访问,如 CSS 、 Script 等,传送 Cookie 没有意义,可以考虑静态资源使用独立域名访问,避免请求静态资源时传送 Cookie,减少 Cookie 传输的次数。
6 CDN 加速
CDN( Content Distribute Network,内容分发网络)的本质仍然是一个快照,而且将资料快照在离多用户最近的地方,使多用户以最快速度获取资料,即所谓网络访问第一跳,。
由于 CDN 部署在网络运营商的机房,这些运营商又是终端多用户的网络服务提供商,因此多用户请求路由的第一跳就到达了 CDN 站群服务器,当 CDN 中存在浏览器请求的资源时,从 CDN 直接返回给浏览器,最短路径返回响应,加快多用户访问速度,减少资料中心负载压力。