顶部右侧 | 自行修改 顶部左侧内容
当前位置:网站首页 > SEO技术 > 正文

一张图看懂HTML5的前端性能优化

seo秀 2019-05-25 17 浏览 0 评论

概述,优化指南,

概述

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加载

相关推荐

做SEO多久才能看到效果?
  • 做SEO多久才能看到效果?
  • 做SEO多久才能看到效果?
  • 做SEO多久才能看到效果?
  • 做SEO多久才能看到效果?
什么是SEO网络推广,每天都需要做那些事?
  • 什么是SEO网络推广,每天都需要做那些事?
  • 什么是SEO网络推广,每天都需要做那些事?
  • 什么是SEO网络推广,每天都需要做那些事?
  • 什么是SEO网络推广,每天都需要做那些事?
SEO全揭秘,这里独一份,适合各阶段人群
  • SEO全揭秘,这里独一份,适合各阶段人群
  • SEO全揭秘,这里独一份,适合各阶段人群
  • SEO全揭秘,这里独一份,适合各阶段人群
  • SEO全揭秘,这里独一份,适合各阶段人群
今日头条seo如何优化?如何做搜索靠前呢?
今日头条seo如何优化?如何做搜索靠前呢?

一、“头条seo”是什么?头条seo指的是在今日头条app上用关键词搜索结果排名靠前。做百度有所谓的“百度seo”,做谷歌有所谓的“谷歌seo”,那么作为头条这...

6天前 seo秀

如何判断一个要优化的关键词能否SEO上百度首页?
  • 如何判断一个要优化的关键词能否SEO上百度首页?
  • 如何判断一个要优化的关键词能否SEO上百度首页?
  • 如何判断一个要优化的关键词能否SEO上百度首页?
  • 如何判断一个要优化的关键词能否SEO上百度首页?
百度官方分享:让蜘蛛抓取网页的四种方式
百度官方分享:让蜘蛛抓取网页的四种方式

百度在微信上分先过来四种让蜘蛛收录网页的四种方式,主推推送、sitemap、手工提交、自动推送。那是什么意思呢?1、主动推送:是最为快速的提交方式,建议您将站点...

3个月前 (06-03) seo秀

2019年百度seo算法大全 第一篇
  • 2019年百度seo算法大全 第一篇
  • 2019年百度seo算法大全 第一篇
  • 2019年百度seo算法大全 第一篇
  • 2019年百度seo算法大全 第一篇
2019年百度seo算法大全 第二篇
  • 2019年百度seo算法大全 第二篇
  • 2019年百度seo算法大全 第二篇
  • 2019年百度seo算法大全 第二篇
  • 2019年百度seo算法大全 第二篇
关键字的优化需要注意什么?
关键字的优化需要注意什么?

网站关键字可以带来更多的流量到您的网站,可以带来更好的排名为你的网站在搜索引擎。随着互联网科技的不断发展,我们在我们的日常生活中发现,在网络中起着非常重要的作用...

3个月前 (06-02) seo秀

SEO前景怎么样?

经济低迷,做付费推广你们不心疼吗?还是做SEO吧!对于利用搜索引擎进行的推广营销,这是任何企业都不可以忽略的。在做搜索引擎营销,即SEM,以百度为例子,SEM包含:知道、地图、文库、百科、经验等以及付...

欢迎 发表评论: