PHPMotion 性能调优

http://www.delishost.com/2012/01/tuning-your-phpmotion-theme-for-performance/

 

Tuning your PHPmotion theme for performance

Posted on Friday January 20th, 2012 by Ben - DH

Nothing is worse then having to wait for a website to load and speed is even more important when your website has huge competitors such as Youtube and Dailymotion. Here we’ll take you through the steps to making your PHPmotion website load faster.

Note: These changes are based on the default theme, but should be applicable to custom themes with a few minor adjustments. Tests are measured on the home page, but will improve the entire site.

Scores are measured with the excellent YSlow! plugin for Firefox and Chrome .

The Test Case: phpmotionperformance.delishost.com

• Default PHPmotion V3.5 installation
• Some uploaded content to fill the site.
• Total page size: 465KB
• YSlow! Rating: C
• Page loaded in 6.40s

Warning: Always keep copies and backups of any files you modify!

Step 1: Host it close-by.

The closer your website is to your visitors the better, latency is reduced meaning files are transferred faster as the delay between connecting to the server and actually receiving the file is reduced.

If your main visitors are in the USA, then choosing a server there is an obvious choice. The same goes for hosting in Europe, having your site hosted with the correct host can make a noticeable difference to your end users. We offer fast, reliable hosting in European datacentres .

Step 2: Optimize your javascript and CSS files

To speed a site up we need to minimize the amount of bytes that are actually transferred from the server to the visitor’s browser. To do so we can compress all the javascript and CSS files that aren’t currently optimized.

Useful online tools for compressing files include:

• Online YUI Compressor (Javascript & CSS)
• Google Closure Compiler Service (Javascript only)
• CSS Compressor (CSS only)

This is a fairly simple step, simply search through your site for javascript and css files. The main places to look include:

• javascripts/
• css/
• themes/yourthemes/css/

Now upload these files one by one to the appropriate site from the above links. Make sure you’re not trying to compress an already compressed file. You can check this by opening the file, if everything looks like a solid block or a single line of text then it is already compressed.

Download their optimized versions and replace the file on the website.

Remember to keep a backup of each file and test the site functions after each change. As compressing can occasionally break Javascript functions so parts of your site will appear to stop working.

Step 3: Using DEFLATE to compress content

DEFLATE is an excellent way to reduce the amount of content that is sent to the browser. It works by compressing non binary files and sending the compressed versions to the visitor. Their browser then uncompresses and loads the content.

Enabling DEFLATE is pretty simple and definitely worth it. Open your .htaccess file and paste the following:

View Raw Code ?

1. # DEFLATE
2. <IfModule mod_deflate.c>
3. AddOutputFilterByType DEFLATE application/x-javascript application/javascript text/javascript text/html text/plain text/css text/xml
4. </IfModule>
5. # End DEFLATE

Now upload your new .htaccess file and clear your browser cache (otherwise YSlow! may incorrectly report that it isn’t working). The total page size (no other changes) is now 218KB (53% savings! )

Step 4: Building a CDN

We’ll now concentrate on setting up a basic CDN. Many browsers limit parallel HTTP requests to two by domain. The default home page for our test site has 40 components which can only be downloaded 2 by 2. Setting up CDNs will allow us to multiple the maximum number of parallel requests and thus noticeably speed up the entire website.

In the following examples replace example.com with your website domain name and /phpmotionpath/ with the path to your PHPmotion installation.

Here I will walk you through how to create the following:

• theme.example.com for theme stylesheets (themes/yourtheme/css/)
• css.example.com for non theme related stylesheets (css/)
• js.example.com for javascript files (js/)
• thumbs.example.com for video thumbnails (uploads/thumbs/)

You will be able to take this further if you wish, but these should already help load times on your website quite a bit.

To continue you will need a code editor that is capable of doing a search/replace across files otherwise you will spend a lot of time going through the files.

To make updates to CDN names easier in the future I have created a PHP file which will hold all CDN names in an array for easy re-use in the templates. Copy and save the following code into addons/dh-cdn.php .

View Raw Code ?

1. <?php
2. /**
3. * @author Ben Newman http://www.delishost.com
4. *
5. * This file simply holds variables for the different cdn names you can use in
6. * your themes. It allows you to add/modify CDNs without having to go through all
7. * your templates.
8. *
9. * You can access these through in the templates like so:
10. * [var.asset_cdn.theme]
11. */
12. $asset_cdn = array(
13. 'theme' => 'http://theme.example.com ', // To load theme assets
14. 'cdn' => 'http://cdn.example.com ', // Mirrors the normal PHPmotion path
15. 'js' => 'http://js.example.com ', // Loads the javascript files
16. 'videothumbs' => 'http://thumbs.example.com ', // Loads thumbs from uploads/thumbs/
17. );

Upload this file to your server after making sure to enter the correct addresses for each one. Then open classes/config.inc.php and add the following on a new line before ?> .

View Raw Code ?

1. include installation_paths().'/addons/dh-cdn.php';

Theme CSS CDN

Create a subdomain called theme.example.com that points to /phpmotionpath/themes/yourtheme . Once this is done you can test it is working by trying to load http://theme.example.com/css/main.css in your browser. If it shows everything is correct then you can continue.

Note: You will need to update this if you switch themes in the future.

Editing themes/yourtheme/templates/main_1.htm – search for the following strings:

View Raw Code ?

1. [var.base_url]/themes/[var.user_theme]

And replace with:

View Raw Code ?

1. [var.asset_cdn.theme]

Default CDN

The following CDN will point directly to the same directory as your PHPmotion installation. This allows us to load any PHPmotion files over the CDN. Create a subdomain cdn.example.com that points to /phpmotionpath/ .

You will now be able to load any assets you like by simply replacing the base url with this CDN one. Most strings that need editing are in themes/yourtheme/templates/main_1.htm .

View Raw Code ?

1. <link href="css/rating_style.css" rel="stylesheet" type="text/css" media="all">
2. <link href="css/thickbox.css" rel="stylesheet" type="text/css" media="screen">
3. <link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all">
4. <link href="javascripts/jquery.jcarousel.css" rel="stylesheet" type="text/css" media="all">

Becomes:

View Raw Code ?

1. <link href="[var.asset_cdn.cdn]/css/rating_style.css" rel="stylesheet" type="text/css" media="all">
2. <link href="[var.asset_cdn.cdn]/css/thickbox.css" rel="stylesheet" type="text/css" media="screen">
3. <link href="[var.asset_cdn.cdn]/greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all">
4. <link href="javascripts/jquery.jcarousel.css" rel="stylesheet" type="text/css" media="all">

Leave the javascripts/ one as we’ll use the js CDN for this one.

Javascript CDN

Create a subdomain js.example.com that points to /phpmotionpath/javascripts/ . This will allow you to load most of the javascript files. Using your search/replace function use these two to setup the js cdn.

• Search: “javascripts/
• Replace with: “[var.asset_cdn.js]/

And:

• Search: “[var.base_url]/javascripts/
• Replace with: “[var.asset_cdn.js]/

Video thumbs CDN

Create a subdomain thumbs.example.com that points to /phpmotionpath/uploads/thumbs/ . We’ll now be able to load all the video thumbs over this CDN.

Search for this string in your template files: "uploads/thumbs/" and also "[var.base_url]/uploads/thumbs/
Replace with: "[var.asset_cdn.videothumbs]/

Step 5: Expires

The mod_expires Apache module allows you to set how long certain elements should stay cached in a visitors browser. This is a great way to speed up your website as browsers will know not to bother requesting certain content until it has expired.

You have to be careful when using this as changes you make to any cached content will be ignored. You can get around this by appending ?v=1 to the end of your elements and updating the number each time you make a change to that element. The browser will then think that it is a new item and will re-download it.

We’ll set up some basic Expires rules in the /phpmotionpath/.htaccess file.

View Raw Code ?

1. # Expires
2. <IfModule mod_expires.c>
3. <FilesMatch "\.(gif|png|jpe?g|js|css|ico|swf)$">
4. ExpiresActive On
5. ExpiresDefault "access plus 1 week"
6. </FilesMatch>
7. </IfModule>
8. # End Expires

As you can probably tell from the above example your browser will know to cache the files one week after their first access. It is a good idea to only set this up once you’ve finished any theme changes to your website otherwise you will have to append ?v=X to all your assets to force them to be flushed from your browser cache.

Step 6: Advanced Optimisations

There are many other ways to improve load performance, but they require more work and knowledge of coding and server management. Here are a few things that you can look into to further optimize performance.

Image sprites

Image sprites are images (usually small theme images) that are grouped together into a single image file then used within the layout with css backgrounds, changing the background-position to display the right image in the right place. If your theme uses a lot of background images this is a fairly simple way to reduce http requests – providing you have a solid knowledge of CSS that is.

• CSS Sprites
• W3 Schools CSS Sprites

Proxy Cache

If you have a VPS or dedicated server you can setup a proxy cache server which will create and cache pages as they are accessed to majorly improve performance as your PHP files won’t even be accessed. This would require some configuration to avoid pages becoming stale and out of date.

• Varnish Cache
• Squid Cache

Conclusion

Here is the final result after applying the above steps to the same page quite an improvement don’t you agree?

• Total page size: 217KB
• YSlow! Rating: A
• Page loaded in 4.43s
• Handles more parallel HTTP requests for assets
• Decreases bandwidth usage
• Caches assets in the browser with the mod_expires

Page load time has been shortened by a few seconds (the gain will vary depending on the page). Bandwidth usage will be reduced and thanks to caching less http requests mean less server traffic. Caching is also improved which means that repeat visits and any other pages loaded will be much faster.

I hope you found this post useful. If you did please be kind enough to share it. Feel free to leave any questions or suggestions you might have in the comments below.