Effective Web Optimization Tips and Best Practices for Beginners

By . in Web Design. Updated on .

Note: This post was originally published on August 27, 2009.

Web optimization is a crucial aspect of web development and maintenance, yet it is often overlooked by webmasters. Proper optimization can save you money, increase your site’s readership, and boost traffic. These benefits make optimization an essential part of managing any website or blog.

If you haven’t yet optimized your website (or blog) or are simply curious about how it can improve your site’s speed, this list of optimization tips is a great place to start.

We’ve organized the tips into three sections for easier reading: server-side optimization, assets optimization (including web components like CSS, JavaScript, images, etc.), and platform optimization, with a focus on WordPress optimization. In the final section, we include a few useful links.

Optimization: Server-side

Choose a Reliable Web Host

While your web hosting account isn’t directly related to the optimizations you perform, choosing the right host is so important that it’s worth discussing first. Your hosting account is the foundation of your website or blog, affecting its security, accessibility (cPanel, FTP, SSH), server stability, pricing, and customer support. It’s crucial to ensure you’re working with a dependable provider.

Recommended reading: How to Choose a Web Host by wikiHow is an excellent article that provides steps and tips to consider before purchasing any web hosting account.

Host Assets Separately

When we mention assets, we refer to web components like images and static scripts that don’t require server-side processing. This includes web graphics, images, JavaScripts, Cascading Style Sheets (CSS), and more. While hosting assets separately isn’t mandatory, it can significantly improve server stability, especially during traffic spikes.

Enable GZip Compression

Whenever an HTTP request is made, content travels between the server and client. Compressing this content before sending can greatly reduce the time required to process each request.

GZip is one of the most effective methods for achieving this, and the process varies depending on the server type. For example, Apache 1.3 uses mod_zip, Apache 2.x uses mod_deflate, and here’s how to enable GZip in Nginx. Here are some excellent articles to help you get familiar with server-side compression:

Minimize Redirects

Webmasters frequently use URL redirects (whether they are JavaScript or META redirects) to point users from an old page to a new one or guide them to the correct page. However, each redirect creates an additional HTTP request and increases RTT (round-trip time). The more redirects you have, the slower the user will reach the destination page.

Recommended reading: Avoid Redirects by Google Code offers a great overview and practical ways to minimize redirects to enhance serving speed.

Reduce DNS Lookups

According to the 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. During this process, the browser cannot proceed until the DNS lookup is complete.

Expert Steve Souders suggests that splitting components across two to four hostnames can reduce DNS lookups and enable high parallel downloads. Read more about this in his article.

Optimization: Asset Management (CSS, JavaScript, Images)

Merge Multiple JavaScript Files into One

The team at rakaz.nl shares a method for combining multiple JavaScript files, such as:

 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 modifying the URL to:

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

This can be achieved by manipulating the `.htaccess` file and using PHP. For detailed instructions, click here to learn more.

Compress JavaScript and CSS

Minify is a PHP5 application that can combine multiple CSS and JavaScript files, compress their contents (such as removing unnecessary whitespace and comments), and serve the optimized files with HTTP encoding (gzip/deflate) and headers for optimal client-side caching.

Example of Minify in use for compressing JavaScript and CSS files

Online Compression Tools

Example of an online tool for compressing CSS files

Several web services allow you to manually compress your JavaScript and CSS files online. Here are a few options you can explore:

Customize Header Expiry and Caching
Customizing header expiry for better caching
httpwatch

By setting a customized Expiry header, your web components, such as images, static files, CSS, and JavaScript, can bypass unnecessary HTTP requests when the same user reloads the page. This reduces the bandwidth needed and helps in delivering the page faster.

Recommended readings:

Off-load Your Assets

Off-loading refers to separating JavaScript, images, CSS, and static files from your main server and hosting them on another server or using other web services. We’ve observed significant improvements on Hongkiat by off-loading assets to third-party services, allowing the main server to focus on PHP processing. Here are some recommended online services for off-loading:

*Paid hostings – Paid services generally offer better reliability and stability. If your website frequently requests assets, it’s crucial to ensure they are hosted with a reliable provider. We recommend Amazon S3 and CloudFront.

Optimizing Web Images

Images are a crucial part of any website, but if they are not properly optimized, they can consume unexpectedly large amounts of bandwidth and slow down your site. Here are some best practices for optimizing your images:

  • Optimize PNG Images. Smashing Magazine offers clever techniques to help you optimize your PNG images effectively.
  • Optimizing for Web – Learn the essentials about JPEG, GIF, PNG formats, and how to save your images for the web.
  • Don’t Scale Images. Always specify the width and height for each image. Avoid scaling down large images to fit smaller spaces on your website. For example: Do not force a 200×200 px image to 50×50 px by altering the width and height attributes. Instead, use a 50×50 px image.

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 available to help:

Optimizing CSS

CSS is the backbone of modern web design, dictating the style, look, and feel of your site. While CSS offers great flexibility, poorly written CSS can negatively impact performance. Here are some guidelines to ensure your CSS is optimized:

  • Keeping Your Elements’ Kids in Line with Offspring. Learn how to maintain clean markup using CSS Selectors.
  • Keep CSS Short. When applying the same style, shorter code is more efficient. Here’s a CSS Shorthand guide you’ll find useful.
  • Use CSS Sprites. CSS Sprite techniques reduce HTTP requests by combining multiple images into a single file and controlling its display with the background-position attribute. Check out these guides for creating CSS Sprites:
    CSS Sprite example
  • Use Each Declaration Once. To optimize your CSS, strive to use each declaration only once.
  • Reduce the Number of CSS Files. The more CSS files you have, the more HTTP requests are required when a webpage is loaded. For instance, instead of having multiple CSS files like: 
    <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 a single CSS file:

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

Recommended Readings:

Optimizing WordPress Performance

Regularly monitoring, benchmarking, and analyzing your WordPress blog’s performance is crucial. If your site is running slow, identifying the cause is the first step. Here are some basic changes we’ve implemented that can significantly increase the speed of your WordPress blog.

Cache Your WordPress Blog

WP Super Cache is an extremely efficient WordPress page caching system that can make your site faster and more responsive. Additionally, we recommend WP Super Cache, which builds on the previous plugin and does a great job enhancing your site’s performance.

Deactivate and Delete Unused Plugins

If your blog is loading slowly, it’s a good idea to check if you have a lot of plugins installed. Unused or unnecessary plugins might be the culprits, and deactivating or deleting them can improve your site’s speed.

Remove Unnecessary PHP Tags

Take a look at your theme’s source code, and you might find a lot of tags like these:

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

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

These can often be replaced with static text content, reducing the load on your server.

Recommended Readings:

Additional Web Optimization Tools

Here are some useful web services and tools that provide broader insights and analysis to assist with web optimization:

Yahoo! YSlow

YSlow analyzes web pages and suggests ways to improve performance based on a set of rules for high-performance web pages. It provides valuable insights into what needs to be done to make your website load faster. (Firebug required)

Yahoo YSlow report example

Google PageSpeed

Similar to Yahoo! YSlow, Google PageSpeed is an open-source Firebug add-on that evaluates website performance and provides suggestions for improvement. (Firebug required)

Google PageSpeed report example
Pingdom Tools

Pingdom Tools provides a comprehensive load analysis of your website, including all objects (images, CSS, JavaScripts, RSS, Flash, and frames/iframes). It shows general statistics such as the total number of objects, total load time, and size of all objects.

Pingdom Tools report example

Recommended Readings: Here are more tips and tools worth exploring:

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail