如何优化移动性能

最好的设计从一开始就考虑到移动设备来平衡美学和性能。 从设置严格的性能预算到实施客户端和服务器端优化技术，我将分享我们在Cyber​​-Duck使用的当前移动性能优化流程。

成为移动思维

性能是用户体验的关键部分，因此不能在开发过程结束时事后考虑。 最好通过具有移动意识的结构来管理项目，设计师和开发人员从一开始就合作。

协作审查

对于每个项目，与内部团队一起审查设计和开发范围，并定义关键绩效指标 (KPI) 目标。 这些是基于业务目标表明项目成功的里程碑指标。 鉴于它们的重要性，与性能相关的目标应该出现在此处。

在整个内部团队审查输出之前，不要与利益相关者签署重要的项目里程碑（如艺术指导和线框图）。 否则，我们发现开发人员可以在实施过程中请求设计调整（以减小页面大小）。 由于设计已经签署，此阶段的更改可能会造成复杂性，从而开启进一步的客户批准。 当开发人员从一开始就参与其中时，他们可以估计接口所需的大小和编程能力，并避免这种情况。

绩效预算

进入移动思维模式的最佳方式是设置并遵守严格的性能预算：为最终网站的速度和规模制定目标。 当团队朝着明确的高性能目标努力时，他们必须选择是否实施轮播等昂贵的功能。

具体的业务目标和用户需求决定了我们是否设置基于数字的绩效预算。 例如，我们自己的网站改造旨在显着改善跨设备的加载时间，并提高移动转化率。 我们为移动设备设置了不超过 40 个 HTTP 请求或 500KB 数据的严格限制。 谷歌分析数据可以告知在改造期间选择哪些目标，因为历史互动表明了目标受众的行为。

通常我们定义页面大小的目标，移动主页的限制为 500KB。 服务器请求更难预测，因此我们不太可能设置确切的数字。 这些粗略的指导方针适合我们对客户项目的需求。 但是 Daniel Mall 有一个很好的实用指南来增加预算的细节：从为 HTML 和 CSS 分配权重，到 JavaScript、图像和网络字体。

优化技术

在移动设备上，网站加载速度由客户端和服务器端因素驱动。 使用解决这两个因素的有针对性的优化技术可以帮助您满足为项目设置的性能预算。

客户端优化

随着移动环境的多样化（2014 年有超过 5,000 种独特的智能手机设备），开发人员对单个设备性能的控制远低于服务器端因素。 因此，客户端优化至关重要。 以下技术旨在减少移动设备加载网站所需的处理时间和功率。

优化代码

许多开发人员陷入了使用 jQuery 编写来为网站提供动力的陷阱。 但是没有这样的事情。 事实上，您正在使用 JavaScript 编写代码，同时使用了一个有用的快捷方式和函数库。 尽管这加快了开发速度——有用，但当您需要将产品快速推向市场时——可能会产生性能成本。 jQuery 库增加了重量，插件（和函数）的灵活性意味着它们经常会变得臃肿。

这是一个示例，JavaScript 和 jQuery 用于相同的功能。 用纯 JavaScript 编写可以避免将另一个外部库拉入您的应用程序，并将节省另一个宝贵的 HTTP 请求。

 // jQuery var con = $('#my_container'); con.css('width','75%'); // Plain JavaScript var con = document.getElementById('my_container'); el.style.width = '75%';

您可以使用 Grunt 或 Gulp 等系统或 Prepos、Codekit 或 Hammer 等前端编译器应用程序进一步优化 CSS 和 JS 文件。 它们通过执行各种任务来减少 HTTP 请求和文件大小：连接文件、编译 Sass、Less 或 CoffeeScript、Uglify JS（压缩 JavaScript）以及压缩/压缩文件以供生产使用。

优先于首屏

Google Pagespeed Insights（和类似工具）建议优先考虑首屏内容的加载大小和速度。 先分离用于渲染页面可见部分（首屏）的 CSS； 在页面呈现后延迟加载其余样式。

将顶部 CSS 直接添加到页眉中可以做到这一点。 但是，请记住，这不会像 CSS 文件的其余部分一样被缓存，因此必须限制在关键内容中。 多种工具可以帮助您确定要分离的 CSS，包括 Scott Jehl 的 Critical CSS 和 Paul Kinlam 的 Bookmarklet 工具。

优化图像

考虑到当前对丰富设计的偏好，不幸的是图像通常是导致页面过大的罪魁祸首。 但是，如果在导出为正确格式之前和之后对每个都进行优化和压缩，则以图像为主导的设计仍然是可能的。 始终确保使用适当的图像类型。 较重的彩色照片更适合作为 JPEG 文件，而平面彩色图形则应采用 PNG8 格式。 渐变和更复杂的图标最适合作为具有 alpha 透明度的 PNG24/32 或 SVG。

Photoshop 和 Fireworks 可以帮助您自定义图像不同区域的优化级别。 这意味着主要主题可以保持高质量，而其余主题则经过优化以提高性能。 ImageOptim 和 TinyPNG 等无损图像压缩工具可以最大限度地利用文件大小，而不会损失图像质量。

您还可以使用新的 HTML5 <picture>元素以及图像的srcset和size属性。 该语言的这两个新增功能可帮助您直接在 HTML 中定义响应式图像，因此浏览器只会下载与给定条件匹配的图像。

 <picture> <source media="(min-width: 960px)"> <source media="(min-width: 465px)"> <img src="images/picture.png" alt="Picture alt"> </picture>

但是，应谨慎使用此技术。 只有少数浏览器支持它：一些现代浏览器（如 Safari）、Android 浏览器和 IE10/11（及更早版本）不支持。 Polyfill 替代方案可以使此方法在旧版浏览器中工作，但这些是必须单独加载的外部 JavaScript 库，考虑到其他技术可用，可能不值得。 值得考虑您的目标受众，以及他们将使用什么技术，看看是否需要额外的 polyfill 重量。

数据 URL 是最后的选择。 可以将图像数据转换为 base64（或 ASCII）编码字符串并直接嵌入到 CSS 或 HTML 文件中，而不是链接到外部图像文件。 提供了一个简单的在线转换工具。 数据 URL 很有帮助，因为它们可以保存 HTTP 请求并且可以更快地传输小文件。 但是，如下所示，嵌入式代码大小比链接到外部图像要大。 增加的长度会使 HTML 和 CSS 文档更难维护，并且每次都必须重新编码和嵌入图像更改。

 <img width="32" height="32" alt="Camera" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYZJREFUeNrsVsttwzAMtYUAvfrck0fIBukIyQAF5AkaTxB0gowQAR3AWcEbdASfeva1p5YEmIAgZEmWZKeHEhD8k2Ty8fFRZZFg3x/PL3DpYFSOac3T65eZ+qiKNLt4fo52Bker7A7AphoudcBU/PlxCQROM+a+TaGgFo7ei4JaIXonCmqF6J0oqJWiv6MgX5QU1R7LJTKyGBtgtKAP15J+3hWPsYOiyB9lZ7Ui7DarN5aXnzDeGeG2nk1GGKj1Pd3fGL+DoX1SjRz4kXlBcjByuvhhiEzjRMlWlGI9tcEmAT5nl0MjxxpwpKfGFYRASAoMbN7MFLCLDQkbAlsP7BhVKzaXOnKvczYN1+wlJ2KU0PCcM57wasL7jr7xdJgcUtzLWnbVuWdtlAOjYLlLR+qptbmOZMkW40Al8jp4mo51bYoDO/HcOua2nrVRDmh+sqFSO4hoB66ojC9BOhCSAmR3I5y4+jpfrhTcUNAzj3E6VIpniVJqM0p1YJF2/Od14N+BrPYrwAAH54zsDNHtwgAAAABJRU5ErkJggg==" />

自动化 CMS 媒体优化

应用上一节中的资产优化技术意味着我们可以为 BAM 选择经典的、以图像为主导的设计，使他们能够展示新的建筑项目摄影。

但是我们还需要让 BAM 可以自由地更新内容，而无需我们优化每个图像。 当然，没有任何解决方案比手动优化更有效，但我们确实设法实现了合理程度的自动化优化。 我们重新配置了他们现有的 Sitefinity CMS 以创造灵活性。 标准选项用于自动调整（和优化）图像的大小，以适应每个网页的上下文：

 <thumbnailResizeSettings compositingQuality="HighQuality" interpolationMode="HighQualityBicubic" smoothingMode="HighQuality"> </thumbnailResizeSettings>

Sitefinity 还可以通过使用 URL 参数从 URL 调整图像大小，甚至可以通过缓存调整大小的图像来实现更快的渲染，使用以下选项：

 /images/image-opt.jpg?size=480 

大多数 CMS 系统允许某种程度的媒体优化。 例如，您可以定义媒体设置以确保未来用户只添加适合网站模板的图像。 这是来自 WordPress 的一个简单示例。

 // Wordpress example <div class="avatar"> <?php the_thumbnail( 'thumbnail' ); ?> </div>

简化字体和图标

字体是用户体验和网站或应用程序品牌的重要组成部分，但可能不是用户的首要任务。 出于这个原因，网络字体可能是另一个需要优化的因素。

通过延迟字体加载，浏览器将以它开始可用的任何字体显示副本。 这意味着用户将始终首先获得内容。 延迟字体加载可以通过分离链接到字体文件的 CSS 部分来实现，并在页面的其余部分呈现后加载它。 但是请注意，加载网络字体时，文本可能会短暂闪烁以更改。

同样，图标是另一个需要优化的领域，因为它们是需要经常加载的小文件。 您也可以考虑为图标使用字体文件。 使用 Fontello 之类的服务来选择各种图标，并生成限制您选择的字体文件。 这种技术可以为所有屏幕分辨率创建高质量的矢量图标，对性能的影响很小。

或者，图像精灵是一个众所周知的选项。 它们将图像组合到一个文件中（仅使用一个请求来加载）并使用背景位置仅显示设计所需的部分。 Paul Stamatiou 描述了这是如何完成的，并概述了一些限制。

装载技术

以下技术可避免将网站的全部内容发送到移动浏览器。 相反，通过针对每个断点进行优化，只下载所需的精确数据。 移动加载速度是 Velocity Drive 网站的一个关键考虑因素，该网站提供拖车技术。 JavaScript 库必须在所有断点处加载，以测试浏览器功能并避免故障。 但我们为每个断点仔细优化了资产：主页加载大小在移动设备上仅为 323KB，在大型桌面上上升到 828KB。

使用条件延迟加载技术进一步提高感知页面速度。 他们分阶段加载可见部分，关键内容放在首屏。 除非用户选择滚动浏览内容，否则不会加载在页面末尾找到的昂贵项目（如图像）。 这项技术是 Niu Solutions 网站“洞察”部分的关键，涵盖了他们的 IT 创新。 当用户向下滚动时，我们使用了一个名为 jScroll 的小型 jQuery 插件来加载更多文章。 这是我们如何设置此插件的示例，它只需要指向更多内容的链接：

 <a href="articles.php" class="more">Load more</a>

 // Insights javascript $('.insights-container).jscroll({ nextSelector: '.more', loadingHtml: '<p>Loading...</p>' });

预加载技术提供了更多机会。 他们可以通过加载他们接下来可能查看的页面来预测并为用户的下一步行动做准备，从而提供更快的体验。 但是，在改造现有网站时，发现典型的流量结构会更容易，因为您可以在 Google Analytics 上研究行为流漏斗。

从核心体验中增强

BBC 的 Responsive News 指的是给用户他们要求的核心体验，然后评估用户的环境并相应地增强体验的想法。 一个简单的例子是最初加载低分辨率的图像，然后根据用户的带宽显示高分辨率。

这个想法是渐进增强的一部分，其中 Web 技术被分层以提供跨环境的最佳体验。 渐进增强可以基于许多不同的因素。 其中包括用户可以访问的技术，例如他们的浏览器、操作系统和环境（例如互联网速度）。 在这里，定义一组必须在功能最差的浏览器上工作的基本功能，并且只有在测试浏览器是否可以处理它之后才会增加进一步的复杂性。

检测浏览器是否支持 HTML5 和 CSS 功能有助于我们编写条件代码以涵盖所有可能性：在支持时增强和添加功能，同时为不支持的设备和浏览器保持安全和简单。

减少功能测试

合并诸如 Modernizr 或 has.js 之类的功能测试库是一种常见的推荐做法。 但是太多的开发者实现了整个库； 他们测试所有功能，即使只需要少量结果来确定是否添加功能。

Tim Kadlec 报告了同一库（最小化 jQuery 2.1.1）在一系列设备上的解析和执行时间。 这表明与桌面相比，实施这些库通常会产生更大的移动性能成本（甚至在新旧设备之间）。 我们倾向于定制库，只测试相关的网站功能。 这将节省时间和宝贵的移动处理能力。

服务器端优化

服务器响应时间是网站速度的一个关键因素：许多目标是少于 200 毫秒。 但是网络延迟（数据在服务器和设备之间移动时的延迟）是移动性能的真正瓶颈，使移动用户的体验变慢。

这受网络速度的影响。 根据 Ofcom 的数据，英国流行的 3G 和 4G 网络的平均下载速度分别为 6.1Mbps 和 15.1Mbps。 有些人将此解释为对最大网站大小的明确限制。 但实际情况更为复杂，因为速度因覆盖范围和环境背景而异。 用户经常在超出范围时连接到慢速 Edge (E) 和 GPRS。

有多种技术可用于提高服务器端网站的性能。

缓存、预渲染和静态内容

动态网页需要多个数据库查询，花费宝贵的时间来处理输出和格式化数据，然后呈现为浏览器可读的 HTML。 建议缓存之前为该设备呈现的内容。 对于回访者，它不会从头开始处理，而是检查缓存，并且只发送更新。

许多人还选择像 Handlebars 和 Mustache 这样的 JavaScript 模板库来处理 Web 内容。 但是解析和执行 JavaScript 既费力又费时。 移动设备无法像台式计算机那样快速处理这些模板库，并且会耗尽它们的处理资源。 在服务器上完全渲染页面要快得多。 Twitter 早在 2012 年就选择了这种方法，并在其博客上解释了其价值。

最近，我们的高级前端开发人员在他的个人作品集中突破了这种技术的界限。 它是使用基于文件的 Statamic CMS 构建的，它刚刚添加了 html_cache 支持。 实施后，此功能将所有页面的平均加载时间从大约 1.8 秒减少到 225 毫秒。

浏览器缓存

粒度优化可以通过防止定期传输您知道不经常更新的文件来简化网站加载。 使用服务器处理程序（如.htaccess文件）来指示浏览器存储哪种类型的内容，以及它们应保留副本的时间。 以下是在 Apache 服务器上实现浏览器缓存的方法：

 <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" # CSS ExpiresByType text/css "access plus 1 year" # Data interchange ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" # Favicon and cursor images ExpiresByType image/x-icon "access plus 1 week" # HTML components (HTCs) ExpiresByType text/x-component "access plus 1 month" # HTML ExpiresByType text/html "access plus 0 seconds" # JavaScript ExpiresByType application/javascript "access plus 1 year" # Manifest files ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" # Media ExpiresByType audio/ogg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # Web feeds ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" # Web fonts ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" </IfModule>

内容交付网络 (CDN)

您可以通过使用像 CloudFlare 这样的 CDN 以及您通常的托管服务来改善资产加载。 在这里，静态内容（如图像、字体和 CSS）存储在全球服务器网络上。 每次用户请求此内容时，CDN 都会检测他们的位置并从最近的服务器传送资产，从而减少延迟。 它通过允许主服务器专注于交付应用程序而不是提供静态文件来提高速度。

虽然增加了费用，但使用专用 CDN 来提高资产重网站的加载速度。 除了初始设置，CloudFlare 不需要手动配置； 缓存是根据历史流量和最适合服务的资产为您构建和更新的。 但在实现这一点时要牢记未来的独立内容管理：确保从 CMS 上传的所有资产也通过 CDN 透明地提供服务。

CDN 是我们的 Eurofighter Typhoon 网站的最佳选择，因为引人注目的国防飞机高分辨率照片是展示其能力的关键特征。 在过去的 30 天里，报告显示 CloudFlare 节省了 76% 的请求和 48% 的带宽，从而提高了图像密集型网站的速度。

测试

在整个生产过程中，测试是无可替代的。 旨在通过模拟移动体验和诊断潜在的性能问题来使用各种工具来测试正在进行的工作。

随着生产的进行，请始终关注数字：从确保正确生成和导出设计资产，到通过浏览器上的开发人员工具检查页面文件大小和 HTTP 请求数量。 在这里，“网络”选项卡为您提供了加载资源、总文件大小和渲染时间的完整概览：

请注意上面 Chrome Inspector 中时间线右侧的蓝色和红色垂直线。 它们分别代表 DOM Ready 和 Page Load 事件。 在窗口底部，它显示在当前断点处加载的 HTTP 请求数量和总文件大小。

其他工具包括：

• WebPagetest 提供了多种测试实时 URL 的选项：从选择世界各地的任何位置，到塑造特定的 3G 和 4G 连接速度和延迟。 您甚至可以通过幻灯片视图和视频体验网站如何为这些用户加载。
• Google 的 Pagespeed Insights 是一种更直观的介绍性工具，用于分析页面速度。 它将结果拆分为桌面或移动，并建议改进站点目标区域的技术：指示要缓存的资源或要优化的图像。

在真实设备上测试

但不要只依赖模拟器。 我们还在各种真实的移动设备上测试整个生产过程中的项目。

创建您自己的设备实验室或使用 OpenDeviceLabs。 理想情况下，通过避开强大的办公室 Wi-Fi 来了解真实的用户体验。 在您可以从办公室网络外部访问的 Web 服务器（理想情况下与实时服务器相同）中创建一个测试站点。 然后，在拥挤的咖啡店或酒店等典型环境中移动时通过网络连接进行测试。

移动性能摘要

最重要的是，旨在创建一个可以在移动端平衡美观和性能的网站，并实现真正的转化指标。 协作、迭代的性能优化过程将帮助您实现这一目标。

从项目一开始，通过设置严格的绩效预算，鼓励内部团队在移动思维下一起工作。 了解决定移动网站性能的客户端和服务器端因素。 然后，您可以通过实施我所描述的目标优化技术的混合来实现设定的目标。 当然，在某些情况下，在引人注目的设计、高性能和安全性之间仍然需要权衡取舍。 一个协作的设计和开发团队可以决定什么对业务最有利，并与相关的项目经理和利益相关者进行核对。

我们为一家全球技术咨询公司提供的优化项目展示了这些技术如何结合起来显着提高加载速度和尺寸。 该项目涉及缓存模板和页面、优化资产和字体以及减少功能测试等技术。 到目前为止，测试表明渲染和总加载时间已从我们开始工作前的近 4 秒缩短到不到 1.4 秒； 同样，文件大小已从超过 3MB 减少到 1MB。

关于 SmashingMag 的进一步阅读：

• 2017 年前端性能清单
• 为 HTTP/2 做好准备
• 你需要知道的关于 AMP 的一切
• 移动浏览器的（并非如此）秘密力量