内容简介：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攻击、网站入侵以及网站篡改解决方案
- 网站被劫持到其它网站如何解决
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Paradigms of Artificial Intelligence Programming
Peter Norvig / Morgan Kaufmann / 1991-10-01 / USD 77.95
Paradigms of AI Programming is the first text to teach advanced Common Lisp techniques in the context of building major AI systems. By reconstructing authentic, complex AI programs using state-of-the-......一起来看看 《Paradigms of Artificial Intelligence Programming》 这本书的介绍吧!
