Alan Hou的个人博客

Magento 1.9.x 速度优化基础篇

网站速度优化和SEO一样属于营销的基本组成部分,常用的速度优化工具有:

Pingdom Website Speed Test
WebPagetest
GTmetrix
think with Google
YSlow – Official Open Source Project Website
Which loads faster?

– PageSpeed Insights

Magento实际上已经内置了一些优化的代码,下面我们以PageSpeed Insights来一一进行优化处理,这里Alan的一个站点初始分值Mobile为15分,Desktop为26分



1.Leverage browser caching
这项修改Mobile约提高21分,Desktop提高23分
首先进入System>Configuration>Developer修改JavaScript Settings和CSS Settings部分

然后进入到.htaccess中修改如下版块(以下配置仅供参考,可根据实际情况进行调整)

<IfModule mod_expires.c>

############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires
    ExpiresActive On
    ExpiresDefault "access plus 1 year"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType text/css "access 1 month"
    ExpiresByType application/javascript "access plus 1 month"

</IfModule>

设置的时间期限有:

2.Enable compression
这项修改Mobile约提高13分,Desktop提高17分

<IfModule mod_deflate.c>

############################################
## enable apache served files compression
## http://developer.yahoo.com/performance/rules.html#gzip

    # Insert filter on all content
    SetOutputFilter DEFLATE
    # Insert filter on selected content types only
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript

    # Netscape 4.x has some problems...
    BrowserMatch ^Mozilla/4 gzip-only-text/html

    # Netscape 4.06-4.08 have some more problems
    BrowserMatch ^Mozilla/4\.0[678] no-gzip

    # MSIE masquerades as Netscape, but it is fine
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

    # Don't compress images
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

    # Make sure proxies don't deliver the wrong content
    Header append Vary User-Agent env=!dont-vary

</IfModule>

以上两条优化后网站Mobile为49分,Desktop为68分

显然还有很大的优化空间

 

3.Eliminate render-blocking JavaScript and CSS in above-the-fold content

理论上在script标签里添加async或者将代码从head中向即可解决这一问题,,如未合并js前,可以添加params参数,如:

<params>defer</params>
<params>async</params>

实际上在Magento中这部分需要对代码进行相对比较大的修改,网上有一个插件,Alan在测试时并未带来分值上的提升,感兴趣的朋友可以试一下:

https://github.com/gaiterjones/magento-pagespeed
4.Optimize images

对于图片的优化可以使用如下网站对图片进行压缩,或者使用cdn存放图片对图片加载进行提速
https://tinypng.com/
http://www.tuhaokuai.com/

 

至于其它的Minify的建议,Google给出了自己的建议:

Google 官方的优化安装包:

https://developers.google.com/speed/pagespeed/module/

退出移动版