如何提高页面加载速度

html-css021

如何提高页面加载速度,第1张

如何提高页面加载速度

网站最重要的一个核心就是用户体验,网站的打开速度影响着访客的浏览体验,提高网站页面的加载速度的方法其实有很多,下面我主要从下面四个角度进行讨论,分享常用的提高网页加载速度的技巧:

一、网页压缩技术

对于网页压缩而言,相信各位站长都比较熟悉,主要是启用服务器Gzip,对页面Gzip压缩,减少元素的'体积,从而减少数据的传输,进而提高网页的加载速度。

二、CSS优化

(1)css位置

CSS说明如果出现在后,页面需要重新渲染,打开速度受到影响。所有css定义代码的位置要放到网站之前。

(2)css sprite技

网站上的一些图片可以采用css sprite技术进行合并,减少加载请求次数,从而提高网页的加载速

(3)css代码优化

通过对css代码属性的简写、移除多余的结构(fr ameworks)和重设(resets)等一系列的方法和技巧来简化css代码,减小css文件的大小。

三、缓存静态资源

通过设置浏览器缓存,将css、js等不太经常更新的文件缓存在浏览器端,这样同一访客再次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css、js等,而不必每次都从你的服务器读取,这样在一定程度上加快了网站的打开速度,又可以节约你的服务器流量。

四、JS优化

(1)JS位置

网页代码中对js进行优化的时候,建议将JS放在页面最后,这样可以加快页面打开速度。

(2)合并JS

合并相同域名下的js,通过减少网络连接次数从而提高网页的打开速度。

(3)LazyLoad(延迟加载)技术

Lazy Load是一个用ja vasc ript 编写的 jQuery 插件,它可以延迟加载长页面中的图片。在浏览器可视区域外的图片不会被载入,直到用户将页面滚动到它们所在的位置。例如本人的破折君博客就采用这个图片延迟加载功能。

答:css失效的原因如下

一、div 标签未关闭

这是版面设计失效的最常见原因之一。当我们了解到这是多少精致的版块设计失效的罪魁祸首时,总会大吃一惊。开启的div标签是最普遍的版块设计失误之一,也是最难诊断的失误之一。验证程序有时会指向错误的开启div标签,诊断时就像大海捞针一样麻烦。

二、不当的DOCTYPE声明

不声明DOCTYPE,或者在文件开始错误声明DOCTYPE,也是一个常见错误。根据一般经验,Strict DOCTYPE是大家追求的最高级验证。Strict validation表明你的网页能够在所有浏览器上都得到最佳展示。

三、结尾斜线

如果你的网站不能验证,很有可能是在代码的某个地方漏写了结尾斜线。我们很容易忽略结尾斜线之类的东西,特别是在image标签等元素中。

在严格的DOCTYPE中这是无效的。要在img标签结尾处加上“/”以解决此问题。

四、JavaScript

如果已经声明Strict DOCTYPE,就需要在JavaScript中覆盖CDATA标签。验证程序的这一方面难倒了很多程序员,因为网站倾向于为广告和追踪脚本使用嵌入的 JavaScript。

五、不良嵌套

嵌套就是元素里又包括元素,我们容易混淆嵌套元素的顺序。例如在div标签前启动strong标签,但又先关闭div标签。这可能不会改变版块布局,但却会使你的版块设计失效。

如果仍无法发现,建议用“开发者模式”/“调试模式”(F12打开)查看对应元素继承了哪些属性,是不是其他的样式覆盖了自己设置的样式。

压缩css代码,就是删掉空格换行之类的,使用尽量短的class名称,不过这个影响维护,对速度的影响也很小。因此首推的是合并css文件,如果页面加载10个css文件,每个文件1k,那么也要比只加载一个100k的css文件慢。

另外,我觉得你提出的问题比较流于表面,建议你用谷歌分析、百度站长之类的测试一下你的网站性能,它们会指出可能的问题并附带适当的建议。