MPC

For the last week or so, I’ve been reading up on ways to make my webpages load faster and did a lot of testing. I'll save you the hassle of trying to figure this stuff out, and just tell you what to do (Or at least, what seemed to work well for me).

Please note that the performance tweaks in section 5 below require an .htaccess file so if you’re on a windows server, this will not work for you. I know there's other ways to make those tweaks without using .htaccess, but you'll need to research this on your own.

1. ****BACKUP YOUR FILES*** Just in case! If something doesn't go as planned and you're confused as to how to fix something, having a backup to restore is a good idea. No need to back up a database is you use a CMS as this won't affect it. But do backup your CSS files, JS files, and template files.

2. Start by downloading some tools. You’ll need:
• The latest firefox browser: Firefox Browser | Faster & Safer Internet | Free Download
• firebug add on: Firebug
• Google’s Speed Page add on: Install Page Speed
• Yahoo’s Yslow add on: https://addons.mozilla.org/en-US/firefox/addon/5369

3. Visit your site’s hompage with firefox. Hit F12 to turn on the firebug. Go to the pagespeed tab and click “analyze performance”. You’ll get a score plus a bunch of information things you can improve. Have a quick look at these, then repeat the process with Yslow. Both of these tools give you similar information. Now you know how to test your stuff. For the purpose of this blog post, I’m just going to stick with “Speed Page”.

4. Simple Speed Page (SP) elements you can improve – These are common errors that are easily corrected. This applies to windows servers as well as there’s no need to use .htaccess for these performance tweaks:

• Specify image dimensions – This is the easiest thing to fix. SP will list the images where this information is not specifed, and will also list the actual image size. All you need to do is edit your html code and include height and width parameters in your image tags. As an example, you would go from something like
  PHP Code:

  <img src="domain.com/images/file.gif" /> to <img src="domain.com/images/file.gif" width="120" height="60" /> 

  Telling the browser image sizes saves time because it avoids the unecessary requirement for the browser to make the calculation itself.
• Optimize images – This simply means to compress your images as much as possible to minimize file size. Again PS does all of this for you. It will provide URLs to the compressed versions. Grab those, upload them to your server to replace the non optimized files. WARNING – PS converts gif to png and jpg to jpeg. You’ll need to edit your HTML and template file (css) to reflect the new file extensions.
• Parallelize downloads across hostnames – I created a couple of subdomains to send my template images. The idea is that most browsers have a cap of only being able to download 2 files at once per domain. By creating subdomains, it’s possible to transfer more than two images at the same time. So create like 6 subdomains (1.domain.com, 2.domain.com, etc). Create an images folder in each subdomain. Try to divide up your template images equally (in terms of file size) across yoru subdomains. Each subdomain should AT LEAST send 2 images. So let’s pretend that your template uses 20 images and you have 5 subdomains, try to feed 4 images per subdomain. You will need to edit your main CSS file to reflect the correct paths for each images.
• Combine external CSS – Instead of having the browser request multiple CSS files, put all your CCS into a single file. That way, you deliver the CSS content with a single request. If you use word press, some add ons will have their own CSS. You need to copy all of it into your own main CSS file, then edit the component files to make sure the code doesn’t add a redundant <link rel="stylesheet" …>
• Minify CSS – Minify simply means make your code as compact as possible. Space characters aren’t required. Comments aren’t required. All of these add to the file size. A good practice is to save a non minified version of your CSS file in case you do need access to comments and to have something readable, but do get your page to load up the minified version. How do you create one? Quite simple! Go to Clean CSS - A Resource for Web Designers - Optmize and Format your CSS and just past in your non minified CSS code, select the options you want, click “process CSS” and the minified code will be generated at the bottom. You can copy this over your current CSS file content (Make a back up of it before, just in case). A cool tool that will combine all the CSS files into one is Google’s Minify minify - Project Hosting on Google Code This app combines all CSS files into one and minifies them, without touching the originals.
• Combine external JS and Minify JS – This is the exact same principle as what I just explained for CSS. It’s more efficient to call a single JS file than to call 10. You may want to attempt to combine all of those into one. You can minify JS with this simple tool (copy and paste your code it, click “compress javascript”, copy and paste the result back). Minify Javascript Online / Online JavaScript Packer. Again, Google’s Minify Tool can take care of all of this for you. minify - Project Hosting on Google Code

5. Advanced PS elements you can improve (these require using .htaccess)

• Enabling Compression – There’s more than one way to do this, but I am doing it via .htaccess. First, I was looking into my cpanel and noticed I had a “optimize website” menu in the advanced tools. I turned on “compress all content” which is in fact probably overkill. I could have used the mime type to specify what content to compress. For instance, if some image types are already compressed, turning compression on for those images might actually slow things down. This is something I’ll need to look into further.
• I then made the following additions to my .htaccess file from the root of my website:
  
  PHP Code:

  # Learning Apache to understand file type by extention: cascade styles and javascripts.
# Usually it "*.css" and "*.js" files.
AddType text/javascript .js
AddType text/css .css

# Some performance trick for PHP
<IfModule mod_php5.c>
#comment out the next line if on wordpress (magic quotes)
php_value magic_quotes_gpc 0
php_value register_argc_argv 0
php_value register_globals 0
</IfModule>

# file we pass throughout "mod_deflate"
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript 

• Gzip compression on your CSS file using php: Create a new file called gzip-css.php in the same folder where you have your main CSS file. gzip-css.php uses the following code:
  
  PHP Code:

  <?php 
ob_start ("ob_gzhandler");
header("Content-type: text/css; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " . 
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>
• Create a .htaccess file in that same folder with the following:
  
  PHP Code:

  AddHandler application/x-httpd-php .css
php_value auto_prepend_file gzip-css.php
php_flag zlib.output_compression On 

• Gzip compression on your JS file using php: Create a new file called gzip-js.php in the same folder where you have your main JS file. gzip-js.php uses the following code:
  
  PHP Code:

  <?php 
ob_start ("ob_gzhandler");
header("Content-type: text/javascript; charset: UTF-8");
header("Cache-Control: must-revalidate");
$offset = 60 * 60 ;
$ExpStr = "Expires: " . 
gmdate("D, d M Y H:i:s",
time() + $offset) . " GMT";
header($ExpStr);
?>
• Create a .htaccess file in that same folder with the following:
  
  PHP Code:

  AddHandler application/x-httpd-php .js
php_value auto_prepend_file gzip-js.php
php_flag zlib.output_compression On 

• Cache expiry on your files – This setting tells the browser to store some files locally so it doesn’t have to reload them every time a new page is requested. This is particularly useful for template related files (images and CSS) as they are static. If you prevent the browser from having to reload all those image files every time visitors browse your pages, you make things faster for them because they will load to files using a copy stored on their hard drive.
  
  Remember the subdomains we created earlier to store image files? We’re going to create an .htaccess in each image folder of each subdomain. The .htaccess should contain the following code:
  
  PHP Code:

  ExpiresActive On
ExpiresByType image/gif "A2678400"
ExpiresByType image/jpeg "A2678400"
ExpiresByType image/png "A2678400"
ExpiresByType image/bmp "A2678400" 

  The syntax used is A + number of seconds before cache expires.Currently this is set to a month. If you want a day use 86400 (60 sec x 60 mins x 24 hrs). A week is 604800 (60 sec x 60 mins x 24 hrs x 7 days), and so on. Tempate files that aren’t expected to change should be set to a month or more.
  
  The .htaccess file located in the folder of your main CSS file should contain
  PHP Code:

  ExpiresActive On
ExpiresByType text/css "A2678400" 

  The .htaccess file located in the folder of your main JS file should contain
  
  PHP Code:

  ExpiresActive On
ExpiresByType application/x-javascript "A2678400" 


That’s basically what I’ve looked at so far, and a few things I mentioned above are not fully implemented yet on my site. Still, my PS score went from 60/100 to almost 90/100 with these tweaks. I am really not an expert at all with this .htaccess stuff and it's quite possible that I have some code that duplicates things, or doesn’t do anything! If anyone can provide feedback.
If you find this helpfull and want to thank me, throw me a link! xhttp://www.mypokercorner.com on "Poker Strategy". Thanks!

EDIT: One thing I forgot to mention - CSS Sprites. We all use a lot of icons to represent poker rooms. For must of us, each of these icons is a seperate image that must be loaded. This generates an HTTP request for EACH image you want to load, and the more request you send, the slower your page will load. The idea of CSS sprites is that you woudl instead have all these icons as part of one image and you would use CSS the specify which section of the image to display for each icon. In other words, if you had say 20 poker rooms with 20 icons, this method would load up a single image (so 1 HTTP request insetad of 20) and the CSS would "show" a portion of the image for each icon. I find this very interesting. In fact, one could develop an entire site template using this method. More on this, and example codes at http://css-tricks.com/css-sprites/. I'm very interested in this. I'll play around with this in the future.