Interview Question Front-end Software Engineers
Team: Web Developer
Country: United States
Interview Type: Phone Interview
CSS Optimizations
1) Avoid using inline CSS styles
2) Combine all the external CSS files into one CSS file if possible, the purpose is to reduce the number of http calls to server.
3) Use compressed and minified CSS file
4) Avoid duplication of styles, use styles for an element in alphabetical order of its occurence (though practically this is bit difficult)
5) Avoid using hecks for browser compatibilities
JS Optimizations
1) Avoid using inline script tags
2) combine all the script tags into single JS file and use minified version of it.
3) Avoid using global variables, wrap them in closures.
4) Load only the script that is required before page load. Tracking pixels and other such scripts can be pushed bottom of the page.
5) There are scripts which help in lazyloading the features. It means loading the scripts in the order you want them to load.
6) Use asynchronous approach wherever possible, it reduces page load time.
HTML Optimizations
1) Avoid using tabular layouts, go for div based layouts.
2) Give width to elements in percentage if possible and not in pixel, try to make them responsive such that they render properly in all platforms like mobile, tablet & desktop
3) Try to reduce number of tags on page, the whole idea is to reduce page weight.
4) Remove whitespaces from view source if not required.
5) The number of outgoing links on each page should be kept less than 100 as per google standards
Image Optimizations
1) Use .Png images wherever possible as they take less size in KB.
2) Try to combine images in Sprites, the whole idea is to reduce number of http calls.
3) Use HTML5 and CSS styles to create images wherever possible.
Also few other points to mention at top level are:-
1) Serve all resources like image, js, css files from a single domain, avoid using multiple domains or sub-domains
2) Social media plugins like fB, g plus, twitter- these APIs tend to decrease page performance during peak traffic hours, Try to load them asynchronously
CSS Optimizations
- GAUTAM JAGNANI November 23, 20131) Avoid using inline CSS styles
2) Combine all the external CSS files into one CSS file if possible, the purpose is to reduce the number of http calls to server.
3) Use compressed and minified CSS file
4) Avoid duplication of styles, use styles for an element in alphabetical order of its occurence (though practically this is bit difficult)
5) Avoid using hecks for browser compatibilities
JS Optimizations
1) Avoid using inline script tags
2) combine all the script tags into single JS file and use minified version of it.
3) Avoid using global variables, wrap them in closures.
4) Load only the script that is required before page load. Tracking pixels and other such scripts can be pushed bottom of the page.
5) There are scripts which help in lazyloading the features. It means loading the scripts in the order you want them to load.
6) Use asynchronous approach wherever possible, it reduces page load time.
HTML Optimizations
1) Avoid using tabular layouts, go for div based layouts.
2) Give width to elements in percentage if possible and not in pixel, try to make them responsive such that they render properly in all platforms like mobile, tablet & desktop
3) Try to reduce number of tags on page, the whole idea is to reduce page weight.
4) Remove whitespaces from view source if not required.
5) The number of outgoing links on each page should be kept less than 100 as per google standards
Image Optimizations
1) Use .Png images wherever possible as they take less size in KB.
2) Try to combine images in Sprites, the whole idea is to reduce number of http calls.
3) Use HTML5 and CSS styles to create images wherever possible.
Also few other points to mention at top level are:-
1) Serve all resources like image, js, css files from a single domain, avoid using multiple domains or sub-domains
2) Social media plugins like fB, g plus, twitter- these APIs tend to decrease page performance during peak traffic hours, Try to load them asynchronously