10 tips to increase your website speed

Website loading speed is very important, a faster website means a better user experience. There’s no point of making a beautiful website if it is slow loading. Interestingly, for a faster experience you have to take care from the very first step when you start with the mockups/PSD’s .Below are tips and best practices which one should take care while designing/developing a website which can increase your website loading speed:

Website Speed: PSD’s

1. Avoid gradients for background : Gradients in CSS are not supported by a lot of older browsers therefore you’ll have to use images to make your site compatible to these browsers [IE8,IE7..]. Since for gradients  you’ll either create a high definition JPG or PNG, these images are heavier in size and take time to load, also create an additional http request to the server. So best case try avoiding gradients at least for backgrounds. Check out this tutorial on how to optimize PNG’s in photoshop

2. While adding Images to PSD, take care of 8 pixel image grid: Every image on photoshop can be broken down into 8 pixel grid, amazingly you can easily achieve image optimization [by size and quality ] by simply taking care of this. See example tutorial on smashing magazine on how to do image optimization on photoshop and reduce image sizes by atleast 5%.

Website Loading Speed: CSS/JS/HTML

3. Put Stylesheets at the top & scripts at bottom: Stylesheets should be placed in the Head section to help page to load progressively. This would help the browser to display whatever content it has loaded as soon as possible in right formatting, thereby improving the user experience.On the other hand since loading scripts at begining hinders parallel downloading of images/css by the browser therefore it is best to include scripts in the footer section.

4. Use <link> over @import: Since CSS are loaded first, importing stylesheets in to another stylesheet delays the parallel Http requests which could have been made if link is used.

5. Use “Parent->Child”, CSS selector structure: Remember ” CSS is parsed right to left ” by the browser, so the last selector is fetched first then towards the first selector on the left. Say for example in this css selector : .vslider > *, all the elements of the DOM structure are selected first then the class vslider filter is applied over it thereby increasing the CSS parsing time by the browser. Best usage is to move from general towards more specific selectors, i.e Parent->child.

6. Avoid using Find() or Children () : While jquery is one of the best/optimal ways to select dom elements using generic functions to search for dom elements also has an impact on javascript parsing by the browser.

7. Don’t Scale Images in HTML : Scaling images in HTML can slow down your website rendering by the browser. Since the browser now calculates which pixels to show or which pixels to expand, one should not use a bigger image using the width and height img parameters in HTML. eg: <img width="100" height="100" src="vibethemes.jpg" /> then the image vibethemes should be 100x100px rather than a scaled down of 300x300px image or scale up of 50x50px image.

 8. Avoid Empty Image src or Anchor tag <a hr : Browsers are confused when they see and empty img  src or a href, so they create another HTTP request, some to the directory and others to the page again. So even if you are not displaying image the impact of including a blank src or href is same as including an actual image [using srpties :)]. Read more on empty tags on GTMetrix.

Increasing Website Speed: PHP

9. Use Single Quotes in echo: Wrapping strings in single quotes helps PHP processing faster, as PHP doesn;t detect variables within a string when single quotes are used whereas in double quotes it detects variables within the string.

eg: echo ‘This is $abc VibeThemes’ [ displays: This is $abc VibeThemes ].

versus

$abc=2;echo “This is $abc Vibethemes” [ displays: This is 2 VibeThemes ].

10. Use GET for AJAX Requests & simple form submissions : Remember that “POST is implemented in the browsers as a two-step process“.

1. Sending the headers

2.Sending data.

Since GET can handle upto 2K data easily[old IE limitation], simple forms and ajax requests should be sent via GET for faster processing.

Lastly some Awesome Tools you should checkout to calculate your website speed:

1. Loads.in : Captures screenshots at various time intervals giving you an idea at what time the site becomes usable. You can select user location and browser to check page load time.

2. GTMetrix: Best toll to compare your website page load time versus your competitor’s page load times. Supports upto 5 page speed comparisons with Google Page speed score and Yahoo ySlow score. Also maintains a history of the page load times.