【译】18个网站优化技巧

标签: Web前端 web 优化 加载速度 | 发表时间:2015-06-30 17:07 | 作者:dwqs
出处:http://www.ido321.com

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

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

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

1、图片优化

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

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

2、开启GZip压缩

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

  
  1. <ifModule mod_gzip.c>
  2. mod_gzip_on Yes
  3. mod_gzip_dechunk Yes
  4. mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
  5. mod_gzip_item_include handler ^cgi-script$
  6. mod_gzip_item_include mime ^text/.*
  7. mod_gzip_item_include mime ^application/x-javascript.*
  8. mod_gzip_item_exclude mime ^image/.*
  9. mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
  10. </ifModule>

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

  
  1. # compress text, html, javascript, css, xml:
  2. AddOutputFilterByType DEFLATE text/plain
  3. AddOutputFilterByType DEFLATE text/html
  4. AddOutputFilterByType DEFLATE text/xml
  5. AddOutputFilterByType DEFLATE text/css
  6. AddOutputFilterByType DEFLATE application/xml
  7. AddOutputFilterByType DEFLATE application/xhtml+xml
  8. AddOutputFilterByType DEFLATE application/rss+xml
  9. AddOutputFilterByType DEFLATE application/javascript
  10. AddOutputFilterByType DEFLATE application/x-javascript
  11. # Or, compress certain file types by extension:
  12. <files *.html>
  13. SetOutputFilter DEFLATE
  14. </files>

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

  
  1. <?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')) ob_start("ob_gzhandler"); else ob_start(); ?>

3、服务器响应时间

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

  1. 有独立的服务器,而不是选择共享/托管服务器。
  2. 提高Web服务器的质量。
  3. 移除不必要的插件,只有那些必要的插件,才需要一直保持启用状态。

4、浏览器缓存

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

  
  1. ## EXPIRES CACHING ##
  2. <IfModule mod_expires.c>
  3. ExpiresActive On
  4. ExpiresByType image/jpg "access plus 1 year"
  5. ExpiresByType image/jpeg "access plus 1 year"
  6. ExpiresByType image/gif "access plus 1 year"
  7. ExpiresByType image/png "access plus 1 year"
  8. ExpiresByType text/css "access plus 1 month"
  9. ExpiresByType application/pdf "access plus 1 month"
  10. ExpiresByType text/x-javascript "access plus 1 month"
  11. ExpiresByType application/x-shockwave-flash "access plus 1 month"
  12. ExpiresByType image/x-icon "access plus 1 year"
  13. ExpiresDefault "access plus 2 days"
  14. </IfModule>
  15. ## EXPIRES CACHING ##

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

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

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

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

  
  1. <ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

6、使用CDN

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

7、压缩CSS、JavaScript和HTML文件

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

  1. CSS Minifier
  2. Avivo
  3. HTML Compressor

8、避免重定向

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

9、指定字符集

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

  
  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

10、避免错误请求

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

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

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

12、异步脚本

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

  
  1. <script async src="http://www.yoursite.com/script.js"></script>

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

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

14、JavaScript的延迟解析

为了加载网页,浏览器必须解析所有的标记内容,从而增加了网站的加载时间。通过延迟解析脚本,那么就可以减少初始网站的加载时间了。

15、避免阻塞型的JavaScript和CSS

在浏览器呈现网页之前,它首先需要通过解析 HTML标记语言来构建一个DOM树。在此过程中,如果遇到了脚本,此过程就会中止,转而先执行脚本,然后才会继续原先的活动。因此建议避免阻塞型的JavaScript,尤其是外部脚本。

阻塞型JavaScript还会导致网站的延迟。所以不妨推迟加载那些不重要的JavaScript,或者采用异步加载的方式。另一种选择是将这些HTML代码内嵌到网站上,同时需要确保CSS的优化。

16、优化代码:不使用内联的CSS

内联了样式就不能清清楚楚地将内容从设计中剥离开来。同时可能还会需要大量的维护工作,给网站管理员带来各种不便,还会进一步增加网页的大小。

17、文件分离

网站的文件可以分为CSS、JavaScripts和图像。文件分离虽然并不能直接改善网站的加载时间。但是,这么做可以提高服务器的稳定性,特别是当网站流量突然出现了尖峰的时候。子域也可以用于托管文件,这样可以增加并行下载的数量。

18、尽量减少HTTP请求

还有一种简单的优化网页速度的方法是,减少HTTP请求。当一个网站一下子收到太多的HTTP请求,它的访客就会有响应时间延迟的体验,这不仅增加了CPU使用率也增加了页面的加载时间。那么,又该如何减少HTTP请求?请见以下步骤:

  1. 减少网站上的对象数量。
  2. 最小化网站上的重定向数量。
  3. 使用CSS Sprites 技术(只要你需要的那部分图片内容)。
  4. 合并JavaScripts和CSS文件。

参考文章

12 Actionable Ways To Improve Page Speed

13+ Ways to Optimize Your Website’s Page Speed

相关文章

网站性能优化·前端篇
网站性能优化工具大全
【高性能前端1】高性能HTML
【高性能前端2】高性能CSS
【高性能前端3】JavaScript
【高性能前端4】Appcache Facts 中译版

淡忘~浅思猜你喜欢

【译】设计出色响应式网站的十个技巧

【译】Python的优雅技巧

大型网站系统架构演化之路

【译】45种Javascript技巧大全

6个Python性能优化技巧
无觅

转载请注明: 淡忘~浅思 » 【译】18个网站优化技巧

相关 [网站 优化 技巧] 推荐:

【译】18个网站优化技巧

- - 淡忘~浅思
快速的页面加载对提升搜索引擎排名、网站转化率和整体的用户体验是非常重要的. 网站页面的加载速度也是衡量网站性能的一个重要因素. 如果网站不是以最好的性能在运行,迟缓的加载会让你在低的排名和搜索流量上花费更大的代价. 页面的加载速度会对用户的行为和转化率产生很大的影响. 有哪些简单的方式可以优化加载速度呢.

优化网站加载速度的14个技巧

- - 码农网
优化了加载速度的网站不仅可以提高其搜索引擎的排名,同时也可以降低网站的跳出率,提高其转换率,还能提供更好的终端用户体验,这是当今基于Web环境取得成功的关键. 下面我将介绍几个优化网站加载网页速度的简单方法,一起来看一下. 即使网站已经格外优化,但是除非服务器响应时间非常快,否则就不会有什么大的效果.

SEO优化网站之站内关键词布局技巧分享篇

- - CSDN博客互联网推荐文章
对于一个seoer来说,运营好优化网站是我们的一项基本工作,我想不管是seo站长还是seo新手,大家都应该知道做好一个seo优化网站,关键词的合理布局是很重要的,尤其是一个刚建好的新网站,在关键词布局方面需要考虑的尽可能的全面一些,给搜索引擎一个好的印象,这样一来可以使我们的seo优化网站在搜索引擎有一个好的排名.

WordPress的SEO优化技巧

- - 氪星人
随着搜索引擎大兴, 排列在前的网站引入大量流量. 无论是搜索页面的广告还是查出来的结果, 与搜索者的目标匹配度都比较高 (如果搜索引擎足够智能), 所以通过搜索引擎而来的访客很可能会从网站上得到他想要的东西, 并记住这个网站. 也就是说, 搜索引擎会带来很多有价值的流量, 所以花点时间针对搜索引擎优化一下 WordPress 博客也是值得的.

mysql优化小技巧

- - 互联网 - ITeye博客
对mysql优化时一个综合性的技术,主要包括. a: 表的设计合理化(符合3NF). b: 添加适当索引(index) [四种: 普通索引、主键索引、唯一索引unique、全文索引]. c: 分表技术(水平分割、垂直分割). d: 读写[写: update/delete/add]分离. e: 存储过程 [模块化编程,可以提高速度].

MyEclipse 2013优化技巧

- - CSDN博客编程语言推荐文章
MyEclipse 2013优化技巧. 作者:chszs,转载需注明. 博客主页: http://blog.csdn.net/chszs. MyEclipse 2013优化速度方案仍然主要有这么几个方面:去除无需加载的模块、取消冗余的配置、去除不必要的检查、关闭更新. 第一步: 去除不需要加载的模块.

HTML性能优化技巧

- - JavaScript - Web前端 - ITeye博客
如何提升Web页面的性能,很多开发人员从多个方面来下手如JavaScript、图像优化、服务器配置,文件压缩或是调整CSS. 很显然HTML 已经达到了一个瓶颈,尽管它是开发Web 界面必备的核心语言. HTML页面的负载也是越来越重. 大多数页面平均需要40K的空间,像一些大型网站会包含数以千计的HTML 元素,页面Size会更大.

Hibernate性能优化技巧

- - SQL - 编程语言 - ITeye博客
文章分为十三个小块儿对Hibernate性能优化技巧进行总结性分析,分析如下:. 一、在处理大数据量时,会有大量的数据缓冲保存在Session的一级缓存中,这缓存大太时会严重显示性能,所以在使用Hibernate处理大数据量的,可以使用session. clear()或者session. evict(Object) 在处理过程中,清除全部的缓存或者清除某个对象.

Android代码优化小技巧总结

- - 移动开发 - ITeye博客
关注微信号:javalearns   随时随地学Java. 这篇文章主要是介绍了一些小细节的优化技巧,当这些小技巧综合使用起来的时候,对于整个Android App的性能提升还是有作用的,只是不能较大幅度的提升性能而已. 选择合适的算法与数据结构才应该是你首要考虑的因素,在这篇文章中不会涉及这方面.

Java程序性能优化技巧

- - CSDN博客推荐文章
如果循环次数很多,循环体内代码处理不好问题就会被放大. for(int i=0;i