福州网站优化:怎么提高网站访问速度?

  • 1,709 views
  • 阅读模式

大家上网都不喜欢用太多的时间等待网页的打开,等待的越长,用户可能会直接关闭网页,这样对你网站客户的一种损失。其次,关键字的排名与网页的打开速度也有关系,这个主要体现搜索引擎对用户体验度上,用户体验度好,排名相对其它网站就好些。网页内容一旦很多,网站打开速度就会特别慢,如果说服务器、带宽、CDN这类硬指标我们没有经济实力去做,不妨通过网页代码优化的方式来提高速度,这个不需要太多的成本投入,只需要平时多注意一些小技巧就行了!福州seo给大家带来20种方法帮你提高网站访问速度缩短网页加载时间。

1、减少页面HTTP请求数量

浏览器会花费80%的时间获取外部元件,包括脚本、样式表、图像等,只有20%的时间用来加载内容,每个网站都会有许多HTTP请求,由于只有2个HTTP请求可以在同一时间传送,所以请求一旦过多就会造成延迟。比较直接的理解就是要减少调用其他页面、文件的数量。

⑴我们在使用css格式控制的时候,经常会采用background载入很多图形文件,每个background的图像至少产生1次HTTP请求,一般我们为了让页面生动活泼会大量使用background来加载背景图,要改善这个状况,可以采用css的1个有用的background-position属性来加载背景图,我们将需要频繁加载的多个图片合成为1个单独的图片,需要加载时,采用以下形式加载即可将这部分图片加载的HTTP请求缩减为1个。

⑵采用Image maps,这个方法也比较常用,只是限于同1个区域使用。

⑶Inline images,这个方法很少见到,但对于很小很简单的图像却是很实用的,相关语法标准参照:tools.ietf.org/html/rfc2397。

2、使用CDN(Content Delivery Network)网络加速

现在国内做CDN加速业务的公司很多,简单讲,就是将你的图片、视频扩散到CDN网络所能到达之处,让用户访问时能就近下载到这些文件,从而达到网络提速的目的,这样做,同时能减轻你自己网站的负载。

⑴本地Cache加速 提高了企业站点(尤其含有大量图片和静态页面站点)的访问速度,并大大提高以上性质站点的稳定性。

⑵镜像服务 消除了不同运营商之间互联的瓶颈造成的影响,实现了跨运营商的网络加速,保证不同网络中的用户都能得到良好的访问质量。

⑶远程加速 远程访问用户根据DNS负载均衡技术 智能自动选择Cache服务器,选择最快的Cache服务器,加快远程访问的速度。

⑷带宽优化 自动生成服务器的远程Mirror(镜像)cache服务器,远程用户访问时从cache服务器上读取数据,减少远程访问的带宽、分担网络流量、减轻原站点WEB服务器负载等功能。

3、添加文件过期或缓存头

对于同一用户频繁访问的图片、Js脚本文件等可以在Apache或Nginx设置其缓冲 时间,例如设置24小时过期时间,这样用户在访问过该页面之后再次访问时,同一组图片或JS不会再重复下载,从而减少了HTTP请求,用户访问速度明显有 所提升,同时服务器负载也会下降。

A、下面给出nginx配置中缓存控制的例子:

nginx配置中缓存控制

nginx配置中缓存控制

B、html头文件设置常用之<meta>设置缓存

<meta http-equiv="pragma" content="no-cache">,pragma与no-cache用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过下面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.)
<meta http-equiv="cache-control" content="no-cache">,常见的取值有private、no-cache、max-age、must-revalidate等,默认为private,其作用根据不同的重新浏览方式分为以下几种情况:

⑴打开新窗口 值为private、no-cache、must-revalidate,那么打开新窗口访问时都会重新访问服务器。 而如果指定了max-age值,那么在此值内的时间里就不会重新访问服务器,例如: Cache-control: max-age=5(表示当访问此网页后的5秒内再次访问不会去服务器) 

⑵在地址栏回车 值为private或must-revalidate则只有第一次访问时会访问服务器,以后就不再访问。 值为no-cache,那么每次都会访问。 值为max-age,则在过期之前不会重复访问。

⑶按后退按扭 值为private、must-revalidate、max-age,则不会重访问, 值为no-cache,则每次都重复访问 

⑷按刷新按扭 无论为何值,都会重复访问 Cache-control值为“no-cache”时,访问此页面不会在Internet临时文件夹留下页面备份。

<meta http-equiv="expires" content="0"> ,指定Expires值为一个早已过去的时间,那么访问此网时若重复在地址栏按回车,那么每次都会重复访问: Expires: Fri, 31 Dec 1999 16:00:00 GMT 比如:禁止页面在IE中缓存 http响应消息头部设置: CacheControl = no-cache Pragma=no-cache Expires = -1 Expires是个好东东,如果服务器上的网页经常变化,就把它设置为0,表示立即过期。  

4、服务器开启gzip压缩

网站开启Gzip压缩对SEO有什么影响?观察N个网站,都有开启压缩模式,不论是排名,还是流量,访问速度都是相当的OK,最让我满意的就是网站打开的 速度提升了一半,这才是我想要结果,从而提升了网站的用户体验,当然这些方面最让我看到效果的就是网站的某些关键词上升了。大家都知道,网站访问速度对 SEO是有影响的,而Gzip刚好有利于SEO优化。这个大家都比较了解,即将需要传输的内容压缩后传输到客户端再解压,这样在网络上传输的 数据量会大幅减小。通常在服务器上的Apache、Nginx可以直接开启这个设置,也可以从代码角度直接设置传输文件头,增加gzip的设置,也可以从 负载均衡设备直接设置。不过需要留意的是,这个设置会略微增加服务器的负担。

5、css格式定义放置在文件头部

这项设置对于用户端是慢速网络或网页内容比较庞大的情况比较有利,可以在网页逐步呈现的同时仍会保持格式信息,不影响网页美感。

6、Javascript脚本放在文件末尾

很多Javascript脚本执行效率低下,或者有的第3方域名脚本出现意外无法载入, 如果将这些脚本放置到页面比较靠前的位置,可能会导致我们自己网站的内容载入速度下降甚至无法正常加载,所以一般将这些脚本放置在网页文件末尾,一定要放 置在前面的脚本要改用所谓的“后载入”方式加载,在主体网页加载完成后再加载,防止其影响到主体网页的加载速度。

7、避免使用CSS脚本(CSS Expressions)

有时为了要css的参数动态改变,可能会采用css expression来实现,但这样做得不偿失,会使用户端浏览器负担明显加重,所以不建议这样做,如果需要改变,可以使用Javascript脚本去实现。

8、css、javascript改由外部调用

如果css、js内容比较庞大,尽量不要写到同1个页面中去,改由外部载入比较妥当,因为浏览器本身会对css、js文件进行缓存。

9、压缩Javascript、CSS代码

一般js、css文件中存在大量的空格、换行、注释,这些利于阅读,如果能够压缩掉,将会很有利于网络传输。这方面的工具也有很多,一般可以保留开发版本,利用工具生成生产版本,2个文件比较,一般压缩率能达到50%以上,减少的数据量还是比较可观的。

10、避免采用301、302转向太多

重定向会增加http请求的次数,会影响到整个网站的性能,但是必要的重定向又可以提高用户体验,所以我们需要在性能和用户体验之间去权衡,达到最好的目的。

11、养成良好的开发维护习惯,尽量避免脚本重复调用

良好的习惯包含但不限于以下几点:

⑴不要和被依赖的代码混在一起,至少应当做到分目录存放,建议以库的形式建立依赖

⑵不要出现明显的,可以简单消除的重复代码,复制粘贴有好处,但会给后来人带来痛苦

⑶文件名取得贴近点,比如是一个线程类,那么文件名最好含有thread

⑷不要做形式化的注释,它会膨胀文件,弱化核心,代码才是核心,要象写作文一样去锤炼斟酌,舍得割添足部分

⑸防止大文件和大函数,如果出现,应当下手重组,类似于大公司一样要结构优化,比如一个大的if、大的while提炼成一个函数,部门大了也会划分成小的部门

⑹保持main函数所在文件名包含main词眼是个好习惯,因为不熟的人看代码时,从main入手通常最容易

⑺太大的switch-case,要考虑使用函数指针数组优化

⑻杜绝相同文件出现在不同目录下

⑼将目录当作自己的房间还打理,做到分类明晰、层次合理,不乱七八糟

⑽尽量使用标准的或简单的编译系统

12、配置ETags

⑴ETag 是什么?

实体标签(Entity Tag,ETag)是Web服务器和浏览器用于确认缓存组件的有效性的一种机制。ETag 在 HTTP 1.1 中开始引入。

⑵ETag 和 Expires 的关系

ETag 既然是 Web服务器和浏览器用于确认缓存组件的有效性的一种机制,那么我们就不得不说一下ETag 和 Expires 的关系了。

前面《前端性能优化:Add Expires headers》中介绍过 Expires 头。我们可以通过在服务器端设置Expires 头,以便浏览器再次访问同一个页面组件时可以读取本地缓存中的文件,而减少HTTP请求。

⑶条件GET请求

如果缓存的组件过期了(或者用户明确地重新加载了页面),浏览器在重用它之前必须首先检查它是否仍然有效(是否过期)。这称作一个条件GET请求。不过不幸的是浏览器必须产生这个HTTP请求,执行有效性检查,但这仍比简单地下载所有已过期的组件效率高。如果浏览器缓存中的组件是有效的(即它能够和原始服务器上的组件相匹配),原始服务器不会返回整个组件,而是返回一个“304 Not Modified”状态码。

13、Ajax采用缓存调用

这个的使用可以参照Discuz论坛代码,里面对于大量使用的Ajax调用都采用了缓存 调用方式,一般采用附加特征参数方式实现,注意其中的就是特征参数,这个参数不变化就使用缓存文件,如果发生变化则重新下载新文件或更新信息。

14、合理使用Flush

用户端发送浏览请求后,服务器端一般要花销200-500ms去处理这些请求,在此期间,用户端浏览器处于等待状态,如果要减少用户等待时间,可以在适当的位置使用flush,将已经就绪的内容推送到用户端,这在php中很容易实现.

15、缩减iframe的使用,如无必要,尽量不要使用

iframe通常用于不同域名内容的加载,这同时也可能因iframe内容加载速度影响到主网页加载速度,如果可能,把需要加载的内容抓取到本地直接嵌入。如果实在需要iframe加载,采用后载入方式实现。

16、Ajax调用尽量采用GET方法调用

实际使用XMLHttpRequest时,如果使用POST方法实现,会发生2次HTTP请求,而使用GET方法只会发生1次HTTP请求。如果改用GET方法,HTTP请求减少50%!

17、使用多域名负载网页内的多个文件、图片

记得有资料说明,IE在网页载入过程中,在同1时刻,对同1域名并行加的HTTP请求数 量最高为2个,如果网页需要加载的文件数量超过2个(通常远远超过..),要加快网页访问速度,最好将文件分布到多个域名,例如19楼,其js文件采用独 立的域名,据说百度的图片服务器数量在20台以上。

18、当页面内容庞大到一定程度,可以采用分页的方式展现。

⑴提升用户体验度(网站内容多):当网站内容过多的时候,一页无法诠释网站主题的时候,就需要分页来进行优化了,具有缓冲视觉疲劳,减少下滑鼠标的力气,但如果是内容一页就能展示完,千万别刻意去使用分页来增加网站页面,否则会适得其反;

⑵网站加载速度优化:对于做网站的人来说,加载速度可谓是网站的致命因素,一个网页打开速度慢,不仅影响用户体验,同时也影响优化排名,还是那句话,如果内容过多,则需要分页来分清负担,这样可以让页面加载速度得到优化。

19、尽可能减少DCOM元素

尽可能减少网页中各种<>元素数量,没必要的元素,重复的元素可以优化删除,这样能提升网站的加载速度。

20、优化图片文件

优化图片文件,减小其尺寸,特别是缩略图,一定要按尺寸生成缩略图然后调用,不要在网页中用resize方法实现,虽然这样看到的图片外形笑了,但是其加载的数据量一点也没减少。曾经见过有人在网页中加载的缩略图,其真实尺寸有10M之巨…

先看看这些数据

⑾大部分台式机或是笔记本用户不会等待超过3秒的网站加载速度

⑿在移动设备上不会等待超过5秒钟

⑿亚马逊发现如果他们的网站加载速度慢了1秒钟,他们一年将损失16亿美元

⒁搜索引擎将网站加载速度列入了排名算法之中

如果你大量的网站图片非常臃肿,这将严重影响网站加载速度,如果超过10秒钟,那你等着和你的客户说byebye把。

图片文件应该多大?

有些理论说图片的大小应该保持在70kb以下,不过这个有时候是很困难的,特别对于大图片来说几乎是不可能的,除非你不求清晰度。我个人倒是觉得,不要 用一个标准去限制每一张图片的大小,关键在于,我们有没有去执行,有没有看到我这篇博文后去真正压缩图片,这才是关键。

普通图像、icon也要尽可能压缩后,可以采用web图像保存、减少颜色数等等方法实现。

weinxin
虎纠自媒体官方微信
这是我的微信扫一扫
f9seo
  • 本文由 发表于 2016年7月25日11:45:32
  • 转载请务必保留本文链接:https://www.f9seo.com/post-600.html
评论:2   其中:访客  2   博主  0
    • 福建飞翔
      福建飞翔 2

      减少臃肿代码提高网站访问速度,针对程序模板而言,减少JS的调用数量,减少CSS的数量,删除无关HTML代码,减少图片数量等等。

      • k990461
        k990461 4

        网站的访问速度受网络层、页面内容、用户访问设备配置等等多种因素的影响,性能数据会实时变化。实时评测网站的访问速度,有利于及时优化网站性能,减少用户的投诉率。

      匿名

      发表评论

      匿名网友 填写信息

      :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

      确定