web前端优化之常规优化(1)

 页面打开速度(Fully Loaded)

      1  网站首页(或列表页)之 First View :打开速度应在 3秒+0.5秒 内;

      2  对 Repeat View 时的各项指标暂不作要求;

  首屏打开时间(Start Render)

     1  网站首页(或列表页) 之 First View :首屏渲染速度应在 1秒+0.5秒 内;

  文档解析完毕时间(Document Complete):

      对此指标暂不作要求。

  常规优化建议:

  1   javascript 外联文件引用放在 html 文档底部:具体如何摆放内联JS/CSS和外联JS/CSS,请参考 优化第二阶段;

  2   css 外联文件引用在 html 文档头部:位于 header 内;

  3   http 静态资源尽量用多个子域名:充分利用现代浏览器的多线程并发下载能力。浏览器的多线程下载能力,参考 附录C;

        具体建议:

JS、CSS、CSS背景图片、CSSSprite图片分散在 s0~s2.haoyangshiimg.com 下;

业务类图片分散在 p0~p3.haoyangshi.com 下;

  4   服务器端提供 html 文档和 http 静态资源时,尽量开启 gzip 压缩;

json/xml 等格式的文本响应,也建议开启 gzip ;

jepg/png 等图片,可以选择不开启 gzip,因为可能服务器端图片无损压缩算法已经很强悍了,不需要依赖于 gzip;

  5  在 js、css、image 等资源响应的 http headers 里,设置 expires、last-modified;
             nginx如下设置:

location ~ .*\.(js|css)${
expires 30d;
}
location ~ .*\.(gif|jpg|jpeg|png|bmp)${
expires 1M;
}

 6 尽量减少 HTTP Requests 的数量;

          通过 combo handler 合并 js 和 css 的下载,参考 优化第三阶段;

         本阶段请尽量减少外联 js/css 文件数,尽量减少 ajax 调用;

  7 js/css 的 minify:可统一通过 combo handler 做到压缩加合并;

  8 减少不必要的 301/302 跳转:别让页面打开时间浪费在302多次跳转上(每次可能几十毫秒);

  9 请大量使用 CSS Sprites:这样做可以大大地减少CSS背景图片的HTTP请求次数;

  10 首屏不需要展示的较大尺寸图片,请使用 LazyLoad ;

  11 避免404错误:请求一个外联 js 失败时获得的404错误,不但会堵塞并行的下载,而且浏览器会尝试分析404响应的内容,来辨识它是否是有用的Javascript代码;

  12 减少 cookies 的大小:尽量减少 cookies 的体积对减少用户获得响应的时间十分重要;

       去除不必要的 cookie ;

      尽量减少 cookie 的大小;

      留心将 cookie 设置在适当的域名下,避免影响到其他网站;

      设置适当的过期时间。一个较早的过期时间或者不设置过期时间会更快地删除 cookie,从而减少响应时间。

  13 使用无 cookies 的域:

  当浏览其请求一个静态图片并一同发送 cookie 时,服务器并不需要这些 cookies 。这样只是毫无益处地创建了多余的网络流量。应当保证静态资源在请求时没有携带 cookies,所以需要把你的静态资源放在另一个子域名下。

  如果你的域名是 www.example.org,你可以将你的静态资源放在 static.example.org 中。如果你把 cookie 设置在顶级域名 example.org 上而不是 www.example.org,那么所有发送至 static.example.org 的请求会包括那些 cookies。在 这种情况下,你可以用一个全新的没有 cookie 的域名来放置你的静态资源。

  14 避免使用 javascript 来定位布局

时间: 2024-08-04 20:54:36

web前端优化之常规优化(1)的相关文章

关于web前端开发过程中SEO优化的注意点

SEO优化通俗点说就是为了让网站在各大搜索引擎中更容易的被搜到,即提高搜索排行,从而提高网站流量的一个技术手段 在写web页面的时候,为了让网络爬虫更容易的搜索到页面,需要注意几个点: html语义化 刚接触web前端开发的时候很奇怪,既然html标签可以通过css进行更改它的内置属性,为什么还有这么多的标签存在 <div>,<h1>,<span>,<strong>.... 而现在,随着对前端的不断深入,才逐渐明白它的用处 语义化的html可以让开发者更容易

web前端9大性能优化方案汇总

网页的性能问题是产品开发过程中的一个重要的环节,在产品成功地把功能实现后,性能能好与坏就直接影响了用户体验,以至于影响了产品的成败! 作为web前端开发者,对前端部分进行性能上的优化,是责无旁贷,刻不容缓的工作.下面简介一下9种性能优化方案. 一.罪魁祸首是http请求 一般网页,80%的响应时间花在下载网页内容(images, stylesheets, javascripts, scripts, flash等).减少请求次数是缩短响应时间的关键!可以通过简化页面设计来减少请求次数,但页面内容较

【Web前端】jQuery界面优化

随着互联网的发展,网站的前端界面会越来越重要,它关注的是用户的直接体验.市场上同类型的网站越来越多,一个比其他同类网站更流畅.优雅的界面能让用户摈弃你的竞争对手.所以,让自己的网站前端运行的更快.界面更优美成为了一个重要的话题.从而,前端界面优化技术也成为了优秀前端开发人员必备的技能,这是核心竞争力. 今天介绍的是jQuery这个流行的前端javascript开发框架里的一些优化技术,这些优化技术需要我们深入理解JavaScript以及Web浏览器中DOM与JavaScript引擎关系. 减少D

全方位分析web前端如何进行性能优化

前言: 最近刚刚完成项目,空闲一段时间,想起之前有被问起怎么对前端进行性能优化,自己也是脑中零零散散的总不成体系,现特来总结,欢迎补充指教. 1.整体资源 (1)js.css源码压缩 (2)css文件放到文档顶部,js 文件放到文档底部 因为浏览器渲染网页是自上而下的,用户第一眼见到的是页面,先加载页面相关的提高页面加载速度,另外避免js在页面没有完全加载完成操作DOM带来错误 (3)进行CDN托管(具体可参看https://div.io/topic/930) (4)data缓存 2.css (

web前端之网站seo优化学习笔记

这两天因为一些公司业务上的原因,学习了一些关于网站seo优化的方法和技巧. 之前在码代码的过程中其实还没有考虑过对于网站导流和优化网站关键字搜索排名的问题. 在了解了一些这方面的资料之后,觉得这是一个很有意思的领域.把这几天的学习笔记记下来. 个人理解是在一个项目基本上完成主要需求后需要运营需求加入的时候,此时seo优化就非常重要.所以在网站开发的最开始有经验的前端coder们在搭架子的时候就应该提前把以后运营汪们可能会提出的运营需求,特别是一些针对影响关键字排名和与搜索引擎相关的部分就可以考虑

web前端性能

由于web前端性能测试包含的知识点很多:浏览器工作原理.浏览器缓存.相关的http头信息.http状态码.完整的一个http请求及响应过程.响应时间.web前端性能测试工具以及优化方法等等,所以决定分两篇文章来总结,这一篇主要介绍一些跟web前端性能有关的一些概念,最近也在收集阅读相关文档,一边学习一边理解消化一边总结,有什么不对的希望指出. 浏览器的主要构成: 1>.用户界面 - 包括地址栏.后退/前进按钮.书签目录等,也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分. 2>.

Web 前端性能优化 : 如何有效提升静态文件的加载速度

作者:刘轶斌,腾讯应用开发 工程师商业转载请联系腾讯WeTest获得授权,非商业转载请注明出处.原文链接:http://wetest.qq.com/lab/view/345.html 一.如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标.那么为了提高页面加载(或者渲染)速度呢?一般来说有三个方面: 1.代码逻辑:优秀的代码逻辑结构可以有效减少渲染页面使用的内存和速度(比如虚拟DOM),此方面不在本文讨论范围内. 2.SSR服务器渲染,也

Web前端性能优化——如何有效提升静态文件的加载速度

一.如何优化 用户在访问网页时, 最直观的感受就是页面内容出来的速度,我们要做的优化工作, 也主要是为了这个目标.那么为了提高页面加载(或者渲染)速度呢?一般来说有三个方面: 1.代码逻辑:优秀的代码逻辑结构可以有效减少渲染页面使用的内存和速度(比如虚拟DOM),此方面不在本文讨论范围内. 2.SSR服务器渲染,也就是所谓的“直出”.将首屏所有内容在服务器端渲染成html静态代码后,直接输出给浏览器,可以有效加快用户访问站点时首屏的加载时间.不过此方面也不在本文讨论范围内. 3.提升静态文件的加

web前端性能优化总结

网站的划分一般为二:前端和后台.我们可以理解成后台是用来实现网站的功能的,比如:实现用户注册,用户能够为文章发表评论等等.而前端呢?其实应该是属于功能的表现.并且影响用户访问体验的绝大部分来自前端页面. 而我们建设网站的目的是什么呢?不就是为了让目标人群来访问吗?所以我们可以理解成前端才是真正和用户接触的.除了后台需要在性能上做优化外,其实前端的页面更需要在性能优化上下功夫,只有这样才能给我们的用户带来更好的用户体验.就好像,好多人问,男人在找女朋友的时候是不是只看外表,一些智慧的男人给出了这样