Before you try to worry about performance keep in mind that performance that comes at the cost of user experience is useless
Almost everything you can do to improve performance will eventually end up at one or more of these principles.
1.Â Minimize HTTP requests: Every HTTP requests has an overhead. HTTP headers that accompany each request have some size (response headers are 250-350 bytes and request headers are close to 1KB) but the major culprit is the time between request initialization and request service (which can vary between 200 to 500 ms).
2.Â Keep the size of data you get from the server to a minimum: Most users donâ€™t have high speed internet connection and those which have would be simultaneously browsing other sites when they are looking at your **very important page**. So don’t expect more than 30-40 kbps for your site. Now you see where this is getting. If your page size is 500 kb do the math and you will see it will take around 13 seconds for your page to completely load.
Some things you must do:
1.Â Enable compression on your server (follows from principle 2): To make sure that the size of the data that goes down the wire to the client less, enable compression on your server. Put the following code either in your Apache configuration file or in the .htaccess file of your project’s root
SetOutputFilter DEFLATE AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
Header append Vary User-Agent
2.Â Enable HTTP caching on your server (follows from principle 1): Turn on caching on you server so the user’s browser doesnâ€™t make a request to the server for the content everytime but fetches it from the disk when it can. For most sites, content like images, scripts (js and css), flash donâ€™t change often so they can be cached in the browser. Put the following code either in your Apache configuration file or in the .htaccess file of your project’s root
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 15 days"
ExpiresByType text/html "access plus 30 minutes"
3.Â Stay away from .htaccess file: Never write in the .htaccess file until you absolutely have to. If you have to enable compression or caching or enable a module use the apache configuration file rather than touching the .htaccess file. The reason is that .htaccess files are read on each HTTP request. The longer the file the more time it will take to read that file. If you can, donâ€™t even use the .htaccess file. Now if your application is on a shared hosting I sympathize with you because you canâ€™t edit your apache configuration and have to use the .htaccess file.
7.Â Keep your css at the top of the page(follows from principle 4): If you place all your css at the start of the page the browser knows beforehand what the size, position,margin,etc of the elements is going to be. If the browser comes to know about the style of the element after it has drawn it, it has to redraw the element with the styles. So tell your browser about the styles before it draws the element.
10. Make minimum number of DOM modifications (follows from principle 4): Each DOM modification is costly because whenever you add or remove or resize an element something called ‘reflow‘ happens. Because of reflow the browser has to recalculate geometry of all the elements. So the next time you do something like adding 10 divs under a div, create a document fragment with
document.createFragment and then add those 10
divs to the fragment and add the fragment to the parent