Magento 1.9.x 速度优化基础篇

Alan

8 年前

网站速度优化和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>

设置的时间期限有：

years
months
weeks
days
hours
minutes
seconds

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给出了自己的建议：

To minify HTML, try HTMLMinifier
To minify CSS, try CSSNano and csso.
To minify JavaScript, try UglifyJS. The Closure Compiler is also very effective. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.

Google 官方的优化安装包：

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