seo搜索优化 前端(网站SEO优化教程)

   360SEO    

在现代网络发达的大环境下,各类网站大中型网站横行,网站性能体现的尤为重要,特别是能给访问用户一个不同感受的体验,同样的网络环境,有的网站“嗖”地一下出来,而有的网站等半天才小露头脚,如此一来,给用户产生反感,网站打开速度慢,那访问用户几乎不愿意多等,转头离开了,这样就大大减少了网页访问量,严重影响了用户体验,也不利于SEO优化。

对于前端开发人员而言,对于处理网页加载性能也是需要做诸多事情的,那么就介绍一些如何优化性能,且让页面提高加载的速度。

1、尽可能减少HTTP请求

减少HTTP请求,其中主要一点就是要合并一些内容,诸如css,图片,js,合并成一个文件当然最好,这样可以只进行一次访问请求即可,同时利用浏览器强大的缓存能力,可以达到减少HTTP请求。

比如在实际做法中,使用css精灵图片,字体图标,图片地图等。

具体方案为:

1、浏览器缓存:

对一个网站,一些静态资源文件诸如CSS、javascript、logo、图标更新的频率都比较低,而这些文件又几乎是每次http请求还都得需要,那么,如果我们将这些文件缓存在浏览器中,可以极好的改善性能。通过设置http头中的cache-control和expires的属性,可设定浏览器缓存。

2、使用压缩机制

通常我们在服务端将这些文件进行压缩处理,之后回到浏览器端进行解压缩,可有效减少通信传输的数据量。但既然使用文件压缩,或多或少会对浏览器和服务端产生一定的压力,所以实际中应酌情使用。

同时遵循以下原则:

(1) 减少DNS请求所耗费的时间:

且不说对错,因为从基本来说,减少http请求数的确可以减少DNS请求和解析耗费的时间;

(2) 减少服务器压力:

这个通常是被考虑最多的,也是我用来讲解给别人听的最大理由,因为每个http请求都会耗费服务器资源,特别是一些需要计算合并等操作的服务器,耗费服务器的cpu资源可不是开玩笑的事情,硬盘可以用钱买来,cpu资源可就没那么廉价了;

(3) 减少http请求头:

当我们对服务器发起一个请求的时候,我们会携带着这个域名下的cookie和一些其他的信息在http头部里,然后服务器响应请求的时候也会带回一些cookie之类的头部信息.这些信息有的时候会很大,在这种请求和响应的时候会影响带宽性能。

2、使用图片懒加载策略

我们浏览网页,图片往往是最引人注目的,而往往图片很占网络资源的,使用懒加载策略,可以是页面加载时只加载首屏页面用到的图片即可,其他的图片资源可以稍后再加载,这也是增加用户体验的方式。

3、css放头部,js放底部,或使用js/css外链

根据浏览器加载渲染网页的机制,浏览器会在下载完成全部CSS之后才对整个页面进行渲染,因此最好的做法是将CSS放在页面最上面,让浏览器尽快下载CSS。如果将 CSS放在其他地方比如 BODY中,则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了,这就导致页面由无 CSS状态跳转到 CSS状态,用户体验比较糟糕,所以可以考虑将CSS放在HEAD中。

对于javascript而言,如果浏览器立即加载javascript脚本,可能会阻塞页面执行,表现缓慢,所以此时尽量放在页面底部(除了必要的立即执行等的情况)。

有时候,我们合理地使用js/css外链加载,使用缓存,是HTML文件大大减小,也一定程度上提高加载的速度,当然这也是据实际情况来看,比如说根据实际用户访问的情况(经常性频繁的浏览某一网页等)。

3、传输方面,控制cookie

cookie应尽可能地控制大小,写入cookie的数据应合理控制,减少传输数据量及次数,也是一个优化方案。

4、减少DOM操作

网页中对DOM操作往往是代价很大的,修改和访问DOM元素会造成页面的Repaint和Reflow,循环对DOM操作更是罪恶的行为。所以请合理的使用JavaScript变量储存内容,考虑大量DOM元素中循环的性能开销,在循环结束时一次性写入。减少对DOM元素的查询和修改,查询时可将其赋值给局部变量。

5、使用CDN加速

CDN的全称是Content Delivery Network,即内容分发网络。是一个经策略性部署的整体系统,从技术上全面解决由于网络带宽小、用户访问量大、网点分布不均而产生的用户访问网站响应速度慢的根本原因。其目的是通过在现有的Internet中增加一层新的网络架构,将网站的内容发布到最接近用户的网络“边缘”,使用户可以就近取得所需的内容,提高用户访问网站的响应速度。

6、减少DNS查找

DNS用于映射主机名和IP地址,如同电话本映射人名与电话号码一样,DNS解析有代价,一般一次解析需要20~120毫秒。浏览器在DNS查询完成前不会下载任何东西。

为达到更高的性能,DNS解析通常被多级别地缓存。如由ISP或本地网络维护的DNS缓存服务器,用户机器操作系统的缓存。DNS信息会保存在操作系统的DNS缓存中(如windows上的 DNS Client Service)。大多数浏览器有自己的缓存,与操作系统的缓存有所不同。只要浏览器在自己的缓存上面保留DNS记录,它不会向操作系统请求DNS记录。

IE的缺省 DNS缓存时间为 30分钟,由注册表中的DnsCacheTimeout值指定。Firefox的缺省缓冲时间是1分钟,由network.dnsCacheExpiration配置设定。(Fasterfox将此值改为1小时)。

当客户端的DNS缓存为空时(浏览器与操作系统),DNS查询的次数等同于网页中各域名的个数。包括该网页URL、图片、脚本文件、样式表、FLASH对象等使用的域名。减少域名数量可以减少DNS查询次数。

减少域名主机可减少DNS查询的次数,但可能造成并行下载数的减少。避免 DNS查询可减少响应时间,而减少并行下载数可能增加响应时间。一个可行的折中是把内容分布到至少2个,最多4个不同的主机名上。

...

关于网页加载性能的优化还有很多解决方案,但实际开发中也是根据具体情况来合理分配使用,最大限度地提高网页性能,提升网页加载速度,增强用户体验性,从而加大用户访问量。

 标签:

评论留言

我要留言

欢迎参与讨论,请在这里发表您的看法、交流您的观点。