如果您的网站在3秒内没有响应，人们就会失去兴趣。为了满足这种快速响应的需求，需要一种不同的方法来在移动端进行分析、设计和测试。本文将扩展JohanJohansson于2013年4月发表的“如何让您的网站在移动设备上快速运行”的想法。我们将提出一个论点来确认人们在移动设备上与网站互动的方式与以前不同，特别是设计是基于这个想法。我们的目标不仅是提高网站性能，还包括增加客户收入。我们将重点关注不会很快改变的两个手机特性：小电池和小屏幕。小电池手机是靠无线电通讯的，但是手机的电池很小，所以用电一定要小心，防止没电了。这样，如果收音机不使用，它会很快关闭，从而增加了网页出现的时间。2G和3G无线技术需要2秒来建立HTTP连接。如果我接受“用户在3秒后失去兴趣”的观点，那么我们的网站只有1秒的响应时间。想想这个“黄金秒”。在小屏幕上充分利用这个“黄金时刻”在现实世界中，广告牌和杂志内容是根据媒体的大小和观看距离量身定制的。在数字世界中，典型的中端智能手机屏幕几乎为6平方英寸。15英寸的MacBookPro电脑屏幕尺寸超过100平方英寸。这样，我们不仅可以通过减少发送到移动端的内容来优化网站性能，还可以优化业务流程，提高网站所有者的投资回报率。最大化“黄金秒”网站设计人员和开发人员通常认为用户应该连接到高带宽Wi-Fi和固定线路网络是理所当然的。响应式网页设计(RWD)强制在不同设备（无论好坏）上显示相同的内容、导航和业务流程，限制了创新。确保我们能够轻松进行性能测量、基于不同设备特性的用户行为监控解决方案、低带宽设备网页访问优化，都需要最大限度地利用好这个“黄金秒”。模拟真实网络真实的移动带宽模拟测试是必不可少的移动网络性能测试。许多100美元以下的廉价无线路由器都提供带宽限制功能，测试只涉及局域网内客户端的上行和下行带宽限制功能。如果路由器不支持这个功能，那就尝试使用DD-WRT（DD-WRT是一个开源的升级固件，可以替代目前主流路由器的默认操作系统）来限制带宽。我用DD-WRT升级了LinksysE3000路由器。路由升级的过程非常简单，DD-WRT官网有完整的说明。安装DD-WRT后，转到QoS菜单并启用带宽限制。设置上下行带宽的值，我以前设置下行带宽为256kbps，上行带宽为28kbps来模拟移动网络的平均带宽。在“服务质量”选项中限制带宽现在人为地限制连接到路由器的设备的带宽，无论它们是Wi-Fi还是以太网。我们可以监控带宽的实际使用情况。使用DD-WRT监控带宽利用率虽然这种测试方法不包括随机丢失、可变带宽条件和由信号强度引起的延迟，但它比您在快速、低延迟带宽上进行的其他测试效果更好。在网站开发的早期，这是一种在开发过程中非正式测试Web性能的简单方法，可确保您在正式测试期间不会遇到任何棘手的问题。#p#YouCan'tManageWhatYouCan'tMeasure管理顾问彼得·德鲁克(PeterDrucker)曾经说过一句名言：“如果无法衡量某事，就无法管理它。”随着时间的推移，平均屏幕尺寸会继续增长，根据设备功能（例如无线支持或屏幕尺寸）来监控用户查看的内容，这将帮助您识别手机上的热门内容和服务。也许你看不出有什么不同，但除非你测量，否则你无法确定。示例：“我现在就去吃饭”网站一家全球快餐连锁店需要为其大屏幕Internet网站创建适用于移动设备的优化版本。在创建第一个针对移动设备优化的Internet站点之前，执行分析以确定小屏幕设备用户可以访问大屏幕Internet站点的哪些项目。主菜单、特色菜和商店查询是最受欢迎的，因此创建针对移动设备优化的Internet站点的重点是这些领域。工作不能就此停止。随后的分析表明，商店查询最受欢迎。于是再次修改移动端首页，专注于店铺查询。持续监控显示有多少访问者选择了其他选项，然后不断改进此Internet站点以确保以最简单可行的方式实施最受欢迎的部分。好的日志GoogleAnalytics提供了一些关于设备型号的信息，但它缺少我们根据屏幕尺寸和输入法做出明智决定所需的详细信息。幸运的是，综合设备检测库(DDR)可以将此信息添加到现有日志文件中。可以将以下代码片段添加到.NET网站，引用51degrees.mobi（可通过NuGet获取）以获取屏幕的物理尺寸并输出到一个简单的CSV文件。//写入一个包含当前时间和屏幕的日志文件,String.Format("{0:s},{1},{2},{3}\r\n",DateTime.UtcNow,Request.Path,Request.Browser["ScreenInchesWidth"],Request.Browser["ScreenInchesHeight"]));第一行是处理请求的日期和时间。第二行是请求的页面。最后两行是设备屏幕的宽度和高度。获取足够的数据和平均屏幕尺寸得出下图：比较20个月内的平均设备屏幕尺寸分析可以缩小到特定页面。有关设备、操作系统和浏览器的特征也可以添加到列中。类似的代码可用于PHP、Java、Python和其他环境语言。现有的日志文件有时，现有的网页无法通过上述方式进行修改。在这种情况下，DDR可用于对包含用户代理的日志文本执行离线分析。以下.NET代码是实用命令行程序，它解析以空格分隔的日志文件，然后计算日志所表示的请求的平均屏幕大小（以平方英尺为单位）。第一个参数是日志文件的位置，第二个参数是用户代理所在的日志文件中列的索引。使用系统；使用FiftyOne.Foundation.Mobile.Detection.Binary；使用System.IO；namespaceConsoleApplication{classProgram{staticvoidMain(string[]args){//从日志文件中读取的设备数量。整数=0；//用户代理包含的输入文件中的列。intcolumn=int.Parse(args[1]);//屏幕维度变量。doubletotal=0，宽度，高度，squareInches；//创建一个提供者来确定设备的能力。varprovider=Reader.Create("51Degrees.mobi.dat");//读取参数0中提供的日志文件的每一行。//假设第8列的值是UserAgent字符串。使用(varreader=File.OpenText(args[0])){while(reader.EndOfStream==false){varvalues=reader.ReadLine().Split(new[]{''});if(values.Length>=column){//获取基于用户代理的设备信息。vardevice=provider.GetDeviceInfo(值[column-1].Replace("+",""));if(device!=null){//Determinethescreendimensionsininches.double.TryParse(device.GetFirstPropertyValue("ScreenInchesWidth"),outwidth);double.TryParse(device.GetFirstPropertyValue("ScreenInchesHeight"),outheight);squareInches=width*height;//Ifvalidvaluesareavailable(notadesktop/laptop)//thenaddthevaluestothersults.if(squareInches>0){total+=squareInches;count++;}}}}}Console.WriteLine("Averagescreensize'{0:#.00}'squareinchesfrom'{1}'devices",total/count,count);Console.ReadKey();}}}分析日志文件非常不准确，因为除了User-Agent之外还有其他HTTPheader会影响检测结果。对于OperaMini和Opera移动浏览器尤其如此。在这两个浏览器中，第二个HTTPheader，也是名为Device-Stock-的headerUA通常用于提供标准用户代理中不可用的有关物理硬件的信息。#p#为什么要监控？监控允许我们从主页中删除不需要的内容，以提高更重要的内容或相关内容的性能。已删除的内容应该仍然可以通过二级p访问ages-只是不要在首页，否则它们会消耗宝贵的带宽并降低性能体验。那么，我们如何创建一个独立的性能优化的移动网站呢？分而治之从UI设计的角度来看，我可以理解为什么RWD（响应式网页设计）有意义。对于6"sq"屏幕与10"sq"屏幕，只需要进行更改如果内容、导航和业务流程需要具有完全相同的布局，那就太好了。平均设备屏幕尺寸。但是，有一个单独的移动网站具有特殊的意义。独立的移动网站通常会带来糟糕的用户体验。通过对搜索引擎评级较低的网站进行处罚，谷歌现在为这些常见问题带来了曙光。问题包括将每个桌面页面发送到单独的移动主页、重定向到应用程序下载页面、阻止用户访问具有更大屏幕的站点以及以相同方式对待具有特定操作系统的所有设备。这些糟糕的实现给这些概念留下了不好的印象。这里有一些简单而正确的方法来做到这一点。以下.NETweb.config代码段会将来自智能手机的第一个请求重定向到网站“智能手机”部分中指定的等效页面。跨重定向保留查询字符串和页面名称很重要。
