6种简单且有效的网站设计方式提高网页加载速度

运营推广
2017-07-19 09:55:36
文章摘要

你可能在想,网站速度有什么大惊小怪?平均网页加载速度有什么重要?据Aberdeen Group介绍,页面加载时间延迟1秒

你可能在想,网站速度有什么大惊小怪?平均网页加载速度有什么重要?据Aberdeen Group介绍,页面加载时间延迟1秒,结果如下:


■ 页面浏览量减少11%

■ 客户满意度下降16%

■ 转化次数减少7%


亚马逊报告,网站速度每100毫秒改善,而沃尔玛则增加了1%的收益,同时发现每一个页面速度每增加一秒就会增加2%的转化。



您的网站的速度还会影响您的自然搜索排名,因为Google 自2010年以来已将网站速度作为其排名算法的信号。基本上,您的网页加载速度非常重要,并确定您是否将在SERP中排名。



以下是通过修改您的网站设计立即提高网页速度的 6种简单但非常有效的方式:


#1优化图像和延迟加载的所有内容


网络上的一些最常见的占带宽的便是图像。根据HTTP存档,图像现在占页面权重的63%。“截至2015年5月,平均网页超过了2 MB的标记。这几乎是三年前平均页面大小的两倍。



“图表显示了消耗最多千字节的细目。实际上所有的资产类型都在增长,最显着的是图像。



当创建内容时,有些人会使用大图像,然后使用CSS来缩放它们。然而,他们不知道,浏览器仍然以全尺寸加载它们。例如,如果将800 x 800的图像缩小到80 x 80,浏览器将加载十倍以上。



优化图像的最佳方法是将其压缩成更小的尺寸,同时保持质量。使用诸如TinyJPG和Compressor.io之类的工具,或诸如WP Smush It(WordPress)和Imgen(Joomla)之类的CMS插件来压缩图像将保证您的网站加载速度更快,从而为网站访问者提供更好的体验并提高转化率。



另一种选择是“延迟加载”图像和网页内容。实质上,您可以使用一些JavaScript来查找哪些图像位于或靠近视口,并且仅下载用户可能会看到的图像。



根据Stackpath总结的延迟加载的好处包括:



延迟加载在优化内容交付和简化最终用户体验之间取得平衡。



用户更快地连接到内容,因为只有一部分网站需要在用户首次打开时下载。



随着内容持续供给用户,企业看到更高的客户保留率,减少了用户离开网站的机会。



企业看到资源成本在降低,因为内容只有在用户需要的时候才能传递,而不是一次性的传递。



#2使用浏览器缓存



设置浏览器缓存可以让你暂时的数据存储在网站访问者的计算机上。这确保了他们每次访问您的网站时不必等待您的网页(标志,CSS文件和其他资源)加载。



您的服务器端缓存及其浏览配置可确定存储数据的时间。在您的服务器上设置浏览器缓存可以通过联系您的托管公司或通过查看以下资源来完成:



■ Apache缓存



■ IIS缓存



■ Nginx缓存



利用浏览器缓存来指定Web浏览器保存CSS,JS和图像存储的时间。对于回访客户让您的网页加载速度更快,导致了流畅的体验,同时在导航和在搜索结果页面(SERP)上更好的排名。



另外,安装缓存插件会对您的页面加载时间产生巨大的影响。缓存插件通过生成内容的静态副本并将其传递给站点访问者来处理此问题。这可以大大减少您的页面加载时间。



缓存插件可以帮助你看到你的网站的整体性能10倍左右的改善。缓存插件的示例包括W3 Total Cache。



#3压缩网页内容



Google将压缩定义为使用较少位编码信息的过程。尽管最新的网络浏览器都支持内容压缩功能,许多网站仍然没有释放压缩内容。



访问这些网站的访问者与网页的互动速度缓慢。 这些不利的网站行为的主要原因包括旧的或错误的浏览器,网络代理,配置错误的主机服务器和防病毒软件。



未压缩的内容使得对于具有有限带宽的用户,接收到Web内容和页面加载时间非常慢。为了有效的压缩策略提供高效的网站内容,Google建议如下:



1)Minify,HTML,CSS和JavaScript



2)在CSS和HTML中使用一致的代码,方法如下:



■ 使用一致的规格 - 大多是小写的。



■ 确保引用HTML标签属性。



■ 以相同的顺序显示HTML属性。



■ 使用Adobe DreamWeaver和MAMP等工具分别在PC上本地创建/编辑CSS并测试运行网站,按照相同的顺序来指示CSS键-值对(KVP)。



3)启用Gzip压缩



Gzip找到类似的字符串和代码实例,并用较短的字符临时替换它们。根据Google说法:“启用Gzip压缩可以将传输响应的大小减少高达90%,这可以显著减少下载资源的时间量,减少客户端的数据使用量,并改善首次渲染页面的时间”



#4优化CSS代码和传递



CSS的引入是一个关键的改进,几乎没有任何缺点。 但是,必须考虑CSS脚本对页面速度的影响,特别是它涉及到一个网页的表现时。



当CSS交付不当时,导致浏览器在下载和处理样式数据时延迟,在它可以彻底完成呈现,以显示给你网页的访问者之前。这就是为什么至关重要的是优化CSS交付,并确定可能减慢您的网页的陷阱。



CSS可以通过网页以多种方式使用,并且仍然可以工作。鉴于有各种方法可以使用它,有几种不同的CSS设置。无论您如何在网页上进行设置,您的CSS应该帮助您的网页呈现更快的速度,而不会减慢速度。



您可以利用不同的在线工具来压缩,优化和清理CSS交付。另外,您可以参考Google关于优化CSS交付的建议。



#5使用非常快的服务器托管公司



有一段时间,我更换了我的托管公司,我的网站的平均速度在其他任何不改变情况下显着增加。当时我意识到,当涉及到网站的加载速度托管公司并不都是平等的。



在浏览网站或打开网页时,您将从远程计算机(即托管公司的Web服务器)打开文件。远程计算机越快,您的网页可以打开的速度越快。



有各种各样的托管公司在那里供您使用。只要确保您进行适当的研究,并阅读足够的评论,然后再决定用任何一个主办来托管您的网站。



在研究可靠的网络托管公司时,您应该注意的最重要的因素包括速度/加载时间,正常运行时间/可靠性,客户支持和价格/价值。



#6停用不使用的插件



插件通常是减慢WordPress托管网站速度的主要原因。删除您不再使用或不是必需的插件。您可以通过选择性地禁用插件和衡量服务器性能来识别可能损害您速度的插件。



另外,为了加快您的WordPress网站在手机上的体验,请查看我们的指南,尽快在您的WordPress网站上实施Google AMP。



结论



用户将继续要求更丰富的在线体验,并且会有更快更清晰的JavaScript,更多的CSS窍门和其他第三方分析工具,以增加您的网页的大小和衡量您的网站。



作为一个在线营销人员,你不能让这个让你迷惑。 您必须定期努力扩展您的网页设计,以提高您的网页加载速度。一点点持续关注你的网站加载速度会走很长的路。记住:只需在您的网站加载速度一秒钟的延迟就是失去领先。
扫码关注我们
小程序二维码

查看演示

微信公众号二维码

关注微信公众号

你觉得这篇文章怎么样?

本文标签: 网站设计

关于小二CMS

高端定制网站领域著名服务商

我们立足合肥,业务覆盖安徽、全国及全球市场。我们凭借一支经验丰富、创意独特、协作无间的专业技术团队,专注于将最优技术通过高效简捷的途径呈现给客户,量身打造最佳解决方案。我们致力于通过持续努力,成为客户在信息化领域值得托付、共创价值的长期战略合作伙伴,协助客户在新经济时代敏锐捕捉商机,拓展发展空间,构筑强大竞争力。

小程序开发
公众号开发
高端网站开发
系统开发
商城开发
外贸网站建设
网站优化推广
安全运维

扫描二维码与小二CMS创始人沟通

7×24小时专业技术支持

高端网站定制
系统开发(OA、CRM)
商城开发
外贸网站建设
公众号/小程序
安全运维
创始人微信二维码

扫一扫添加微信

关于我们

建站190一家专注于高端网站建设、微信小程序开发、移动端应用研发及企业数字化转型服务的技术驱动型企业。我们致力于通过前沿技术研发实力与匠心独运的创意设计,为客户提供从策划、设计到开发、部署运维的一站式数字化解决方案。

自2013年成立以来,我们已成功交付3000+个精品项目,服务客户遍布金融、零售、制造、教育、医疗、互联网等多个行业领域。我们拥有资深的技术团队与丰富的实战经验,擅长复杂业务逻辑梳理与建模、高性能系统架构设计、跨平台应用开发、用户体验(UX/UI)深度优化及企业级系统安全保障。

我们相信,每一个成功的项目都源于对客户需求的深刻理解与极致追求。选择建站190,就是选择一个懂技术、懂设计、更懂您业务痛点的数字化成长伙伴,让我们携手将您的品牌愿景与市场机遇转化为可落地的数字现实,共同驱动业务增长与品牌价值升级。

致力于通过数字化技术赋能企业,帮助客户实现业务增长与品牌升级,成为您值得信赖的技术合作伙伴。

我们的优势
01

十四年专注高端网站建设

02

服务上千企业积淀厚口碑

03

资深策划洞悉行业与用户

04

前沿技术栈紧跟时代发展

05

前端代码深度优化SEO友好

06

千家成功案例品质可信赖

07

精英团队高效协同创精品

08

多重防护保障数据安全

09

独家源码出售握牢自主权

10

完善售后体系全程护无忧

11

快速响应需求变更迭代

12

架构灵活支持二次开发

13

云服务器部署稳定可靠

14

免费提供一年技术支持

15

项目按期交付信誉保障

16

数据定期备份安全无忧

我们的不同

我们是一支年轻而充满激情的团队,痴迷代码,沉醉设计,坚信设计与编程不仅是工作,更是生活的信仰——"非设计,不生活;无兄弟,不编程!"

团队成员来自国内外顶尖设计公司与软件企业,精通网站设计与开发,已成功交付数百个项目,涵盖品牌官网、电商平台、小程序及移动端应用。

使命 以技术之力,助力改变命运
宗旨 客户第一,品质至上
信念 客户的成功,才是我们真正的成功

产品演示

产品演示二维码

请使用微信扫描二维码

查看产品演示

QQ客服

扫码添加好友,随时为您解答

QQ二维码

扫描二维码添加客服

QQ号:460623785
或保存二维码在QQ中识别

微信客服

扫码添加好友,随时为您解答

微信二维码

扫描二维码添加客服

微信号:yanboss0901
或保存二维码在微信中识别

微信咨询
QQ咨询
电话咨询
在线客服
回到顶部