Friedbeef’s Tech

Have you ever come across websites which seem to take…for..e..ver….to load? They can be an annoyance, right? Slow websites with smashing artwork and attractive bling often drive away more people than simple, and clean websites which are optimized for speed and usability.

1. How to Optimize Style: Use CSS as often as you can, and tone down on Javascript

Javascript can add a lot of flair to your website, but more often than not we tend to borrow lines of code from other fellow developers rather than reinvent the wheel. Sounds logical, right? Well, the problem with using other people’s JS is that they usually contain lots of code which we ourselves don’t need. Borrowing CSS, however, doesn’t present that problem as much. So if you want to optimize your website to display smoothly on dial-up lines, try switching styles a little.

Also check out this excellent post on 53 CSS-Techniques You Couldn’t Live Without

2. How to Optimize Images: Focus your Format

GIF? PNG? JPG? …JPEG? One drawback of the widespread availability of the Internet is that practically anybody can contribute to its development. This leads to too much choice, which consequently is good, but not so good at the same time, and image optimization is no exception. Knowing what type of format to use for your digital images can save you a lot of hard drive estate. Use GIF for flat-tone colors, JPG for bright snazzy photographs with millions of colors, and alternate between either GIF and JPG for PNG when you feel it’ll give you better quality. Basically, different formats handle different images better, so you can expect a sizable difference in image size when you use the correct type. Also, be sure to use the “Save for Web” options in image editors to optimize images.

Also check out this excellent post on 4 free tools to optimize and compress PNG images without losing quality

3. How to Minimize Latency: Group Files Together

When you write your website, do you write it page by page starting from the bottom up, or with a bird’s eye view? In most cases, the latter method is better, as you’ll get to save time and space when you code. For instance, CSS and JavaScript both allow you the option to save standalone files for reference by your other pages. This allows you to write a single CSS batch file and share it two to a million webpages, instead of having to rewrite the code every time you start a new page. Can you imagine how much space Google saves by having just one CSS reference file?

4. How to Squeeze Extra Speed from Your Website: Extra Tips to counter Time-Lag

There are a certain number of things you can do to reduce the waiting time your website’s visitors have to endure; some which still not many may know of. Make sure to add a slash to the end of your links: “www.myname.com/about/”, as opposed to “www.myname.com/about”. This tells the server that it’s reached the end of the road, so it doesn’t have to waste (milli)seconds detouring when you click on a link. It may not be terribly significant, but well, you take what you can get when you optimize a website.

5. How to optimize your cache for WordPress sites: Use super-cache

SuperCache is a free WordPress plugin that caches your page as a static html file. When your visitors arrive at your site, they will be served the static page instead of the actual page.  This usually makes it much faster for your visitors, and more importantly it creates less strain and burden for your servers.

This article was written by Aaron Pek & James Yeang.  Contact me if you wish to become a writer for this blog.

Those were 5 simple tips to get started.  What other tips do you have for speeding up websites?  Tell us in the comments!