CDN加速

技术博客 > 正文

全站加速中页面FEO如何实现

2021-01-07

在全站加速的实际应用中,我们发现多数网站没有进行前端性能优化或者优化效果并不明显。在这种情况下,即使应用了CDN加速,对于终端用户而言,网站加载变快了,但是浏览体验依旧不佳。这可能是受限于网站页面结构,也可能是因为用户端请求顺序不合理而造成的诸如页面阻塞,导致打开过慢、渲染不及时等问题,导致用户体验下降。

页面打开的速度提高了,页面的质量自然也不能落下,前端优化FEO (Front End Optimization) 正是一项为增强用户体验,的页面优化技术。

一般而言,网站的前端包括了各类文件:XHTML/CSS/JS/……,全站加速应用中,FEO 一般分为四个部分进行处理:页面优化检测、 FEO 图片优化、 FEO 文本优化、FEO 全页面优化。

页面优化检测

页面优化检测又分为坏请求检测与JS阻塞检测。所谓坏请求检测,指的是检测到客户端向服务器请求的资源不存在时,提醒服务器补充资源文件或修改资源链接地址,此举能避免请求在服务器端与客户端之间过多的往返,从而降低加载速度。JS 阻塞检测,能够检查出影响首屏渲染速度和用户交互体验的阻塞文件,并通过自适应调整,避开阻塞,提升用户首屏体验。

FEO 图片优化
在不影响用户视觉体验的前提下,FEO能对网页大图片进行压缩处理,这样能显著提升传输速度,从而提升图片访问速度。FEO图片优化通过以下三种形式实现:

图片无损压缩: 对于普通大小的图片,可进行无损压缩;
可接受的有损压缩:对于部分超大size的图片,在不影响用户体验的前提下,对图片进行有损压缩,这类压缩能够显著降低图片大小,提高图片打开速度;
图片终端自适配:根据用户终端型号,自动匹配合适尺寸的图片大小。

FEO 文本优化
和图片比起来,普通文本体积更小,传输更快,但是对于文本类占绝大篇幅的网站而言,例如小说类、资讯类网站,通过FEO文本优化技术,也能提升网页的打开速度。

在全站加速中,文本FEO主要由以下两种方式实现:
文本无损压缩:对传输的文本进行压缩,从而起到加速的效果;
无用阻塞内容优化:自动去掉不会产生任何影响,还会占据一定的大小的阻塞内容,使得传输的内容更加精简,传输更加高效,提升终端用户访问体验。

FEO 全页面优化
全站加速FEO全页面优化,主要通过以下两种方式来完成:

内容请求优化:全站加速针对小文件请求传输特点,通过合并部分小文件(CSS、 JS、图片等)请求,减少用户多次等待建立连接、等待响应的时间,大幅提升了请求响应的传输效率,并最终提升用户体验。
DNS 预取:监测页面中其他相关域名,对没有使用dns-prefetch的页面进行改写,主动进行 DNS 预取。通过这种方式,能将每一个域名解析的DNS时间减少20~200ms。

全站加速页面FEO优化技术,能够通过在客户站点端优化来提升页面加载响应时间,是一种配合CDN技术的增值服务。