八招让网站具有跨浏览器与设备的卓越性能

译文
开发 前端
在用户使用各种移动类浏览器和设备来访问您的网站时,加载速度与显示效果会对用户的浏览体验产生直接的影响。本文给出八种优化方法,帮助您来提升贵网站的整体性能。

[[265768]]

【51CTO.com快译】生活在快节奏的世界上,我们一直秉持着“时间就是金钱”的理念,希望自己所接触到的事物能够快速地运转,以节省我们宝贵的时间。因此,一个打开缓慢的网站,不但会给访客带来极差的体验,甚至还会拒用户于千里之外,这对企业来说无疑是一剂毒药。

根据unbounce(请参见https://unbounce.com/landing-pages/7-page-speed-stats-for-marketers/)的一项研究,79%的人如果碰到网站加载超时的问题,会直接放弃浏览的打算,而直接选择离开。可见,优化网站的加载性能不仅是必要的,甚至对于企业来说应当是强制性的。

与此同时,随着各种手机和移动设备的普遍使用,超过50%的网站流量来自于移动端。有调查显示:有近73%的移动用户碰到过网站加载时间过长,甚至是延迟长达100毫秒的情况。这些直接导致了网站转化率下降高达9%。可见,除了页面加载的时间,网站页面是否能在各种移动浏览器上给用户带来无缝且***的访问体验,同样显得至关重要。下面我们一起来看看如何优化网站,以提高在跨浏览器与设备上的加载性能。

1.选择可靠的Web主机

当您决定要将自己的业务转移到网上时,首要问题是选择可靠的网站托管平台。在此,您需要考虑的指标包括:网站的加载速度、用户的体验、在Google/百度搜索中的排名、以及网站可能应对的总体流量。因此,在选择合适的Web主机时,您应当注意如下事项:

网站空间的要求

您要建立一个什么样的网站?是大而全的电子商务网站、还是一个简单的博客?您能够计算出自己的网站将需要多少磁盘空间吗?您是否需要一个缓存盘来存储那些媒体文件、代码库、以及数据库?可见,您需要花一些时间来对内存及存储空间的需求进行全面的分析,并据此来选择相配套的Web主机。

总的流量负载

一般而言,网站的性能与访问的流量有着直接的关系。任何用户对于网站上任何文件的访问,都会对可访问的带宽造成影响。而由于网站托管运营商一般不会主动对给定带宽做出任何限制,因此您可以直接通过用户的数量来估算需要的带宽。

服务器可靠性/正常运行时间评分

Web服务主机本身的可靠性也是我们在做选择时需要考虑的一个主要因素。要想实现24x7的服务质量,其Web主机的正常运行时间起码要达到或超过99.5%的评分。

首付和续订时的价格

通常情况下,那些网站托管服务公司,特别是共享托管类型的公司,会在您***使用时给出非常便宜的价格,但是在您续订其服务的时候,则会抬高各种费用。因此,在选择托管服务商时,您***将眼光放得长远一点,并注意他们的定价体系。

技术支持

不同于以往的本地部署方式,如果您采用的是在线托管方式的话,就需要依赖托管服务商的技术支持团队,来响应和解决托管服务的各种故障。因此,您需要通过全面检查备选公司的技术文档、管理流程、以及在互联网上查询现有客户对其技术支持力度与效果的评论。

作为参考,我们在此给您罗列了一些全球***托管公司的名录。例如:GoDaddy(https://godaddy.com/)、HostGator(https://www.hostgator.com/)、BlueHost(https://www.bluehost.com/)、Amazon Web Services (AWS)、以及Google Cloud Platform。

2.测试网站是否存在跨浏览器和设备的兼容性问题

正如前文所述,如今世界各地的人们都无时不刻地使用着各种类型的浏览器、操作系统、以及三千多种支持Web访问功能的设备,浏览着全球不同类型的网站。因此,面对激烈的“日活、月活、拉新”等方面的竞争,我们需要在网站上线之前和之后,持续做好跨浏览器与设备的兼容性测试,以保证网站的页面能够在各种设备上具有一致性的显示效果,并给用户带来流畅的访问体验。

3.遵循移动优先的法则

“移动优先法则(mobile-first approach)”已是整个网站服务领域的整体趋势。您的网站必须能够***地支持各种移动与平板设备的不同显示接口和分辨率。在进行任何改版或升级之前,请充分验证网站页面对于移动系统的“友好性”,以及在不同运算能力与硬件配置设备上的响应速度。您可以通过使用Google的 Mobile-Friendly 工具(https://search.google.com/test/mobile-friendly),来测试自己的网站,并找出任何值得改进的地方。

如果您的网站属于博客或轻量级类型,您还可以使用WordPress的Responsive themes(https://wordpress.org/themes/)来实现用户的无缝体验。

4.改进网站的加载时间

网站的加载速度,对于访客的***印象是至关重要的。有研究表明,用户普遍希望自己能够在两秒钟内访问到目标的网页,而如果网页的加载时间达到3秒及以上,则会有42%的用户离开该网站,并转向他处。

另外,人们常会有这样一种思维惯式:由于移动设备比传统电脑更小巧、更灵活,他们自然而然地认为:目标网站在移动浏览器上的加载速度,理应比桌面浏览器更快。下面,我给大家罗列了各种有助于提高网站加载速度的参考方法:

  • 开启并实施浏览器缓存
  • 最小化各种HTTP请求
  • 压缩与合并各种文件
  • 对CSS和JavaScript文件使用异步加载的方式
  • 优化服务器响应时间
  • 优化CSS的传输
  • 减少重定向的数量

5.启用移动页面加速(AMP)

如果贵网站的移动用户访问量具有一定的规模,那么您应该考虑实施Google推出的AMP,以保证能够提供更为流畅的移动访问体验。AMP能够通过对内容进行压缩、以及删除掉不必要的文件和图形,从而让您的网站更具移动友好性,能够在移动浏览器上更快地加载网页。同样,如果您的网站属于博客或轻量级类型,那么您可以使用 WordPress插件,来制作自己的各种AMP页面。

6.重新设计弹出窗口

一般而言,在网站上放置弹出窗口是增加用户转化率、并向用户分享更新信息的一种***方法。不过,我们需要根据用户的体验感受,来恰当地放置弹窗。您可以通过制定一些策略,将弹窗的内容与图像放置在页面上的合适位置,从而既能吸引用户的注意力,又不至于让他们感到惹恼。

不过,由于移动及平板设备的屏幕较小,而弹出的窗口会占据较大的屏幕空间,进而会严重影响到用户的体验,因此在某种程度上说,弹窗并不适合于移动优先的法则。最近,Google甚至提出了针对弹窗的惩罚(请参见https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html),其中就包含在为移动用户设置弹窗时,所需要遵循的各种规则和说明。

7.使用CDN获取网站资源

无论是出现有大的流量请求涌向Web主机,还是在地理上远离网站服务器的所在地,用户都可能会碰到网站出现延迟响应、文件加载缓慢、以及整体性能下降的状况。

为了避免此类状况的发生,您可以使用内容传递网络(Content Delivery Network,CDN),来予以消除。通过CDN,您可以通过拷贝文件的形式,将自己的网站缓存到服务器的全局网络之中。当有用户通过浏览器请求访问贵网站上的某个文件时,该请求将会被路由到最近的服务器上进行索取。例如:如果您的Web服务器架设在德国,而有来自加州的用户想访问贵网站时,那么他的浏览器就会直接在就近的服务器查找并获取所有必要的文件。

因此,为了提高网站的加载速度,并优化用户在全球各处的访问体验,您可以试用MaxCDN(https://www.maxcdn.com/)和Cloudflare(https://www.cloudflare.com/)之类的典型CDN。

8.图像优化

有时,您的网站可能会有一些非常大的图像文件,它们占据了网页加载的大部分时间。那么,您完全可以使用Compressor(https://compressor.io/)之类的工具来压缩这些图像,以提高加载的速度。另外,由于不同类型的文件格式也会对图像的加载时间产生影响,因此请通过必要的转换,为网站提供适当的图像文件类型。

结论

综上所述,在用户使用各种移动类浏览器和设备来访问您的网站时,加载速度与显示效果会对用户的浏览体验产生直接的影响。希望上述所列的八项建议能够通过各种优化方式,来提升贵网站的整体性能。

原文标题:Tips for Optimizing Your Site for Multiple Browsers and Devices,作者:Saif Sadiq

【51CTO译稿,合作站点转载请注明原文译者和出处为51CTO.com】

责任编辑:庞桂玉 来源: 51CTO
相关推荐

2022-01-03 16:15:59

Web浏览器技巧

2023-08-26 21:38:04

Kuma框架CSS

2011-08-14 23:00:10

联想工作站

2020-08-31 19:20:33

浏览器CORS跨域

2011-07-02 14:41:13

惠普工作站

2017-10-09 13:39:26

浏览器渲染服务器

2015-09-23 11:36:06

2015-06-11 14:05:46

QQ浏览器

2022-04-29 09:11:14

CORS浏览器

2010-09-14 14:18:09

CSS跨浏览器开发

2013-09-30 10:17:57

SAP

2013-11-08 17:56:28

SAP中国商业同略会

2010-03-09 13:54:55

2010-05-31 10:11:02

2013-12-06 14:57:24

浏览器

2011-07-15 09:56:54

NPAPI开发火狐

2022-04-07 09:00:00

跨浏览器测试自动化服务异常

2010-04-05 21:57:14

Netscape浏览器

2023-04-07 08:25:33

JavaScript浏览器映射

2012-05-10 13:31:02

微软浏览器Win8
点赞
收藏

51CTO技术栈公众号