If you are a web superhero – please ignore this post.
Lately I have come across a lot of web startups that run on off-the-shelf cheap software.
No harm in doing so but the performance of such readymade stuff is quite low.When it comes to web apps the site speed plays a major role in adoption and eventually your startup’s growth. The following few tips could drastically improve your site performance that most of the off-the-shelf applications may not follow. I generally use these to judge the first level of competence of any web development company. You will be surprised that although these are basic stuff for web development but most developers do not follow this and others are not even aware.
Beginner – No skills required
1. Optimize all images – If your site has a lot of large images, try SmushIt to reduce the file size without losing the image quality.
2. Minify JS/CSS/HTML – Minifying is basically removing all characters from the code that improve the readability but do not affect the functionality. Elements like white spaces, comments, new line characters can be removed before putting the files on production. Lots of free tools are available online for this. This one is the easiest for 1 time use.
3. Gzip all files – One of the major steps in reducing server load and faster loading of pages is to compress all files. Like you zip heavy files before emailing (I hope you do) in the same way Gzip compresses web files before transfer. In most cases you would save 50-70% of bandwidth with this.
4. Add a far future expiry header to static files – The static elements like images, CSS files etc. that you do not expect to change over time, should have an expiry header defined so that these files are not downloaded every time the user visits the site. You can add the following code to your .htaccess file.
ExpiresByType image/gif “access plus 1 month 15 days 2 hours”
Advanced – You may need some help here.
5. Use CSS spriting to combine images: You will probably need a HTML designers help here. If you have too many small images (<5KB), those are generally icons etc., you may consider joining them into a single file. This allows not making multiple requests to the servers for very little content.
6. Define Image Dimension: For all images used, specify the width and height, either in the HTML <img> tag, or in CSS. This will allow the browser to allocate specific space for the image and then continue rendering rest of the page. This help in faster rendering without needing to reflow the whole page when images are loaded.
If you want to test your site’s performance try GTmetrix. On many instances I have been surprised to see the traffic growth and saving on server bandwidth after implementing these basic stuff.
– Share your tips as well.
[Naman is a startup enthusiast and has worked with couple of Indian startups as Product Manager. He is the founder of FindYogi]
