Hello All,
Yesterday I was checking few articles that describe some of the best practices that help in improving website performance.
I am mentioning below few of them; good thing is that they are not limited to any technology; so most of them can be applied in word press, jhoomla, magento, ror, and yes asp.net and MVC as well. They are more related to front end.
Remember even any website has fewer users (yet) but if it has slow rendering it annoy users and hardly attract new users; also Google’s ranking logic includes page loading performance so for SEO also the speed of the page is crucial.
1. First and the most common thing that almost all the developer do is to put the JavaScript on the top; within the head tag; The problem with this is that is when a scrip is downloading the browser stops parallel downloading and only when all the scripts downloaded it starts parallel downloading again.
This is because to perform any script related operation Browser uses “Script Engine” and wait for its “DONE” response before progressing again.
Solution: – Better approach is to put the script tags in bottom.
Possible Test: – To test this put the JavaScripts in bottom in your application that is under development and test the result with ySlow or Page Speed Monitor.
2. Avoid inline CSS and Inline JavaScript as much as possible; this is because let’s say there are three component of a page is developed by different developers and every component has inline css it takes additional effort by browser to identify them and render them; so better to have it common.
On top of that if you put you style classes and script tags in external files they will be cached by modern browsers upon first request to the page.
Solution: – Try to keep habit of having the styles in CSS file only and avoid duplicate css classes; even better let only one developer/ designer handle the CSS changes and review it periodically.
Possible Test: – Remove inline tag from your page and test the page again with speed test monitor tool.
3. Images are the most common part of the webpages; and that trend will never go or slow down.
Solutions: –
a. Use compressed images.
b. Use image sprite so that all the common images loads at once as soon as the first page gets loaded and used multiple time.
c. Sprite image also reduce no of HTTP requests so always use it when possiable.
d. Do not Resize image in HTML page because when you resize image to show smaller the browser has to load the full image and then present the reduce version on browser.
e. Use two types of images Full image and Thumbnail image when appropriate.
f. Always specify Height / Width attribute in HTML.
g. Good to have images bungle with div tag.
4. Large JavaScript files cause longer loading time.
Solution: – User JavaScript Compressing tools like JSMin and YUI Compressor. In case on not opting to tools you can at least remove unwanted white spaces and too large comment sections from your js files.
Also make sure that special functionality related JavaScript file can be included in that particular page rather having them in common php or .Master Page.
5. Have the device specific css for specific devices. This because when your mobile user hit your site he don’t want to pay for the additional desktop browser specific CSS which in normal case a bigger one. So have device specific CSS
6. User Use a Content Delivery Network (CDN) when possiable.
7. This is something we mostly do; include DOCTYPE in page. HTML that have DOCTYPE tends to render faster compare to those who don’t have them. But we hardly forget this.
8. Use DIV tag instead of TABLE tags, this makes Clean code + better SEO + speed up rendering.
9. User HTML5 and CSS3; It is true that not all but most browsers are supporting this especially if you are targeting mobile sites. And after all this mix is the FUTURE MIX.
10. Use less FLASH on home page and replace with HTML5 when possiable.
11. Use ajax and partial page; this may not speed up the page but can give relaxation to user.
12. Most important; always have the images, font and other things in place and so it don’t produce 404 error; because to produce this error browser spend very heavy time. E.g a missing font can cost you up to 3 second additional load time.
Tools you can keep looking at for page performance.
• Yahoo’s YSlow
• Google’s Page Speed
• AOL’s WebPageTest (Provide recording kind of visualization for your webpage)
I hope this helps. You can add your views and tips in this post.
Happy Coding,
Jigar (Love Stack Overflow)