Web Optimization for Beginners: Tips & Best Practices

By . in Web Design. Updated on .

Note: This post was first published on the 27th August, 2009.

Web optimization is a vital part of web development and maintenance but also something often overlooked by webmasters. Just think of the money you can save and how it can potentially help increase your readership and traffic when they are properly done.

If you have not done any optimization to your website (or blog) so far or are merely curious about how it can help speed up your site, please take a look at this list of optimization tips we’ve put together.

We’ve split things up into 3 separate sections for better readability – respectively server-side optimization, assets optimization (which includes web components like CSS, Javascript, images, etc) and platform, where we’ll focus on WordPress optimization. At the last section, we throw in a couple of links we figured useful.

Optimization: Server-side

  1. Choose a decent Web Host

    Your web hosting account has no direct relationship with the optimizations you are about to perform, but we figured choosing the right web hosting account was so important we decided to bring it to your attention first. A hosting account is the foundation of your website/blog where its security, accessibility (cPanel, FTP, SSH), server stability, prices, and customer supports all play important roles. You need to make sure you are in good hands.

    Recommended reading: How to Choose a Web Host by wikiHow is a great article that gives you steps and tips you should know before purchasing any web hosting account.

  2. Host Assets Separately

    When we mention assets, we meant web components like images and static scripts that don’t require server-side processing. These include any web graphics, images, Javascripts, Cascading Style Sheets (CSS), etc. Hosting assets separately is not a must, but we’ve seen tremendous results in terms of server stability with this implementation when the blog had a traffic spike.

  3. Compression with GZip

    In short, contents travel from the server side to the client side (and vice versa) whenever an HTTP request is made. Compressing the content for sending greatly reduces the time needed to process each request.

    GZip is one of the best ways to do this and it various according to the type of servers you are using. For instance, Apache 1.3 uses mod_zip, Apache 2.x uses mod_deflate and here‘s how you do it in Nginx. Here are some really good articles to get you familiar with server-side compressions:

  4. Minimize Redirects

    Webmasters do URL redirects (whether it’s Javascript or META redirects) all the time. Sometimes its purpose is to point users from an old page to a new, one or merely guide users to the correct page. Each redirect create an additional HTTP request and RTT (round-trip-time). The more redirection you have, the slower user will get to the destination page.

    Recommended reading: Avoid Redirects by Google Code gives you a good overview on the matter. The article also recommends some practical ways to minimize redirection to increase serving speed.

  5. Reduce DNS Lookups

    According to Yahoo! Developer Network Blog, it takes about 20-120 milliseconds for DNS (Domain Name System) to resolve the IP address for a given hostname or domain name, and the browser cannot do anything until the process is properly completed.

    Author Steve Souders suggested that splitting these components across at least two but no more than four hostnames reduces DNS lookups and allows high degree parallel downloads. Read more on the article.

Optimization: The Assets (CSS, Javascripts, Images)

  1. Merge Multiple Javascripts into One

    Folks at rakaz.nl shares how you can combine multiple Javascripts like:

     http://www.creatype.nl/javascript/prototype.js
 http://www.creatype.nl/javascript/builder.js
 http://www.creatype.nl/javascript/effects.js
 http://www.creatype.nl/javascript/dragdrop.js
 http://www.creatype.nl/javascript/slider.js

    Into a single file by changing the URL to:

     http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js

    by manipulating the .htaccess and using PHP. Click here to read more.

  2. Compress Javascript & CSS

    Minify is a PHP5 app that can combine multiple CSS and Javascript files, compress their contents (i.e. removal of unnecessary whitespace/comments), and serve the results with HTTP encoding (gzip/deflate) and headers that allow optimal client-side caching.

    minify

    Compress them online! compress css There are also some web services that allow you to manually compress your Javascripts and CSS files online. Here are few we come to know:

  3. Customize Header Expiry/Caching

    header expiry Credit: httpwatch

    By using a customized Expiry header, your web components like images, static files, CSS, Javascript skipped unnecessary HTTP request when the same user reload the page for the second time. It reduces the bandwidth needed and helps in serving the page faster.

    Recommended readings:

  4. Off-load The Assets

    By off-loading, we mean separating the Javascript, images, CSS, and static files from the main server where the website is hosted and placing them on another server or relying on other web services. We’ve seen significant improvement here in Hongkiat by off-loading assets to other web services available, leaving the server to mainly do the PHP processing. Here are some suggestions of online services for off-loading:

    *Paid hostings – Paid services always have better reliability and stability. If your website is constantly requesting assets, you’ll need to make sure they are in good hands. We recommend Amazon S3 and Cloud Front.

  5. Handling Web Images

    Images are an important part of your website. However, if they are not properly optimized, they can become a burden and end up utilizing unpredictably large amounts of bandwidths on a daily basis. Here are some best practices to optimize your images:

    • Optimize PNG Images Folks at Smashing Magazine describe some clever techniques that may help you optimize your PNG images.
    • Optimizing for Web – Things you need to know (the formats) Learn more about Jpeg, GIF, PNG and how you should save your images for the web.
    • Don’t Scale Images Always practice inserting the width and height for each images. Also, don’t scale down an image just because you need a smaller version on the web. For example: Do not force scale a 200×200 px image to 50×50 px for your website by altering the width and height. Get a 50×50 px instead.

    Optimizing with Web Services and Tools. The good news is, that you don’t need to be a Photoshop expert to optimize your images. There are plenty of web services and tools to help you do the job.

    • Smush.it smushit Probably one of the most efficient online tools to optimize images. There’s even a WordPress plugin for it!
    • Online Image Optimizer Lets you easily optimize your gifs, animated gifs, jpgs, and pngs, so they load as fast as possible on your site by Dynamic Drive
    • SuperGIF Effortlessly make all your GIF images and animations smaller.
    • Here’s more.

  6. Handling CSS

    Modern websites uses CSS as the foundation of the style, as well as the look and feel. Not only does CSS give great flexibility to changes, but it is also lesser in terms of codes needed. However, if they are badly coded, it could backfire. Here are some checklists, or rather guides to you make sure your CSS are properly optimized:

    • Keeping Your Elements’ Kids in Line with Offspring How to keep your markup clean with CSS Selectors.
    • Keep CSS short When they give the same style, the codes are better the shorter they are. Here’s a CSS Shorthand guide you’ll probably need.
    • Use CSS Sprite css sprite CSS Sprite technique reduces HTTP requests each time a page is loaded by combining several (or all) images together on a single image file and controlling its output with the CSS background-position attribute. Here are some useful guides and techniques to create CSS Sprites:
    • Using every declaration just once When looking to optimize your CSS files, one of the most powerful measures you can employ is to use every declaration just once.
    • Reduce amount of CSS files The reason is simple, the more CSS files you have the more HTTP request it’ll have to make when a webpage is being requested. For example, instead of having multiple CSS files like the following: 
       <link rel="stylesheet" type="text/css" href="main.css" /> 
 <link rel="stylesheet" type="text/css" href="body.css" />  
 <link rel="stylesheet" type="text/css" href="footer.css" />

      You can combine them into the one single CSS:

       <link rel="stylesheet" type="text/css" href="layout.css" />

    Recommended readings:

Optimization for WordPress

From time to time, we monitor, benchmark and analyze the performance of our WordPress blog. If the site is running slow, we need to know why. Here are some basic changes we’ve done that we figured will significantly increase the speed of your WordPress blog.

  1. Cache Your Worpress Blog

    WP Super Cache is an extremely efficient WordPress page caching system to make you site much faster and responsive. We also recommend WP Super Cache which enhances from the previous mentioned plugin and too does a great job.

  2. Deactivate and Delete Unused Plugins

    When you notice your blog is loading real slow, see if you have a lot of plugins installed. They might be the culprit.

  3. Remove unnecessary PHP Tags

    If you take a look into your theme’s source codes, you will find a lot tags like these:

     <?php bloginfo('stylesheet_directory'); ?>
 
     <?php bloginfo('description'); ?>

    They can be pretty much replaced with text content that doesn’t cause the load to the server.

Recommended Readings:

Last but not least…

Here are some useful web services and tools that give you a broader perspective and better analysis to help you in web optimization.

  • Yahoo! YSlow

    YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. It gives you a good idea what needs to be done in order for the website to load faster.

    (Firebug required)

    yahoo yslow

  • PageSpeed

    Similar to Yahoo! YSlow, Google Page Speed is an open-source Firebug add-on to evaluate the website performances and how to improve them. (Firebug required)

    pagespeed

  • Pingdom Tools

    Pingdom Tools take a complete load of your website, including all objects (images, CSS, JavaScripts, RSS, Flash, and frames/iframes), and shows you general statistics about the loaded page such as the total number of objects, total load time, and size including all objects.

    Pingdom

Recommended readings: Here are more tips and tools worth checking out.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail