资讯专栏INFORMATION COLUMN

【译】如何对网站进行优化提速?

JessYanCoding / 3019人阅读

摘要:对于网站,建议使用插件来自动优化网站的图片。避免重定向重定向是对网站访问者的一种极大的刺激。另一种选择是将这些代码内嵌到网站上,同时需要确保的优化。那么,又该如何减少请求请见以下步骤减少网站上的对象数量。

快速的页面加载对提升搜索引擎排名、网站转化率和整体的用户体验是非常重要的。网站页面的加载速度也是衡量网站性能的一个重要因素。

如果网站不是以最好的性能在运行,迟缓的加载会让你在低的排名和搜索流量上花费更大的代价。页面的加载速度会对用户的行为和转化率产生很大的影响。

那么?有哪些简单的方式可以优化加载速度呢?

1、图片优化

首先,你需要优化你网站上的图片,来获得丝毫加速网站的机会。从原图上移除额外的注解、不必要的空间和无用的颜色,将图片保存为JPEG格式,因为它即使占用空间小,也能保证图片的高质量。

对于WordPress网站,建议使用smush.it插件来自动优化网站的图片。如果图片是PNG格式,可以使用tinypng 优化图片,提高图片质量。

2、开启GZip压缩

GZip压缩听起来很复杂,但实际上很简单,被用于减少HTTP请求的大小来缩短响应时间。因为这允许你发送GZip压缩文件而不是HTML文件给浏览器,它将缩短页面等待时间和加载时间。对于Apache服务器,可以将下面的代码添加到.htaccess文件中来开启GZip压缩。


mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

如果上面的代码没有开启GZip压缩,则删除,使用下面的代码:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# Or, compress certain file types by extension:

SetOutputFilter DEFLATE

或者在HTML/PHP文件的顶部添加下列的PHP代码:


3、服务器响应时间

即使网站已经格外优化,但是除非服务器响应时间非常快,否则就不会有什么大的效果。当涉及到提高网站的速度,服务器响应时间起着重要的作用。下面是一些提高服务器响应时间的建议。

有独立的服务器,而不是选择共享/托管服务器。

提高Web服务器的质量。

移除不必要的插件,只有那些必要的插件,才需要一直保持启用状态。

4、浏览器缓存

浏览器具有缓存的功能,可以存储指定的文件,减少HTTP请求,从而提高网站的加载速度。你可以通过在.htaccess文件中设置expires头来开启浏览器缓存,利用下面的代码可以实现:

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"

## EXPIRES CACHING ##

注意:如果过期时间与文件挂钩,而此时文件中的内容需要更改的话,那必须先重命名文件,以便浏览器可以获取新添加的代码。

5、开启长连接(Keep-Alive)

Keep-Alive头对缩短浏览器和服务器之间的分布式请求的潜伏期是非常重要的。当用户通过浏览器请求网页时,浏览器会读取服务器发送的特定的HTML文件,如果请求的页面中包含了外部的CSSJavaScript文件,浏览器会再次发送独立的请求来获取这些文件。正如你想的,这会延长页面的加载时间。

使用Keep-Alive头可以一直保持连接,直到浏览器从服务器获取到所有与这个页面相关的资源。在.htaccess文件中加入下面的代码可以开启这个功能:

 Header set Connection keep-alive 
6、使用CDN

内容分发网络(CDN)是位于不同地理位置的服务器组成的网络。每个服务器都拥有所有网站的文件副本。当用户请求文件和网页时,就可以直接从就近的网站服务器获取相应资源(也可以是从负载最小的服务器)。你可以使用Amazon cloud front 或者MaxCDN为网站开启CDN加速。

7、压缩CSS、JavaScript和HTML文件

通过删除所有不必要的空格和注释,从而减小文件大小,提高页面的加载速度。下面是一些优化CSS、JavaScript和HTML文件的流行工具,非常有用。

CSS Minifier

Avivo

HTML Compressor

8、避免重定向

重定向是对网站访问者的一种极大的刺激。就类似你去一个朋友家,却发现你朋友早已经搬到三个街区远的地方了。重定向会消耗额外的时间,降低加载速度。

9、指定字符集

指定字符集是加速浏览器渲染页面的另一个有用的技巧。下面的代码就能轻松实现:


10、避免错误请求

当用户在网站上搜索时,收到404或410错误是比较失望的。错误请求会对网站的页面加载速度产生不利影响。因此,建议你无论如何都要避免错误请求。Check My Link 能帮你找出404链接,清除它们,改善用户体验。

11、丢弃跟踪代码、嵌入视频的元素和分享按钮

很多网站管理员认为使用多个跟踪代码提供嵌入和分享按钮会带给用户更好的体验,实际上这只会给网站增加更多的服务请求。例如,一个iframe会请求一个新页面,这会自动降低网站的加载速度。所以,丢弃这些跟踪代码,可以提高网站加载速度,提升用户体验。

12、异步脚本

还有一个可以提高网站页面速度的超棒选择就是异步加载脚本。如此一来网页负载就并不必依赖于这些异步脚本。在异步模式中,脚本是在后台下载的,不会影响浏览器对页面的渲染和加载。


13、样式表置顶,脚本置底

将样式表放在顶部有利于页面迅速加载,因为这样可以使得页面慢慢呈现。一般来说,在同一时间,大部分浏览器支持并行下载两个组件(图像、样式和脚本)。但是通常而言,脚本会在并行下载时会阻止其他的下载,直到脚本下载完毕。

14、JavaScript的延迟解析

为了加载网页,浏览器必须解析所有的

阅读需要支付1元查看
<