{"id":1838,"date":"2017-02-13T18:07:47","date_gmt":"2017-02-13T18:07:47","guid":{"rendered":"http:\/\/cloudkul.com\/blog\/?p=1838"},"modified":"2017-06-14T11:33:22","modified_gmt":"2017-06-14T11:33:22","slug":"opencart-speed-optimization","status":"publish","type":"post","link":"https:\/\/cloudkul.com\/blog\/opencart-speed-optimization\/","title":{"rendered":"Opencart Speed Optimization"},"content":{"rendered":"

Website speed optimization<\/strong> should always be a top priority when there is so much of online competition. To improve your website\u00a0performance you should be able to pinpoint where the possible issues are originating from. Nowadays the e-commerce websites are having a large number of images, CSS, HTML, JS(JavaScript) etc. and other elements that in turn are responsible and bring about the slow performance of your website. You can check our dedicated service Cloudkul<\/a> for speeding up of your website.<\/p>\n

\"Opencart<\/a><\/p>\n

A website page that is rendered to a user technically is called as a DOM<\/em> – Document Object Model. For a novice, elements that a rendered web page\u00a0is constituted of is altogether called as a DOM. The lower the DOM size faster will be the page loading time thereby increasing the performance and speed of your website. In other words, DOM is directly proportional to the loading time of your website. For example, if the DOM size of a website\/webpage is equivalent\u00a0to 800kb and the other webpage’s DOM is 1mb then the latter one will take a longer load time.<\/p>\n

The websites performance issues are a result of a number of different reasons. Using a website WebPage Performance Tester<\/em><\/a>\u00a0<\/strong>it has been seen that the images\u00a0are accounting for a larger portion of a website\u2019s size. We tested the amazon.com website to see it for real and the test results proved the same for the images.<\/p>\n

Images are taking a larger chunk and the requests being generated by the website images are very high around 57.9%<\/strong> of the total requests and the size equates to 74% <\/strong>of the total size.<\/p>\n

\"Opencart<\/a><\/p>\n

If we take an example of the fashion retailers<\/strong>, they have a humungous amount of images and they would never ever compromise over the image quality. Also, to include are the website design and other client side programming elements that are used for the enrichment of functionality use heavy CSS(Cascading Style Sheet) and JS(JavaScrip) files that also are low-performance adders. \u00a0As every static content generates an\u00a0HTTP<\/em> request you should always try\u00a0to reduce the number of HTTPS requests required to fetch the resources for each of the web pages.<\/p>\n

Our main aim here should be first focused on the image optimization<\/em>. As most of the website content is driven by images, there is a need to optimize this static content. We can make use of CSS Sprite<\/em>. A CSS Sprite is a means of combining multiple images into a single image for use on a website, to help with the optimization.\u00a0This reduces the overhead of having to fetch multiple images.<\/p>\n

So how can we optimize the Images?<\/strong><\/p>\n

There are basically two ways to optimize\/compress the images –<\/p>\n

\"Opencart<\/a><\/p>\n