【SEO技术】优化网站页面打开速度十二绝招

  网络的普及,移动互联网也随之崛起,移动网站越来越受到重视,很多地方网页的加载速度不一样,不是所有人都能够使用高速 Internet,连接也是用户体验中就重要的一环。所以网站加载速度是大家关注的重点,百度推出的闪电算法更是要求移动端的网页必须在2秒内完全加载,这也成了整个行业的标准。同时网站的加载速度也将直接影响搜索引擎中的排名。
  为什么网站打开速度很慢原因?无论是站长还企业,时不时都会遇到打开自己的网站很慢,浏览速度也特别慢。这速度你能忍受嘛?那提高网站的速度,浏览速度,打开的速度,有没办法呢?
  网站打开速度的快与慢,直接关系到访客的用户体验度。网站被加载的速度与多个要素相关,如服务器优于劣,网络带宽大与小,页面代码繁与简等。如果受限于资金,那么通过优化网页代码来加速网站打开速度,就是很有效的方法。这里为大家持续更新我的经验,帮你解决网页速度很慢,慢在哪里,该怎么优化的问题。
【SEO技术】优化网站页面打开速度十二绝招

  一、评估您的网站

  首先,你应该客观地测试你的网站的速度。要做到这一点,你可以使用ping.chinaz.com或www.webkaka.com,它们可以检测到全国地区打开这个网站的速度,可以更客观的知道你的网站打开速度。并且有一个评级标注,来衡量您的网站是否太慢,您也可以使用它们来持续监控其性能。请记住,您的目标应该是在两秒内加载您的网页。比这更快更好。有一个好的基础确保你有一个很好的托管服务提供商。最有可能你最好的选择是选择一个虚拟专用服务器(VPS)。共享主机会让你的速度变慢,而专用的服务器可能比你需要的功率还要多,而且太贵了。您还应该考虑为WP网站创建的托管WordPress托管。托管托管,您将不必负责您的网站的技术方面。

  二、稳定的网站空间

  没这个前提,无论你网站做的多好,内容在怎么优质,服务器多强,用户打不开,没有用户体验,那都白瞎,还有可能经常出现打不开的现象,所以,想要网站打开的快并且稳定,我们就得把这个地基打好,下面楼需要建多少层才好说话。通常我们常用的有电信,网通,或双线路,三线路。无论你选了那种,都要好要快就行了。

  三、减少数据库调用

  访问网站时,如何数据库调用过多,访问速度就会变慢,动态的网站,访问时就必须去读取数据库的资料,然后在显示到页面上,走了个弯路,并还有数据库访问的速度和数据库数据多少,数据库的大小所决定。你想不慢都难,静态页面就不同了,它不需要访问数据库,因为它在生成出来时就已通过读取数据库的资料,资料生成出一个页面来了,走的是直路,想不快都难;
  四、加速移动页面(AMP)
  人们越来越多地使用手机进行在线活动,这是一个老消息。您的网站不仅需要快速加载,还需要在智能手机上快速加载。由于手机的广泛使用,Google发布了加速移动页面(AMP),这是“创建网页并有效改变移动网页的全新方式” 。AMP是一个开源软件,旨在提高加载速度移动设备。即使在AMP之前,Google也采取措施来支持适合移动设备的网站。因此,您的网站的移动友好性越好,其排名就越好。您可以了解更多有关AMP这里。

  五、CSS或者JS代码要合并

  无论什么类型的网站,用户点击网站的时候,都会加载网站的Javascript和css代码,假设这些代码冗多,势必会降低网站打开速度。
  如果有这样的问题,就要对代码进行压缩或精简。压缩方面,有大量的第三方工具如站长之家的CSS\JS压缩工具可供大家直接免费试用,经过压缩的代码,普遍能减小40%到65%。精简方面,能用一个样式控制就不用两个,思路是既能满足网站的页面布局,又是****的代码量,多个CSS文件或者多个JS文件,最好能合并为一个文件,减少HTTP请求数量,节约加载速度。
【SEO技术】优化网站页面打开速度十二绝招

  六、减少HTTP请求数

  用户在打开一个网页的时候,后台程序响应用户所需的时间并不多,用户等待的时间主要花费在下载网页元素上了,即HTML、CSS、JavaScript、Flash、图片等,统计显示,每增加一个元素,网页载入的时间就增加25-40毫秒(取决于用户的带宽情况)。所以,想要提高网页打开速度,就要减少HTTP请求数,方法有3种:
  1)、减少不必要的HTTP请求
  例如用CSS圆角代替圆角图片,减少图片的使用。
  2)、合并文件
  对于文本文件,可以直接合并内容。例如将多个JS(JavaScript的简称)文件合并成一个,将多个CSS文件合并成一个。
  3)、优化缓存
  对于没有变化的网页元素(如页头、页尾等),用户再次访问的时候没有必要重新下载,直接从浏览器缓存里读取就可以了。

  七、使用免费cdn加载第三方资源

  所有网站都会用到第三方资源,对于第三方资源,如果选择让自己的服务器提供,那么对于小型站点,本就不大的带宽相当一部分还要被公共资源占用,无形之中压缩了服务器带宽,如果把这部分资源让第三方 cdn 提供,那么对于网站加载速度会有不小的提升。
  博主选用的是 bootstrap 中文站提供的?cdn 静态库?,博主看过不少国内 cdn 静态库,可以说 bootstrap 家的还是很良心的,更新及时,资源现在也很丰富,基本博主用的三方资源都能在上面找到,于是接下来就是搜索静态资源 + 替换静态资源:
  <script src="/s/js/jquery.min.js"></script>
  改为
  <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
  这里不要写协议头,让网页自动判断使用 http 还是 https

  八、延迟显示可见区域外的内容

  为了确保用户可以更快地看见可见区域的网页可以延迟加载或展现可见区域外的内容,为了避免页面变形,可以使用占位符标签制定正确的高度和宽度。比如WP的jQueryImage LazyLoad插件就可以在用户停留在第一屏的时候,不加载任何第一屏以下的图片信息,只有当用户把鼠标往下滚动的时候,这些图片才开始加载。这样很明显提升可见区域的加载速度,提高用户体验。

  九、 服务器端的缓存设置

  假设用户访问了你的网站,那么用户下一次再次访问你的站点,速度就会更快。这是什么原因呢?原因在于浏览器缓存。
  大多数服务器,或空间已经默认设置了缓存功能,站长或者seoer要做的就是在后台设定相应文件类型以及过期时间。在此,建议为:如果是windows主机,就将图片,css和Javascript文件的缓存时间设置为30天;如果是Apache Web服务器,则使用mod_cache模块开启缓存功能。

  十、优化css中的引用图片

  假设一个页面需要大量的周边图片,如下图标等,如果这些图片都是单独调用,那么请求数就会加大,这就说明:cssimages过多,请求数就会增大,网站打开速度就会变慢。
  如果我们将页面所需要使用的图片合并在一张图上,那么这些图片请求数就会变为1,页面速度相对就会加快。如何将需要的图片放在一张图上并在相应的位置调用呢?方法在于坐标定位。即:通过css坐标取得图片路径,标签中引用相应坐标。
  如果你对前端了解,那么这些都不是大问题,如果你不懂css,那么CSS图片合并生成器类工具(百度即可)能直接提供相应内容:合并css图片,同时生成相应代码。
【SEO技术】优化网站页面打开速度十二绝招

  十一、图片压缩处理

  有数据显示,图片加载时间是造成网站速度的因素,将图片加载速度问题解决,页面速度问题就解决了一大半。假设网站有大量jpg等格式的图片,需要在不影响视觉的前提下,尽量对其压缩,以减少图片本身的大小。与压缩Javascript文件类似,有大量的在线工具提供相应压缩服务,有大量的图像编辑软件如美图秀秀等,都有压缩功能。

  十二、字体图标

  在可以大量使用字体图标的地方我们可以尽可能使用字体图标,字体图标可以减少很多图片的使用,从而减少http请求,字体图标还可以通过CSS来设置颜色、大小等样式,何乐而不为。

  十三、跳转代码位置,跳转代码加载顺序。

  网站被点击后,页面代码是从上到下加载的。因为这个原因,我们就能对<head>部分的脚本代码做相应的调整。
  比较简单,我们通过查看<head>与</head>之间的代码,主要是Javascript脚本代码,把不重要的,非必须的调整到页面底部。只要页面能正常显示,那么其余的统计代码等都可以后一步加载。

  十四、分析站点代码

  在许多场景中,自我反省是一个不错的建议。幸运的是,在开发过程中,我们可以使用工具来帮助反省,并尽可能客观地进行实践。像 JSLint(参见 参考资源)这样的工具的价值是无法衡量的,尽管其站点宣称它 “可能令您备受挫折”,因为它向您提供了所有的潜在代码缺陷,这些缺陷不但使调试更加困难,而且可能导致更长的响应时间。

  十五、 服务器端开启gzip压缩功能

  网页中的每个元素越小,下载所需的时间就越少,这个很好理解。gzip压缩是效率较高的一种数据压缩格式。如果开启gzip压缩,压缩率一般能达到75%左右,效果非常明显。大部分服务器如虚拟主机,VPS等都已经默认开启了这一项功能,如果没有开启,你对相应设置又不会,建议直接联系空间商,让他们解决。
  网站打开速度的快与慢关系到用户体验的问题,关系到网站对搜索引擎传递的友好度问题,利用可实现的手段加快网站加载速度,显得不可或缺。在提升网页打开速度经常被忽视的一个问题是响应。对于用户来说,每次的操作,不管返回结果是慢,还是快,都要及时予以响应,最典型的例子就是:当用户点击打开一张图片时,是否有百分比数字显示的进度条,就是一个典型的响应设计。

版权声明:本站原创文章,由猎优云小编整理,转载请注明原处,(信息来自互联网,不代表本站观点);本文网址: /seojs/7.html

您可能还会对下面的文章感兴趣:

      <kbd id='IQ2QSp5tQ'></kbd><address id='IQ2QSp5tQ'><style id='IQ2QSp5tQ'></style></address><button id='IQ2QSp5tQ'></button>

              <kbd id='IQ2QSp5tQ'></kbd><address id='IQ2QSp5tQ'><style id='IQ2QSp5tQ'></style></address><button id='IQ2QSp5tQ'></button>