移动UI设计人员入门

本文概述

• 1.调整图像大小
• 2.限制功能
• 3.减少内容
• 4.限制HTTP请求
• 5.选择一个响应式设计
• 6.使用优质CDN
• 7.减少服务器响应时间
• 8.压缩一切
• 9.启用浏览器缓存
• 10.视觉上的改进
• 11.清理你的资源
• 12.正确格式化图像
• 13.正确编码图像
• 14.使用外部CSS
• 15.优先考虑首屏内容
• 16.删除插件
• 17.减少重定向
• 18.避免弹出窗口
• 19.摆脱重复的DOM元素
• 页面速度的重要性

你是否知道, 如果加载网页的时间超过三秒钟, 就会有40％的人放弃网页？随着响应式网页设计的发展, 互联网用户已经开始期待出色的性能。他们希望网站能够完美地满足他们所使用的设备的要求, 他们希望导航简便且直观的设计, 并且希望页面加载速度低于一秒钟。这是一个很高的门槛, 但是通过适当的优化, 任何设计师都可以为其移动界面提供迅捷的页面速度。

我最近在网上搜寻了有关在各个平台上优化网站速度的最后提示和技巧。这是我的页面速度黑客综合列表：

1.调整图像大小

大于所需的图像会减慢你的网站速度。从正确的尺寸开始, 而不是简单地上传完整尺寸的图像并让你的网站将其缩小到合适的大小。诸如Squash Image Compression之类的简单软件可用于将图像调整为页面的确切尺寸, 并在几秒钟内减小其文件大小。

2.限制功能

在移动网站上启用限制性加载会完全阻止桌面版网站上无法在移动设备上有效使用的部分加载。这可以使用户体验更好, 同时可以帮助你更快地加载页面。因此, 当你针对移动设备优化网站时, 请考虑可以在响应式网站上禁用的功能。侧边栏, 广告等都可以禁用。对于移动设备, 请关注最重要的功能。

3.减少内容

设置效果预算通常是个好主意。如果添加新图像, 视频或插件会使你超出性能预算, 请寻找其他可以删除或优化以帮助你的页面保持最大加载速度的内容。

4.限制HTTP请求

有很多方法可以实现此目的, 但是采用错误的方法可能会损害网站的质量。诀窍是减少HTTP请求而又不会过多。你可以进行更改, 例如使用CSS Sprite代替数据URI, 并将CSS样式表保持在每页顶部。你还应该启用缓存, 但稍后再介绍。

5.选择一个响应式设计

你的网站的访问者期望响应式设计。它们使你的内容能够进行调整, 以适应访问者正在使用的任何尺寸的屏幕, 并且它们针对不同的设备优化了布局。与尝试使非响应式设计在不同平台上工作相比, 使用响应式设计模板可帮助确保更干净的代码和更快的加载速度。

6.使用优质CDN

你的内容交付网络(CDN)是你网站的核心。它需要快速可靠。确保你的CDN兑现了诺言。

7.减少服务器响应时间

你的目标应该是使服务器响应时间低于200毫秒。此列表上的所有其他提示应可帮助你降低此数字。你可以使用任意数量的免费响应性检查工具来监视响应时间并查找潜在问题, 所有这些都可以通过简单的Google搜索找到。

8.压缩一切

压缩网页就像将其压缩为zip文件一样。通过压缩, 你可以减少页面的带宽, 从而减少HTTP请求的数量。最简单的方法是使用称为Gzip的工具。

9.启用浏览器缓存

缓存是网站访问者在其设备上”记住”网站的一种方式。他们首次访问时, 需要下载多达30个组件才能查看你的网站。启用缓存后, 该数目在以后的访问中仅会减少到几个组件, 从而大大提高了页面加载速度。

10.视觉上的改进

这实际上不会提高页面加载速度, 但会给人以印象。 Facebook和Medium通过创建可视的占位符内容而不是显示旋转的加载程序(可能会产生负面效果)来很好地做到这一点。

媒介会用图片来做。

Facebook加载伪造的占位符内容, 而不显示加载微调框。

11.清理你的资源

应该删除所有未添加到你网站中的代码。额外的代码意味着额外的时间加载你的网站。要缩小HTML, 请使用Google PageSpeed Insights API扩展。要缩小CSS, 请使用YUI Compressor或cssmin.js。要缩小JavaScript, 请使用Closure Compiler, JSMin或YUI Compressor。

12.正确格式化图像

除了使图像尺寸合适之外, 还应确保图像格式正确。 JPEG最好, PNG最好, 并且GIF仅应用于较小的简单图形, 理想情况下应小于10×10像素。

13.正确编码图像

对于代码, 图像的HTML格式应类似于<img src =””>, 文件名应放在引号之间。如果你的图片编码不正确, 则你的网站将不得不更加努力地检索正确的图片, 从而降低你的页面速度。

14.使用外部CSS

你的CSS包含你网站的样式要求。它可以包含在外部文件中, 也可以内联。内联CSS会插入到每个页面的HTML代码中, 这可能会导致严重的延迟。使用外部CSS会大大简化你的代码。

15.优先考虑首屏内容

访问者无需进行任何滚动即可看到的着陆页部分称为首屏内容。这是一个古老的报纸术语, 但适用于网站设计解决方案。优先考虑网站的首屏内容, 以便更快地加载, 这将有助于使访问者在你的网站上停留的时间更长。一种方法是将CSS分为两部分, 一个是内联部分, 用于显示首屏内容, 另一个是外部部分, 用于其他所有内容。

16.删除插件

使用过多的插件会减慢服务器速度并造成不必要的安全问题。摆脱掉所有你不使用的插件, 然后尝试逐个停用插件, 以查看是否有任何特定的插件对你的加载速度造成严重问题。

17.减少重定向

如果你的站点依靠重定向将用户从你的主站点转到你的移动站点, 则可能会降低你的网站速度。你可以使用HTTP重定向来帮助减少从主站点到移动站点的中间重定向。你还可以在桌面页面中添加<link rel =” alternate”>标记, 以便Google抓取工具发现你的移动页面。

18.避免弹出窗口

弹出窗口仍然是一回事, 我猜想它们可以工作, 因为许多站点仍在使用它们。你仍然可以将它们集成到你的网站上, 但是在移动网站上它们无法正常工作。你曾经在移动设备上阅读文章时遇到过弹出窗口吗？如果有, 那么你可能知道我的意思。

有什么选择？在博客文章或页面末尾使用转换框, 例如Neil Patel的博客：

尼尔·帕特尔(Neil Patel)使用三种转换框, 固定的标头, 广告和小消息, 并在其博客文章的末尾和中间引用了号召性用语。

19.摆脱重复的DOM元素

DOM表示文档对象模型。它指的是在不同设备上展示你的网站的方式。在移动设备上, 桌面登录页面上显示的某些元素被隐藏了, 但是移动浏览器仍然在浪费时间和精力来隐藏这些元素。摆脱那些隐藏的元素将有助于你在每个平台上加载页面。

页面速度的重要性

如果你从未非常关注自己的页面速度, 那么该坐下来做笔记了。如果你的网站加载时间太长, 那么你在内容和布局中投入的所有时间和精力将毫无用处。

实际上, Aberdeen Group发现, 页面加载时间仅延迟一秒钟, 导致页面浏览量减少11％(导致跳出率提高), 客户满意度降低16％以及客户转化率降低7％。如果你的网站需要三秒或更长时间来加载, 这些损失将变得更加严重。

如果这份清单不胜枚举或有点超出你的技术能力, 那么你可能会发现从Google的建议和工具入手很有帮助。在这里, 你将获得一些基本见解和免费资源, 以测试你的页面速度。 Google甚至会确切告诉你你的网站正在处理哪些问题, 因此你可以集中精力进行网站优化。

只需确保在将此列表标记为书签, 然后再转到Google, 这样你就可以找到遇到的每个页面速度问题的简单解决方案。