如何优化响应式站点的移动性能?

大标 2022年9月16日06:03:27网络推广评论0阅读模式

在本文中,我们将讨论移动互联网和响应式设计之间的关系。首先,我们将介绍如何熟练使用响应式设计,为什么性能对移动端非常重要,为什么响应式设计不能成为您网站的目标,最后,技术性能问题帮助我们更好地理解这个问题。

自2000年以来,设计师和开发人员过分简化了移动设备的问题,因此一些人仍然认为响应式web设计可以解决所有问题。

我们必须明白,在任何目标之上,移动网络体验必须像闪电一样快。快速、实用和兼容的体验对所有移动设备都是一个挑战。当您使用响应式设计时,这些挑战是存在的。从一开始就关注性能将使过程更容易。

响应式设计很棒,但不是万能钥匙。如果您坚持使用移动设备,在转换率之后可能会出现性能问题。大约有11%的网站是响应性的,而且这个数字每月都在增长,所以现在是讨论这个问题的时候了。

根据guy podjarny的研究,72%的响应网站无论屏幕大小都提供相同的字节,尽管这会减少移动网络连接。并非所有用户都有耐心等待网站加载。

通过对响应式设计问题的基本理解,我们可以减少其带来的损失。

过去的移动网站

我不是说您不应该采用响应式设计或使用的子域名M*。事实上,如今,无论设备如何,社交共享无处不在。为文档分配URL是明智的。但这并不意味着单个URL应该提供相同的文档,或者每个设备都应该下载相同的资源。

引用Ethan Marcotte的话,他创造了“响应式网页设计"一词。

最重要的是,响应式网页设计并不是为了取代移动网页--伊桑·马科特

互动、移动和快速

如果我们可以使用其他一些技术,我们可以在不影响移动设备性能的情况下实现响应式设计的好处。响应式设计绝不意味着解决“性能",这就是为什么我们不能责怪它。然而,相信它可以解决你所有的问题是一个很大的错误。

设计响应性很重要,因为我们需要解决跨越桌面和移动窗口大小范围的问题。但仅考虑屏幕尺寸就低估了移动设备。桌面和移动设备之间的界限越来越模糊,基于不同的设备,我们仍然有许多可能性。但我们不能通过媒体查询来决定响应式设计的功能。一些评论家称之为“可靠的响应式网页设计",而其他人则认为这是一种伴随着现代视觉的响应式网络设计。在不理解其基本语义的情况下,我们需要理解这个问题。

虽然没有适用于所有类型文档的通用解决方案,但可以使用一些技术来改进现有的响应解决方案并最大限度地提高性能。

要实现每个文档对所有设备使用相同的URL和相同的内容,结构不必相同。

从零开始时,遵循“先移动"方法。

测试在真实设备上加载和显示资源时发生的情况。不要依赖于调整桌面浏览器。

使用优化工具来衡量和改进性能。

响应图像是通过JavaScript传输的,尽管我们希望浏览器提供者(如srcset)能够解决这个问题

当您需要当前设备具有加载条件时,只加载JavaScript,这将在onload事件之后发生。

对于移动设备,内联文档的原始视图,或发送一屏显示内容。

使用以下一种或多种技术应用智能响应解决方案:条件加载、按组响应、服务器端层(如自适应方法)。

条件加载

不要总是依赖CSS中的媒体查询,因为浏览器将加载和解析所有设备的所有选择器和样式(稍后详细讨论)。这意味着手机需要下载并解析大屏幕的CSS。由于CSS块的呈现,您必须浪费一些时间等待连接成功。

将设备上的CSS媒体查询替换为JavaScript matchmedia查询。你知道这些内容不会改变。例如,我们都知道iPhone无法动态转换为iPad规范,所以我们只在需要时使用CSS。

您可以使用特征检测,例如

weinxin
我的微信
微信扫一扫
大标
  • 本文由 发表于 2022年9月16日06:03:27
  • 转载请务必保留本文链接:https://www.tanhuibiao.com/3620.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: