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 optimizationIts 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 ImagesNever 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 TopPutting 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 BottomAt 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 minimizationIn 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 cachingIf 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.