Back to Tutorials

Speed up your site

As we all know, Wolf is pretty fast with it’s page loading and general overall performance but you can always push it a bit more. If you do find your site to be slow (or starting to be) you can always try Funky cache or AS cache plugins to boost it a bit.

In most cases you don’t need any sort of caching but you can still speed it up a bit with small addition to your .htaccess file. For the past few weeks I have been poking around with Page Speed and Woorank, just for fun and curiosity.

Here are “before” and “after” images of the pageload made via Woorank:

Before
Load time before
After
Load time after

As you can see, there is a slight difference in speed and I must admit that the whole site runs smoothly and quicker (not that it hasn’t before either).

Just gzip it!

When I first ran Page Speed it gave me few advices among other things (like optimize images etc.) and one of them was Enable Compression. So I surfed a bit and found this code:

# BEGIN Compress text files
<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>
# END Compress text files

The above snippet will gzip all your *.css, *.js, *.html, *.xhtml, and *.php files.

Enable browser cache

This is useful when you have design rich website with lots of graphic elements.

Rule for Expires headers

# 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

Rules for Cache-Control 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

Optimize images

This one should be “common sense” in general, but there are always exceptions, especially with new wannabe developers/designers.

Most image editors have “Save for Web & Devices” button somewhere, so use it!

.png – where you need transparency, always export it at 72dpi and quality between 60-80 should suffice
.jpg/.jpeg – for everything else (dpi and quality like above)

Minify CSS and Javascript files

Last but not least, you could compress your .css and .js with just a few clicks. Here are few Compressors which you can use to accomplish that.

That should be it. If you have any suggestions, please use comments section.

Stay tuned, next article is about moving whole site from localhost to live server.

blog comments powered by Disqus