Magento Online Store Query

[darshak_khandhar]

Hello,

We are a fashion company based in UAE and have online store built on Magento 2. We also have mobile app both on iOs and Android. Our url is www.amri.ae

However we are facing issues such as slow site performance and slow loading of content and images. Our site is currently hosted on Siteground. Also we would like to know how much should be ideal size of product image for Magento 2 platform especially for fashion categories. 

Could you guide us like what improvements can be done for faster site loading and smooth performance. 

Thanks.

Darshak

[anisquare]

Hi Darshak,

We have recently done the performance improvement exercise for one of a client and here are the steps we performed

Enable Full Page Cache
Enabled compression and use mode page speed optimization of apache.
Enable compilation with production mode
Remove/disable custom log statements.
Optimized images
Evaluate and combined JavaScripts
Eliminate render-blocking JavaScript in above-the-fold content
Minify CSS and JS
Code optimization for categories page.
Remove marketing scripts which are causing performance issues.
Enabled varnish for Magento 2x.
Evaluate and implement CDN for images and static contents (JS,CSS)
Enable block level caching for home page for the custom content rendering
lazy load google ads on home page and Category page
Assess structured data recommendation for google mobile first indexing

Also, Image size should be around 500 kb and pixel size should be 100x200 px. Please let me know if you need more detailed explanation on how we did it. 

[darshak_khandhar]

Hello Anisquare,

I appreciate your reply. I will check for above points with a technical guy.

Regarding your image size we were told to have image size of less then 100 kb ? wont this affect the image quality? Should we go ahead and reduce it. 

Unfortunately some of our current image size is at around 2 Mb or even more.

Thanks

[anisquare]

You should definitely reduce the image size. Keep it around 400 kb. You can either use some online tools to do it or use below code in Magento to reduce the size of product image before display.

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$productRepository = $objectManager->get('\Magento\Catalog\Model\ProductRepository');
$productImageHelper = $objectManager->get('\Magento\Catalog\Helper\Image');

$productId = 1; /// change your product ID
$width = 150; /// Change as per your requirement
$height = 150; /// Change as per your requirement
$image_type = 'thumbnail';

$product = $productRepository->getById($productId);
$resizedImage = $productImageHelper->init($product, $image_type)
->constrainOnly(TRUE)
->keepAspectRatio(TRUE)
->keepTransparency(TRUE)
->keepFrame(FALSE)
->resize($width, $height);

[Robert_Rand]

Generally speaking, for web use, 72dpi is the recommended resolution. Additionally, you may be able to cut down the size of the images in pixels. For instance, I usually size down to 1000 x 1000 pixels or smaller for product photos. 

There are free tools to help you resize images, like: squoosh.app (web based) and Fastone Photo Resizer (available free through download.com).

You may also want to run a more specific speed test, like, GTMetrix.com or testmysite.thinkwithgoogle.com << Snipped >>

[maria_skula]

From what you say I might guess poor website performance and slow loading could be connected with the big amount of images, especially unoptimized.

The thing is more and more online stores choose modern WebP format over old PNG  and JPG. WebP is smaller in size and takes less time to load.

The solution I would recommend here is the Magento 2 WebP Images module since it allows you to automatically convert your current and future images from PNG/JPG to WebP.

The best part you can choose the size and quality of converted images.

[zissop]

Your performance problems are not image size related. For sure you have to reduce image sizes above 300k but thats not your.main problem.

Caching and use of elasticsearch is the way to go. Of course magento is slow by design but you can.make it much faster.

Also try to understand what is slow. Backend response or frontend rendering. From what i saw your backend suffers a lot, cant scale.for sure.