August 19, 2011 15:17
8 Ways to Increase Website Speed

8 Ways to Increase Website Speed

If your website is painfully slow, nobody is going to stick around. Studies and common sense say the longer a website takes to load, the more likely users will leave. Websites with poor load times can have higher operating costs. Website load times even affect your performance in search engines. Google states: "We've decided to take site speed into account in our search rankings".

Maintaining current visitors, reducing costs, and attracting additional visitors are a few reasons to consider optimizing your website's performance. Below are 8 great tips to help you bring down the load time. The two major factors that determine your website's speed are file sizes and the number of HTTP requests. Below covers how to reduce both of these for the best results.

1

External Scripts / CSS

To help speed up the initial download keep your scripts and styles separate from your content. This will allow your html page to load without interruption. If your scripts are not loaded externally, then the html will stop loading when the browser reaches the script code. The html will not resume loading until the browser is completely finished with the script. However, be careful not to load too many external files. Try to combine files when possible and only load files that are necessary for that particular web page.


2

Compress Your Code

When writing html, css, javascript, or any other code developers tend to write in a manner that's easy to read. This usually means several tabs or spaces with lots of line breaks. When it comes to files size each tab, space, line break, or key stroke counts. In order to bring that file size down you can "minify" it. You can insert your code into an online minifier and it will remove unnecessary characters that are only for readability. If you have large scripts or stylesheets, this can make a big difference. For easy editing, it's a good idea to have two copies: a normal file and a minified one, often with ".min" in the name. This way, if you need changes, you do it to the normal file then copy it into a minify service that will format the file for you. Once you have the new minified code, you can paste it into your .min file.

Here a just a few free services online:


3

Validate

Code Validation does play a role in good and efficient web development. If your website is free of errors then the browser can render it easier and quicker.


4

Optimize Images

Use an image editing software to optimize your images. Photoshop's "Save For Web" feature works well to optimizae your images. Be sure to select the best file type for the image. JPG is best for photos with a  variety of different colors. GIF is best for graphics with simple and solid colors and even simple transparencies. PNG is asimilar GIFs but works much better for transparencies and semi-transparencies. But be carefule with overuse of PNG files, as their file size adds up fast. Most image software will let you preview what it will look like and it's file size in these various file types. So, play around until you get the best looking image at the smallest file size.


5

Image Sprites

Image sprites are when you use one larger image that contains multiple images spaced out. An example might be a navigation with a roll over state. Instead of two separate images you can have the normal state and rollover state as one image right above the other then using css you can change the position of the background image to determine which one to show. This might not decrease the file size, but it will decrease your HTTP requests and ensure that your normal state and rollover are loaded at the same time. *Note: you are not limited to just two images for a sprite, I've seen an image that contains over 100 image sprites!


6

No Text Images

Sometimes you really want to design and emphasize text by using an image. But, this isn't always the best idea. Even outside of file sizes or HTTP requests, it hurts search engine optimization. Instead of using images, try using text and be creative with text elements using background images or CSS3. You can use non-web safe fonts on your site with extensions like Google Web Fonts: http://www.google.com/webfonts. But, this does increase download time (around 50kb), but can be worthwhile if you use this tool to replace just 5 images. It also means that text is now friendly to search engines.


7

Don't resize images in the code

The larger the original image, the larger the file size. So, re-size your photos using a program like Photoshop before you upload them. This will reduce the file size and increase the download speed.


8

CSS3

This one is a bit tricky. Because CSS3 is not supported in some outdated browsers (cough cough IE 7 and 8), you'll have to evaluate and use your best judgement. CSS3 can do several things that we previously used images and extra code to accomplish. Using CSS3 you can drastically reduce the amount of code and sometimes eliminate the need for images by implementing certain design elements, like rounded corners, gradients, and shadows using CSS3

About The Author

Lee Wise with 10 Pound Gorilla

I like CSS3, jQuery, and don't tell DNN but I love PHP. I really enjoying learning new things and that sometimes means teaching myself and a lot of trial and error.

Posted in: Articles

Kris

Sunday, October 23, 2011 7:50 PM
Great tips! Thanks for organizing and sharing these. Every little bit of information helps.

Anonymous

Thursday, July 19, 2012 12:02 PM
http://digitalgirl.me/google-libraries-page-speed/
-->