应用这6项技术来提高您的商业网站的移动加载速度

目录:

Anonim

虽然毫无疑问会有几个因素影响收入,但大多数专家表示,在5秒内加载的商业网站的收入几乎是19个网站加载时间的两倍。

该研究进一步发现,在5秒内加载的网站具有:

  • 广告可见度提高25%
  • 跳出率降低35%
  • 用户会话延长70%。

这正是我们需要专注于移动优先解决方案以帮助我们的企业取得成功的原因。毕竟,移动速度从未如此重要。

$config[code] not found

加载速度慢可能是一个问题

根据谷歌的说法,
  • 2人中有1人希望在不到2秒的时间内加载页面。
  • 如果页面在移动设备上加载时间超过3秒,则更有可能放弃53%的访问。
  • 46%的人在浏览移动设备上的网页时等待加载页面时表现出不满。

减慢移动互联网上网站速度的三个主要因素是服务器请求的数量,文件大小和页面加载元素的连续顺序。所以现在我们已经强调了原因;让我们来解决问题。

如何提高移动网站速度

测量并最小化您的服务器响应时间

您的移动页面速度不仅取决于您的代码,还依赖于称为服务器的重要技术工具。

服务器等待响应浏览器请求的时间越长,页面在设备上加载的速度就越慢。 Google的大多数专家建议您的服务器开始传输1ST 请求更优化结果的200毫秒内的资源字节。

通常,提升服务器响应时间涉及3种主要方法:

  • 改善您的Web服务器配置或软件。
  • 增强托管服务的范围和质量,特别是确保您拥有足够的内存和CPU资源。
  • 减少网页所需的资源数量。

使用CSS加载图像

如果要为移动用户隐藏内容图像,请通过CSS将其作为背景图像加载,并使用媒体查询有条件地隐藏它们。

Amazon使用此技术的一种变体来有条件地加载特定于设备的图像。

最小化重定向数以提高移动页面速度

重定向只不过是能够自动将网站访问者从一个页面移动到另一个页面的说明。

每次重定向都会占用宝贵的毫秒数,从而导致页面加载速度变慢。这对于移动设备尤其成问题,因为它们通常依赖于不可靠的网络而不是桌面用户。

解决此问题的第一步是使用重定向映射器等工具调查您网站上的重定向数。如果数字太大,请将其最小化,或者理想情况下,将其降至零以获得最佳结果。

缩小JS和CSS文件

更多数据意味着页面重量过多。这会使您的网页在移动设备上加载时间更长。

这就是为什么大多数Web开发人员都知道需要优化和最小化资产以提高页面加载速度的原因。

“缩小”消除了冗余,而不会影响页面的显示。各种各样的Google工具可以帮助您消除此类冗余,包括:

  • CSSNano(用于CSS)
  • UglifyJS(适用于JS)

而不是图像,使用CSS3

阴影,圆角和渐变填充 - 所有这些功能都可以通过CSS而不是图像来完成。

这可以极大地帮助减少HTTP请求的数量,从而同时加快加载时间。

使用内联SVG而不是JPEG

与数据URI一样,SVG(可伸缩矢量图形)可以嵌入到页面中以减少HTTP请求的数量。

这些文件可以在矢量图形编辑器(如Inkscape,Adobe Illustrator等)上创建。创建后,您可以在文本编辑器中将其打开并将其放入代码中。

注意:要在样式表中嵌入SVG,必须先将其转换为数据URI,然后继续执行下一步。

所以这或多或少总结了一切。希望你有一个好的和启发性的阅读。

照片来自Shutterstock

1