Andreas – Joakal

Validating to W3 standards

I have currently validated all my code to by XHTML 1.0. W3 Validator. To validate, submit a site and check the suggested tips and links. If that's not enough, the wide available documentation online of the standard made the job a breeze!

YSlow Grade A drive

1. Use firefox
2. Add firebug required plug-in.
3. Add YSlow

I was determine to get the best grade possible. Joakal.com initially started at 86 with a grade B (YSlow V2) for most sections. The problem areas to fix:

• Use a Content Delivery Network (CDN)
• Add Expires Headers
• Compress components with gzip
• Configure entity tags (ETags)
• Use cookie-free domains

Use a Content Delivery Network (CDN)

Unfortunately, this requires me to have servers dispersed across multiple countries to more rapidly deliver cached content. So I'll be skipping this.

Add Expires Headers

Initially, this wouldn't work until I came across the solution below

To the .htaccess file in your root, eg joakal.com/.htaccess. As for the line for auto_prepend_file, you need to add the DOCUMENT_ROOT which can be found by uploading a file with phpinfo(); at beginning.

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

Source: Add Far Future Expires to Speed Up Your Site

Compress components with gzip

The hardest one. I came across many solutions, but my server did not come with mod_gzip for this tip or I didn't want to rename all my files to use zlib. Some flat out didn't work. After some searches and refreshes, I came across this:

.htaccess file

<FilesMatch "\.(txt|html|htm|php)">
ForceType application/x-httpd-php
php_value auto_prepend_file /f1/content/joakal/public/gzip-enable.php
</FilesMatch>

Place gzip-enable.php in your root too

 <?php if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip')){
 // initialize ob_gzhandler function to send and compress data
ob_start ("ob_gzhandler");
} else {
ob_start();
} ?>

Note: There must not be any space before and after the <?php ?>

My site size has changed as I managed to get content size from 91K to 81K.

CSS and JavaScript

For CSS and JavaScript:

.htaccess file

<FilesMatch "\.(css)">
ForceType application/x-httpd-php
ExpiresActive On
ExpiresDefault "access plus 1 year"
php_value auto_prepend_file /f1/content/joakal/public/gzip-css.php
</FilesMatch>
<FilesMatch "\.(js)">
ForceType application/x-httpd-php
php_value auto_prepend_file /f1/content/joakal/public/gzip-js.php
</FilesMatch>

For gzip-css.php in root.

<?php
    // initialize ob_gzhandler function to send and compress data
    ob_start ("ob_gzhandler");
    // send the requisite header information and character set
    header ("Content-type: text/css; charset: UTF-8");
    // check cached credentials and reprocess accordingly
    header ("cache-control: must-revalidate");
    // set variable for duration of cached content
    $offset = 365 * 24 * 60 * 60;
    // set variable specifying format of expiration header
    $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
	$gmt_mtime = gmdate('D, d M Y H:i:s', time() + $offset ) . ' GMT';
	header("Last-Modified: " . $gmt_mtime );
    // send cache expiration header to the client broswer
    header ($expire);
    ?>

For gzip-js.php in root.

<?php
    // initialize ob_gzhandler function to send and compress data
    ob_start ("ob_gzhandler");
    // send the requisite header information and character set
    header ("content-type: text/javascript; charset: UTF-8");
    // check cached credentials and reprocess accordingly
    header ("cache-control: must-revalidate");
    // set variable for duration of cached content
    $offset = 365 * 24 * 60 * 60;
    // set variable specifying format of expiration header
    $expire = "expires: " . gmdate ("D, d M Y H:i:s", time() + $offset) . " GMT";
	$gmt_mtime = gmdate('D, d M Y H:i:s', time() + $offset ) . ' GMT';
	header("Last-Modified: " . $gmt_mtime );
    // send cache expiration header to the client broswer
    header ($expire);
  ?>

Source: Compress PHP, CSS, JavaScript(JS) & Optimize website performance

My site size went to 31K, woot!

Configure entity tags (ETags)

This proved to be a bit tricky until I found these two lines to add to .htaccess

Header unset Etag
FileETag none

Source: Remove ETag Headers to Speed up

Worked a treat!

Result

96 at highest. The only exception was my admin area where my modifications that were supposed to be site-wide seem to have broken it but it got me a grade B over C (admin baseline test). Debugging result: a modification to allow HTTP compression somehow disabled the CSS giving me a semantic list-like look. I have commented it out. For those that want the whole .htaccess available for viewing is below.

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

# This breaks admin look. Uncomment if concerned about bandwidth and/or want compression
#<FilesMatch "\.(txt|html|htm|php)">
#ForceType application/x-httpd-php

#php_value auto_prepend_file /f1/content/joakal/public/gzip-enable.php

#</FilesMatch>

<FilesMatch "\.(css)">
ForceType application/x-httpd-php
ExpiresActive On
ExpiresDefault "access plus 1 year"
php_value auto_prepend_file /f1/content/joakal/public/gzip-css.php
</FilesMatch>
<FilesMatch "\.(js)">
ForceType application/x-httpd-php
php_value auto_prepend_file /f1/content/joakal/public/gzip-js.php
</FilesMatch>

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

Header unset Etag
FileETag none

# END WordPress

Addendum

Other links I came across for PHP, CSS and JavaScript performance.

• HTTP Compression Test A site that gives an idea how much your site can be compressed.
• 15 Tools to Help You Develop Faster Web Pages As well giving faster site tips, it also gives load-testing tips.
• Working with cached A list of cache options with HTTP headers.
• A Few Speed Improvements How they implemented a static server to host content that prevents cookie transmissions.
• Web Page Analyzer Similar to YSlow and W3 Validator, submit the website and they'll give grading and tips to improve.
• CSS Compressor A Javascript based that that strips most unneeded stuff, giving a reduced file size

Final words

Overall, it was a pretty good challenge and as a result, this site should perform very well. I will be carrying this knowledge over to some future web projects for a noticeable increase in performance. Some of the problems were encountered and too complex to solve were all because of WordPress' bloated code, however I can not find any alternative so I will continue to use WordPress for now.