网站排名提高:一张图看懂HTML5的前端性能优化

SEO知识 战车网 来源:腾讯ISUX 192浏览

概述

1. PC优化手段在Mobile侧同样适用

2. 在Mobile侧我们提出三秒种渲染完成首屏指标

3. 基于第二点,首屏加载3秒完成或使用Loading

4. 基于联通3G网络平均338KB/s(2.71Mb/s),所以首屏资源不应超过1014KB

5. Mobile侧因手机配置原因,除加载外渲染速度也是优化重点

6. 基于第五点,要合理处理代码减少渲染损耗

7. 基于第二、第五点,所有影响首屏加载和渲染的代码应在处理逻辑中后置

8. 加载完成后用户交互使用时也需注意性能

优化指南

[加载优化]

加载过程是最为耗时的过程,可能会占到总耗时的80%时间,因此是优化的重点

· 减少HTTP请求

因为手机浏览器同时响应请求为4个请求(Android支持4个,iOS 5后可支持6个),所以要尽量减少页面的请求数,首次加载同时请求数不能超过4个

a) 合并CSS、JavaScript

b) 合并小图片,使用雪碧图

· 缓存

使用缓存可以减少向服务器的请求数,节省加载时间,所以所有静态资源都要在服务器端设置缓存,并且尽量使用长Cache(长Cache资源的更新可使用时间戳)

a) 缓存一切可缓存的资源

b) 使用长Cache(使用时间戳更新Cache)

c) 使用外联式引用CSS、JavaScript

· 压缩HTML、CSS、JavaScript

减少资源大小可以加快网页显示速度,所以要对HTML、CSS、JavaScript等进行代码压缩,并在服务器端设置GZip

a) 压缩(例如,多余的空格、换行符和缩进)

b) 启用GZip

· 无阻塞

写在HTML头部的JavaScript(无异步),和写在HTML标签中的Style会阻塞页面的渲染,因此CSS放在页面头部并使用Link方式引入,避免在HTML标签中写Style,JavaScript放在页面尾

部或使用异步方式加载

· 使用首屏加载

首屏的快速显示,可以大大提升用户对页面速度的感知,因此应尽量针对首屏的快速显示做优化

· 按需加载

将不影响首屏的资源和当前屏幕资源不用的资源放到用户需要时才加载,可以大大提升重要资源的显示速度和降低总体流量

PS:按需加载会导致大量重绘,影响渲染性能

a) LazyLoad

b) 滚屏加载

c) 通过Media Query加载

转载请注明:战车网 » 网站排名提高:一张图看懂HTML5的前端性能优化

猜你喜欢

搜索服务:从四分钟到两秒:我的客户端性能优化实践

最近跟售后经理吃饭,他跟我再次谈起两年前为公司临时写的一个客户端,仍然非常激动的跟我说,这个客户端完爆了公司其他版本的客户端,包括最老的Delphi写的,Asp.Net写的,以及最新的Wpf写的客户端。无论是多么大的界面(集成的机房多),这个系统都是...

seo培训:网站巧“瘦身”优化更给力

不知道其他SEOer的习惯是怎样的,笔者小丹在做网站优化的时候多是从网站内部代码入手的。减少冗杂代码和整合细节代码,能够更好的做好网站的基础优化。 我们知道代码是网站建立的根本,一席简单流程的代码往往可以提升搜索引擎的友好程度。在众多的网站之中,笔者...

博客营销:提升网页信噪比之代码和内容优化去噪

网页信噪比指的是网页中的文本内容部分与生成这些文本而产生的html标签内容的比率,一般来说网页信噪比越高,我们的这个网页的质量可能就越好,可以基于搜索引擎对于网页的抓取原则来解释:搜索引擎蜘蛛在抓取网页的时候,会对网页去重,主要是为了去掉网页的噪声,...