`

使用Minify来优化网站性能

    博客分类:
  • web
 
阅读更多

Minify 是用PHP5开发的应用,通过遵循一些Yahoo的优化规则来提高网站的性能。它会合并多个CSS或者JavaScript文件,移除一些不必要的空格和 注释,进行gzip压缩,并且会设置浏览器的缓存头。Minify 在设计上和Yahoo的 Combo Handler Service非常像,不过Minify可以合并任何你想要合并的JavaScript和CSS文件。

一般情况下,网站速度的瓶颈都在前端,而最关键的就是资源的加载速度,但是大多数浏览器都有单个域名并发请求数限制,所以如果一个页面中存在很多的 资源,比如CSS和JavaScript文件,那么明显会降低网站的加载速度,比较好处理方式就是把多个文件通过一个请求来访问,这样既不会影响之前的文 件维护,又会减少资源的清楚数量,Minify就是为之而生。下面是一些被Minify采用的 Yahoo! 优化准则:

1、Make Fewer HTTP Requests

2、Add an Expires or a Cache-Control Header

3、Gzip Components

4、Minify JavaScript and CSS

5、Configure ETags

6、Keep Components under 25K

下面两幅图分别是启用Minify之前和启用Minify之后网站请求时间的一个对比,可以看出启用Minify之后,资源的加载时间从250ms减少到了125ms,总共节省了50%的时间。

特性:

合并多个CSS或JavaScript文件为一个文件,减少请求数量,并且进行minify处理

使用了多个开源的库,包括 JSMin.php ,Minify CSS,Minify HTML

服务端缓存(fils/APC/Memcache),可以避免不必要的重复处理

当浏览器存在资源的缓存,返回HTTP 304 Not Modified

多个文件合并时,自动生成URI

当开启服务端缓存的时候,在一般的服务器上Minify每秒可以处理几百个并发请求

根据请求头,开启Content-Encoding: gzip。在服务端缓存开启的情况下,Minify提供gzipped 文件速度比Apache’s mod_deflate模块要快

安装

下载最新的Minify,然后解压文件到”min” 文件夹

Copy “min” 文件夹到自己网站的DOCUMENT_ROOT下,如果想要Minify在子目录下工作,看这里

使用

假设网站域名是http://example.com,Minify安装在了虚拟主机的根目录下,那么访问http://example.com/min/,我们会看到一个“Minify URI Builder”,我们可以输入需要进行合并的文件URI,如下

点击Update之后,系统会自动生成一个合并后的URI:/min/?b=js&f=jquery-a.js,jquery- b.js,jquery-c.js。如果觉得URI太长,可以通过配置文件来指定group,编辑min目录下的groupsConfig.php文件, 加入以下内容:

 

return array(
'js' => array('//js/jquery-a.js', '//js/jquery-b.js', '//js/jquery-c.js'),//相对于DOCUMENT_ROOT
);

之后就可以通过/min/?g=js来访问了

Minify在资源首次被请求的时候,会对多个文件进行合并,gzip,去除空格,注释等处理,然后会把处理的结果进行缓存,默认情况下是进行文件缓存,缓存的key以minify_开头,修改min/config.php文件,配置缓存文件存放的位置:

$min_cachePath = '/tmp';

除了通过文件进行缓存之外,Minify还支持Memcache缓存,修改min/index.php文件,加入以下代码:

 

require 'lib/Minify/Cache/Memcache.php';
$memcache = new Memcache;
$memcache->connect('localhost', 11211);
$min_cachePath = new Minify_Cache_Memcache($memcache);

Minify支持两种debug方式,一种是通过firephp调试PHP错误,修改min/config.php文件,加入以下代码:

 

$min_errorLogger = true;

另一种是通过在URL中加入flag进行错误调试,在min/config.php中加入

 

$min_allowDebugFlag = true;

之后就能以http://example.com/min/f=jquery-a.js,jquery-b.js,jquery-c.js&debug=1方式进行调试了

参考:

http://code.google.com/p/minify/wiki/UserGuide

http://www.mrclay.org/2008/09/19/minify-21-on-mrclayorg/

分享到:
评论

相关推荐

    spike-optimize:一个简单的界面,可进行高级Webpack性能优化

    一个为尖峰提供前沿性能优化的插件。 注意:该项目处于早期开发阶段,版本控制有些不同。 以获得更多详细信息。 安装 npm install spike-optimize -S 用法 目前,峰值优化提供了一个简单的界面,通过该界面,您...

    udacity-FEWD-P4

    并使用grunt来最小化文件和图像:投资组合页面优化: Google字体将阻止html dom和css cssom进程,使用了字体加载器以提高性能缩小并嵌入关键CSS以解决块渲染问题不在CRP上的异步脚本将提高CRP效率将非CRP脚本移到...

    (ZenCart CJloader包含CSS和JS文件类)yellow1912-cjloader-d268660

    CJ Loader插件包含了 PHP Minify(一个php开源项目,用于合并和压缩 CSS和JS文件),让zencart网站中的经过它优化压缩后的CSS和JS文件,缓存在浏览者的浏览器中一定时间(我看了默认配置是一年)。 2.提升开发速度 CJ ...

    WP Rocket v3.7 WordPress缓存插件+预加载链接

    新功能:延迟 JavaScript 执行-通过延迟 JavaScript 文件的加载直到用户交互(例如,滚动,单击)来提高性能 新功能:预加载链接-在用户单击链接之前预取页面,以提高感知的加载速度和用户体验) 增强功能:启用...

    html-minifier:HTML Minifier Wordpress插件的源文件

    为您的站点的源代码提供各种优化选项(例如,最小化,缓存,代码重组),以帮助满足当今的Web性能标准。 ==说明== HTML Minifier是服务器端的源代码缩小器,重组器和缓存工具,可作为PHP类和WordPress插件使用。 ...

    frontend-nanodegree-mobile-portfolio

    网站性能优化项目要运行此应用程序:1.下载该存储库或将其克隆到您的计算机。 2.在本地主机上打开文件。 通过以下方式将Index.html的PageSpeed得分优化为90以上:1.在的帮助下内嵌关键通过css。2.在的帮助下调整大小...

    Gatti-Website-Optimization-Project

    新的网站性能优化组合项目姓名:Fabio Alessandro Gatti 电子邮件: 对最终项目所做更改的文档对于 index.html 文件,这里是我所做的: -Minify html, css 和 js -Compress images -Inline css 并将 js 文件设置为 ...

    fend-web-performance:Udacity前端Web开发人员纳米学位-项目4

    为提高性能而进行的更新 网站的。 常规更改: 添加了package.json文件,以提供项目描述并确定开发依赖项。 添加了gulpfile.js文件以自动执行构建过程。 一种。 添加了gulp-uglify以减小javascript文件的大小。 b。...

    discord-clone:* Live *使用React.js + REDUX + Firebase的Discord克隆

    它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。 yarn eject 注意:这是单向操作。 eject ...

    yii2-assets-auto-compress:自动编译js + CSS + HTML

    该解决方案使您能够动态组合js和css文件来优化html页面。 这使您可以提高Google页面速​​度的性能。 该工具仅在实际站点上有效。 在当地的项目是行不通的! 安装 安装此扩展的首选方法是通过 。 无论运行 ...

    github-compare:一个Web应用程序,用于查看和比较不同的GitHub配置文件

    描述 使用React构建的Web应用程序,用于查看和比较不同的... 它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 最小化构建,文件名包含哈希。 您的应用已准备好进行部署! 有关更多信息,请参见有关的

    React-App:React代码刷新器

    它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 最小化构建,文件名包含哈希。 您的应用已准备好进行部署! 有关更多信息,请参见有关的部分。 yarn eject 注意:这是单向操作。 eject ,您将...

    redux-router

    它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。npm run eject 注意:这是单向操作。 eject ,...

    fullstack-shop:从虚拟数据站点进行API调用的无服务器应用程序

    它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。 npm run eject 注意:这是单向操作。 ...

    savakhed:萨瓦赫德

    它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。yarn eject 注意:这是单向操作。 eject ,您...

    BETCA-SHOP-ReactJS:电子商务的前端设计

    它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。 npm run eject 注意:这是单向操作。 ...

    react-admin:基于React的后台管理系统

    它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。npm run eject 注意:这是单向操作。 eject ,...

    stocks-simulation:一个模拟股票交易的APP!

    它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。yarn eject 注意:这是单向操作。 eject ,您...

    FundooNotes_FrontEnd_Reactjs:Fundoo Notes是在Reactjs中开发的免费笔记应用程序。 该服务可用于在多个设备上创建,管理和共享基于文本的备忘录,列表,图像和便笺(Frontend-Reactjs)!

    它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 最小化构建,文件名包含哈希。 您的应用已准备好进行部署! 有关更多信息,请参见有关的部分。 npm run eject 注意:这是单向操作。 eject ,您将...

    portfolio:创建第二个投资组合

    它在生产模式下正确捆绑了React,并优化了构建以获得最佳性能。 生成被最小化,并且文件名包括哈希值。 您的应用已准备好进行部署! 有关更多信息,请参见关于的部分。npm run eject 注意:这是单向操作。 eject ,...

Global site tag (gtag.js) - Google Analytics