内容简介：Cindy Krum最近发布了关于即将推出的移动友好型更改的必读读物，我强烈建议您在继续之前检查。得到它了？好。随着4月21日之前急于优化移动网站，在此过程中牺牲性能非常容易。为了避免我们忘记，Google多次提到网站性能也是搜索排名的一个因素，首先是2010年的桌面网站，2013年再次是移动网站。在这篇文章中，我将介绍一些高级最佳实践，以便在移动站点（重新）设计工作中牢记这一点。此外，我建议您也在适合移动设备的网站上仔细阅读Google的优秀文档。衡量您的移动网站性能
Cindy Krum最近发布了关于即将推出的移动友好型更改的必读读物，我强烈建议您在继续之前检查。得到它了？好。随着4月21日之前急于优化移动网站，在此过程中牺牲性能非常容易。为了避免我们忘记，Google多次提到网站性能也是搜索排名的一个因素，首先是2010年的桌面网站，2013年再次是移动网站。
在这篇文章中，我将介绍一些高级最佳实践，以便在移动站点（重新）设计工作中牢记这一点。此外，我建议您也在适合移动设备的网站上仔细阅读Google的优秀文档。
衡量您的移动网站性能
提高移动性能的第一步是衡量您的起点。这里有许多优秀的免费和付费资源，但我最喜欢的两个是谷歌Chrome的内置开发者 工具 和WebPageTest。为简单起见，我将在本文中使用Chrome开发者工具。
不是开发人员？不用担心，使用Chrome工具非常简单：
打开Chrome（必要时安装）
点击右上角的小“汉堡包”菜单（3条堆叠线）
选择更多工具，然后选择开发者工具
你会看到一个漂亮的屏幕，有很多丰富的信息。最重要的是，在顶部有许多不同的移动和平板电脑模拟器下拉。很酷。
现在，选择一个感兴趣的设备，比如Apple iPhone 6.在地址栏中输入您的站点地址，点击回车即可！您现在看到您的网站呈现为iPhone 6会看到它。向下滚动以查看一些有趣的性能统计信息，例如总页面加载时间，页面大小和请求总数。点击“网络”标签，获取特别有用的瀑布图视图，如下所示：
zoompf_iphone6
现在让我们开始……
针对移动设备优化这些图像
根据HTTP存档，图像平均占您总页面内容的60％以上。非常直观，图像统治网络。继续使用Chrome开发者工具查看您自己的页面，您可能会看到类似的数字。当通过相对较慢的移动连接速度下载时，大图像对您网站性能的影响可能更加严重。
尽管使用无损和有损图像优化技术优化您的网站始终是最佳做法，但移动设备还有另一个考虑因素：您是否应该首先下载该图像？您在桌面网站上使用的大而美观的1600px宽“英雄”图像可能会在手机或平板电脑的较小显示屏上完全浪费，即使该平板电脑是高分辨率或“视网膜”屏幕。
解决方案？请考虑为您的移动用户加载较小的图片。但要小心; 这是一种“正确”和“错误”的做法。
快速放弃：对于此示例以及您的移动网站，请确保在页面的head部分指定viewport元标记。基本上，这告诉移动浏览器你有一个响应迅速的移动网站，而不是尝试将大型桌面网站自动扩展到移动解决方案（丑陋！）。此外，如果此标记不存在，您将在下面的Chrome测试中获得不同的结果。
错误的方法
响应式设计大量使用CSS媒体查询，以便在移动设备使用的较小视口尺寸上对网站进行不同的样式设置，因此换出图像的一种明显方法可能是这样的：
<！ – 不要这样做 – >
<风格>
@media（min-width：376px）{
.mobile_image {
display：none;
}
.desktop_image {
显示：内联;
}
}
@media（max-width：375px）{
.mobile_image {
显示：内联;
}
.desktop_image {
display：none;
}
}
此代码在屏幕分辨率较宽时显示一个图像，在分辨率较小时显示不同/较小的图像。
这在渲染的页面上看起来很好，但是有一个很大的问题：两个图像都被下载了！要验证，请在Chrome中加载此示例，您会看到如下内容：
code_mobile_waterfall
那不好; 事实上，情况更糟！您正浪费时间和带宽下载甚至无法显示的图像！
正确的方式
相反，考虑background-image在DIV上使用样式来实现相同的效果，例如：
<！ – 做这个 – >
<风格>
@media（min-width：376px）{
.myimage {
background-image：url（“desktop.png”）;
宽度：700px;
身高：550px;
}
}
@media（max-width：375px）{
.myimage {
background-image：url（“mobile.png”）;
宽度：350px;
身高：130px;
}
}
加载Chrome工具，您现在可以看到：
code_mobile_yes2
只加载了移动图像……好多了！当然，有一点需要注意：要background-image与DIV 一起使用，您需要在CSS中为该类提供图像宽度和高度。对于许多图像或经常改变大小的图像来说，这可能很麻烦，但如果您的“英雄”图像本质上是相对静态的，则使用此技术可以显着改善您的移动网站性能。
摘要：尽可能使用CSS媒体查询和background-image样式有条件地呈现移动图像。这可能只适用于您最大的图像。
考虑抛弃jQuery
什么？你读得对吗？jQuery的是THE首选编写JavaScript库，你怎么能没有它？
jQuery确实非常有用，但回想一下，如果它的原始设计目标是提供一个一致的界面，该界面与W3C推荐的API匹配，这些浏览器在不同的（通常是破坏的）标准实现的各种浏览器中。jQuery让你避免编写“如果Internet Explorer执行此操作，否则执行此操作”代码。
但是，jQuery的统一界面在移动设备上的必要性要小得多。移动设备由WebKit衍生的浏览器（如Safari或Chrome）主导，因此抽象的问题较少。即使自由使用缓存，jQuery仍然是一个重要的下载库。即使在压缩和缩小jQuery之后，您也需要处理大约30KB的内容。
但等等，你说; 你还想要jQuery提供的简化JavaScript接口吗？这很不错 – 所以请考虑使用Zeptojs。虽然没有像jQuery那样功能齐全，但它的重量仅为5 KB，大约小6倍！由于Zepto在很大程度上与jQuery API兼容，因此您不必重写任何代码来使用它。对于大多数基本的JavaScript站点，Zepto绰绰有余。
摘要：最小化您包含的第三方库，如果您的JavaScript需求是基本的，请考虑使用Zeptojs替代jQuery。
查看您的缓存设置
智能Web开发人员减少了资源的大小，以最大限度地减少页面加载时间 真正聪明的 Web开发人员首先避免需要下载这些资源。这就是浏览器缓存的用武之地。如果您的图像，CSS或JavaScript很少发生变化，请考虑缓存它们。这样，您的用户只需下载一次资源，下次他们访问您的网站时，该链接已经位于他们的本地计算机（或手机或平板电脑）上，只是等待使用。
Mobify有一个关于设置缓存标头的很好的入门，还有很多很棒的免费工具可以测试你的缓存设置，包括超酷的 REDbot，WooRank和我们自己的Zoompf。如果您正在运行Apache或nginx Web服务器，请考虑启用mod_pagespeed以简化缓存配置。如果你有一个WordPress网站，W3 Total Cache插件非常棒。
摘要：缓存是您可以进行的最有效的性能优化之一，对移动网站来说更重要。检查您的缓存策略并将缓存应用于大型不经常更改的库和映像。
爱动画GIF？你的浏览器没有！
动画GIF最近已经出现了复苏，但格式过时并显示出它的年龄。追溯近30年，动画GIF臃肿且下载繁琐，特别是当您的动画GIF是一个短片段时。考虑使用HTML5视频而不是动画电影GIF。所有现代浏览器都支持它，HTML5视频的大小通常是等效动画GIF的10％或更小。
另一种选择是Imgur。当您将动画GIF上传到Imgur时，他们会自动将动画转换为他们称为GIFV的格式。GIFV本质上只是一个HTML5视频，但具有明显优化的大小。Imgur负责管理您的视频托管，并根据用户浏览器的功能选择提供GIFV或GIF文件（尽管大多数现代浏览器都支持HTML5视频）。
摘要：尝试并避免动画GIF用于电影剪辑或复杂的动画。HTML5视频和GIFV使用的现代视频协议可显着提升性能并缩短用户的下载时间。
未来：HTTP / 2
网络正逐渐向HTTP / 2发展，而不是太快。HTTP / 1.1已超过15年，显示出其年龄的迹象，特别是在移动设备中不可靠/间歇性连接时。HTTP / 2已经享有广泛的浏览器和服务器支持。虽然我不建议在4月21日的移动友好型变更中采用HTTP / 2，但未来对该协议的支持肯定会出现在您的路线图上。您可以在我之前的帖子中阅读有关HTTP / 2及其对SEO和网络性能的未来影响的更多信息。
内容：计划在未来的路线图中采用HTTP / 2，它即将到来！
在结束时
建立一个响应迅速，对移动设备友好的网站不仅仅是调整样式和标签，以取悦Google抓取工具。如果忽略这些因素，可能会出现细微差别，特定于移动设备的因素，从而严重降低您的移动网站速度并降低用户体验。幸运的是，有许多免费工具可以帮助您评估您的移动网站性能，包括WebPageTest，Chrome开发者工具，Google PageSpeed Insights和Zoompf的免费报告。当然，请务必使用Google自己的移动友好测试工具进行测试。
现在……出发并开始优化！
本文来自投稿，不代表穷思笔记立场，如若转载，请注明出处：https://www.chons.cn/14099.html
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- PostgreSQL 万年网站终改版：更现代化且适配移动端
- 把我的个人网站推倒重来（Part 2 - 用 Bootstrap 做移动网页）
- Nginx 通用网站镜像教程（适用于动态网站与静态网站）
- 移动端专题系列（二）移动端动画
- 网站安全防护深度解读：DDoS攻击、网站入侵以及网站篡改解决方案
- 网站被劫持到其它网站如何解决
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
首席产品官1 从新手到行家
车马 / 机械工业出版社 / 2018-9-25 / 79
《首席产品官》共2册，旨在为产品新人成长为产品行家，产品白领成长为产品金领，最后成长为首席产品官（CPO）提供产品认知、能力体系、成长方法三个维度的全方位指导。 作者在互联网领域从业近20年，是中国早期的互联网产品经理，曾是周鸿祎旗下“3721”的产品经理，担任CPO和CEO多年。作者将自己多年来的产品经验体系化，锤炼出了“产品人的能力杠铃模型”（简称“杠铃模型”），简洁、直观、兼容性好、实......一起来看看 《首席产品官1 从新手到行家》 这本书的介绍吧!
