In this post you will learn how to improve web page speed or how to decrease the loading time.
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.
Link : http://tools.pingdom.com/fpt/
• Web Page Test :
– Tool for checking your site’s speed and performance in different browsers.
Link : http://www.webpagetest.org/
• 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.
Link : http://code.google.com/speed/page-speed/
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
Link : http://sixrevisions.com/web_design/web-designers-guide-to-png-image-format/
8 Excellent Tools for Optimizing Your Images
Link : http://sixrevisions.com/tools/8-excellent-tools-for-optimizing-your-images/
The Comprehensive Guide to Saving Images for the Web
Link : http://sixrevisions.com/web_design/comprehensive-guide-saving-images-for-web/
JPEG 101: A Crash Course Guide on JPEG
Link : http://sixrevisions.com/graphics-design/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.
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.
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 : http://wordpress.org/extend/plugins/wp-super-cache/
– W3 Total Cache : http://wordpress.org/extend/plugins/w3-total-cache/
-WordPress codex entry on optimizing/caching : http://codex.wordpress.org/WordPress_Optimization/Caching
Below are links from where you can learn more about caching.