专属福利:购买阿里云服务器(及其他阿里云产品)可以用我的阿里云大使专属推荐链接:八折优惠。
主要介绍个人博客trinea.cn的性能优化,优化内容对其他网站同样适用。个人博客采用的是wordpress模板,所以优化方式对其他wordpress网站同样适用。更多优化可见:
2015 年 5 月 网站服务器迁移到 DigitalOcean
Ps:购买阿里云服务器(或其他阿里云产品)可以用我的阿里云大使专用链接:八折优惠。
1、测试工具
主要使用百度统计的网站速度检测工具和google的pagespeed,网站各地访问速度测试使用webkaka。
调优前,百度检测结果为:
可以看出网页所有内容加载需要20多秒!!_!!
PS:需要说明下,因为这次的优化大都属于前端优化,不涉及后台逻辑优化,对于后台逻辑优化测试工具从简单的apache ab,到高级的jmeter和昂贵的loadrunner,本文不做叙述。
2、调优内容及方式
根据测试工具的优化建议进行优化,主要调优内容包括:合并Js、合并Css、使用Css Sprite,启用Gzip压缩,其他元素压缩,使用浏览器缓存。
调优方式包括:
(1) 安装WP Super Cache插件 功能强大,主要用于生成html文件后续访问直接通过apache访问而不需要通过php脚本处理
(2) 安装Better WordPress Minify插件 用于css和js压缩
(3) 修改.htaccess文件,.htaccess文件是Apache服务器中的一个配置文件,它负责相关目录下的网页配置。通过htaccess文件,可以帮我们实现:配置网页expires、网页301重定向、自定义404错误页面、改变文件扩展名、允许/阻止特定的用户或者目录的访问、禁止目录列表、配置默认文档等功能。内容为:
# BEGIN W3TC Browser Cache, Used by http://www.trinea.cn <IfModule mod_mime.c> AddType text/css .css AddType application/x-javascript .js AddType text/x-component .htc AddType text/html .html .htm AddType text/richtext .rtf .rtx AddType image/svg+xml .svg .svgz AddType text/plain .txt AddType text/xsd .xsd AddType text/xsl .xsl AddType text/xml .xml AddType video/asf .asf .asx .wax .wmv .wmx AddType video/avi .avi AddType image/bmp .bmp AddType application/java .class AddType video/divx .divx AddType application/msword .doc .docx AddType application/vnd.ms-fontobject .eot AddType application/x-msdownload .exe AddType image/gif .gif AddType application/x-gzip .gz .gzip AddType image/x-icon .ico AddType image/jpeg .jpg .jpeg .jpe AddType application/vnd.ms-access .mdb AddType audio/midi .mid .midi AddType video/quicktime .mov .qt AddType audio/mpeg .mp3 .m4a AddType video/mp4 .mp4 .m4v AddType video/mpeg .mpeg .mpg .mpe AddType application/vnd.ms-project .mpp AddType application/x-font-otf .otf AddType application/vnd.oasis.opendocument.database .odb AddType application/vnd.oasis.opendocument.chart .odc AddType application/vnd.oasis.opendocument.formula .odf AddType application/vnd.oasis.opendocument.graphics .odg AddType application/vnd.oasis.opendocument.presentation .odp AddType application/vnd.oasis.opendocument.spreadsheet .ods AddType application/vnd.oasis.opendocument.text .odt AddType audio/ogg .ogg AddType application/pdf .pdf AddType image/png .png AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx AddType audio/x-realaudio .ra .ram AddType application/x-shockwave-flash .swf AddType application/x-tar .tar AddType image/tiff .tif .tiff AddType application/x-font-ttf .ttf .ttc AddType audio/wav .wav AddType audio/wma .wma AddType application/vnd.ms-write .wri AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw AddType application/zip .zip </IfModule> <IfModule mod_expires.c> ExpiresActive On ExpiresByType text/css A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType text/x-component A31536000 ExpiresByType text/html A3600 ExpiresByType text/richtext A3600 ExpiresByType image/svg+xml A3600 ExpiresByType text/plain A3600 ExpiresByType text/xsd A3600 ExpiresByType text/xsl A3600 ExpiresByType text/xml A3600 ExpiresByType video/asf A31536000 ExpiresByType video/avi A31536000 ExpiresByType image/bmp A31536000 ExpiresByType application/java A31536000 ExpiresByType video/divx A31536000 ExpiresByType application/msword A31536000 ExpiresByType application/vnd.ms-fontobject A31536000 ExpiresByType application/x-msdownload A31536000 ExpiresByType image/gif A31536000 ExpiresByType application/x-gzip A31536000 ExpiresByType image/x-icon A31536000 ExpiresByType image/jpeg A31536000 ExpiresByType image/jpg A31536000 ExpiresByType application/vnd.ms-access A31536000 ExpiresByType audio/midi A31536000 ExpiresByType video/quicktime A31536000 ExpiresByType audio/mpeg A31536000 ExpiresByType video/mp4 A31536000 ExpiresByType video/mpeg A31536000 ExpiresByType application/vnd.ms-project A31536000 ExpiresByType application/x-font-otf A31536000 ExpiresByType application/vnd.oasis.opendocument.database A31536000 ExpiresByType application/vnd.oasis.opendocument.chart A31536000 ExpiresByType application/vnd.oasis.opendocument.formula A31536000 ExpiresByType application/vnd.oasis.opendocument.graphics A31536000 ExpiresByType application/vnd.oasis.opendocument.presentation A31536000 ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000 ExpiresByType application/vnd.oasis.opendocument.text A31536000 ExpiresByType audio/ogg A31536000 ExpiresByType application/pdf A31536000 ExpiresByType image/png A31536000 ExpiresByType application/vnd.ms-powerpoint A31536000 ExpiresByType audio/x-realaudio A31536000 ExpiresByType image/svg+xml A31536000 ExpiresByType application/x-shockwave-flash A31536000 ExpiresByType application/x-tar A31536000 ExpiresByType image/tiff A31536000 ExpiresByType application/x-font-ttf A31536000 ExpiresByType audio/wav A31536000 ExpiresByType audio/wma A31536000 ExpiresByType application/vnd.ms-write A31536000 ExpiresByType application/vnd.ms-excel A31536000 ExpiresByType application/zip A31536000 </IfModule> <IfModule mod_deflate.c> <IfModule mod_setenvif.c> BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html </IfModule> <IfModule mod_headers.c> Header append Vary User-Agent env=!dont-vary </IfModule> <IfModule mod_filter.c> AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon </IfModule> </IfModule> <FilesMatch "\.(css|js|htc|CSS|JS|HTC)$"> <IfModule mod_headers.c> Header set Pragma "public" Header append Cache-Control "public, must-revalidate, proxy-revalidate" </IfModule> FileETag MTime Size <IfModule mod_headers.c> Header set X-Powered-By "W3 Total Cache/0.9.2.4" </IfModule> </FilesMatch> <FilesMatch "\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml|HTML|HTM|RTF|RTX|SVG|SVGZ|TXT|XSD|XSL|XML)$"> <IfModule mod_headers.c> Header set Pragma "public" Header append Cache-Control "public, must-revalidate, proxy-revalidate" </IfModule> FileETag MTime Size <IfModule mod_headers.c> Header set X-Powered-By "W3 Total Cache/0.9.2.4" </IfModule> </FilesMatch> <FilesMatch "\.(asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip|ASF|ASX|WAX|WMV|WMX|AVI|BMP|CLASS|DIVX|DOC|DOCX|EOT|EXE|GIF|GZ|GZIP|ICO|JPG|JPEG|JPE|MDB|MID|MIDI|MOV|QT|MP3|M4A|MP4|M4V|MPEG|MPG|MPE|MPP|OTF|ODB|ODC|ODF|ODG|ODP|ODS|ODT|OGG|PDF|PNG|POT|PPS|PPT|PPTX|RA|RAM|SVG|SVGZ|SWF|TAR|TIF|TIFF|TTF|TTC|WAV|WMA|WRI|XLA|XLS|XLSX|XLT|XLW|ZIP)$"> <IfModule mod_headers.c> Header set Pragma "public" Header append Cache-Control "public, must-revalidate, proxy-revalidate" </IfModule> FileETag MTime Size <IfModule mod_headers.c> Header set X-Powered-By "W3 Total Cache/0.9.2.4" </IfModule> </FilesMatch> # END W3TC Browser Cache # BEGIN W3TC Page Cache core <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^(.*\/)?w3tc_rewrite_test$ $1?w3tc_rewrite_test=1 [L] RewriteCond %{HTTP:Accept-Encoding} gzip RewriteRule .* - [E=W3TC_ENC:_gzip] RewriteCond %{REQUEST_METHOD} !=POST RewriteCond %{QUERY_STRING} ="" RewriteCond %{HTTP_HOST} =mywebsiteurl.com RewriteCond %{REQUEST_URI} \/$ [OR] RewriteCond %{REQUEST_URI} (sitemap(_index)?\.xml(\.gz)?|[a-z0-9_\-]+-sitemap([0-9]+)?\.xml(\.gz)?) [NC] RewriteCond %{REQUEST_URI} !(\/wp-admin\/|\/xmlrpc.php|\/wp-(app|cron|login|register|mail)\.php|\/feed\/|wp-.*\.php|index\.php) [NC,OR] RewriteCond %{REQUEST_URI} (wp\-comments\-popup\.php|wp\-links\-opml\.php|wp\-locations\.php) [NC] RewriteCond %{HTTP_COOKIE} !(comment_author|wp\-postpass|wordpress_\[a\-f0\-9\]\+|wordpress_logged_in) [NC] RewriteCond %{HTTP_USER_AGENT} !(W3\ Total\ Cache/0\.9\.2\.4) [NC] RewriteCond "%{DOCUMENT_ROOT}/wp-content/w3tc/pgcache/%{REQUEST_URI}/_index%{ENV:W3TC_UA}%{ENV:W3TC_REF}%{ENV:W3TC_SSL}.html%{ENV:W3TC_ENC}" -f RewriteRule .* "/wp-content/w3tc/pgcache/%{REQUEST_URI}/_index%{ENV:W3TC_UA}%{ENV:W3TC_REF}%{ENV:W3TC_SSL}.html%{ENV:W3TC_ENC}" [L] </IfModule> # END W3TC Page Cache core # BEGIN WordPress <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.php$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] </IfModule>
(4) 去除不必要的import
3、调优结果
调优后,百度检测结果为,看到网页所有内容加载完成只需要4秒,访问速度有原来的5倍左右:
网站空间在美国洛杉矶机房,调优后
全球访问的平均下载时间为1.256s,略高于月光博客,远超coolshell.cn
全国访问的平均下载时间为1.545s,与月光博客访问速度还有一定差距,跟酷壳差不多持平
专属福利:购买阿里云服务器(及其他阿里云产品)可以用我的阿里云大使专属推荐链接:八折优惠。
1
用了 速度提升很快 。
哈哈