网站优化如何提高页面的加载速度

  • 时间:
  • 浏览:2

  1. 使用良好的价值形式

        比如说XHTML具有很大的优势,要花费你的页面会更加的符合标准!而且他少量的使用了标记(<start> , <end>等),而这就愿因浏览器可都可不能不能下载更多的代码,就说 尝试在你的页面中使用较少的XHTML,减少页面的大小。

    2. 尽量减少HTTP的请求次数

        终端用户响应的时间中,有3000%用于下载各项内容。这每种时间包括下载页面中的图像、样式表、脚本、Flash等。通过减少页面中的元素能只有减少HTTP请求的次数。这是提高网页速率的关键步骤。

        减少页面组件的法律法律法律法律依据真是若果冗杂页面设计。没办法 有没办法 这些法律法律法律法律依据既能保持页面内容的丰厚性又能达到加快响应时间的目的呢?这里有哪几个减少HTTP请求次数共同又机会保持页面内容丰厚的技术。

        合并文件是通过把所有的脚本放上去3个 文件中来减少HTTP请求的法律法律法律法律依据,如能只有简单地把所有的CSS文件都放上去3个 样式表中。当脚本机会样式表在不同页面中使用时可都可不能不能做不同的修改,这机会会相对麻烦点,但即便没办法 也要把这些法律法律法律法律依据作为改善页面性能的重要一步。

    3. 优化网页图片文件

        你的网页一定有图片,加载3个 网页往往图片的总尺寸是最大的,有点硬是哪哪几个颜色丰厚的背景图片和大副广告图片。就说 一般要在同等图片质量的情況下要尽机会地 减小图片尺寸。在Photoshop中亲们能只有用保存为Web图片的选项试一下。图片都是几种常用的文件格式。如JPEG一般是用来存储照片或全彩色图片 的,比如照片、屏幕截图等。GIF图片格式的颜色要比JPEG少,适合做小图,如制作按钮、Logo等,另外GIF支持动态效果。PNG跟GIF比较相 似,但它的尺寸较大,支持的颜色也比GIF要多,而且PNG支持背景透明。亲们能只有试试使用这些不同的格式保存图片试下,如将PNG和JPEG上加GIF 试试。

    4. CSS Sprites是减少图像请求的有效法律法律法律法律依据

        把所有的背景图像都放上去3个 图片文件中,而且通过CSS的background-image和background-position属性来显示图片的不同每种。

        图片地图是把多张图片整合到一张图片中。真是文件的总体大小不想改变,而且能只有减少HTTP请求次数。图片地图只有在图片的所有组成每种在页面中是紧挨在共同的我不想都可不能不能使用,如导航栏。选则 图片的坐标和机会会比较繁琐且容易出错,共同使用图片地图导航若果具有可读性,而且不推荐这些法律法律法律法律依据;

        内联图像是使用data:URL scheme的法律法律法律法律依据把图像数据加载页面中。这机会会增加页面的大小。把内联图像放上去样式表(可缓存)中能只有减少HTTP请求共同又处理增加页面文件的大小。而且内联图像现在还没办法 得到主流浏览器的支持。减少页面的HTTP请求次数是你首太难做的一步。这是改进首次访问用户在在等待的最重要的法律法律法律法律依据。如同Tenni Theurer的他的博客Browser Cahe Usage – Exposed!中所说,HTTP请求在无缓存情況下占去了40%到300%的响应时间。

        关于CSS Sprites后续我会尝试使用下,机会有哪哪几个心得还是会分享。

    5. 合并Js文件和CSS

        将JS代码和CSS样式分别合并到3个 共享的文件,原先不仅能冗杂代码,而且在执行JS文件的我不想,机会JS文件比较多,就可都可不能不能进行多次“Get”请求,延长加载速率,将JS文件合并在共同后,自然就减少了Get请求次数,提高了加载速率。

    6. 懒加载技术的应用

        延迟显示可见区域外的内容,为了确保用户能只有减慢地看见可见区域的网页能只有延迟加载或展现可见区域外的内容,为了处理页面变形,能只有使用占位符标签制定正确的厚度和厚度。比如WP的jQueryImage LazyLoad插件就能只有在用户在等待在第一屏的我不想,不加载任何第一屏以下的图片信息,只有当用户把鼠标往下滚动的我不想,哪哪几个图片才后来开始加载。原先很明显提升可见区域的加载速率,提高用户体验。

    7. 延迟加载和执行非必要脚本

        网页含有 就说 脚本是在页面全部加载完前都是可都可不能不能执行的,能只有延迟加载和执行非必要脚本。哪哪几个脚本能只有在onload事件我不想执行,处理对网页上重要内容的呈现造成影响。哪哪几个脚本机会是你我本人网页的甲苯,往往更多的是就说 第三方脚本,原先的有就说 ,比如评论、广告、智能推荐、百度云图、分享等等,哪哪几个全部能只有等主体内容加载我不想再执行。

    8. 使用AJAX

        AJAX即“Asynchronous Javascript +XML“,是指这些创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX能只有使网页实现异步更新。这愿因能只有在不重新加载整个网页的情況下,对网页的某每种进行更新。传统的网页(不使用AJAX)机会可都可不能不能更新内容,可都可不能不能重载整个网页面。

        现在的Ajax好像有点硬被神话了,好像网页若果Ajax了,没办法 就不指在速率问提了。真是这是这些误解。拙劣的使用Ajax不想我能 的网页速率更高,反而会降低你的网页速率。Ajax的确是个好东西,而且请很多过分的神话它。使用Ajax的我不想也要考虑里边的哪哪几个准则。

    9. 精简代码

        这些能只有说是最直接的3个 法律法律法律法律依据,也是用得比较多的,对网页代码进行瘦身,删除很多要的沉冗代码,比如很多要的空格、换行符、注释等,包括JS代码中的无用代码也可都可不能不能清除。其中对于注释代码的清除机会就说 人指在误区,甚至有的在里边堆砌关键词。

    10. 使用 Progressive JPEGs

        ProgressiveJPEGs图片是JPEG格式的3个 特殊变种,名为“高级JPEG”。在创建高级JPEG文件时,数据是原先安排的:在放上去图像时,后来开始只显示3个 模糊的图像,随着数据的放上去,图像逐步变得清晰。它要花费交织的GIF格式的图片。高级JPEG主若果考虑到使用调制解调器的慢速网络而设计的,快速网络的使用者通常不想体会到它和正常JPEG格式图片的区别。对于网速太难的用户,这无疑有很好的体验。

    11. 压缩文本和图片

        压缩技术如gzip能只有有效减少页面加载的时间。包括HTML,XML,JSON(JavaScript对象符号),JavaScript和CSS等,压缩率都能只有在大小70%左右。文本压缩用得比较多,一般直接在空间开启就行,而图片的压缩就比较随意,就说 都是直接上传,真是还有很大的压缩空间。

    12. 图片使用height和width属性

        我能 给每个图片上加height和width属性吗?这3个 属性能只有让浏览器在加载图片我不想就知道图片的长和宽,并预留出指定的长宽待图片加载后显示。如 果没办法 这3个 属性,浏览器还可都可不能不能在读取图片成功后再处理一次页面布局样式,这无疑减慢了网页加载速率。就说 在固定图片大小的情況下最好都使用上长和宽属性。

    13. 使用 HTTP 压缩,并始终使用小写的 div 和类名

        能只有使用 HTTP 压缩来减少服务器与浏览器之间的通信量。能只有在 Apache 中配置 HTTP 压缩(.htaccess 文件),机会能只有将其含有 到页面中(对于 PHP,能只有使用3个 HTTP_ACCEPT_ENCODING 选项)。而且请注意:都是所有浏览器都支持压缩。即使是支持压缩的浏览器,压缩和解压缩都是加重处理器的负载。要在 Apache 中启用地毯式(blanket)压缩(即压缩所有文本和 HTML),使用以下命令:

            AddOutputFilterByType DEFLATE text/html text/plain text/xml

        另外,考虑一下您我不想压缩的内容。图像、音乐和视频在创建时机会进行了压缩,而且您能只有将压缩对象限制为 HTML、CSS 和 JavaScript 文件。另这些减少压缩工作的技巧是使用小写形式的 <div> 元素和类名。机会大小写敏感性,而且使用的是无损压缩,<header> 与 <Header> 不同,它们被压缩为3个 不同的标记。关于怎样才能提升网页的加载速率所决定的因素很多了,这若果举出就说 基本可都可不能不能注意的,欢迎在评论分享你的看法