Sunday, 8 September 2013

Decrease Page Loading Time

Today we are going to talk about how to improve web page speed or how to decrease the loading time.

Generally Users are enamored with speedy websites, and if  any  site responds very  slowly, visitors lose their patience and are less likely to come back.

Improvement in page loading speed is not only useful for the site users but also for the search engine rankings as well. Google announced that from now website speed will also be included in their search ranking algorithms.

So below are some of the solutions which help you in decreasing web page load time.

1. Website’s  Current Speed Analysis

The very first thing that is required  is to analyze your current web  page speed. This will allow you to track improvements and ensure that changes mae by you improves page load times.

So many free tools are available to check how much time your site takes to load.Below are a few of them:

Pingdom :  provide an easy  site speed test that which shows the way a page is loaded in a web browser.
Web Page Test : Tool for checking your site’s  speed and performance in different browsers.
Page Speed :  An open source Firefox add-on which helps you assess the performance of your web pages. Suggestions are also available on how to fix the issues.

2. Image optimization

Its also important to know when to use the appropriate file format for your images. Using a different file format may dramatically decrease the file size of an image.

PNG    :  Choice when high quality transparent images are required.
JPEG  :  Great for images with lots of colors and details like photographs.
GIF     : Ideal for the images having very few colors.Example: logos.

Some useful links:

•    Web Designer’s Guide to PNG Image Format
•    8 Excellent Tools for Optimizing Your Images
•    The Comprehensive Guide to Saving Images for the Web
•    JPEG 101: A Crash Course Guide on JPEG

3. Never  Scale Down Your Images 

Never use a larger image than you need because width and height attributes of <img> elements can be set in HTML.

Say for Example, You need a 100x100px image but you have a 700x700px image, in this case never use the big image directly,Use of an  image editor like Photoshop is advisable in order to resize the image to the required dimensions. This will lower the file size of the image, so helps you to decrease page loading times.

4. Put Stylesheet References at the Top

Putting stylesheet references to the <head> section helps pages feel like it is loading faster.This is because it allows pages to render the styles progressively. Plus, it does not hurt that it is the W3C standard.

5. By Adding References of Script at the Bottom

At the same time, browsers can only download two components per hostname. If have added you scripts in the top,then on the initial loading of the page it would block anything else below it.User feels like the page is loading slower.

In order to avoid this, put script references as far down the HTML document as possible, preferably right before the closing <body> tag.

6. Keep CSS and Javascripts in an External Files

If your placing javascript and css directly in HTML document, they are downloaded every time when an HTML document is requested. This, increases the size of the HTML document and then, doesn’t take advantage of browser caching.

Its good practise to place your css and javascript in external files which makes the site easier to maintain and update.

7. HTTP Requests minimization

In general scenario what happen,when you visit any new web page, most of the page-loading time is spent for downloading components of that page (e.g. images, stylesheets, and scripts).

If you minimize the number of requests a web page needs to make, it will load faster. To reduce HTTP requests for images, one simple thing you can do is to use CSS sprites so that multiple images can be combined.

Multiple stylesheets and JavaScript libraries can be combined to reduce the number of HTTP requests.

8. Web Pages caching

If you using a CMS(content management system) that dynamically generates your web pages, you should cache database queries and your web pages so that the strain on your server can be decreased  and it speed up page rendering times also.

Advantage of cached page is that static version of it saved and delivered to the user instead of recreation of it every time when the request is made.

Note: Drupal core has native caching.

For Wordpress please check,
WP Super Cache
W3 Total Cache
-  WordPress codex entry on optimizing/caching WordPress

Below are links from where you can learn more about caching.

No comments:

Post a Comment