: Regarding improving site performance I have an e-commerce website and have close to 9000 products in it with each product having 3 pictures at least. Now my site is loading at an average speed
I have an e-commerce website and have close to 9000 products in it with each product having 3 pictures at least. Now my site is loading at an average speed but I want to improve it, as I will be adding lot more products in coming months.
I was think if I upload all my images to sites like imgur.com or flickr.com will it improve the performance and page speed of my website?
More posts by @Vandalay111
6 Comments
Sorted by latest first Latest Oldest Best
I know this sounds like hard work, but it's the easiest approach and requires no 3rd party image hosting. Since no one has touched on it, other than optimize the database, I'm adding it here.
Since you are most likely storing your products in a database, do the following:
Make all your images the same size, not in KB, but width and height. If you have thumbnails vs images vs full screen make each category the same pixel size.
Wherever you store your images, create subdirectories for each category in #1 . If you use a CMS upload the images to the subdirectory using the appropriate Upload Manager. If you're on WordPress, this may be tough.
In your Products Database, add a column named ProductImageString. If you used Categories, add ThumbnailImageString etc.
In your product display page, use an SQL query to display said product as such:
SELECT ProductImageString FROM ProductDatabase WHERE ProductID = xxx
Wrap the above SELECT in the apropriate img tag for your page language. This effectively balances the loadtimes if you were using static image tags, because you're storing the images as a string in the database, and making the page language do the work.
Since all the Widths and Heights are now uniform(See Step 1), you only need to build one page for each type of image you want to display, along with the other information that should appear on the product page. This gives you one Page to display your product, and makes every page uniform.
You can speed up your site in many ways.
Biggest one I think is to resize all your images if they are too big, I do this on my site to all the images uploaded. They are still fairly high quality but in some cases half the size of the original. As an example for someone on a 1MB/s connection. If each of your images is say 200KB, if you can get it to 100KB, then you would shave about a third of a second off the load time for just the images.
Normal load time at 200KB , 3 * 200KB = 600KB/1000KB = .6 second load time
resized to half at 100KB , 3 * 100KB = 300KB/1000KB = .3 second load time
Saved .3 seconds off loading of images alone.
Optimize your Database query's so your not making more query then needed, you can do this by doing joins which is what I do. You get all the data you need in sometimes just one query instead of many.
Cache your HTML pages instead of dynamically generating them every page load. If you have a comment section and other things that may be dynamic then just cache the non dynamic part, the product info part and then load everything else like usual. This also cuts down on the number of database query's too. If you have a user content generated site like eBay or something just regenerate the cached page anytime the user changes it.
Use a CDN(Content Delivery Network), the advantage to this is that now you don't have to serve all the data, instead you just serve up the HTML and then the CDN can serve up everything else like images and even CSS and JavaScript.
Go through your code to see if there are any areas where you can cut down on loading time, normally this would one of the last things you would do since any improvements you make here are probably small compared to all the others like image resizing, etc.
Bascialy everything I have said others have said as well, I just went into more detail with some of them. A Lot of this you will just need to test and see what kind of results you can get but definitely try the image resize if possible unless your images are already optimized to the smallest you can get them without sacrificing too much quality.
Most servers are fast enough and bandwidth not generally an issue. There are many things you can do to speed up your responses. Most of which are related to the performance of the DNS servers and the host more than the computer itself.
As far as images are concerned, optimize the images. I would not move them offline since there are new issues that arise as a result- especially running a store front. Use PhotoShop or some kind of code module to properly size and optimize images. I do not know what your configuration is, but there may be a plug-in for your CMS, blog, or store front. I would look at these. Otherwise, I would recommend a little tool that I absolutely love and can work offline once set. It is ThumbNailer from SmallerAnimals. You can find it here: www.smalleranimals.com/thumb.htm It is really affordable and can be a set it and forget it option if you want. I have used ThumbNailer for many years and it is amazing! Especially when sizing and optimizing images in bulk. I don't think there is a better option. In fact, I am not sure any other tool optimizes images better. Really. These guys are geniuses.
I second the recommendation of using Google Page Insights. But I recommend another option first. If you can hit your site via a browser, some browsers have tools that help to identify load times. For example Chrome has Developer Tools that can identify bottle necks. This is what I do from time to time to check my performance and how top optimize pages and server speed.
Now I have to admit that I have yet to optimize my images- I will when I am done with some more coding- and yet my site seems to load within 1/2 a second which is within the top 1%. The reason why I mention this is, while optimizing images is an excellent thing to do and image download times are generally the most significant delay in downloading times, it is not the only thing. For example, downloading JavaScript can be an issue as much as any image. Pay attention to all of it.
Check where your bottle necks are and solve them first, Then follow the advice given by @Martijn who makes excellent points. Enabling compression and caching certainly helps and I highly recommend them! Just make sure you do not have other problems that you are not aware of before spending time running in other directions.
My suggestion is to use separate server for images, this reduces the load on the working website.
If you want to speed up your site, just use Google Pagespeed Insights, if you follow those steps, you'll get improvents fast. Some points they check:
cache your CSS/JS/images
minimize CSS/JS
optimize images (kraken.io (website), imagemagick (server tool))
enable gzip
Index the proper columns in your database, optimise queries.
I don't recommend moving it to those servers. Those are free, and in this case, free = slow.
If you want to use the power of a CDN, register a 2nd IP address to your server, and link the images form there (can be actual other server, of same server with an alias if your server's load isnt the bottleneck)
It would reduce the workload of your server to upload them to an external host as asked about.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.