1. 首页
  2. SEO优化
  3. 正文

SEO优化怎么提高网站的加载速度?

  在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个加载了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页。也许这样讲,各位还不会有太多感触,接下来我列举一组数据:Google网站访问速度每慢400ms就导致用户搜索请求下降0.59%;Amazon每增加100ms网站延迟将导致收入下降1%;雅虎如果有400ms延迟会导致流量下降5-9%。网站的加载速度严重影响了用户体验,也决定了这个网站的生死存亡。

  可能有人会说:网站的性能是后端工程师的事情,与前端并无多大关系。事实上,只有10%~20%的最终用户响应时间是用在从Web服务器获取HTML文档并传送到浏览器的,那剩余的时间去哪儿了?其余的80%~90%时间花在了下载页面中的所有组件上。接下来带您了解如何来提高页面的加载速度。


  一、减少HTTP请求

  上面说到80%~90%时间花在了下载页面中的所有组件进行的HTTP请求上。因此,改善响应时间最简单的途径就是减少HTTP请求的数量。

  二、使用CDN

  如果应用程序web服务器离用户更近,那么一个HTTP请求的响应时间将缩短。另一方面,如果组件web服务器离用户更近,则多个HTTP请求的响应时间将缩短。CDN(内容发布网络)是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容。在优化性能时,向特定用户发布内容的服务器的选择基于对网络拥堵的测量。例如,CDN可能选择网络阶跃数最小的服务器,或者具有最短响应时间的服务器。

  三、添加Expires头

  页面的初次访问者会进行很多HTTP请求,但是通过使用一个长久的Expires头,可以使这些组件被缓存,下次访问的时候,就可以减少不必要的HTPP请求,从而提高加载速度。

  四、压缩组件

  从HTTP1.1开始,Web客户端可以通过HTTP请求中的Accept-Encoding头来表示对压缩的支持,如果Web服务器看到请求中有这个头,就会使用客户端列出来的方法中的一种来进行压缩。Web服务器通过响应中的Content-Encoding来通知Web客户端。

  五、将样式表放在头部

  首先说明一下,将样式表放在头部对于实际页面加载的时间并不能造成太大影响,但是这会减少页面首屏出现的时间,使页面内容逐步呈现,改善用户体验,防止“白屏”。我们总是希望页面能够尽快显示内容,为用户提供可视化的回馈,这对网速慢的用户来说是很重要的。将样式表放在文档底部会阻止浏览器中的内容逐步出现。为了避免当样式变化时重绘页面元素,浏览器会阻塞内容逐步呈现,造成“白屏”。

  六、将脚本放在底部

  跟样式表相同,脚本放在底部对于实际页面加载的时间并不能造成太大影响,但是这会减少页面首屏出现的时间,使页面内容逐步呈现。js的下载和执行会阻塞Dom树的构建(严谨地说是中断了Dom树的更新),所以script标签放在首屏范围内的HTML代码段里会截断首屏的内容。下载脚本时并行下载是被禁用的——即使使用了不同的主机名,也不会启用其他的下载。因为脚本可能修改页面内容,因此浏览器会等待;另外,也是为了保证脚本能够按照正确的顺序执行,因为后面的脚本可能与前面的脚本存在依赖关系,不按照顺序执行可能会产生错误。

  七、避免CSS表达式

  CSS表达式是动态设置CSS属性的一种强大并且危险的方式,它只支持IE5以及之后版本、IE8之前版本。

  八、使用外部的JavaScript和CSS

  内联脚本或者样式可以减少HTTP请求,按理来说可以提高页面加载的速度。然而在实际情况中,当脚本或者样式是从外部引入的文件,浏览器就有可能缓存它们,从而在以后加载的时候能够直接使用缓存,而HTML文档的大小减小,从而提高加载速度。

  九、减少DNS查找

  当我们在浏览器的地址栏输入网址 ,然后回车,回车这一瞬间到看到页面到底发生了什么呢?域名解析 –> 发起TCP的3次握手 –> 建立TCP连接后发起http请求 –> 服务器响应http请求,浏览器得到html代码 –> 浏览器解析html代码,并请求html代码中的资源(如js、css、图片等) –> 浏览器对页面进行渲染呈现给用户。

  十、精简JavaScript

  精简:精简就是从代码中移除不必要的字符以减少文件大小,降低加载的时间。代码精简的时候会移除不必要的空白字符(空格,换行、制表符),这样整个文件的大小就变小了。

  混淆:混淆是应用在源代码上的另外一种方式,它会移除注释和空白符,同时它还会改写代码。在混淆的时候,函数和变量名将会被转换成更短的字符串,这时代码会更加精炼同时难以阅读。通常这样做是为了增加对代码进行反向工程的难度,这也同时提高了性能。

    延伸阅读

  • seo优化报价

    官网SEO优化服务的报价方式繁多,各家SEO营销公司的价格方案也差异甚大,2024年业务营销规划让你感到困惑吗?本文将为你解析主要的原因,并提供建议,帮助你找到最适合企业的SE...

  • 如何通过SEO优化短视频网页入口来提升引流效果?

    在数字营销的海洋中,SEO和短视频已成为引流至关重要的两大工具。但如何将这两者结合,通过短视频网页入口有效引流,提升您的在线影响力呢?本文将深入探讨这一策略,帮助您利用SEO优...

  • 宁波SEO优化|如何提升您的网站在宁波的在线可见性?

    在这个数字化不断进步的时代,每个企业都希望自己的网站能够在搜索引擎中脱颖而出。那么,如何通过宁波SEO优化策略,提升您的网站在宁波地区的在线可见性呢?本文将详细介绍如何实施有效...

  • 网站SEO优化全攻略(掌握网站SEO优化技巧)

    网站SEO优化已经成为网站推广不可或缺的一部分,随着互联网的迅速发展。需要我们掌握一定的技巧和方案,但是SEO优化并不是简单的事情。方案,在这篇文章中,链接优化技巧、长尾词优化...

  • SEO优化技巧(让你轻松提升网站排名)

    随着互联网的快速发展,越来越多的企业意识到了网站的重要性。然而,仅仅拥有一个漂亮的网站并不能带来流量和转化,这时候SEO优化就显得尤为重要。好的SEO优化可以让你的网站在搜索引...

本文来自投稿,不代表本人立场,如若转载,请注明出处:http://www.lnbdc.com/article/1514.html

(function(){ var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6":"https://jspassport.ssl.qhimg.com/11.0.1.js?1d7dde81dc0903e04d3ac0b9599444f6"; document.write('<\/mip-script>'); })(); (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })();