One of the major concern of today's web developers is how to speed up their website. No one wants to wait for page download neither your user's too. Having fast website is very crucial in today's world, their is no place for slower websites. Below are some tips that you can follow to make your website blazing fast with minimal network load and fast rendering.
To overcome this you can combine multiple css and js files together to form a single file. Instead of having images as separate file put them in one Image sprite ( Learn more about how to minimize http requests ).
The major problem caused by the scripts is that they block parallel downloads.The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per host name. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
Minimize HTTP Request
One of the key component that plays important role in rendering fast pages is to reduce the no of components which in turn reduces the number of HTTP request. Question is how does it affect performance ?. The answer to this is more the components more will be the look up and more will be the download time.To overcome this you can combine multiple css and js files together to form a single file. Instead of having images as separate file put them in one Image sprite ( Learn more about how to minimize http requests ).
Make JavaScript and CSS External
The use of inline javascript and css code causes more data transfer on network. Why ? because the inline code is download each time when page is requested. But when you use external javascript and css files, these files actually get cached by browser and browser prevents the re-downloading of theses files until its expired. However there can be circumstances where you are bound to put inline code, so its up to you that how you design it so that you can reduce the number of inline codes and styles.Minify JavaScript and CSS
Remove the unnecessary characters from the scripts and styles, this will reduce the number of size of the javascript and css files. Less be the size faster will be the downloading. There are many javascript and css minifying tools available in market.Avoid CSS Expressions
CSS Expressions are very powerful but may lead to slow rendering of the page. CSS Expressions are evaluated frequently on almost every event like mouse move, scroll etc. These calculations are made so frequently that if you put counter it will easily cross thousands in less than a second.Put CSS at top and SCRIPTs at bottom
Putting style sheet at the top is one of the best practices for faster page rendering. Doing so causes the webpage to load progressively and styles are applied as document gets downloaded.The major problem caused by the scripts is that they block parallel downloads.The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per host name. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames.
Avoid redirects
Redirects slow down the user experience. Inserting a redirect between the user and the HTML document delays everything in the page since nothing in the page can be rendered and no components can start being downloaded until the HTML document has arrived.Don't scale images in HTML
HTML scaling of images may cause slow rendering due to scaling of images. Scaling here is referred to both i.e streching,compressing . If you scale up your pictures it will render slow and is descale images then it's wasteful use of bandwidth.
Use cookie-less domains for static content
Always use cookie less domains to serve static content. If your domain is example.com then you can use cdn.example.com to host your static components. How does it helps? The answer is when a browser sends a request to your static component like images,js and css files it sends cookies too with that request. The server don't use cookies for serving these static content. It only creates network overload and traffic.
Use Content Delivery Networks ( CDN )
A content delivery network is distributed network of web servers to various geographical location to deliver the content efficiently. Server selected for delivering content to a specific user is typically based on a measure of network proximity. Ex : server with less response time.
Gzip Contents
The size of the document or content can greatly be reduced by compressing the document. This reduces the network bandwidth greatly. Gzip is the most popular and effective compression method. It reduces the content size by 70% from the original to reduce the network load and download time. check this enable gzip compression in apache
Add Expires Headers
Browsers use cache to load the content ( if your file is cached ) and reduce the number of HTTP request. A web server uses the Expires header in the HTTP response to tell the client how long a component can be cached. For this time period server will not make request for the cached file and loads it from cache. If future expiration date is too far then you have to change the file name each time if you want your users to see the change content.
No comments:
Post a Comment