When we talk about the Ecommerce section, availability and efficiency matters a lot because if your website takes too much time in loading and rendering the content it will definitely affect your customer experience and it also affects your sales numbers. Its very important for developers to follow standard rules to optimize the code and reduce the load time of webpages.
In most of the cases around 90% of optimization is required at the front end content rendering, only 10% of optimization is required at backend in the form of Memcached, redis or Varnish.
You can check your Webpage loading time and efficiency on http://www.webpagetest.org
There are some rules regarding webpage optimization which we can use to reduce the response time as well as loading time of our website.
- Reduce DNS Lookup -: As we know a website is a collection of various contents which might be hosted on different domains, client’s browser has to resolve these multiple DNS lookups to get the hosted content which reduces the time of webpage loading. So its a good practise to minimize the use of content hosted on third party domain.
- Minimize HTTP Requests -: Most of the time of end-user response is spent on the front end in downloading all the components of the page including css, html, js, images etc. If somehow we reduce the number of these components it results in less HTTP requests to the server and automatically reduces the number of http requests to render the pages which results in less loading time. Now the question arises how to reduce these components and the answer is By combining the multiple files, It is a way in which we combine all the scripts into a single script for example we combine all the javascript files into a single javascript file or combine all the css files into a single css file.
- Implement CSS Sprite -: CSS Sprite is an another way to reduce the number of image requests. It combines your background images into a single image and we can use css background-image and background-position properties to display the desired part of the image.
- Use GZIP components -: To speedup the webpage of your ecommerce store, Bandwidth is very important aspect as we know if browser has to get 100kb of content and the bandwidth is very low, it adds another couple of seconds in getting the content. So to minimize the effect of bandwidth we can compress the content using gzip and deflate encoding which all the modern web browsers supports. After enabling GZIP component on the server if any modern browser ask for the compressed content the server sends the response in any of the encoding mentioned above which almost reduces the content size over 90%. for ex-:
Browser sends a header -: Accept- Encoding: gzip, deflate Server Respond with a header -: Content-Encoding: gzip
- Use a Content Delivery Network -: User adjacency to the webserver really depends on response time. Deploying your server’s mirror in each and every region of world is practically not economical. So with the help of CDN we cache the static contents like images, css, js, scripts etc. and speedup the delivery time by caching around 90% of the web contents. A content delivery network (CDN) is a collection of web servers distributed across multiple locations to deliver content more efficiently to users. The server selected for delivering content to a specific user is typically based on a measure of network proximity. For example, the server with the fewest network hops or the server with the quickest response time is chosen.
- Make JavaScript and CSS External -: When you load a webpage it requests the server for multiple contents, if your css and javascript is inline it might reduce the number of http requests but it also hinder the functionality of cashing as well because css and javascript files can be cacheable on the client end only if they are embedded externally so that there is no requirement to fetch them from the server on each and every request. If we make them inline, browser has to get the css and js content along with the HTML content. So its always better to make the stylesheet content cacheable by making it external stylesheet.
- By enabling Keep Alive -: Keep alive is a method to allow same tcp connection for HTTP content instead of opening a fresh tcp connection for each and every request. It is a communication in which web server and browser serve multiple content in a single connection. In modern web servers keep alive is already enabled if its not you can enable it with the help of .htaccess file or in the server configuration for example-: we have to set the value “KeepAlive On” in apache2.conf of apache webserver.
- Add an expire header -: To speedup the access time we can enable an expire header in the http header so that after first request we can keep the content cacheable for the future hits and simultaneously reduce the http requests and response in the form of cached stylesheets and images which are almost the 80% of the whole content. for ex-:
header('Expires: '.gmdate('D, d M Y H:i:s \G\M\T', time() + (60 * 60)));//this header will expire in 1 hour