Increase Website Speed with Some Basic Steps

Today with growing competition everybody is developing sites and its of utmost importance to optimize site with respect to speed. Many sites say that one second will lead to seven percent conversion rate loss. So every second is crucial. Well initially when I started my career with PHP I used to think that beautiful looking sites will always be heavy! But honestly today I cant say how much wrong I was. Today you can follow these simple steps to get hold of fast sites by summed steps below.

1) Sprites
Use Sprites for small images ( like for social icons). But why sprites? In few words to reduces the number of HTTP server requests. Well many designers may shrug away thinking that its too complex. But with fast growing web tools everything is available online. Just design and develop your html. Then use ‘Sprite Me Tool‘. It develops the sprite images and you can export the CSS as well. So are you can sprite expert now! 😉

2) Minimize Your Files
When someone starts learning computers he starts with this sentence – program is a set of instructions feed into the computer line by line. Same happens for websites. If a CSS file of 1000 lines is minimized its size will be minimized hence it easily reads without breaking into multiple line. So minimize. Online Tools available for different type of files:
a) JS Minify Tools
1) http://javascript-minifier.com/
2) http://jscompress.com/
b) CSS Minify Tools
1) http://cssminifier.com/
2)http://www.minifycss.com/css-compressor/
c) Compress HTML Files
1) http://www.textfixer.com/html/compress-html-compression.php
2) https://htmlcompressor.com/compressor/

3) Image Optimizer
Why should a server bear the load of an image of large resolution when we would get same result with the smaller resolution and size exactly needed by the HTML? Size of images can make a hell lot of difference in speed so make sure the images are optimized.
a) http://www.smushit.com/ysmush.it/
b) http://www.imageoptimizer.net/Pages/Home.aspx

4) HTACCESS 
Enable gzip, keep-alive and create expire headers.

<IfModule deflate_module>
	<IfModule filter_module>
		AddOutputFilterByType DEFLATE text/plain text/html
		AddOutputFilterByType DEFLATE text/xml application/xml application/xhtml+xml application/xml-dtd
		AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml image/svg+xml
		AddOutputFilterByType DEFLATE text/css text/javascript application/javascript application/x-javascript
		AddOutputFilterByType DEFLATE font/otf font/opentype application/font-otf application/x-font-otf
		AddOutputFilterByType DEFLATE font/ttf font/truetype application/font-ttf application/x-font-ttf
	</IfModule>
</IfModule>


<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 year"
# My favicon
ExpiresByType image/ico "access plus 1 year"
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
# CSS
ExpiresByType text/css "access 1 month"
# Javascript
ExpiresByType text/javascript "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"

ExpiresByType text/html "access plus 1 month"
</IfModule>

# Create expires headers
<FilesMatch "\.(ico|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
Header unset ETag
FileETag None
</FilesMatch>
# End Create expires headers

 5) Defer and Async / Keep Javascript and CSS files before closing of Body Tags
Though my personal choice is to avoid these attributes but they help in loading the sites very fast. But my first preference is to keep the javascripts before the closing body tags. So in case you have no other choice you can use async for library files and defer those which depend on library files. In case  you are confused between Defer and Async you can consult this link.

So here are the five steps to one solution that is optimizing your site in terms of speed. In case you are planing to get much better speed you must use GTmetrix and PageSpeed Insights. If you start developing the site with these points you will and must get best speed for your site.