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

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

概述

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的前端性能优化

猜你喜欢

搜索引擎优化教程:网站代码优化:让网站打开速度飞起来

网站的打开速度是一个非常重要的用户体验考核标准,当然,影响网站打开速度的原因有很多,比如服务器的问题,比如程序的问题等等,本文和大家主要分析的不是外部因素,主要是大家在网站设计过程当中,把内部因素做到极致,加快网站的打开速度就是这么简单! 一、如何判...

网站推广方法:Web前端性能优化教程05:网站样式和脚本

本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置、使用外部javascript和css。完整教程可查看:Web前端性能优化 一、将样式表放在顶部 可视性回馈的重要性 进度指示器有三个主要优势—&md...

seo 优化:提高网站访问速度的10个有效方法

不论从网站的用户体验,还是搜索引擎抓取及获得较好的排名效果,网站的访问速度对于我们来说是相当重要的。我们可以查阅Google Panda的相关条款文件中看到网站的访问速度已经被列为获取较好索引的关键因素之一。往往来很多时候,网站的访问速度和主机并没...