How to Speed Up Your Website
There are some ways to improve site performance. It is always good that you first define performance criteria and start development activity. Below tips are useful in any case – before development during design phase and after development during performance testing.
1.
HTTP Requests should be Minimize
Most of the page’s load time is going to download the different element of the page like scripts, Flash, custom code, images, stylesheets, etc. An HTTP request is nothing but each one of these elements, so the more elements with take longer tome to page render.
You should do below changes.
- Remove unnecessary element. Streamline the number of
elements on page.
- Use CSS whenever possible especially for images.
- Don’t use multiple style sheets. Merge all into
possible less count.
- Put script at the bottom of the page.
2.
Reduce server response time
Response time should be monitor and it should be less than 180 - 220ms (milliseconds).
Read below to to find out
bottleneck.
3.
Enable compression
Rich content pages – Large pages which size are 100kb or more should take more time to download. You can use tool – Gzip to compress large pages. Compression reduces the bandwidth of large pages that's why reducing HTTP response.
4.
Enable browser caching
Whenever you visit website, website pages along with elements are cached and store in hard disk. Next time your browser stores same site from cache without sending HTTTP request to server.
If you enable caching than you will see improvement on site loading because first time when you hit the server, browser stores HTML document, stylesheets, javascript files and images into temporary location. For subsequent request , browser has to load only dynamic content from server, rest of content like HTML document, stylesheets, javascript files and images are stored locally.
You have to follow standard practice for caching like “Expires Date” , ETAG etc.
You can use Fiddle to check that
your most hit pages are cached or not.
Even you can do IIS setting for
Caching. Read more - http://improve-siteperformance.blogspot.com/2011/11/iis-settings-for-performance.html
5.
Minify Resources
Remove not require piece of code specially elements and JS script. Unnecessary code will increase the size of page and does take more time to download.
Use online tool for Minify JS and
CSS files.
6.
Optimize images
Change .BMP to .GIF file. BMP file takes 190 KB and converted GIF takes less than 30 KB. Set the parameter that any files should not be more than 40KB (Exception allow for dynamic rendering images). Image should have three things - size, format and the src attribute.
Image size
- Make sure that you crop images to the perfect size. For
example, if your home page requires 400 X 400 px image, don’t upload a 1000*1000 px image
and set the HTML element width
(width=”400”). This increased download time and slow down your
page.
- Decrease color depth to the lowermost acceptable level.
Image format
- You should use JPEG as far as possible.
- PNG is also option but some of the browsers are not
fully supporting.
- GIFs should use for small or simple images and for animated images.
- Do not use BMPs or TIFFs at all.
Src attribute – Don’t forget to do right coding after specifying size and
format correctly.
7.
Optimize CSS Delivery
CSS contents the style information for your page. Best practice is to used external minified file, which loads before your page renders. You should avoid to use inline styling which is inserted in the HTML document itself.
You should use an external style sheet to reduce the size of code, code usability and fast downloading.
8.
Reduce the number of plugins you use on your site
More plugins slow down your site, might create security issues and might be cause for overall slowdown.
If you are using third party plugins, check their security vulnerability and performance testing separately.
9.
Reduce redirects
More redirection increase load time. So you want to retain them to a minimum.
If you have developed a responsive site, you have redirects to take mobile users from your main website to the responsive version.
As per Google recommendations, you
should use either one of below approach –