发布时间：2020-7-1 分类： 电商动态
最近的一项研究表明，80％的互联网用户对移动浏览体验感到失望，当体验改善时，他们将更多时间花在智能手机上。
由于64％的智能手机用户希望代购源码网站在4秒内加载，但代购源码网站的一半花费时间超过两倍，达到9秒，所以今天，海瑶SEO工程师将对代购源码网站进行一些改进。打开速度的方法。
1.下载移动用户的速度
让我们研究一下影响智能手机页面加载速度的因素。最明显的原因是智能手机的速度。在最好的情况下，移动用户使用3G和4G访问互联网。
在美国，57％的用户使用3G上网，27％使用4G，而在加拿大，4G用户较少;在英国，4G仍然是新的。 Pcworld的研究表明，在美国，3G平均下载速度为2mbps，4G为6.2mbps; ofcom研究表明，英国的3G下载速度为2.1mbps;北美和欧洲以外的连接速度通常较慢; 1mpbs可以转换它是每秒122kb，或每秒0.12mb，所以上面的数据可以转换如下：
平均速度为244 KB/s 3G用户（0.24 MB/s）
平均网络速度为756 KB/s 4G用户（0.76 MB/s）
如果将上述值乘以4秒的移动用户等待时间，则意味着3G用户的代购源码网站高达1 MB，4G用户高达3 MB。
但是，下载速度不是瓶颈。网络延迟以及智能手机的内存和CPU是瓶颈。即使手机可以在4秒内下载1mb，该页面也需要更长时间才能加载，因为手机需要接收和解析代码。图片。
在桌面端，下载文件仅占显示代购源码网站时间的20％。剩下的时间用于解析http请求，获取样式表，脚本文件和图片。由于移动cpu，内存和缓存与桌面完全不兼容。电话需要更长的时间。
2，如何减少加载时间
建立一个快速的代购源码网站是一个做出艰难决定和切断非核心体验的过程。如果要求价值不大并且被删除，则该原则适用于所有开发阶段，尤其是规划和编码。
减少依赖文件：更少的文件意味着更少的http请求和更快的加载时间。
缩小图像尺寸：调整和调整高分辨率图像，占用额外下载时间的首位，占用宝贵的内存和处理资源。
减轻客户的负担：最佳做法是重新考虑您的JavaScript并将其减少到最小尺寸。
3.如何减少依赖文件
如果要为移动用户隐藏图像，请显示: none和visibility：hidden无法阻止文件下载，请测试以下代码：
您可以观察下面的瀑布图。在设置显示:无或隐藏可见性:后，仍将下载图像容器。
另一种方法是使用css加载背景图像，然后使用媒体查询媒体查询按条件隐藏图像。这项技术最初由Jason grigsby测试，然后由tim kandlec进一步扩展。根据该设备有条件地加载特定图片，亚马逊的独立移动页面使用这种技术。
您可以看到未加载图像的瀑布地图：
4.保持最少数量的外线样式表
如果你已经根据断点加载了单独的样式表，你需要仔细考虑这个，我们测试了以下代码：
您可以看到四个样式表以纵向模式加载。
所以无论如何这些样式表都会被加载，你需要将这些文件组合在一个文件中，减少了http请求。
或者，您可以使用后端处理通过判断设备自动插入样式表（这在WordPress的响应式代购源码网站中使用）。
另一种选择是使用内部样式。亚马逊的独立移动产品页面有一个6KB的外部样式表，以及一些内部样式，只需要通过额外的HTTP请求下载所有页面样式，亚马逊的桌面版本和非常高效，9个外部样式表，总共40KB 。
5，使用CSS3代替图片
圆角，阴影，渐变填充等。这些样式不需要使用图像，这可以减少http请求并加快加载时间。
CSS3可以减少http请求，但会增加处理负荷。我们创建了一系列html文件。每个文件都包含一个基本的css3功能。参考下面的图表，你可以看到css3带来的处理时间很短，但不是无论如何，要特别注意box-shadow对处理时间的影响最大。
6，DATAURI代替图像和WEB字体文件
Data uri方案可以在没有任何额外资源的情况下将内容插入到html和css中。该技术可以将任何内容插入到网页中，通常用于插入图像和Web字体文件。这项技术的最大优点是它可以减少http。请求。
数据uri使用非常简单，您可以使用base64编码数据以下列格式插入html和css而不是图像文件。
数据: [MIME-type] [; charset=encoding] [; base64]，[data]
例如，使用数据uri创建以下小图标：
代码在这里：
Wordpress的响应式代购源码网站使用此技术插入图像和字体。波士顿环球报的响应式代购源码网站也使用这项技术，他们的代购源码网站在四秒钟内就可以加载到智能手机上。
使用此技术，您不必担心外部图像和字体文件，您需要测试和比较是否值得应用此技术而不是传统方式。
7，可缩放矢量图形（SVG）代替图像
就像数据URI一样，可伸缩矢量图形（SVG）可以嵌入到页面中以减少HTTP请求的数量。例如，下图是内联SVG：
这是代码：
宽度='17 .812px'height='28 .664px'
viewBox='296.641 381.688 17.812 28.664'
Enable-background='new 296.641 381.688 17.812 28.664'
Xml: space='preserve'>
SVG文件可以由矢量图形编辑器（如Adobe Illustrator）创建。创建后，在文本编辑器中打开文件并复制其代码（减去任何不必要的数据）。
以上代码将在HTML文件中生效，但不会在样式表中生效。如果在样式表中嵌入SVG文件，则需要先将其转换为数据URI。如果你这样做，我们需要从编辑器编辑它（确保包含元数据），用base64复制它，并使用以下格式嵌入样式表:
数据: image/svg + xml [; base64]，[data]
这是代码：
背景图像: url（数据: image/svg + xml; base64，PD94bWwgdmVyc2lvbj0i
MS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx
1c3RyYXRvciAxNS4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOi
A2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL
0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8x
LjEvRFREL3N2ZzExLmR0ZCI + DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzE
iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Im
h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3a
WR0aD0iMTcuODEycHgiIGhlaWdodD0iMjguNjY0cHgiIHZpZXdCb3g9IjI5Ni42NDEg
MzgxLjY4OCAxNy44MTIgMjguNjY0Ig0KCSBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDI
5Ni42NDEgMzgxLjY4OCAxNy44MTIgMjguNjY0IiB4bWw6c3BhY2U9InByZXNlcnZlIj
4NCjxwYXRoIGZpbGw9IiNFRTFDNEUiIGQ9Ik0zMTQuNDI4LDQwMS4wODJjLTAuNDQzL
TUuNDg5LTUuMTQ2LTkuNTIyLTcuNTItMTQuMTg2Yy0wLjgxNi0xLjU5Ny0xLjM1Mi01
LjIwOC0xLjM1Mi01LjIwOA0KCXMtMC41NTUsMy43OTItMS4zODgsNS40MjVjLTIuMjM
zLDQuMzcxLTcuMTI3LDguOTk5LTcuNTA3LDE0LjA0N2MtMC4zNiw0Ljc5NCw0LjEwMS
w5LjE5MSw4Ljg5Niw5LjE5MQ0KCUMzMTAuNDksNDEwLjM1NCwzMTQuODE2LDQwNS45N
DEsMzE0LjQyOCw0MDEuMDgyeiIvPg0KPC9zdmc + DQo=）;
8，精灵图
Sprites技术可以将常用图像合成为单个图像，从而减少了http请求。例如，当您将四个图像组合成一个精灵时，http请求从4减少到1，并使用要显示的图像。 background-position属性用于控制。
9，字体图标
字体图标使用字体文件来包含符号和图表（例如Wingdings或Webdings是某种图标字体），可以使用它们而不是加载图像文件。例如，下面的图标不是图像，而是Wingdings字体。 h&r;字符:
Wingdings和Webdings有点太疯狂了，现在还有其他更专业的Web字体可以通过font-face加载。
单独的Web字体，对于所有图标，HTTP请求的数量可以减少到一个。如果使用数据URI（如上所述）将Web字体嵌入页面中，则HTTP请求可以减少到零，这正是WordPress使用的技术。 Web字体是否嵌入在样式表中：
WordPress无需任何额外的HTTP请求即可访问所有这些图标，因为图标通过数据URI作为Web字体嵌入WordPress样式表中。
同时，字体图标可以使用CSS3关键帧动画（这是非常有用的，如“加载”图标（小菊花）），主要缺点是由字体图标制作的CSS精灵只能是纯色，亚马逊css精灵包括彩色图标，所以它不能使用这种技术。
像IcoMoon这样的工具可以轻松创建自定义Web字体。您只需要每个图标的SVG文件。
10，避免内联iframe
每个内联框架（iframe）都将生成HTTP请求。这种情况是iframe中没有其他资源依赖性。这是一个快速测试。仅使用文本比较iframe。
包括iframe会增加近0.2秒的加载时间。为确保代购源码网站快速加载，最好不要使用iframe。
11，先行动
移动优先也适用于前端开发，移动用户在编码时首先考虑，然后逐步增强平板电脑和台式机，减少不必要的依赖。
另一种方法是优先考虑桌面，默认情况下加载重组件，然后隐藏这些组件用于小屏幕（称为“优雅降级”）。
以下示例是桌面优先编码:
在上面的代码中，默认设置是显示图像，然后通过移动设备上的媒体查询隐藏图像。
以下示例是移动优先编码：
默认情况下，不显示图像，并使用媒体查询逐步增强更大的屏幕。
12.分成多个页面（单独的移动站点）
将核心内容保留在页面上，然后提供辅助内容到辅助内容的链接，将减少HTML的加载负载，同时防止相关资源被下载。
亚马逊的移动产品页面具有通用产品信息，以及指向“用户评论”，“描述和细节”的链接。和“新&使用。
这减少了对三个图像的HTTP请求，并且HTML的大小减少了45KB。
13.保持最少重定向（单个移动站点）
亚马逊有一个重定向引导访问者访问一个单独的移动页面，与戴尔的代购源码网站有两个重定向相比，延迟时间为0.4秒，导致延迟1.2秒。
14，如何减小图像的大小
响应式图像背后的想法是让访客图像只下载最适合其设备的图像。对于智能手机，请使用低分辨率图像进行快速下载和渲染。
亚马逊的独立移动产品页面使用响应式图像技术，使用媒体查询将特定的背景图像分配给div，这是亚马逊的代码:
尽管亚马逊在内部风格中有八个产品图像，但只能下载两个处于纵向模式的iPhone 4或Nexus S.
《波士顿环球报》响应式代购源码网站使用响应式图像技术，使用不同的data-fullsrc加载图像，html标记和服务器端JavaScript重定向规则的组合：
Src是手机上使用的图像，确保代购源码网站默认为较小的版本（先移动），而data-fullsrc是JavaScript用于检测设备屏幕大小然后写入cookie的全尺寸图像。
对于大屏幕，JavaScript在data-fullsrc上用高分辨率图像替换较小的图像，服务器也使用Apache重写规则来检查.r。在图像文件的名称（移动图像具有.r。），同时显示备用GIF而不使用较小的运动图像（从而防止将手机大小的图像下载到桌面）。
微软的响应式代购源码网站使用Scott·杰尔的Picturefill技术:
注意：在上面的代码片段中，data-picture=''应为数据图片，否=''（=由粉碎杂志的WYSIWYG编辑器自动插入字符），使用此技术，JavaScript扫描页面。代码找到包含data-picture属性的div，然后根据data-media属性插入新的img标记。
这些响应式图像技术的主要优点是:
（1），小屏幕下载低分辨率图像，大屏幕下载高分辨率图像。
（2），仅下载所需图像，并且不需要的图像不会在后台加载。
此外，还有各种其他技术来实现响应式图像。
15，如何减少客户端处理
星巴克的响应式代购源码网站禁止在Chrome下使用javascript，在桌面上的良好网络环境中加载需要3.53秒，启用javascript后需要4.73秒才能将其增加34％。
在移动端，cpu和缓存的较小内存中，Javascript对加载时间的影响更为明显。通常，我们必须重新考虑使用javascript并将其保持在最小尺寸。
一个很好的例子是BBC移动代购源码网站的JavaScript，它不使用外部JavaScript文件— —是内联的，内联脚本仅限于几行，不会显着影响内存，HTML文件和所有内联JavaScript成本0.78秒加载后，如BBC，亚马逊的移动产品页面没有外部JavaScript文件，并且内联脚本最少，HTML文件和所有内联JavaScript需要0.75秒才能加载。
请注意：jQuery不是轻量级替代品，实际上是jquery本身的补充。
在iPhone 4下，两个站点都在4秒内加载。在使用JavaScript框架之前，请考虑是否真的有必要。在某些情况下，使用少量JavaScript比调用框架更有效。
16.避免使用组件
组件对实际加载时间的影响是灾难性的。为了验证这一点，我们创建了一系列简单的HTML文件，每个文件都包含默认的嵌入代码，一个小部件，您可以看到下面的结果有多糟糕。
请注意，这不是一个完美的测试，因为这些是模拟环境中的可控实验，但结果很有趣。
在单个页面中，将它们组合为窗口小部件，仅包含结果时，结果仅为4秒。
17，服务器端（后端）技术
除了优化前端之外，服务器端技术还可用于加速加载时间。这些技术值得考虑，如下所示：
（1）缓存HTTP重定向以加速重复访问。
（2），合并HTTP重定向链以减少重定向。
（3）使用HTTP压缩来减少字节数（Gzip或缩小）。
18.利用第三方软件工具和服务
使用第三方软件工具或服务预加载，调整和加速网页
（1），MIP官方代购源码网站_移动网页加速器_MIP（移动即时网页）https://www。 mipengine。组织/
（2），Cloud Adaptation（AllMobilize Inc.） - 全球领先的HTML5企业移动解决方案提供商http://www。 yunshipei。 COM/
（3）使用CDN加速或域名加速等第三方cdn节点缓存技术实现快速访问效果
Enweitech博客评论：
为了满足移动用户的高期望，您需要优化移动设备的代购源码网站，在4秒或更短的时间内加载它，实现这个神奇时间4秒的最佳方法是减少JavaScript并优化HTML，CSS和图像可以保持智能手机的处理负荷。
