Website speed optimization should always be a top priority when there is so much of online competition. To improve your website performance 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 for speeding up of your website.
A website page that is rendered to a user technically is called as a DOM – Document Object Model. For a novice, elements that a rendered web page is 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 to 800kb and the other webpage’s DOM is 1mb then the latter one will take a longer load time.
The websites performance issues are a result of a number of different reasons. Using a website WebPage Performance Tester it has been seen that the images are accounting for a larger portion of a website’s size. We tested the amazon.com website to see it for real and the test results proved the same for the images.
Images are taking a larger chunk and the requests being generated by the website images are very high around 57.9% of the total requests and the size equates to 74% of the total size.
If we take an example of the fashion retailers, 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. As every static content generates an HTTP request you should always try to reduce the number of HTTPS requests required to fetch the resources for each of the web pages.
Our main aim here should be first focused on the image optimization. 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. A CSS Sprite is a means of combining multiple images into a single image for use on a website, to help with the optimization. This reduces the overhead of having to fetch multiple images.
So how can we optimize the Images?
There are basically two ways to optimize/compress the images –
- Lossy or Irreversible Compression
This technique is used to reduce data size for storage, handling, and transmitting content. Here some of the data from the original file will be lost. That is if we had an image that used this compression type, then the quality of the image so produced will always be degraded. It helps in the reconstruction only of an approximation of the original data, improving compression rates and thereby reducing the file size.
- Lossless Compression
Lossless compression is used in cases where it is important that the original and the decompressed data be identical to the original data. Here file size is reduced but the image quality is preserved all the times.
There are certain tools using which we can we can compress the images for our websites. Some of them that can be used to compress the images for your websites are –
- TinyPNG(Optimizes your PNG images by 50-80%)
- Pngcrush(Images have the same quality as of the source)
- ImageSmush(lets you compress JPEG, GIF and PNG images), and etc.
Note that the server from where your website is operatable also has a lot of elements/components that need to be taken care of. When the server renders these elements to a user/client on a browser these elements need be compressed altogether. This will help in loading the content faster and will be rendered instantaneously to the client. There are variables that can be used to lower the response times. Compression techniques can be used to reduces the response times by reducing the size of the HTTP responses.
The best technique is to compress all the data on the server using a compressing software like the GZIP. GZIP compression can be enabled for your website and will be definitely helping to save at least 50% of your bandwidth usage. Gzip is the most popular and effective compression method at this time used to compress the server files.
Mod_deflate is another way to compress the size of the files. It allows the output from your web server to be compressed before being sent to the client. Once the size of your site content is compressed, its size is smaller, and clients are able to download it faster.
- One thinks that it’s better to use the above-given ways to optimize the images, but what if the images are of the size 10 MB and over this and after the compression, they are reduced just to a so-called smaller 5 MB number size? What to do with these types of images? How to help optimize them for a better performance. Well, here we can make use of the CDN(Content Delivery Networks). CDN’s can be used to cache the large sized compressed images which in turn will reduce the DNS(Domain Name System) lookup. Always remember to keep all of your static content – Images, CSS, JS, Videos, flash, etc. on a CDN. Using the CDN also increases the bandwidth and allows to free up a large amount of space on your server.
- There are a lot of CNDs available in the market like – Amazone CloudFront, Max CDN, CloudFlare, Fast LY, Google CDN, etc. By using any one of these you can reduce the Bandwidth, Space, Memory and DNS lookup to the major extent.
Lastly, On Demand Loading/ lazy loading should be incorporated –
Lazy Loading is used to defer initialization of an object until the point at which it is needed. It can contribute to efficiency in the program’s operation if properly and appropriately used. What this actually means is that – Eg. we can make use of pagination for our websites to deliver the content to the clients. This way, only that parts of the webpage will be loaded that are required at that instant and when a user wants more of the content he can use the pagination to fetch more of the data for use.
With Ajax, web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page. For example a login popup, a search suggestion, etc. can be used to retrieve data in the background without interfering with the display and behavior of the existing page.
That’s all for this part in Opencart Speed Optimization, we will be learning more about how to optimize the other static content – CSS and JS files in our next article.
Stay put, and thanks for the Read!