• Jan
  • 23

Site speed boost script updated

Version 0.4 is now available. It now features:

  • An installer.Lots of people were having problems with the paths, so we now have an installer that*should* take care of everything very easily. If you need to change anything you can either just re-run the installer, or change the config.php file directly.
  • Full support for relative image paths in your CSS, in multiple CSS files. Image paths in CSS are now converted to absolute paths, so you no longer have to worry about where to cache the CSS.
  • Added support for different rel types. (rel=”alternative” and rel=”stylesheet” are cached separately)
  • Added support for conditional comments in the HEAD tags (this also fixed the problem of commented out stylesheets)

It’s available from this page: PHP Speedy

———————————–

Version 0.3 is now available.

  • Added check for gzip compression compatibilty.
  • Added check for external javascript files
  • Fixed bug in head grab function

It’s available for download here: aciddrop website speedup v0.3

You can see the new demo online here:

Many thanks to those who contributed with bugs and fixes.

———————————–

Version 0.2 Info

Following feedback on the compression class (thanks to all who commented), version 0.2 is now available.

Changes include:

  • Added support for different CSS media types
  • Fixed bug in relative file paths.
  • Improved file cleanup function
  • Changed file versioning to by date instead of by file size
  • Added check for trailing slash on cachedir

You can see the new demo online here:

In testing this new version I found a couple of gotchas:

  • Don’t use it at the same time as my Smarty output class that joins the CSS and Javascript. Apache will get confused.
  • Don’t comment out any stylesheets in your HTML if they’re not in use. The class can’t recognise that (yet!).

Also, for those wondering if it works with Wordpress, I changed the code of this Wordpress theme to use the new class.

Posted by admin in php, tutorials
49 comments
 
  • Jan
  • 21

Improve website load time by 500% with 3 lines of code

Major New Update - PHP SPEEDY: latest version available here

PHP Speedy
----------------

There are 4 relatively easy ways by which you can speed up the time it takes a browser to download a page:

  • Make fewer HTTP requests
  • Add a far-future expires header
  • Gzip your page's components
  • Minify your JavaScript, CSS and HTML

Following on from my post on joining CSS and JavaScript files, I have written a PHP script which will automatically do all of the above. All you have to do is call the following at the top of your page:

The code

PHP:
require_once('class.compressor.php'); //Include the class. The full path may be required
$compressor = new compressor('css,javascript,page');

And the following at the bottom of the page:

PHP:
$compressor->finish();

The Demo

That's it! Before I go into the details, the impatient amongst you can check out the test pages here:

The class can be downloaded here: site speed boost class download

Requirements

  • A server running at least PHP4. For JavaScript minification to work as well, PHP5+ is required.
  • You should set the folder where you are running the class from as writable

Setting basic options

Options can be set with a comma separated string as follows:

PHP:
$compressor = new compressor('css,javascript,page');

The string can contain 'css', 'javascript' and 'page' depending on which elements you would like to be compressed. Any element contained in the string will be gzip encoded and minified.

Setting advanced options

Alternatively, an array can be passed to the class constructor with an advanced set of options. This array would set all the compression options to on:

PHP:
$compressor = new compressor(array("javascript"=>array("cachedir"=>'/minify',
"gzip"=>true,
"minify"=>true,
),
"css"=>array("cachedir"=>'/wp-content',
"gzip"=>true,
"minify"=>true,
),
"page"=>array("gzip"=>true,
"minify"=>true
)
));

You can change this array to add or remove all the available options.

Note that "cachedir" should not include a trailing slash. If your CSS files contain relative links for background images, you should set the CSS cachedir to the same directory the standard CSS files are stored in.

Speed gains

On my test page the load time with the compressor turned on was generally below second, and without the compressor between 3-5 seconds. The Yahoo Yslow rating went from F(45) to A(97).

Test page with Firebug, before compression

Firebug before compression

Test page with Firebug, after compression

Firebug before compression

Test page with Yslow, before compression

Firebug before compression

Test page with Yslow, after compression

Firebug before compression

Download

Please see the updated page

Credits

The JavaScript minification uses jsmin-php.

Subscribe

If you liked this tutorial, please subscribe to my RSS feed for more of the same.

Posted by admin in php, tutorials
comments closed
 
  • Jan
  • 10

Step-by-step: how to setup MySQL Database replication

This tutorial will go through the setup of MySQL database replication. I will also talk about how to get everything working smoothly again after a server crash, or if you wish to switch databases. I will try to explain what is going on behind the scenes for every step (something I've found missing from other tutorials). This is written specifically for MySQL 5.0 on Centos 4, but should be very similar on other Linux distributions. It should also work this way with MySQL 4.x.

The theory

We have 2 servers, one of which is a Master and the other which is a Slave. We tell the Master that it should keep a log of every action performed on it. We tell the slave server that it should look at this log on the Master and whenever something new happens, it should do the same thing.

You should follow the instructions below with two console windows open - one for the Master and one for the Slave. Also note that I will capitalise the first letters of Master and Slave to indicate I am talking about the servers.

Configuring the Master

First of all, we need to create a user on the Master server that the Slave will connect as. I call mine 'slave_user'. Log into mysql as root and create the user:

mysql -u root -p (log into MySQL)

CODE:
GRANT REPLICATION SLAVE ON *.* TO 'slave_user'@'%' IDENTIFIED BY 'your_password';
FLUSH PRIVILEGES;

Now, we should edit the my.cnf file (usually in /etc/my.cnf), in the [mysqld] section and tell MySQL that it's going to be a Master:

CODE:
log-bin = /home/mysql/logs/mysql-bin.log
binlog-do-db=my_database
server-id=1

The first line tells MySQL to start writing a log, and tells it where to write the log. Make sure this directory is empty of all replication logs, especially if you're starting again after replication has already been used.

The second line chooses the database to write the log for. You should change this to your database. The third line gives the server an ID (to distinguish it from the Slave).

You should also make sure skip-networking has not been enabled.

You should now restart the Master:

CODE:
/etc/rc.d/init.d/mysqld restart

(MySQL restart commands may vary)

Configuring the Slave

Again, we should change the /etc/my.cnf of the Slave server, in the [mysqld] section:

CODE:
server-id=2
master-host=128.0.0.1
master-connect-retry=60
master-user=slave_user
master-password=slave_password
replicate-do-db=my_database

relay-log = /var/lib/mysql/slave-relay.log
relay-log-index = /var/lib/mysql/slave-relay-log.index

Line 1 gives the Slave its unique ID. Line 2, tells the Slave the I.P address of the Master server - so you need to change the I.P here.

The remaining lines set a retry limit, and tell the Slave the user, password and database it needs to replicate. We also tell the slave what to use as its relay log. It's best to set this directly, or MySQL will create the name from the hostname and should you change hostname, replication will fail.

You should also make sure skip-networking has not been enabled.

You should now restart the Slave:

CODE:
/etc/rc.d/init.d/mysqld restart

Getting the data onto the Slave

On the Master...

I'm assuming you have a live Master server, and an as yet empty Slave server. This stage depends on whether data is constantly being added to the Master. If so, we will have to prevent all database access on the Master so nothing can be added. This means your server will hang during the next step. If no data is being added to the server, you can skip this step. On the Master server, log into MySQL and do the following:

mysql -u root -p (log into MySQL)

CODE:
FLUSH TABLES WITH READ LOCK;

Now we will use mysqldump to get the data out. So, still on the Master server:

CODE:
mysqldump my_database -u root -p > /home/my_home_dir/database.sql;
gzip /home/my_home_dir/database.sql;

Make sure you change my_database to your database name, and my_home_dir to the name of your home directory (or another directory of your choosing). You wll now have a file called database.sql.gz in your home directory. This is a gziped copy of your database.

On the Slave...

Now we need to copy over the gzipped file. On the Slave run the following:

CODE:
scp root@128.0.0.1:/home/my_home_dir/database.sql.gz /home/my_home_dir/

Make sure 128.0.0.1 is the I.P of the Master. This will copy the file from the Master and put it in your home directory on the Slave. Now we just need to import into MySQL:

mysql -u root -p (log into MySQL)

CODE:
CREATE DATABASE `my_database`;

CODE:
gunzip /home/my_home_dir/database.sql.gz
mysql -u root -p my_database  </home/my_home_dir/database.sql

Ready to rumble...

On the Master...

Now we're ready to kick things off. We need to find the position the Master is at in the logs. So, log into MySQL and run the following:

mysql -u root -p (log into MySQL)

CODE:
SHOW MASTER STATUS;

This should give you an output along these lines:

CODE:
+---------------------+----------+-------------------------------+------------------+
| File                | Position | Binlog_Do_DB                  | Binlog_Ignore_DB |
+---------------------+----------+-------------------------------+------------------+
| mysql-bin.000001    | 21197930 | my_database,my_database       |                  |
+---------------------+----------+-------------------------------+------------------+

Keep that on-screen.

On the Slave...

Log into MySQL and do the following:

mysql -u root -p (log into MySQL)

CODE:
slave stop;
CHANGE MASTER TO MASTER_HOST='128.0.0.1', MASTER_USER='slave_user', MASTER_PASSWORD='slave_password', MASTER_LOG_FILE='mysql-bin.000001', MASTER_LOG_POS=21197930;
slave start;

First we stop the Slave. Then we tell it exactly where to look in the Master log file. We use the values for our previous SHOW MASTER STATUS; command on the Master. You should change 128.0.0.1 to the I.P of the Master, and change the user and password accordingly.

The Slave will now be waiting. So all that's left is to...

Back on the Master...

We shoud already be logged into MySQL, so all you have to do is:

CODE:
unlock tables;

To release the tables from lock. Note you only have to do this if you previously ran FLUSH TABLES WITH READ LOCK;

And the recovery part?

Several times it's happened to me that a server has crashed, or a hostname changed or whatever, and I've had a real trouble getting replication to work again. The solution has been to clear out the logs.

On the Slave

Clear out any replication logs from /var/lib/mysql or whever the logs are being stored, as stated in my.cnf. This usually does the trick:

CODE:
rm *relay*
rm master.info

On the Master

Again, get rid of the logs, as per where they are stored in my.cnf. For me it's the following:

CODE:
cd /home/mysql/logs/
rm -f *

This should give you a fresh start on things. You can now start again from the beginning...

Final Notes

My database doesn't use InnoDB tables - it's all MyISAM. However, the MySQL manual recommends adding this to my.cnf for InnoDB databases:

CODE:
innodb_flush_log_at_trx_commit=1
sync_binlog=1

See here for more info: http://dev.mysql.com/doc/refman/5.1/en/replication-howto-masterbaseconfig.html

References

Thanks to the following for their help:
http://dev.mysql.com/doc/refman/5.1/en/replication-howto.html
http://www.howtoforge.com/mysql_database_replication
http://www.gra2.com/article.php/setting-up-database-replication-on-mysql

Posted by admin in mysql, tutorials
22 comments
 
  • Jan
  • 03

Automatically join Javascript and CSS into a single file

Update: A script is now available to do this, and much more, here: site speed boost script. This script doesn't rely on Smarty.

One of the keys to getting your pages to load quicker is to make fewer HTTP requests. So, for example, if you have 6 javascript files it would be much quicker for you to join all the JavaScript together into one file and serve that instead. However, doing this manually is a pain. Even using a tool to join them together can be a pain. Far easier would be to set up a PHP script to automatically do it for you.

Example

This plugin can automatically turn this:

HTML:
<script src="/app/resources/js/scriptaculous-js-1.8.0/lib/prototype.js" type="text/javascript"></script>
<script src="/app/resources/js/scriptaculous-js-1.8.0/src/builder.js" type="text/javascript"></script>
<script src="/app/resources/js/scriptaculous-js-1.8.0/src/effects.js" type="text/javascript"></script>
<script src="/app/resources/js/scriptaculous-js-1.8.0/src/dragdrop.js" type="text/javascript"></script>
<script src="/app/resources/js/fastinit/fastinit.js" type="text/javascript"></script>
<script src="/app/resources/js/controllers/controller.sitewide.popup.js" type="text/javascript"></script>
<script src="/app/resources/js/beyond_the_dom/beyond_the_dom.js" type="text/javascript"></script>
<script src="/app/resources/js/newsticker/newsticker.js" type="text/javascript"></script>
<script src="/app/resources/js/image_swapper/image_swapper.js" type="text/javascript"></script>
<script src="/app/resources/js/NiftyCube/niftycube.js" type="text/javascript"></script>
<script src="/app/resources/js/validation/validation.js" type="text/javascript"></script>
<script src="/app/resources/js/flash_detect/flash_detect.js" type="text/javascript"></script>
<script src="/app/resources/js/swfobject/swfobject.js" type="text/javascript"></script>

into this:

HTML:
<script type="text/javascript" src="/app/resources/cache/03e8cd4518c686feb8e18fa1eb329abb.js"></script>

Smarty

This script is an output filter for Smarty, a template engine for PHP. If you don't already use Smarty, the script can be adapted and used with PHP's output buffer functions. If you do use Smarty, setting this up with be a breeze.

Installing the Plugins

You should call

PHP:
$smarty->load_filter('output','join_javascript');
$smarty->load_filter('output','join_css');

from within your application. Then just drop the plugin files into your Smarty plugins directory. Make sure you specify a "cachedir" in the plugins. This is the directory where the joined files will be stored. It should be writeable by the server.

Joining Javascript

Your JavaScript links should contain src and type tags. For example:

HTML:
<script src="/wp-content/themes/leon/libs/scriptaculous-js-1.8.0/lib/prototype.js" type="text/javascript"></script>
<script src="/wp-content/themes/leon/libs/nifty_corners/nifty.js" type="text/javascript"></script>

This is the only requirement for the HTML of your page.

The script will take the JS within the files, join it together, and create a new file. The new file will be saved in the directory you specify, and a new link to it created.

Joining CSS

Your JavaScript links should contain href and type tags. For example:

HTML:
<link href="/wp-content/themes/leon/libs/nifty_corners/niftyCorners.css" type="text/css" rel="stylesheet" />

Again, the script will automatically join together all files with the text/css type tag.

Note that when you make a change to your original CSS or JavaScript files, you will have to delete the cached file.

Download

You can download the plugin files here: http://aciddrop.com/aciddrop/aciddrop_output_filters.zip

Examples

I use this technique on a number of sites, including this one. Check out the source of pitch-invasion.com, simplifydiy.com and purrl.net for examples.

Posted by admin in php, tutorials
11 comments