Welcome to武汉万伦网络科技有限公司!

16608661800

联系我们

PRPULAR PUSH

ATTEN:
王经理
phone:
16608661800
QQ:
935095314
ADD:
湖北省武汉市武昌区武汉中央文化区K6-3栋1004室

开封网站体验优化

author:武汉万伦网络科技有限公司

【Font size: big medium smail

time:2020-01-10 11:02:01

本文由武汉万伦网络科技有限公司提供,重点介绍了网站体验优化相关内容。武汉万伦网络科技有限公司专业提供湖南优化网站,银川网站优化,泰州网站优化等多项产品服务。公司开拓创新,保持质量,塑造形象,为更多的合作伙伴提供最优质的产品服务

网站体验优化网站的优化不仅关系到搜索引擎的收录速度与排名,严重影响SEO,还非常影响用户的体验,本文的内容主要考虑网站的全方位优化,参考雅虎给出的35条优化建议,结合当前互联网和云端的架构,对网站的优化进行了分析和探讨。文章内容比较长,可以到原文章的地址:网站 Web 性能和速度优化指南大全 - Break易站,打开右下角的文章目录,方便浏览与查看。

网站的速度是用户体验的第一指标,好的网站速度对于用户打开网站的体验是非常重要的,特别是在网站这样的项目中,如果一个用户需要超过5s才能看见页面,他会毫不犹豫地关闭它。之前有几篇文章提到了wordpress网站的优化,这里,对网站所有的优化技巧进行了全方位的总结,使得wordpress网站在速度和各个性能上能得到更大的提升,为了更好地分析网站的性能,总共从八个方面来着手,网页内容,服务器,Cookies, CSS, JS, 图片,移动端和WordPress相关。总共优化方法汇总如下:

网页内容:网站尽量减少http的请求次数网站尽量减少DNS的查询次数网站尽量避免页面跳转、重定向网站尽量缓存AJax网站尽量减少DOM元素的数量网站尽量根据域名划分页面的内容网站尽量减少iframe的使用网站尽量避免404错误网站的延迟加载网站的提前加载

服务器网站使用CDN加速优化网站添加Expires或者Cache-Control报文头优化网站采用Gzip压缩优化网站配置Etags优化网站尽早flush刷新输出缓冲网站使用GET来完成AJAX请求网站避免空的图像来源,配置图片src属性

Cookies网站减少Cookies的大小网站内容页面选择无Cookies域名

CSS网站把样式表置于顶部网站避免使用CSS表达式(Expression)网站用代替@import网站避免使用滤镜filter

JS网站把JS脚本置于页面底部网站使用外部JavaScript和CSS网站削减JavaScript和CSS网站剔除重复的JS脚本网站减少DOM访问网站开发智能事件处理程序

图片网站要优化图像网站优化CSS Spirite网站不要在HTML中缩放图像网站中的favicon.ico要小而且可缓存

移动端wordpress相关WordPress关闭日志修订记录WordPress删除数据库缓存WordPress禁用谷歌字体WordPress禁止wptexturize函数WordPress去除header中的非必须项WordPress移除JS和CSS中的版本号WordPress移除非必要的插件WordPress屏蔽评论的头像WordPress关闭更新的提示

前端性能的一个重要指标是页面加载时间,不仅事关用户体验,也是搜索引擎排名考虑的一个因素。

来自Google的数据表明,一个有10条数据0.4秒能加载完的页面,变成30条数据0.9秒加载完之后,流量和广告收入下降90%。Google Map 首页文件大小从100KB减小到70-80KB后,流量在第一周涨了10%,接下来的三周涨了25%。亚马逊的数据表明:加载时间增加100毫秒,销量就下降1%。以上数据更说明「加载时间就是金钱」,前端优化主要围绕提高加载速度进行。而如果是你的网站是Wordpress网站的话,安装WP Fastest Cache和WP-Optimize这两个插件会让你更加容易实现上面的功能。

一、 网页内容:网站的页面内容是服务器传给浏览器的内容,也是影响前端性能非常关键的元素,它主要是指传给浏览器的HTML的内容,那么这网页内容优化的关键因素,主要是怎么做的呢?

(1)网站尽量减少http的请求次数网站Web 前端 80% 的响应时间都花在图片、样式、脚本等资源下载上。在打开一个网站的时候,你可以打开谷歌开发者工具,去用谷歌开发者工具评估网站资源加载的http数量和性能。最直接的方式是减少页面所需资源,但并不现实。所以,减少HTTP请求数主要的途径是:

合并外部资源文件(如javascript,css,图片文件)图片的合并,是将多个图片合并为一个图片,然后采用css的一些设置(background-image,background-position) 来使用它们。这个很简单实用(但是效果也是显著的)。主要是使用CSS Sprite将背景图片合并成一个文件,通过background-image 和 background-position 控制显示。javascript和css文件的合并,这个可能大家不太经常注意到。要是使用Wordpress的话,可以使用WP Fastest Cache插件来合并。

使用Inline images 这种方式. 这个方式可能依赖于浏览器的实现,目前并不是所有的浏览器都支持。可以使用Data URI scheme将图片嵌入HTML或者CSS中;或者将CSS、JS、图片直接嵌入HTML中,会增加文件大小,也可能产生浏览器兼容及其他性能问题。对于合并JS和CSS的文件,有下面这些缺点:

破坏了原有文件的结构不同页面需要的文件组合可能是不一样的,这种情况下会需要产生多个不同的文件,而且需要比较小心地维护它们如果文件的内容发生变化,就需要重新再来一次所以,如果网站的结构稳定的话,不要经常修改JS和CSS文件是最好的选择。在用wordpress插件WP Fastest Cache的时候,如果修改了JS和CSS,要用插件把合并的JS和CSS缓存删除,重新生成即可。

(2)网站尽量减少DNS的查询次数DNS的查询是指:用户输入URL以后,浏览器首先要查询域名(hostname)对应服务器的IP地址,一般需要耗费20-120毫秒时间。DNS查询完成之前,浏览器无法从服务器下载任何数据。

操作系统(例如Windows)也会对DNS查询的结果做缓存,只是由于浏览器使用太过频繁,目前的主流浏览器都使用自己独有的缓存,而不使用操作系统的缓存。

IE 中默认情况下对DNS的缓存时间为 30分钟。关于如何配置,可以通过阅读这篇文章了解更多信息。早期的版本设置为1天,与Windows的设置一致。Windows的DNS缓存,可以通过ipconfig /displaydns 这个命令来查看。Firefox默认的DNS缓存时间据说为1分钟,如果不满意这个选项,直接修改 network.dnsCacheExpiration 即可。Google Chrome默认的DNS缓存时间,据我观察也是1分钟,可以通过chrome://net-internals/#dns 这个地址查看。我们可以看到即便同样为浏览器,它们在缓存DNS的问题上也不尽相同(主要体现在时间上面),这个差异到底有什么考虑呢?

缓存时间较长,有利于重复利用DNS缓存,提高速度。缓存时间较短,有利于及时地检测到目标站点的IP地址更新,以进行正确的访问。所以,两者都有其优点和考虑。

而对于网站使用CDN的好处,在这里也是可以体现出来的,使用了CDN的网站,在解析域名的时候,会分配到比较近的IP地址进行DNS的解析,从而提高了网站的速度和加载。

(3)网站尽量避免页面跳转、重定向HTTP重定向通过301/302状态码实现。下面是一个有301状态码的HTTP头

HTTP/1.1 301 Moved Permanently Location: : text/html

目前,我们一直只要区分301和302即可。它们本质上的区别到底是什么呢?其实也不难:301表示永久重定向,302表示临时重定向。对于一般的用户而言,可能你还无法体会出来他们的区别,因为横竖都是要重定向的。但对于搜索引擎而言意义就非凡。我们都知道,搜索引擎是需要不定期对网站资源进行爬网,以便完善对应的索引结构的。当某个资源被永久重定向(301),搜索引擎会聪明地知道,在索引中应该记录就是永久重定向之后的新地址,而不是老地址,这样就可以避免用户通过搜索引擎来查询的时候,每次还需要先到老地址,再重定向到新地址。而对于临时重定向(302),则不会这么做。

但是,很多时候都无法避免重定向,比如,网站在浏览器中输入之后,还是会301重定向到这个网站,而且就算输入了也会重定向到。既然有时候没办法避免,但是我们还是在在网站的内链,或者外链尽量避免重定向,如下做法:

最浪费的重定向经常发生、而且很容易被忽略:URL 末尾应该添加/但未添加。比如,访问将被301重定向到 /(注意末尾的 /)。如果使用 Apache,可以通过Alias或mod_rewrite或DirectorySlash解决这个问题。网站域名变更:CNAME结合Alias或mod_rewrite或者其他服务器类似功能实现跳转。网站是https的,就尽量用https,而不是http。(4)网站尽量缓存AJaxAjax 经常被提及的一个好处就是由于其从后台服务器传输信息 的异步性而为用户带来的反馈的即时性。主要利用在网站服务器配置Cache-control的报文头来实现的。其典型的应用场景包括:

异步加载,使得页面的内容可以分批加载。局部更新,使得页面的局部更新不会导致页面的刷新。由于AJAX其实也是需要发起请求,然后服务器执行,并将结果(通常是JSON格式的)发送给浏览器进行最后的呈现或者处理,所以对于网站设计优化的角度而言,我们同样需要考虑对这些请求,是否可以尽可能地利用到缓存的功能来提高性能。

那么,什么样的请求才能做缓存呢?

POST的请求,是不可以在客户端缓存的,每次请求都需要发送给服务器进行处理,每次都会返回状态码200。(这里可以优化的是,服务器端对数据进行缓存,以便提高处理速度)GET的请求,是可以(而且默认)在客户端进行缓存的,除非指定了不同的地址,否则同一个地址的AJAX请求,不会重复在服务器执行,而是返回304。在web的优化中,很多优化都可以用AJAX来优化,比如:一个 Web2.0的 Email客户端会使用 Ajax来自动完成对用户地址薄的下载。如果用户在上次使用过 Email web应用程序后没有对地址薄作任何的修改,而且 Ajax响应通过 Expire或者 Cacke-Control头来实现缓存,那么就可以直接从上一次的缓存中读取地址薄 了。必须告知浏览器是使用缓存中的地址薄还是发送一个新的请求。这可以通过为读取地址薄的 Ajax URL增加一个含有上次编辑时间的时间戳来实现,例如, &t=11900241612等。如果地址薄在上次下载后没有被编辑过,时间 戳就不变,则从浏览器的缓存中加载从而减少了一次 HTTP请求过程。如果用户修改过地址薄,时间戳就会用来确定新的 URL和缓存响应并不匹配,浏览器就会重要请求更新地址薄。

在网站的优化中,很多都是需要实时性的,那么,这部分内容就不能用AJAX来优化。HTML 5中提供了一个新的特性:local storage,可以很好地解决这个不必要的AJAX的调用。可以移步: HTML 5中提供了一个新的特性:local storage查看。

(5)网站尽量减少DOM元素的数量DOM的全称为:Document Object Model ,中文翻译过来叫文档对象模型。我们这里所探讨的DOM,其实有一个隐含的意思是指HTML DOM。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM 以树结构表达 HTML 文档。现在可以随便一个网站,比如: git/32.html,然后打开谷歌浏览器Chrome Console控制台,然后输入下面的命令:

document.getElementsByTagName('*').length;

我们就可以看到,浏览git/32.html这个页面的时候,DOM的数量是500多个,如下图:

我们可以从下面两个方面来减少DOM的数量:

避免不正确地使用服务器控件。减少不必要的内容(并不是所有内容都必须放在页面上面的)如果数据量大,可以考虑分页,或者按需加载

(6)网站尽量根据域名划分页面的内容这里先要知道,浏览器一般会限制每个域的并行线程(一般为6个,甚至更少),使用不同的域名可以最大化下载线程,但注意保持在2-4个域名内,以避免DNS查询损耗。在这里,不同域名的实现可以用子域名来实现。比如:和就不是同一个域名,他们可以解析到不同的IP地址,甚至于实现两个网站的浏览。

比如,动态内容放在www.breakyizhan.com上,静态资源放在static.breakyizhan.com上。这样还可以禁用静态资源域下的Cookie,减少数据传输,详见Cookie 优化。而且动静分离的话,还有利于CDN的缓存。

(7)网站尽量减少iframe的使用iframe以及与之相关的frameset,frame 都是早期HTML版本的产物。现在在网站里面,很少使用iframe,目前新浪微博提供的“微博秀”还是用iframe来实现的。,这样其实结构上好看,但是不利于网站性能的优化,更不利于网站SEO的优化。iframe在HTML的后续版本(例如HTML 5)中还是支持的,但frameset和frame 已经明确地要告别历史舞台了。