Ten Tips for optimizing Your Website's Speed

Transferred from: http://sixrevisions.com/web-development/site-speed-performance/

Web page speed and performance are very important to the user experience. If your site is too slow, you'll not have only being losing visitors, but also potential customers. Search engines like Google factor a website's speed to account in search rankings, so when optimizing your site ' s speed, your should take everything into consideration. Every millisecond counts.

Here is just a few basic and general suggestions for improving a site ' s performance.

1. Defer Loading Content when Possible

Ajax allows us to build Web pages The can asynchronously updated at any time. This means is instead of reloading an entire page when a user performs an action, we can simply update parts of the that Pag E.

We can use a image gallery as an example. Image files are big and heavy; They can slow down page-loading speeds of web pages. Instead of loading all of the images when a user first visits the Web page, we can just display thumbnails of the images a nd then while the user clicks on them, we can asynchronously request the full-size images from the server and update the PA Ge. This, if a user is wants to see a few pictures, they don ' t has to suffer waiting for all of the pictures to Downloa D. This development pattern is called lazy loading.

Ajax/web development libraries like JQuery, Prototype, and MooTools can make deferred content-loading easier to implement.

2. Use External JS and CSS Files

When the user first loads your Web page, the browser would cache external resources like CSS and JavaScript files. Thus, instead of inline JavaScript and CSS files, it's best-to-place them in external files.

Using inline CSS also increases the rendering time of a Web page; Have everything defined in your main CSS file lets the browser does less work when rendering the page, since it already kn OWS all the style rules, it needs to apply.

As a bonus, using external JavaScript and CSS files makes site maintenance easier because you have need to maintain global Files instead of code scattered in multiple Web pages.

3. Use Caching Systems

If you find this your site is connecting to your database in order to create the same content, it's time to start using A caching system. By has a caching system in place, your site'll only has to create the content once instead of creating the content E Very time the page is visited by your users. Don ' t worry, caching systems periodically refresh their caches depending on how do you set it up-so even Constantly-changin G Web pages (like a blog post with comments) can cached.

Popular Content Management systems like WordPress and Drupal would have the static caching features that convert dynamically Generated pages to the static HTML files to reduce unnecessary server processing. For WordPress, check out WP Super Cache   (one of the Six critical WordPress plugins  that Six revisions has installed). Drupal have a page-caching feature in the core.

There is also database caching and Server-side scripts caching systems so can install on your Web server (if you ha ve the ability to does so). For example, PHP have extensions called PHP accelerators that optimize performance through caching and various othe R methods; One example of a PHP accelerator is APC. Database cachingimproves Performance and scalability of your Web applications by reducing the work associated with Databas e read/write/access processes; memcached, for example, caches frequently used database queries.

4. Avoid resizing Images in HTML

If an image was originally 1280x900px in dimension, but you need to having it being 400x280px, you should resize and resave the Image using an image editor like Photoshop instead of using HTML ' sand width height attributes (i.e. ). This is because, naturally, a large image would always be bigger in file size than a smaller image.

Instead of resizing an image using HTML, resize it using an image editor like Photoshop and then save it as a new file.

5. Stop Using Images to Display Text

Not only does the text in a image become inaccessible to screen-readers and completely useless for SEO, but using images To display text also increases the load times of your Web pages because more images mean a heavier web page.

If you need to use a lot of custom fonts in your website, learn about CSS @font-face to display text with custom F Onts more efficiently. It goes without saying that you had to determine whether serving font files would is more optimal than serving images.

6. Optimize Image Sizes by Using the Correct File Format

By picking the right image in format, you can optimize file sizes without losing image quality. For example, unless your need the image transparency (alpha layers) that the PNG format have to offer, the JPG format often Displays photographic images at smaller file sizes.

To learn more about what to decide between JPG, PNG, and GIF, read the following guides:

• The comprehensive guide to saving Images for the Web
• Web Designer ' s Guide to PNG Image Format
• JPEG 101:a Crash Course guide on JPEG

Additionally, there is many tools you can use to further reduce the file weights of your images. Check out this list of tools for optimizing your images.

7. Optimize the the the-the-the-same-Code

Look around your source code. Do you really need all the tags you ' re using or can I use CSS to help out on the display? For example, instead of using , you can easily use CSS to make your headings italics using the property font-style . Writing code efficiently not only reduces file sizes of your HTML and CSS documents, but also makes it easier to maintain .

8. Load JavaScript at the End of Your Document

Your scripts loading at the end of the page rather than at the beginning. It allows for the browser-to-render everything before getting started with the JavaScript. This makes your Web pages feel more responsive because the on-the-same-the-same-JavaScript works is, it blocks anything below it from R Endering until it has finished downloading. If possible, reference JavaScript right before the closing <body> tag of your HTML documents. To learn more, read about deferring the loading of JavaScript.

9. Use a Content Delivery Network (CDN)

Your site ' s speed was greatly affected by where the user's location was, relative to Your Web server. The farther away they is, the more distance the data being transmitted have to travel. Have your content cached across multiple, strategically placed geographical locations helps take care of this problem. A CDN would often make your operating cost a little higher, but you definitely gain a speed bonus. Check out the MaxCDN or Amazon simple Storage Service (Amazon S3).

Ten. Optimize Web Caching

Along with using caching systems, you should create websites that utilize Web caching as much as possible. Web caching is while files are cached by the Web browser for later use. Things that browsers can cache include CSS files, JavaScript files, and images.

Aside from the basics, such as putting CSS and JavaScript code that is used in multiple pages in external files, there ar e Many ways to make sure that is caching your files in the most efficient-the-a-do possible.

For example, you can Set http response Headers such as expires  and last-modified to reduce the need of re-downloading certain files, the user comes back to your site. To learn more, read About caching in HTTP  and leveraging browser Caching.

To set the HTTP Expires headers in Apache, the read this tutorial on adding the future expires headers.

Ten Tips for optimizing Your Website's Speed