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.

http://www.mnot.net/cache_docs/
http://en.wikipedia.org/wiki/Web_cache


Comments

Post a Comment

Popular posts from this blog

How to show only month and year fields in android Date-picker?

Image
Android default DatePicker show day/month/year fields but you have to customize this DatePicker as your requirements. Suppose that you want to show only month and year fields in android datepicker . To do this, you have to customize the Dialog DatePicker source code but it is not an easy task. In this tutorial I will show you a tricky way to solve this problem. Lets see how to show only month and year field in android DatePicker as a dialog.   Step to show only month and year fields in android date-picker: Some days ago I got this same problem and here I am trying to explain this in a sequential manner. I want to show a dialog datepicker when user click on an EditText. So if user click on EditText, A dialog datepicker will be invocked and it will show only month and year fields. To do this, at first we have to create a xml layout to hold the EditText fields. So create an android project and name it DatePickerExample. In the main.xml file just try to write this simple code....
Read more

How to construct a B+ tree with example

Image
A B+ tree contains n-1 search key values K1K2…….Kn-1 and have n pointers.   In a B+ tree the data are ordered  sequentially.  The leaf node may hold up to n pointers and must hold at least N/2 pointers. The root node must hold at least two pointers, unless the tree consists of only one node.  Now we construct a B+ tree. Construct a B+ tree for the following set of key values: (2,3,5,7,11,17,19,23,29,31) Assume that the tree is initially empty and values are added in ascending order. Construct a B+ tree where the pointer number is Four. Solution: When a node exceeds n-1 search key value then we split it into two nodes. First node contains (ceiling(n-1)/2) values.  2 nd node contains remaining node. Copy the smallest search key value of the second node to the parent node. Let's start, we know each node has N pointer and has N-1 search key values. In our example pointer number is 4, so the search key value is 4-1=3. So each node has 4 pointers and 3 search key val...
Read more

Conflict Serializability in database

Image
To maintains database state consistency we introduce serializability. Using serializability we can understand which schedule will ensure consistency, and which schedule will not. When we are capable of converting a concurrent schedule into a serial schedule then we cal it serializable schedule. A schedule is serializable if it is equivalent to a serial schedule. We divided this concepts into two parts 1. Conflict serializability  & 2. View serializability In this discussion I just clarify you the conflict serializability. Consider two instruction read, write and the data item A and B. When two instruction execute different data item such as read(A) and read(B), then we can swap the instruction without affecting the result of the schedule. But when the data item is equivalent to one another we need to consider following four condition.    a.   read (A ),    read ( A ).   they   don’t conflict.    b.   read ( Q),  ...
Read more