怎么提高网站页面打开加载速度优化
1、尽可能减小HTTP请求次数php
1、合并js文件和css文件css
将js代码和css样式分别合并到一个共享的文件，这样不只能简化代码，并且能够减小HTTP请求次数。html
2、cssSprites图片技术java
CSS Sprites是减小图像请求的有效方法。把全部的背景图像都放到一个图片文件中，而后经过CSS的background-image和 background-position属性来显示图片的不一样部分；jquery
CSS雪碧 即CSS Sprite，也有人叫它CSS精灵，是一种CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，而后利用css的背景定位来显示须要显示的图片部分。CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中，从而减小你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染，这也就意味着你的标签变得更加复杂了，图片是在CSS中定义，而非<img>标签。数据库
优势：json
(1)减小加载网页图片时对服务器的请求次数浏览器
能够合并多数背景图片和小图标，方便在任何位置使用，这样不一样位置的请求只须要调用一个图片，从而减小对服务器的请求次数，下降服务器压力，同时提升了页面的加载速度，节约服务器的流量。缓存
(2)提升页面的加载速度
sprite 技术的其中一个好处是图片的加载时间(在有许多 sprite 时，单张图片的加载时间)。
由所需图片拼成的一张 GIF 图片的尺寸会明显小于全部图片拼合前的大小。单张的 GIF 只有相关的一个色表，而单独分割的每一张 GIF 都有本身的一个色表，这就增长了整体的大小。所以，单独的一张 JPEG 或者 PNG sprite 在大小上很是可能比把一张图分红多张得来的图片总尺寸小。
(3)减小鼠标滑过的一些bug
IE6不会主动预加载鼠标滑过即a:hover中的背景图片，因此，若是使用多张图片，鼠标滑过会出现闪白的现象。使用CSS雪碧，因为一张图片便可，因此不会出现这种现象。
缺点：
(1) CSS雪碧的最大问题是内存使用
能够合并多数背景图片和小图标，方便在任何位置使用，这样不一样位置的请求只须要调用一个图片，从而减小对服务器的请求次数，下降服务器压力，同时提升了页面的加载速度，节约服务器的流量。
(2) 影响浏览器的缩放功能
(3) 拼图维护比较麻烦
(4)使CSS的编写变得困难
(5) CSS 雪碧调用的图片不能被打印
CSS 雪碧调用的图片不能被打印，除非在@media中特别添加 print声明
(6) 错误得使用 Sprites 影响可访问性
3、不要出现404错误
HTTP请求时间消耗是很大的，所以使用HTTP请求来得到一个没有用处的响应（例如404没有找到页面）是彻底没有必要的，它只会下降用户体验而不会有一点好处。
有些站点把404错误响应页面改成“你是否是要找***”，这虽然改进了用户体验可是一样也会浪费服务器资源（如数据库等）。最糟糕的状况是指向外部 JavaScript的连接出现问题并返回404代码。首先，这种加载会破坏并行加载；其次浏览器会把试图在返回的404响应内容中找到可能有用的部分看成JavaScript代码来执行。
2、减少文本和图片的空间
一、压缩文本和图片
压缩技术如gzip【http://www.cnblogs.com/peida/archive/2012/12/06/2804323.html】能够有效减小页面加载的时间。包括html，xml，json(javascript对象符号)，javascript和css等，压缩率均可以在大小70%左右。文本压缩用得比较多，通常直接在空间开启就行，而图片的压缩就比较随意，不少都是直接上传，其实还有很大的压缩空间。
二、图片格式优化
不恰当的图像格式是一种极为常见的减慢加载速度的罪魁祸首。正确的图片格式可让图片缩小数倍，若是保存为最佳格式。能够节省大量带宽，减小处理时间时间，大大加快页面加载速度，这是一种很常见的作法。
3、精简代码
这个能够说是最直接的一个方法，也是用得比较多的，对网页代码进行瘦身，删除没必要要的沉冗代码，好比没必要要的空格、换行符、注释等，包括js代码中的无用代码也须要清除。其中对于注释代码的清除可能有些人存在误区，甚至有的在里面堆砌关键词。
4、减小DOM元素数量
一个复杂的页面意味着须要下载更多数据，同时也意味着JavaScript遍历DOM 的效率越慢。好比当你增长一个事件句柄时在500和5000个DOM元素中循环效果确定是不同的。
大量的DOM元素的存在乎味着页面中有能够不用移除内容只须要替换元素标签就能够精简的部分。你在页面布局中使用表格了吗？你有没有仅仅为了布局而引入更多的<div>元素呢？也许会存在一个适合或者在语意是更贴切的标签能够供你使用。
YUI CSS utilities能够给你的布局带来巨大帮助：grids.css能够帮你实现总体布局，font.css和reset.css能够帮助你移除浏览器默认格式。它提供了一个从新审视你页面中标签的机会，好比只有在语意上有意义时才使用<div>，而不是由于它具备换行效果才使用它。
DOM元素数量很容易计算出来，只须要在Firebug的控制台内输入：document.getElementsByTagName_r(’*’).length
那么多少个DOM元素算是多呢？这能够对照有很好标记使用的相似页面。好比Yahoo!主页是一个内容很是多的页面，可是它只使用了700个元素（HTML标签）。
5、使iframe的数量最小
ifrmae元素能够在父文档中插入一个新的HTML文档。了解iframe的工做理而后才能更加有效地使用它，这一点很重要。
<iframe>优势：解决加载缓慢的第三方内容如图标和广告等的加载问题 Security sandbox 并行加载脚本
<iframe>的缺点：即时内容为空，加载也须要时间会阻止页面加载 没有语意
3、页面加载顺序
一、延迟显示可见区域外的内容
为了确保用户能够更快地看见可见区域的网页能够延迟加载或展示可见区域外的内容，为了不页面变形，可使用占位符标签制定正确的高度和宽度。好比wp的jqueryimage lazyload插件【http://www.cnblogs.com/tinyphp/archive/2013/04/09/3009385.html】就能够在用户停留在第一屏的时候，不加载任何第一屏如下的图片信息，只有当用户把鼠标往下滚动的时候，这些图片才开始加载。这样很明显提高可见区域的加载速度，提升用户体验。
注意事项：须要真正实现图片延迟加载，必须将真实图片地址写在 data-original 属性中。若 src 与 data-original 相同，则只是一个特效而已，并不达到延迟加载的功能。
二、确保功能图片优先加载
网站主要考虑可用性的重要性，一个功能按钮要提早加载出来
三、从新布置call-to-action按钮
其实这个和上面一条是差很少的，都是从用户体验速度着手，跳过了网页的总体加载速度。速度没变，只是让一些行为按钮提早，call-to-action按钮通常习惯设计在页面底部，这样的习惯对于用户来讲并不老是好的，购买用户须要等到最下面加载出来才能点击下一步操做。能够调整cta按钮的位置。
四、使用 progressive jpegs
progressivejpegs图片是jpeg格式的一个特殊变种，名为“高级jpeg”。在建立高级jpeg文件时，数据是这样安排的：在装入图像时，开始只显示一个模糊的图像，随着数据的装入，图像逐步变得清晰。它至关于交织的gif格式的图片。高级jpeg主要是考虑到使用调制解调器的慢速网络而设计的，快速网络的使用者一般不会体会到它和正常jpeg格式图片的区别。对于网速比较慢的用户，这无疑有很好的体验。
5、延迟加载和执行非必要脚本
网页中有不少脚本是在页面彻底加载完前都不须要执行的，能够延迟加载和执行非必要脚本。这些脚本能够在onload事件以后执行，避免对网页上重要内容的呈现形成影响。这些脚本多是你本身网页的脚本，每每更多的是一些第三方脚本，这样的有不少，好比评论、广告、智能推荐、百度云图、分享等等，这些彻底能够等主体内容加载完后再执行。若是你有用于实现拖放和动画的JavaScript，那么它就以等待稍后加载，由于页面上的拖放元素是在初始化呈现以后才发生的。其它的例如隐藏部分的内容（用户操做以后才显现的内容）和处于折叠部分的图像也能够推迟加载。
6、预加载
预加载和后加载看起来彷佛偏偏相反，但实际上预加载是为了实现另一种目标。预加载是在浏览器空闲时请求未来可能会用到的页面内容（如图像、样式表和脚本）。使用这种方法，当用户要访问下一个页面时，页面中的内容大部分已经加载到缓存中了，所以能够大大改善访问速度。
下面提供了几种预加载方法：
无条件加载：触发onload事件时，直接加载额外的页面内容。以Google.com为例，你能够看一下它的spirit image图像是怎样在onload中加载的。这个spirit image图像在google.com主页中是不须要的，可是却能够在搜索结果页面中用到它。
有条件加载：根据用户的操做来有根据地判断用户下面可能去往的页面并相应的预加载页面内容。在search.yahoo.com中你能够看到如何在你输入内容时加载额外的页面内容。
有预期的加载：载入从新设计过的页面时使用预加载。这种状况常常出如今页面通过从新设计后用户抱怨“新的页面看起来很酷，可是却比之前慢”。问题可能出在用户对于你的旧站点创建了完整的缓存，而对于新站点却没有任何缓存内容。所以你能够在访问新站以前就加载一部内容来避免这种结果的出现。在你的旧站中利用浏览器的空余时间加载新站中用到的图像的和脚原本提升访问速度。
4、可缓存的AJAX
Ajax常常被说起的一个好处就是因为其从后台服务器传输信息的异步性而为用户带来的反馈的即时性。可是，使用Ajax并不能保证用户不会在等待异步的 JavaScript和XML响应上花费时间。在不少应用中，用户是否须要等待响应取决于Ajax如何来使用。例如，在一个基于Web的Email客户端中，用户必须等待Ajax返回符合他们条件的邮件查询结果。记住一点，“异步”并不异味着“即时”，这很重要。为了提升性能，优化Ajax响应是很重要的。提升Ajxa性能的措施中最重要的方法就是使响应具备可缓存性
5、减小DNS查找次数
域名系统（DNS）提供了域名和IP的对应关系，就像电话本中人名和他们的电话号码的关系同样。当你在浏览器地址栏中输入http://www.kuqin.com/ 时，DNS解析服务器就会返回这个域名对应的IP地址。DNS解析的过程一样也是须要时间的。通常状况下返回给定域名对应的IP地址会花费20到120毫秒的时间。并且在这个过程当中浏览器什么都不会作直到DNS查找完毕。
缓存DNS查找能够改善页面性能。这种缓存须要一个特定的缓存服务器，这种服务器通常属于用户的ISP提供商或者本地局域网控制，可是它一样会在用户使用的计算机上产生缓存。DNS信息会保留在操做系统的DNS缓存中（微软Windows系统中DNS Client Service）。大多数浏览器有独立于操做系统之外的本身的缓存。因为浏览器有本身的缓存记录，所以在一次请求中它不会受到操做系统的影响。Internet Explorer默认状况下对DNS查找记录的缓存时间为30分钟，它在注册表中的键值为DnsCacheTimeout。Firefox对DNS的查找记录缓存时间为1分钟，它在配置文件中的选项为network.dnsCacheExpiration（Fasterfox把这个选项改成了1小时）。 当客户端中的DNS缓存都为空时（浏览器和操做系统都为空），DNS查找的次数和页面中主机名的数量相同。这其中包括页面中URL、图片、脚本文件、样式表、Flash对象等包含的主机名。减小主机名的数量能够减小DNS查找次数。 减小主机名的数量还能够减小页面中并行下载的数量。减小DNS查找次数能够节省响应时间，可是减小并行下载却会增长响应时间。个人指导原则是把这些页面中的内容分割成至少两部分但不超过四部分。这种结果就是在减小DNS查找次数和保持较高程度并行下载二者之间的权衡了。