×

深圳网站建设—APP开发—网站制作—小程序开发_博纳网络公司

0755 -
82538016
82560826
网站制作资讯

高端网站改版建设对于用户访问体验在设计工作的计时度量设计方法详解

文章编辑:网站建设 文章来源:网站改版 浏览量:

     高端网站改版建设对于用户访问体验在设计工作的计时度量设计方法详解。网站建设公司提醒制作设计网站除了站点的资源数量和大小,还有其他的计时度量会影响用户对网站性能的体验。首字节时间首字节时间是指从浏览器请求网站页面开始,到浏览器接收到第一个字节之间的毫秒数。这个数值用来测量浏览器和服务器之间的连通路径,包括 DNS 查询、初始连接和数据接收。它并不是判断站点性能的最佳标准,却是一个值得关注的指标。开始渲染时间更有价值的计时度量是“开始渲染时间”。这个度量是指用户开始在页面上看到内容的时间。这意味着所有阻塞渲染的文件都已经加载完成,浏览器已经开始渲染文档模型了。可以通过以下方式优化开始渲染时间:延迟加载阻塞渲染的 JavaScript 和 CSS 文件、将关键的 CSS 代码内联到页面头部、用数据 URI 代替图片资源,以及延迟加载所有在文档模型渲染完成后才下载的资源。文档完成时间只要最初请求的资源已经加载成功,就可以认为文档“完成”了。文档完成时间不包括 JavaScript 中拉取资源消耗的时间,因此延迟加载的资源不会影响这个指标。
    
一、端网站改版建设对于用户访问体验在设计工作的计时度量设计方法之混合度量标准
    混合度量标准不是度量离散的值,而是根据多个性能指标综合打分得出。PageSpeed分数
PageSpeed(https://developers.google.com/speed/pagespeed/insights/)是 Google 开发的网站工具和 Chrome 浏览器的扩展程序,用来分析站点的性能和网站的可用性,它给出一个用百分比表示的分数,并解释了提高分数的方法。测试包括:
· 是否存在阻塞渲染的 JavaScript 或者 CSS
· 重定向至登陆页
· 图片优化
· 文件压缩
· 服务器响应时间
· 服务器端压缩
· 浏览器端缓存
· 点击目标的大小
· 窗口可见区域的配置
· 清晰的字体大小
二、端网站改版建设对于用户访问体验在设计工作的计时度量设计方法之Speed Index指标
    根据 Speed Index 项目主页上的描述,Speed Index(https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index)指的是页面可见部分展示完成的平均时间,该指标通过用毫秒表示,并取决于视图端口的大小。混合度量标准的分数考虑了上述多个单一的度量标准,并将这些标准和页面加载时用户可以实际看到的标准结合起来。Speed Index 是度量终端用户实际体验的最好标准之一。
三、端网站改版建设对于用户访问体验在设计工作的计时度量设计方法之设置性能测试
    现在我们已经知道可以测试哪些指标,以及如何制定性能预算。那么接下来看几个用于自动化测试流程的方法。不管是测试站点是一个还是几十个,恐怕没有人愿意手动测试。
四、端网站改版建设对于用户访问体验在设计工作的计时度量设计方法之Grunt PageSpeed插件
    我们要了解的第一个测试流程自动化工具是 Grunt 的 PageSpeed 插件(https://www.npmjs.com/package/grunt-pagespeed)。顾名思义,这个 Grunt 插件可以自动化地运行 Google 的 PageSpeed 来测试我们的站点。我们能在所有的分支合并请求和后续集成构建之前就运行该 Grunt 任务, 而不用将你的 URL 插入到 Page Speed 页面中或使用 Chrome 扩展。为了设置 Grunt PageSpeed 插件,首先使用标准的命令安装和引入该插件。
$ npm install grunt-pagespeed ——save-dev
// 加入Gruntfile.js
grunt.loadNpmTasks('grunt-pagespeed');
// 在Gruntfile.js中加入grunt.initConfig
$ npm install grunt-perfbudget ——save-dev
// 加入Gruntfile.js
grunt.loadNpmTasks('grunt-perfbudget');
perfbudget:{
 default:{
  options:{
   url:'http://www.redhat.com/en',
   key:'SEE_NOTE_ABOVE',
   budget:{
    visualComplete:'4000',
    SpeedIndex:'1500'
   }
  }
 }
}
    深圳网站建设公司资深设计师上述设置使我们可以在 Red Hat 主页上自动运行全部的 WebPageTest 测试集。在这个例子中,我设置视觉完成时间指标为 4000 毫秒,而 Speed Index 指标为 1500 毫秒。如果有任何测试返回结果超出预算,那么就会得到一个严重错误提示信息,提示我们重新审视最新提交的代码,检查究竟是什么导致超出预算。通过适当的自动化测试流程和有竞争力的预算,你就有了一个很好的起点,在此基础上可以持续开发新的功能并改进网站,同时确保提交的改变不会超出预算。好了,深圳网站建设公司本文关于“高端网站改版建设对于用户访问体验在设计工作的计时度量设计方法详解”就分享到这里。如果您需要联系深圳的高端网站建设公司,请拨打我们网站联系电话,有专人为您提供免费建设制作设计方案。谢谢关注,博纳网络编辑整理。

当前文章链接:/construction/wzgb/14864.html
如果您觉得案例还不错请帮忙分享:

[声明]本网转载网络媒体稿件是为了传播更多的信息,此类稿件不代表本网观点,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的内容侵犯了您的版权,请您的相关内容发至此邮箱【qin@198bona.com 】,我们在确认后,会立即删除,保证您的版权。

相关案例推荐