Changry

Slow websites can be a pain, both for the user and the developer. Sometimes the slower website speed is inevitable because the script is bloated, but even so, there are still tricks to speed things up.

Use CSS sprites, seriously

Sprites work by combining multiple images into one main file, and then using CSS’ background-position to move the part of the larger image you want into view. This cuts down on the number of requests the browser makes, thus gives you a faster loading time and optimal website speed.

Before, excuses could be made for not using sprites because of how tedious they were. However, now there are a whole bunch of tools and websites out there including CSS Sprit.es, CSS Sprite Generator, and my all time favorite, Stiches (which was actually used on this site). There is also SpriteMe, which used to be my favorite, but has been quite buggy lately.

Once you generate your sprite, you can further compress its size via Photoshop’s “Save for Web” feature (CTRL + ALT + SHIFT + S), and if it’s possible to do losslessly, using GIFs over PNGs.

Compressing CSS and JS

Javascript should, without a doubt, always be compressed, especially if it’s a large file. Two sites that I use for this are JSCompress and Javascript Compressor. Make sure you save the original JS file as [file-name].full.js or something along those lines, as reverse engineering your way through single letter variables is not a fun way to spend a weekend. Trust me.

An argument can be made about losing readability in the case of compressing CSS, but here’s a method I use to not only maintain readability, but also compress the file dynamically.

For the style.php (rename style.css to style.php):

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?php  	header('Content-type: text/css');
	ob_start("compress");
	function compress($buffer) {
		/* Remove comments */
		$buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
		/* Remove tabs, spaces, newlines, etc. */
		$buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
		return $buffer;
	}
?>
/* CSS goes here.. */
<?php
  ob_end_flush();
?>

Then move style.php into its own directory and put this .htaccess file in it:

1
2
3

AddHandler application/x-httpd-php .css
RewriteEngine on
RewriteRule ^(.*).css$ $1.php

That way, you can simply call style.css, rather than style.php.

GZIP and compress

Compression reduces the size of the HTTP responses dramatically, and this I can attest to. Just paste the code below into your .htaccess file and you’ll see huge savings.

1
2
3

<ifModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript
</ifModule>

Cache it in and save

Rather than loading every single file every time the site is loaded, the files only loaded on the initial visit and then cached for a specified amount of time (as designated in the htaccess file with the expire header). Don’t set this until you have finalized all your files – caching and debugging don’t go well together.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

# BEGIN Expire headers
<ifModule mod_expires.c>
  ExpiresActive On
  ExpiresDefault "access plus 5 seconds"
  ExpiresByType image/x-icon "access plus 2592000 seconds"
  ExpiresByType image/jpeg "access plus 2592000 seconds"
  ExpiresByType image/png "access plus 2592000 seconds"
  ExpiresByType image/gif "access plus 2592000 seconds"
  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
  ExpiresByType text/css "access plus 604800 seconds"
  ExpiresByType text/javascript "access plus 216000 seconds"
  ExpiresByType application/javascript "access plus 216000 seconds"
  ExpiresByType application/x-javascript "access plus 216000 seconds"
  ExpiresByType text/html "access plus 600 seconds"
  ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers
# BEGIN Cache-Control Headers
<ifModule mod_headers.c>
  <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(css)$">
    Header set Cache-Control "public"
  </filesMatch>
  <filesMatch "\.(js)$">
    Header set Cache-Control "private"
  </filesMatch>
  <filesMatch "\.(x?html?|php)$">
    Header set Cache-Control "private, must-revalidate"
  </filesMatch>
</ifModule>
# END Cache-Control Headers

Conclusion

While this is far from a comprehensive list, it is a good place to get started, and offers some tips that show instant results. If you want to speed things up further, I recommend taking a look at CloudFlare, a tool that loads your site with their CDNs, and auto minify, compress, and cache for you.

To gauge and grade your website speed, download PageSpeed or YSlow – they’re currently the easiest and most accurate website speed optimization tools out there.

There are endless possibilities of ways to speed up websites, but there’s one universally accepted rule: code neatly and semantically. With this tip, you can’t go wrong. What are some optimization methods you guys use?

Image credit: source