Andreas – Joakal

September 14, 2009

Webcode highlighter for blog

Filed under: Joakal.com — Tags: , , , , , — Andreas Markauskas @ 7:08 pm

I've added this very useful wordpress plugin: FV Code Highlighter V1.1 since code gets very hard to read after some length. This plugin now allows me to display web code for HTML, XML, CSS and PHP in colour code which is more easily readable and useful for some code samples later on.

August 13, 2009

Beefing up website and downsizing for performance

Filed under: Joakal.com — Tags: , , , , , , — Andreas Markauskas @ 8:53 pm

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.

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.

August 2, 2009

Blog up’s set up.

Filed under: Joakal.com — Andreas Markauskas @ 11:44 pm

There seems to be some cosmetic glitches as I attempted to add a portfolio and contact section. Please say what you think of the site.

July 23, 2009

A blog for easy updates

Filed under: Joakal.com — Andreas Markauskas @ 4:28 pm

Testing this blog on my web server.