当前位置:首页 > 技术资料

网站SEO优化中的Web性能优化

网站SEO优化需要对Web性能优化:


1、避免坏请求
有时候页面中的html或css会向服务器请求一个不存在的资源,比如图片或者html文件,这会造成浏览器与服务器之间过多的往返请求。
类似于:
浏览器:“我需要这个图像”
服务器:“我没有这个图像”
浏览器:“你确定吗?这个文档说你有”
服务器:“真的没有”
这个降低页面加载速度。因此检查坏连接很有必要。可通过Google的PageSpeed工具,找到问题后,补充相当资源文件或者修改资源链接地址即可。

2、避免[email protected]
使用@import方法引用css文件可能会带来一些影响页面加载速度的问题。比如导致文件按顺序加载(一个加载完成后才会加载另一个),无法并行加载;
检查工具:css delivery
查到@import url(“style.css”)
就替换为:

3、避免使用document.write
在js中,可以使用document.write。在网页上显示内容或者调用外部资源,而通过此方法,浏览器采取一些多余的步骤(下载资源,读取资源)。运行js来了解需要做什么,调用其他资源时,需要重新在执行一次这个过程。由于浏览器之前不知道要显示什么,所以会降低页面加载的速度。
要知道,任何能够被document.write调用的资源,都可以通过html调用。这样速度会更快
document.write('');
改为


4、合并多个外部css文件
网站中每使用一个css文件,都会让你的页面加载速度慢一点。可以css delivery工具,来检测页面代码中css文件。然后通过复制粘贴合并成一个。

5、合并多个外部js文件
可以用resource check来检测页面中所引用的js文件数,然后可以通过复制粘贴的方法将多个文件合并成一个。

6、通过css sprites来整合图像
若页面中有6个小图像,那么浏览器在显示时会分别下载,你可以通过css sprites将这些图像合并成为一个,可以减少页面加载所需要的时间。
Css sprites两个步骤:整合图像,定位图像

7、延迟js加载
浏览器在执行js代码时,会停止处理页面。当页面中很多js文件或者代码要加载时,将导致严重的延迟。尽管可以使用defer,异步或将js代码放自爱页面底部来延迟js的加载。但这些都不是一个好的解决方案。
好方法


8、启用压缩/Gzip
使用gzip对html和css文件进行压缩,通常可以大约节省50%到70%,这样加载页面只需要更少的带宽和更少的时间。

9、如果你的css和js较小,可以将css和js内嵌到html页面中,这样可以减少页面加载所需要的文件数,从而加快页面的加载。

10、用minify css压缩css代码

11、尽量减少dns查询次数
当浏览器和服务器建立链接时,它需要进行dns解析,将域名解析为ip地址,然而,一旦客户端需要执行dns lookup时,等待时间将会取决于域名服务器的有效响应速度。
虽然所有的isp的dns服务器都能缓存域名和ip地址映射表。但如果缓存的dns记录过期了而需要更新,则可能需要遍历多个dns节点,有时候需要通过全球范围内来找到可信任的域名服务器,一旦域名服务器工作繁忙,请求解析时,就需要排队则进一步延时等待时间。
所有减少dns查询次数很重要,页面加载就尽量避免额外耗时,为了减少dns查询次数,最好的解决方法就是在页面中减少不同的域名请求的机会、
可通过request checker工具来检测页面中存在多少请求后,进行优化。

12、尽量减少重定向
有时候为了特定需求,需要在网页中使用重定向。重定向的意思是,用户的原始请求(如请求A)被重定向到其他的请求(如请求B);
网页中使用重定向会造成网站性能和速度下降,因为浏览器访问网址是一连串的过程,如果访问到一半,而跳转到新的地址,就会重复发起一连串的过程,这将浪费很多时间。所有我们尽量避免重定向。Google建议
A、       不要链接到一个包含重定向的页面
B、       不要请求包含重定向的资源

13、优化样式表和脚步顺序
Style标签和样式表调用代码应该放置在js代码的前面,这样可以使页面的加载速度加快。

14、避免js阻塞渲染
浏览器在遇到一个引入外部js文件的标签时,会停下所有工作下载并解析执行它。在这个过程中,页面渲染和用户交互完全被阻塞了。这是页面加载就会停止。
谷歌建议删除干扰页面第一屏内容加载 的js,第一屏指的是用户在屏幕中最初看到的页面,无论桌面浏览器,还是手机

15、指定图像尺寸
当浏览器加载页面的html时,有时候需要在图片下载完成前,对页面布局进行定位。如果hmtl里的图片没有指定尺寸,或者代码描述的尺寸和实际的图片尺寸不符合时,浏览器需要在图片下载完成后在回溯到该图片,并重新显示,这将消耗额外的时间。
最好的页面中每一张图片都指定尺寸,不管在html里的img中,还是在css中。