在线客服与您一对一交流
当前位置: 主页 > 行业新闻 > IT技术 >

西安做网站-如何优化响应式站点的移动性能?

  在这篇文章中,我们会谈到移动互联网和响应式设计的关系,首先将介绍如何巧妙的运用响应式设计,为什么性能对移动端非常重要,为什么响应式设计不能作为你网站的目标,最后技术的性能问题帮助我们更好的理解这问题。
  网站优化 移动站点优化 响应式设计
  自2000年开始,设计者和开发者就把移动设备的问题过于简单化,以至于现在仍然有人认为响应式网页设计能解决一切问题。
  大家必须明白,凌驾于任何目标,移动网络体验必须和闪电一样快。迅速、实用、兼容的体验对所有移动设备都是挑战。当你使用响应式设计时,这些挑战都存在。从一开始就重视性能会让过程容易些。
  响应式设计是很棒,但不是万能钥匙。如果你在移动设备上一味坚持,在转换率后就可能隐藏着性能问题。大约有11%的网站是响应式,这个数字每月都在增长,所以现在是谈论这个问题的时机了。
  据Guy Podjarny研究,72%的响应式网站不分屏幕大小都提供相同的字节,尽管这会降低移动网络连接。不是所有用户都有耐心等着网站加载。
  对响应式设计存在的问题有了基本认识,我们就能减低它带来的损失。
  移动网站来自过去
  我不是说你不应该采用响应式设计或者去用m.*的子域名。事实上,现在社会分享无处不在,不分设备,分配给给文档一个URL,这是聪明的做法。但这并不意味着一个单独URL应该提供相同的文档或每一个设备都应该下载相同的资源。
  援引Ethan Marcotte的话,他创造了“响应式网页设计”这个术语。
  最重要的是,响应式网页设计的初衷不是要取代移动网页。——Ethan Marcotte
  网站优化 移动站点优化 响应式设计
  交互、移动、快速
  如果我们能使用一些其他的技术,就可以实现获得响应式设计好处的同时,不影响移动设备的性能。响应式设计从来不是意味着要解决“性能”,这也是为什么我们不能因此指责它的原因。然而,相信它能解决你所有问题,这大错特错。
  设计响应式很重要,因为我们需要解决跨桌面和移动端视窗大小范围的问题。但是只考虑屏幕大小就低估了移动设备。桌面和移动端的界限正在变得模糊,基于不同的设备对我们而言仍然有多种可能性。但是我们还不能通过媒体查询来决定响应式设计的功能。一些评论家称之为“可靠的响应式网页设计”,然而另一些人则认为它是伴随现代视觉的响应式网页设计。在没有了解其基本语义的情况下,我们需要搞清楚这个问题。
  虽然没有可应用于各类文档的万全之策,但是能够运用一些技巧来改善现有响应式的解决办法,并且力求性能最大化。
  实现每一个文档对所有的设备都使用相同的URL和相同的内容,结构不必要相同。
  当从零开始,遵循“移动先行”的方法。
  在一个真实设备上测试当资源加载和显示会发生什么。不要依赖调整你的桌面浏览器。
  使用优化工具测量和提高性能。
  通过JavaScript传输响应图片,虽然我们更期盼着浏览器供应商(例如srcset)能解决这个问题
  当你需要当前设备具备加载条件时,只加载JavaScript,这会在onload事件之后发生。
  对移动设备,内联文档的原始视图,或者发送一屏显示内容。
  使用下面一种或几种技术应用智能响应式的解决方案:条件加载、按组响应、服务器端层(如适应性方法)。
  条件加载
  不要总是在CSS中依赖media queries,因为浏览器将会为所有设备加载和解析所有选择器和样式 (后面详细讨论)。这就意味着手机为了一个大屏要下载和解析CSS。因为CSS块的呈现,你要浪费一些时间等待联接成功。
  在设备上用JavaScript的matchMedia查询来代替CSS media queries,你知道这些内容是不会变化的。例如,大家都知道iPhone不能动态的转换成iPad的规格,所以我们只在正在需要CSS时才用。
  可以用特征检测,例如 Modernizr,对UI和功能性做出更明智的决定而不是仅仅根据屏幕尺寸。
  按组响应
  在处理简单文档、为台式电脑和智能手机提供相同的HTML时,虽然为我们可以让所有屏幕依赖一个单一的HTML基础和响应式设计,但这并不总是最好的解决方案。为什么呢?同样是由于移动设备的性能。
  即使我们在服务器端储存相同的文档,但是根据设备组别的不同给用户不同的文档。举个例子,为一个6英寸甚至更大的屏幕提供大的浮动菜单,为一个小屏幕提供汉堡菜单。在每个组群里,使用响应时技术以适应不同的场景,例如肖像模式和风景模式的转换,切换iPhone(320像素宽)、5英寸Android设备(360英寸)和平板(400像素)。
  服务器端层
  智能响应策略的最后一个选择是服务器。
  服务器端功能检测和决策不是移动网络的新鲜玩意。类似 WURFL 和Device Atlas的库在市场上有好多年,响应式设计和服务器组件的混合也众所周知。有时被称为是响应式设计和服务器端组件(RESS),有时又叫自适应设计,这提高了响应式设计的速度和可用性,同时每一个服务器端都保持一个代码库。
  很遗憾的是。这些技术这几年并没有什么突破性的发展。只能在博客和杂志里看到一些开发者对“RESS”、“响应式”、“自适应”做比较。原因就是:我们是前端专业人士。任何涉及到服务器的事情看起来都是不太愉快的问题。在一些情况下,前端设计师能把握好服务器的脚本,另一些情况是,服务器由远程开发团队管理,设计师不想每做一次小的UI改变就要和远程团队沟通处理。我能体会这种感觉。
  这就是在大型项目中要花时间思考新架构层的原因,这样前端工程师对服务器做决定时不会影响到后端架构。Node.js是一个极好的备选平台,是介于当前企业后端基础和前端之间的服务器端层。
  在这个新的端层里,前端的工程师可以根据有现实的决定权,这会使得在不触及后端架构的情况下,让所有设备上的体验更为快速、响应、可用。
  ———————————————————————————————————
  ————让实力为我们作证,让效果为我们代言。
  请拨打我们的电话,让我们的服务、让我们的技术、促进咱们之间长久的合作!
  公司名称:西安蟠龙网络科技有限公司(西安剑锋网络)
  官方网站:http://www.it2168.com

相关文章:

  • 所谓网站的公信力就是说让大家相信的力量。我们在网络上做营销,就是为了提升自己品牌网站的公信力。那么,我们应该从那些方面入手呢? 1、公司产品介绍 很多客户对于网站的信任还是...

  • 大部分的行业流量来源于自然搜索,搜索引擎的优化是网站优化的重点,所以很多企业每隔一段时间就会根据网站自然搜索情况进行考核,包括收录量、访问量、关键词数量、外链数量...

  • 西安网站建设推荐阅读 西安网站建设:教你如何快速提升百度排名 所谓域名,就是我们平时说的网址,通俗的讲就是单位或者公司在互联网上的名字。随着网络的不断发展,域名已经...

  • 在这个网络时代,人们的生活可谓是与网络息息相关,工作更是离不开网络,谁家的企业会没有一个对外宣传自家企业形象及产品或服务的网站呢!但是并不是所有的企业都拥有自己的...

  • 百度竞价关键词数量越多越好吗?这个问题之前很多做竞价的企业问我,今天小编就以文字形式和大家一起探讨这个问题。 首先要明白关键词的意义是什么?说白了,关键词是竞价的基础...

  • 众所周知,网站制作公司认为客户很重视网站的功能,很重视网站的安全性,很重视网站的售后服务如何,并且将这些因素摆在了网站制作服务的第一位。但是在与客户交流中,我们时...

  • 网站建设应该如何保证高质量的内容,这是值得大家关注的问题,特别是企业网站,很多时候会认为没有什么好更新的,更谈不上什么是高质量的内容了,下面的几个方法就是告诉你如...

  • 关于网站优化,也可以说是搜索引擎优化,我们西安网站建设公司认为其实并不是简单的几个秘诀或几个建议,而是一项长期的劳动,需要在体力与脑力方面付出足够耐心和细致精力,...

  • 当今的网络时代,移动互联网时代的疯狂飙升,用户们可以通过不同的设备进入网络中,但是这些设备又有着特定的屏幕尺寸、分辨率等,在这样的情况下,建设响应式的网站成为了客...

  • 1.什么是竞价广告? 是一种由用户自主投放,自主管理,按照广告效果付费的新型网络广告形式。 西安竞价托管 2.竞价广告有哪些? 1)腾讯竞价广告 腾讯竞价广告是一种由用户自主投...

  • 公司:西安蟠龙网络科技有限公司
  • 联系人:张经理
  • 手机/微信:
  • Q Q: 点击这里给我发消息
  • 地址:西安市雁塔区唐延南路11号逸翠园i都会