网站加载时间的重要性【手机网站开发】

当有突发新闻时,人们被粘在他们的电视屏幕上等待更新,而记者争相成为第一个交付。 这并不奇怪,人们期望这种类型的敏捷性和速度,当他们浏览网络...

 

手机网站开发 

相关阅读:加速移动页面的真正好处[手机网站开发]

世界快速移动。 

当新的iPhone出来,许多急于成为第一个看到,播放,并审查它。

当有突发新闻时,人们被粘在他们的电视屏幕上等待更新,而记者争相成为第一个交付。 这并不奇怪,人们期望这种类型的敏捷性和速度,当他们浏览网络。 他们希望他们的用户体验不受阻碍,以便他们可以毫不费力地接收他们正在搜索的信息。

1. 网站加载时间的重要性

今天,用户对负载速度不佳或性能不佳的网站设计制作没有耐心。

在通过的一项研究Akamai的 ,大约有 一半的网络用户期待一个网站2秒或更少的加载。 如果在3秒内未加载,那些用户倾向于放弃网站。

更令人震惊的统计数字是,64%的不满足在线商店的体验和加载时间的购物者将把他们的业务在其他地方。

这意味着您不仅失去了当前的访问者,并降低了转化率。在这一天,秒有所不同。 您不能再允许您的网站被未优化的图片和文件所淹没。 您的用户希望您的网页加载快。

考虑到这一点,让我们来看看制定一个什么样的网站设计方案能优化您的网站设计制作以获得最佳的效果。

2. 最小化HTTP请求

每当浏览器获取的文件,页,或从网络服务器图象  HTTP(超文本传输协议)请求进行计数。

据雅虎 ,这些要求往往采取了一个网页的加载时间约80%。 浏览器还限制每个域4-8个同时连接的请求,这意味着一次加载30+个资源不是一个选项。

这意味着,您需要加载的HTTP请求越多,页面访问时间越长,并提取所有网页,从而增加网页的加载时间。

3. 如何减少HTTP请求

虽然它似乎通过保持简单的页面设计限制,有几种策略,您可以使用减少HTTP请求减轻您的浏览器。

  • 结合CSS / JS文件- 而不是迫使浏览器来检索多个CSS或JavaScript文件加载,试试你的CSS文件合并成一个较大的文件(同为JS)。 虽然如果您的样式表和脚本在页面之间有所不同,这是一个挑战,但是管理合并它们最终将有助于您的加载时间。
  • 使用查询只加载我们所需要的- 如果您发现您只需要在桌面上加载某些图像或需要在唯一的移动运行特定的脚本,使用条件语句来加载它们可以提高速度的好方法。 这样,您不会强制浏览器加载各种对某些设备或视口无用的脚本或图像。
  • 减少您使用的图像数量- 如果您发现您的一些网页设计制作是相当沉重的形象,尝试删除一些,特别是如果有文件大小大。 这不仅可以帮助减少图像HTTP请求,而且可以通过删除与您的书面内容不对应的令人分心的网页设计图像来提高您的UX。
  • CSS精灵- 适用时  结合使用相当频繁在您的网站到一个图片精灵表 和访问使用CSS 背景图片 和 背景的位置 图像 可以防止您的浏览器不断尝试每一次检索多张图像在您的网站加载某些页面。 这样,浏览器只会通过为页面的每个区域正确定位右侧图像进入视图,来检索您可以在页面上多次使用的浏览器。

4.使用CDN并删除未使用的脚本/文件

很可能,您的许多用户不会靠近您的Web服务器。

通过在各种地理上分散的服务器上传播您的内容来减少这种距离是不可行的选择,并且实施太复杂。

这是一个内容递送网络(CDN)来。一个CDN 是分布在多个位置的web服务器的集合,以便内容可以更有效地传递给用户。 CDN通常用于静态内容或上传后需要触摸的文件。

基于用户对网络邻近度的测量来选择服务器。 例如,选择具有最快响应时间和/或最少网络跳数的服务器。

规模较大的公司往往拥有自己的CDN,而中小型企业将使用CDN提供商。

相关阅读:将会杀死你的B2B电子商务发布的7个错误 【手机网站开发】

规模较小的公司可能会发现一个CDN不必要或他们的预算之外的,因此,使用利用网站如CND js有JS和CSS文件和框架库可以帮助您防止托管自己的服务器上的特定文件,同时增加他们的加载时间。

如果您发现您的公司的网站可以从使用CDN中获益,请花这段时间来评估您的网站设计制作,以确定您的网站设计制作中是否存在未使用的脚本或CSS文件。
而最简单的(但最耗时的)的事情就是网站设计制作
开发人员通过你的网站设计,检查每一页,有一些工具,可以从网站上删除未使用的样式,并降低你的CSS文件的大小。

5. 浏览器缓存

浏览器缓存允许您的网站上的资产下载到您的硬盘驱动器一次进入缓存或临时存储空间。 这些文件现在存储在您的系统本地,这允许后续的页面加载速度提高。

原雅虎!解释说,每天游客到您的网站的40-60%,进来一个空的缓存。 因此,当用户访问时,您需要让他们看到的第一个页面加载足够快,所以他们将不可避免地继续通过您的网站的其余部分(加载速度更快)。

静态资源的缓存生命周期至少为一周,而第三方项(如小部件或广告)只能持续一天。

CSS,JS和图像,以及媒体文件应该有一个星期到期,但理想的,一年下来,因为不再将紫RFC准则 。

您可以了解更多关于启用缓存这里。

相关阅读:跨桌面和移动的移动网络行为【手机网站开发】

6.压缩图像和优化文件

目前,图像占用每个加载的平均字节数的60% 左右1504KB。 与其他页面资源(例如脚本(399KB),CSS(45KB)和视频(294KB))相比,图像占用了大量的HTTP请求。

正如早些时候提到的,删除任何图像的资产。 这包括图标库,您只使用两个,那些额外的三种字体,您认为您可能会使用,但没有,和图像,也许可以复制与CSS(如彩色背景或渐变)。

清除这些资源后,请查看您在网站上的图片,并查看其大小。 通常,许多人倾向于从股票照片网站下载图像,并将它们上传到他们的服务器上,并且使用它们而不用为了优化它们而对网络进行优化。

如果您发现自己使用大的图像,尤其是对英雄的图像,通过优化软件一样运行它们图像优化。 将所有图片保持在150KB以下,宽度不超过1920像素,平均/中/ 72dpi质量级别。任何更大的,您会注意到,网站设计制作中图像加载非常晚的页面呈现以及响应时间慢的用户行为。

当涉及到您应该使用什么文件扩展名,使用这是一个基本的公式:

  • SVG适合您想要接收大量细节的矢量图像。
  • 某些图标可以利用字体库使某些图形,而不是节约了单独的图像。
  • PNG应该用于您需要透明背景的图像,例如人物的圆形图像或Facebook的“F”标志。
  • JPG最适合照片或细节不太重要的任何东西。

虽然图片仍然会占用大部分的HTTP请求,但优化它们和其他资源最终会将其大小降低,从而提高网站的整体效果。

建站行微信公众号二维码

建站行微信号:jianzhanhang