快速的页面加载对提升搜索引擎排名、网站转化率和整体的用户体验是非常重要的。网站页面的加载速度也是衡量网站性能的一个重要因素。
如果网站不是以最好的性能在运行，迟缓的加载会让你在低的排名和搜索流量上花费更大的代价。页面的加载速度会对用户的行为和转化率产生很大的影响。
那么？有哪些简单的方式可以优化加载速度呢？
1、图片优化
首先，你需要优化你网站上的图片，来获得丝毫加速网站的机会。从原图上移除额外的注解、不必要的空间和无用的颜色，将图片保存为JPEG格式，因为它即使占用空间小，也能保证图片的高质量。
对于WordPress网站，建议使用smush.it插件来自动优化网站的图片。如果图片是PNG格式，可以使用tinypng优化图片，提高图片质量。
2、开启GZip压缩
GZip压缩听起来很复杂，但实际上很简单，被用于减少HTTP请求的大小来缩短响应时间。因为这允许你发送GZip压缩文件而不是HTML文件给浏览器，它将缩短页面等待时间和加载时间。对于Apache服务器，可以将下面的代码添加到.htaccess文件中来开启GZip压缩。
<code class="hljs parser3 has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="xml" style="box-sizing: border-box;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ifModule</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">mod_gzip.c</span>></span> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file .(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler </span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">^cgi-script</span><span class="xml" style="box-sizing: border-box;">$ mod_gzip_item_include mime </span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">^text</span><span class="xml" style="box-sizing: border-box;">/.* mod_gzip_item_include mime </span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">^application</span><span class="xml" style="box-sizing: border-box;">/x-javascript.* mod_gzip_item_exclude mime </span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">^image</span><span class="xml" style="box-sizing: border-box;">/.* mod_gzip_item_exclude rspheader </span><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">^Content-Encoding:.</span><span class="xml" style="box-sizing: border-box;">*gzip.* <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ifModule</span>></span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>
如果上面的代码没有开启GZip压缩，则删除，使用下面的代码：
<code class="hljs applescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"># compress text, html, javascript, css, xml:</span> AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">text</span>/plain AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">text</span>/html AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">text</span>/xml AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">text</span>/css AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">application</span>/xml AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">application</span>/xhtml+xml AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">application</span>/rss+xml AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">application</span>/javascript AddOutputFilterByType DEFLATE <span class="hljs-type" style="box-sizing: border-box;">application</span>/x-javascript <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;"># Or, compress certain file types by extension:</span> <files *.html> SetOutputFilter DEFLATE </files></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li></ul>
或者在HTML/PHP文件的顶部添加下列的PHP代码：
<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="php" style="box-sizing: border-box;"><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;"><?php</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (substr_count(<span class="hljs-variable" style="color: rgb(102, 0, 102); box-sizing: border-box;">$_SERVER</span>[<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'HTTP_ACCEPT_ENCODING'</span>], <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">'gzip'</span>)) ob_start(<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"ob_gzhandler"</span>); <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> ob_start(); <span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">?></span></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
3、服务器响应时间
即使网站已经格外优化，但是除非服务器响应时间非常快，否则就不会有什么大的效果。当涉及到提高网站的速度，服务器响应时间起着重要的作用。下面是一些提高服务器响应时间的建议。
- 有独立的服务器，而不是选择共享/托管服务器。
- 提高Web服务器的质量。
- 移除不必要的插件，只有那些必要的插件，才需要一直保持启用状态。
4、浏览器缓存
浏览器具有缓存的功能，可以存储指定的文件，减少HTTP请求，从而提高网站的加载速度。你可以通过在.htaccess文件中设置expires头来开启浏览器缓存，利用下面的代码可以实现：
<code class="hljs applescript has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">## EXPIRES CACHING ##</span> <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 year"</span> ExpiresByType image/jpeg <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 year"</span> ExpiresByType image/gif <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 year"</span> ExpiresByType image/png <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 year"</span> ExpiresByType <span class="hljs-type" style="box-sizing: border-box;">text</span>/css <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 month"</span> ExpiresByType <span class="hljs-type" style="box-sizing: border-box;">application</span>/pdf <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 month"</span> ExpiresByType <span class="hljs-type" style="box-sizing: border-box;">text</span>/x-javascript <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 month"</span> ExpiresByType <span class="hljs-type" style="box-sizing: border-box;">application</span>/x-shockwave-flash <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 month"</span> ExpiresByType image/x-icon <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 1 year"</span> ExpiresDefault <span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"access plus 2 days"</span> </IfModule> <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">## EXPIRES CACHING ##</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li></ul>
注意：如果过期时间与文件挂钩，而此时文件中的内容需要更改的话，那必须先重命名文件，以便浏览器可以获取新添加的代码。
5、开启长连接（Keep-Alive）
Keep-Alive头对缩短浏览器和服务器之间的分布式请求的潜伏期是非常重要的。当用户通过浏览器请求网页时，浏览器会读取服务器发送的特定的HTML文件，如果请求的页面中包含了外部的CSS和JavaScript文件，浏览器会再次发送独立的请求来获取这些文件。正如你想的，这会延长页面的加载时间。
使用Keep-Alive头可以一直保持连接，直到浏览器从服务器获取到所有与这个页面相关的资源。在.htaccess文件中加入下面的代码可以开启这个功能：
<code class="hljs bash has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>Module mod_headers.c> Header <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">set</span> Connection keep-alive </<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span>Module></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
6、使用CDN
内容分发网络（CDN）是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。当用户请求文件和网页时，就可以直接从就近的网站服务器获取相应资源（也可以是从负载最小的服务器）。你可以使用Amazon cloud front 或者MaxCDN为网站开启CDN加速。
7、压缩CSS、JavaScript和HTML文件
通过删除所有不必要的空格和注释，从而减小文件大小，提高页面的加载速度。下面是一些优化CSS、JavaScript和HTML文件的流行工具，非常有用。
8、避免重定向
重定向是对网站访问者的一种极大的刺激。就类似你去一个朋友家，却发现你朋友早已经搬到三个街区远的地方了。重定向会消耗额外的时间，降低加载速度。
9、指定字符集
指定字符集是加速浏览器渲染页面的另一个有用的技巧。下面的代码就能轻松实现：
<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">meta</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">http-equiv</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"Content-Type"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">content</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"text/html; charset=utf-8"</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
10、避免错误请求
当用户在网站上搜索时，收到404或410错误是比较失望的。错误请求会对网站的页面加载速度产生不利影响。因此，建议你无论如何都要避免错误请求。Check My Link 能帮你找出404链接，清除它们，改善用户体验。
11、丢弃跟踪代码、嵌入视频的元素和分享按钮
很多网站管理员认为使用多个跟踪代码提供嵌入和分享按钮会带给用户更好的体验，实际上这只会给网站增加更多的服务请求。例如，一个iframe会请求一个新页面，这会自动降低网站的加载速度。所以，丢弃这些跟踪代码，可以提高网站加载速度，提升用户体验。
12、异步脚本
还有一个可以提高网站页面速度的超棒选择就是异步加载脚本。如此一来网页负载就并不必依赖于这些异步脚本。在异步模式中，脚本是在后台下载的，不会影响浏览器对页面的渲染和加载。
<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">async</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://www.yoursite.com/script.js"</span>></span><span class="javascript" style="box-sizing: border-box;"></span><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">script</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
13、样式表置顶，脚本置底
将样式表放在顶部有利于页面迅速加载，因为这样可以使得页面慢慢呈现。一般来说，在同一时间，大部分浏览器支持并行下载两个组件（图像、样式和脚本）。但是通常而言，脚本会在并行下载时会阻止其他的下载，直到脚本下载完毕。
14、JavaScript的延迟解析
为了加载网页，浏览器必须解析所有的
15、避免阻塞型的JavaScript和CSS
在浏览器呈现网页之前，它首先需要通过解析HTML标记语言来构建一个DOM树。在此过程中，如果遇到了脚本，此过程就会中止，转而先执行脚本，然后才会继续原先的活动。因此建议避免阻塞型的JavaScript，尤其是外部脚本。
阻塞型JavaScript还会导致网站的延迟。所以不妨推迟加载那些不重要的JavaScript，或者采用异步加载的方式。另一种选择是将这些HTML代码内嵌到网站上，同时需要确保CSS的优化。
16、优化代码：不使用内联的CSS
内联了样式就不能清清楚楚地将内容从设计中剥离开来。同时可能还会需要大量的维护工作，给网站管理员带来各种不便，还会进一步增加网页的大小。
17、文件分离
网站的文件可以分为CSS、JavaScripts和图像。文件分离虽然并不能直接改善网站的加载时间。但是，这么做可以提高服务器的稳定性，特别是当网站流量突然出现了尖峰的时候。子域也可以用于托管文件，这样可以增加并行下载的数量。
18、尽量减少HTTP请求
还有一种简单的优化网页速度的方法是，减少HTTP请求。当一个网站一下子收到太多的HTTP请求，它的访客就会有响应时间延迟的体验，这不仅增加了CPU使用率也增加了页面的加载时间。那么，又该如何减少HTTP请求？请见以下步骤:
- 减少网站上的对象数量。
- 最小化网站上的重定向数量。
- 使用CSS Sprites 技术（只要你需要的那部分图片内容）。
- 合并JavaScripts和CSS文件。