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.
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.
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 keystroke 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 are just a few free services online:
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.
Optimize Images
Use image-editing software to optimize your images. Photoshop's "Save For Web" feature works well to optimize 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 similar to GIF but works much better for transparencies and semi-transparencies. But be careful not to overuse PNG files, as their file size adds up fast. Most image software will let you preview what it will look like and its file size in these various file types. So, play around until you get the best-looking image at the smallest file size.
Image Sprites
Image sprites are when you use one larger image that contains multiple images spaced out. An example might be 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!
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. 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.
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.
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 judgment. 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.