您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

网站打开速度慢,这些是关键,不要以为不重要

时间:2020-03-27 13:25:23  来源:  作者:

我们在开发网站时,与其在网站上线后花更多的时间来改善网站的页面速度,不如让我们从一开始就开发一个得分为100%的网站。

建立漂亮的网站从未如此简单。如果建立一个人们实际上希望一次又一次回到的网站,自从输入连接时代以来,这一直是一个挑战。

当您希望人们回到您的网站时,会想到很多因素,包括您网站上的内容,图像,用户体验以及对访问者的价值。定义因素之一是页面速度,这是用户体验的一部分。

页面速度是网页完全加载所花费的时间。在提供出色的用户体验方面,这是一个至关重要的因素。早在2018年,google正式宣布将通过“速度”更新将页面速度作为其排名中的一个因素。

 

那么,什么使页面速度如此重要呢? 让我们深入研究。

①页面速度的重要性

页面加载缓慢会反过来影响你网站的销售。 客户的注意力跨度较短,他们不希望等待页面加载缓慢。

实际上,曾经谷歌的有项研究表明,如果您的网页加载时间超过3秒,则有53%的移动用户会去其他地方。

在加载缓慢的页面上失去客户并不是一个令人满意的前景。

页面速度在seo中也起着至关重要的作用,缓慢加载页面会受到搜索引擎的“处罚”。

较低的页面速度也意味着搜索引擎可以使用分配的抓取预算来抓取更少的页面,这会对您的索引产生负面影响。

 

②较慢的页面具有较低的转换次数,较高的跳出率,最终使网站的访问者数量减少。

如果你的公司将页面速度用作吸引访问者访问网站的主要渠道,那么页面速度过慢也会对付费搜索产生影响。网站速度不佳会损害你的质量得分。

质量得分决定了您支付的费用(每次点击费用)以及你在搜索引擎结果页(SERP)上的排名。如果你的质量得分较低,很可能您的广告可能不会显示在搜索结果的首页上!

如您所见,页面速度是确保潜在客户获得良好用户体验的关键因素。因此,当您单击网站链接时会发生什么,以及如何提高页面速度。

 

网站打开速度慢,这些是关键,不要以为不重要

 

 

当您单击网页时会发生什么

这是我们开始寻找如何优化网站以提高页面速度的起点。就是当你单击某个链接或者在浏览器中输入名称搜索时幕后情况的细分。

  1. 您在浏览器中输入名称,浏览器进入DNS查找模式。每个网站都映射到您的计算机可以识别的IP地址。
  2. 一旦获得IP地址,我们便开始请求允许浏览器显示页面的文件。
  3. 这些请求采用标头的形式,可以包括html文件,图像,cssJAVAscript,视频等。
  4. 服务器决定使用哪个请求处理程序,然后开始将页面内容发送回响应中。
  5. 浏览器开始呈现页面,请求完成页面所需的所有资源,例如图像或CSS文件。
  6. 不会一次接收所有资源,浏览器会发出其他请求,直到获得所需的所有资源。它以串联方式呈现页面。
  7. 获得所有资源后,浏览器将完成页面呈现。

这就是当你单击网页时所发生的事情,但是在很多地方,您的页面速度可能会出现瓶颈。当浏览器请求资源(例如图像,CSS文件或视频)时,可能会遇到问题。

 

确保网站快速运行的5大因素

当涉及到互联网时,每个人都喜欢速度。可以说,更快的加载时间,更快的缓冲速率,更快的下载速度是不可或缺的一部分。

那么,确保快速网站的决定因素是什么?我们列出了几个起最重要作用的:

①共享服务器:单击网站时,浏览器最初会向服务器发出请求,要求服务器提供构成网页的各种元素-图片,文本,视频等。廉价的Web托管服务将您的网页托管在共享服务器上,这实际上意味着您正在与许多其他网站共享Web资源。 事实证明,这可以显着增加页面加载时间,并带来较差的用户体验。

解决方案:如果您考虑为要快速扩展的业务提供免费的虚拟主机服务,则可能是时候放弃免费服务并考虑为您提供专用服务器的主机了。

②过大的图像:对于任何浏览器来说,图像都是棘手的部分,图像越大,浏览器就越难加载它们。无论连接速度或服务器质量如何,拥有大量未经优化的图像都会降低你的网页速度。另一个重要因素是图像格式。发现JPEG图像的加载速度比GIF / PNG快得多。

解决方案:优化图像,使用JPEG代替PNG,并确保图像小于1 mb。

JavaScript的问题:Javascript是使您的网页具有交互性和动态性的魔力,没有它,您的网页的确会变得很呆板。但是未优化的JS代码可能会对您的页面速度产生负面影响。这是因为,当您的网页加载时,它必须首先处理它遇到的所有Javascript文件。这导致所谓的“阻止渲染Javascript”(又称为Javascript),阻止网页快速加载。

解决方案:检查你的Javascript代码,显示你网页真正需要的内容。推迟Javascript加载,直到用户看到网页的其余部分为止。

④不使用缓存:缓存是一种将常用数据点存储在“缓存内存”中的技术。从缓存的内存中检索服务器收到的针对同一项目的下一个请求,从而节省了时间。

解决方案:对一堆不同的元素(包括HTTP,图像和数据库查询)使用缓存。

●⑤广告过多/ Flash内容过多:每增加一个广告,HTTP请求就会增加,这需要额外的处理时间。这意味着对用户的浏览器以及你的服务器造成了额外的负担,这极大地减慢了页面加载时间。还发现Flash内容庞大且下载时间变慢。减少或消除Flash文件的大小势必会极大地提高你的页面速度。

解决方案:少用广告,尤其是在它们占用大量服务器资源的情况下,例如视频广告或大量图片广告。尝试使用HTML5替代而不是Flash。

 

网站打开速度慢,这些是关键,不要以为不重要

 

 

尽管我们已经为人们倾向于犯下的大多数常见网页愚蠢问题提供了解决方案,但是这里有一些其他方法可以提高页面速度。

3个方案[+ 2个技巧]可提高您的页面速度

●①使用内容传送网络(CDN):

主要的优点是提高了向用户发送内容的速度。CDN能几乎涵盖国内所有线路。而在可靠性上, CDN 在结构上实现了多点的冗余,即使某一个节点由于意外发生故障,对网站的访问能够被自动导向其他的健康节点进行响应。CDN能轻松实现网站的全国铺设,不必考虑服务器的投入与托管、不必考虑新增带宽的成本、不必考虑多台服务器的镜像同步、不必考虑更多的管理维护技术人员。

例如,如果您坐在北京时正在查看美国旅行网站,则请求将由本地PoP处理,以防止请求穿越大西洋。 CDN还具有其他优势,例如减少带宽消耗,处理大量流量的能力以及帮助您保持负载平衡。

 

网站打开速度慢,这些是关键,不要以为不重要

 

 

●②缩小CSS,JavaScript和HTML

如果要加快网页速度,除了使图像等Web内容最小化之外,还需要减少客户端服务器请求的数量。 缩小和压缩所有不必要的和可压缩的代码行是初学者朝这个方向迈出的一步。

缩小对于内联JavaScript和未缓存的外部文件非常方便。为了实现最佳页面速度,建议缩小所有4096位以上的JavaScript文件。

利用所有可用的编码空间编写简洁的代码,删除额外的空间,缩进和行空间,同时保持代码的可读性,从而减少了网站核心文件和前端文件的大小。

最小化HTML,CSS和JavaScript文件的其他好处包括减少网络延迟,减少HTML请求,增强压缩,更快的浏览器下载,从而提高页面速度。

 

网站打开速度慢,这些是关键,不要以为不重要

 

 

●③使用简约框架

一个好的前端框架可以帮助你避免很多业余前端优化错误。一些较大的框架提供了大量的附加功能,但是你的网站可能并不需要全部。想象一下你的框架,就像要转换为美丽花园的一块空地。您需要修剪草并在预定的位置种植树苗,但不能让花园里堆满杂草和不必要的植物。同样,您有责任不要让框架被冗余代码,过多的HTTP请求和大图像破坏。

 

网站打开速度慢,这些是关键,不要以为不重要

 

 

2个技巧

●①摆脱后端服务器

第一个技巧是丢弃后端服务器。 我们并不是要完全避免使用后端,而是要一种解决方法,使依靠后端提供所有内容成为过去。

后端是你的网页的一部分,该部分在服务器上运行,并以Node.js / Express,Java或.NET编写。 后端在每次请求后动态获取HTML数据。

当后端向API,数据库发出请求以获取应插入HTML的数据时,这些集成点很容易出现漏洞。缓慢的数据库,损坏的API,网络问题只是后端可能出错的部分原因。

输入JAM堆栈。 JAM代表JavaScript,API和标记。它是一种前端体系结构,在该结构中,您不必构建每个用户一次的HTML,而是为用户提供静态HTML,而不是在每个用户每次请求后都呈现HTML。

您可以将静态HTML,JavaScript和CSS文件托管在AWS S3,Netlify或其他可提供静态文件的提供程序上。

如果不能仅使用静态网页来运行站点,则仍然可以通过许多方法来实现JAM堆栈技术。第一种选择是将您的网站分为JAM堆栈部分和基于服务器的部分。另一种技术是使用客户端API来获取数据。

●②将所有静态内容移动到CDN

前面部分讨论了CDN的优点。 CDN是一组地理上分散的服务器,可使用存在点(POP)帮助减少原始服务器上的负载。

当您即将达到服务器的带宽容量时,卸载视频,图像,JavaScript和CSS文件之类的静态资产将减少服务器的带宽使用量。

CDN已优化为提供静态内容,而边缘CDN服务器将为该静态内容提供客户端请求。

如果您的流量的一小部分来自遥远的地理区域,CDN也将派上用场,CDN可以通过将这些静态资产缓存在距离最终用户更近的边缘服务器上来减少延迟。

总结

根据对大量客户网站测试的结果,有4成网站可以在5秒内打开,7成网站可以在10秒内打开,您可以参照这个范围来设定您自己的标准。可以根据上述方案提高网站打开速度。

网站,尤其是企业网站,身为企业的身份照,就必须各方面都要符合用户的喜爱,保证用户拥有良好的体验感,这样才会产生合作的可能。



Tags:网站   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
随着互联网的普及及技术的改革,现在所有的考试从注册报名,考务文件查询,准考证下载打印、考试成绩查询和各种的信息的发布都是在网上发布的。以下这几个网站,是所有考证人都必须...【详细内容】
2021-12-24  Tags: 网站  点击:(5)  评论:(0)  加入收藏
不会写文章?写文案没灵感,不知道写什么?【网创智慧库】分享给你15个文案高手都在用的高质量文案素材网站,记得收藏保存! 今日热榜今日热榜是一个综合各大平台的热门实时话题排行...【详细内容】
2021-12-24  Tags: 网站  点击:(11)  评论:(0)  加入收藏
对于一些文章页面来说,想要得到提升页面进行整体质量度,除了优化研究文章主体主要内容之外,调用相关分析文章也是企业优化的重点。那么我们具体怎么调用相关文章呢,星宇SEO今天...【详细内容】
2021-12-22  Tags: 网站  点击:(6)  评论:(0)  加入收藏
前言传统的 DDOS 防御通常使用“硬抗”的方式,导致开销很大,而且有时效果并不好。例如使用 DNS 切换故障 IP 的方案,由于域名会受到缓存等因素的影响通常有分钟级延时,前端难以...【详细内容】
2021-12-21  Tags: 网站  点击:(19)  评论:(0)  加入收藏
在最近的一波攻击中,黑客利用多个插件中未修补的漏洞攻击了 160 万个 WordPress 网站。 易受攻击的插件对 WordPress 网站产生了的巨大攻击数据。 Wordfence 最近发现 WordPr...【详细内容】
2021-12-16  Tags: 网站  点击:(9)  评论:(0)  加入收藏
今年以来,国家网信办针对一些粉丝量大、关注度高的网站平台“头部账号”法纪意识淡薄,滥用网上影响力,传播错误导向内容,污染网络生态等突出问题,会同相关部门,指导各地网信办,要求...【详细内容】
2021-12-16  Tags: 网站  点击:(8)  评论:(0)  加入收藏
经常和大家分享PPT技巧,不知道大家有没有进步?今天直接来个重磅分享。你知道,一些大厂的路演、发布会PPT的设计师,平时浏览什么设计网站吗? 作为PPT设计师,平时也会看一些创意设计...【详细内容】
2021-12-15  Tags: 网站  点击:(21)  评论:(0)  加入收藏
据BleepingComputer消息,亚马逊在12月8日宣布,将关闭其运营了25年的全球网站排名系统“Alexa.com”。Alexa.com是亚马逊的子公司,以全球排名系统而闻名,该系统通过分析来自其合...【详细内容】
2021-12-15  Tags: 网站  点击:(7)  评论:(0)  加入收藏
一、背景介绍DirBuster是用来探测web服务器上的目录和隐藏文件的。因为DirBuster是采用java编写的,所以运行前要安装上java的环境。 来看一下基本的使用: ①:TargetURL下输入要...【详细内容】
2021-12-07  Tags: 网站  点击:(28)  评论:(0)  加入收藏
最近发现B2B的海外推广貌似是一个挺大的缺口,很多厂长或老板不了解独立站的流量构成和玩法,无论是自然流量还是付费流量。也衍生了很多培训(咦,这是不是我副业的好机会?)所以这次...【详细内容】
2021-11-11  Tags: 网站  点击:(32)  评论:(0)  加入收藏
▌简易百科推荐
本文分为三个等级自顶向下地分析了glibc中内存分配与回收的过程。本文不过度关注细节,因此只是分别从arena层次、bin层次、chunk层次进行图解,而不涉及有关指针的具体操作。前...【详细内容】
2021-12-28  linux技术栈    Tags:glibc   点击:(3)  评论:(0)  加入收藏
摘 要 (OF作品展示)OF之前介绍了用python实现数据可视化、数据分析及一些小项目,但基本都是后端的知识。想要做一个好看的可视化大屏,我们还要学一些前端的知识(vue),网上有很多比...【详细内容】
2021-12-27  项目与数据管理    Tags:Vue   点击:(2)  评论:(0)  加入收藏
程序是如何被执行的  程序是如何被执行的?许多开发者可能也没法回答这个问题,大多数人更注重的是如何编写程序,却不会太注意编写好的程序是如何被运行,这并不是一个好...【详细内容】
2021-12-23  IT学习日记    Tags:程序   点击:(9)  评论:(0)  加入收藏
阅读收获✔️1. 了解单点登录实现原理✔️2. 掌握快速使用xxl-sso接入单点登录功能一、早期的多系统登录解决方案 单系统登录解决方案的核心是cookie,cookie携带会话id在浏览器...【详细内容】
2021-12-23  程序yuan    Tags:单点登录(   点击:(8)  评论:(0)  加入收藏
下载Eclipse RCP IDE如果你电脑上还没有安装Eclipse,那么请到这里下载对应版本的软件进行安装。具体的安装步骤就不在这赘述了。创建第一个标准Eclipse RCP应用(总共分为六步)1...【详细内容】
2021-12-22  阿福ChrisYuan    Tags:RCP应用   点击:(7)  评论:(0)  加入收藏
今天想简单聊一聊 Token 的 Value Capture,就是币的价值问题。首先说明啊,这个话题包含的内容非常之光,Token 的经济学设计也可以包含诸多问题,所以几乎不可能把这个问题说的清...【详细内容】
2021-12-21  唐少华TSH    Tags:Token   点击:(10)  评论:(0)  加入收藏
实现效果:假如有10条数据,分组展示,默认在当前页面展示4个,点击换一批,从第5个开始继续展示,到最后一组,再重新返回到第一组 data() { return { qList: [], //处理后...【详细内容】
2021-12-17  Mason程    Tags:VUE   点击:(14)  评论:(0)  加入收藏
什么是性能调优?(what) 为什么需要性能调优?(why) 什么时候需要性能调优?(when) 什么地方需要性能调优?(where) 什么时候来进行性能调优?(who) 怎么样进行性能调优?(How) 硬件配...【详细内容】
2021-12-16  软件测试小p    Tags:性能调优   点击:(20)  评论:(0)  加入收藏
Tasker 是一款适用于 Android 设备的高级自动化应用,它可以通过脚本让重复性的操作自动运行,提高效率。 不知道从哪里听说的抖音 app 会导致 OLED 屏幕烧屏。于是就现学现卖,自...【详细内容】
2021-12-15  ITBang    Tags:抖音防烧屏   点击:(25)  评论:(0)  加入收藏
11 月 23 日,Rust Moderation Team(审核团队)在 GitHub 上发布了辞职公告,即刻生效。根据公告,审核团队集体辞职是为了抗议 Rust 核心团队(Core team)在执行社区行为准则和标准上...【详细内容】
2021-12-15  InfoQ    Tags:Rust   点击:(25)  评论:(0)  加入收藏
最新更新
栏目热门
栏目头条