How To Optimize Shopify App (A Helpful Illustrated Guide)

If you are developing a shopify app OR let’s just say that you have developed already a shopify app, chances are that your shopify app might be slow.

So how can you optimize your shopify app? In this article, we’ll be giving you tips and tricks to make your Shopify App fast and reliable. Who knows? maybe because of this article, your app will get more installs than before.

Shopify App Optimization

I have personally developed a Shopify app where it generates an embed code to display a collection of products. If you already don’t know, the more items you display, the more your Shopify app will get slowed down but that’s just my observation.

According to Shopify, the maximum item you can display is up to 250 items. Personally, that is a lot, and displaying all of that 250 items in just one query can absolutely overkill your application. So what can we do to optimize this?

1. Displaying Shopify Products through AJAX

If you are a big fan of JQuery like me, then this is the best time for you to use AJAX to optimize your Shopify app. You can do this by making a PHP file where it accepts a collection ID sent by AJAX. Then do all the process inside that PHP file. (Obviously, this won’t make a big difference. Unless you optimize as well the PHP file that accepts data from AJAX.)

//Sample Ajax 
$.ajax({
    type: 'POST',  
    data: { collectionIDajax: id },
    url:"getproducts.php",  
    cache: false,
    success:function(data) {
       content.html(data);
    }
});Code language: JavaScript (javascript)

//Sample PHP
<?php
require_once("inc/functions.php");
header('Content-Type: application/json');
header('Content-Type: text/html');

$requests = $_GET;
$hmac = $_GET['hmac'];
$serializeArray = serialize($requests);
$requests = array_diff_key($requests, array('hmac' => ''));
ksort($requests);

$token = PASTE YOUR GENERATED TOKEN HERE
$shop = PASTE YOUR SHOP URL HERE

$collectionID = $_POST['collectionIDajax'];

$array = array("collection_id"=>$collection_id);
$collects = shopify_call($token, $shop, "/admin/collects.json", $array, 'GET');
$collects = json_decode($collects['response'], JSON_PRETTY_PRINT);

$returnToAjaxData = '';

foreach($collects as $collect){ 
    foreach($collect as $key => $value){ 
    	$products = shopify_call($token, $shop, "/admin/products/".$value['product_id'].".json", array(), 'GET');
		$products = json_decode($products['response'], JSON_PRETTY_PRINT);
		$returnToAjaxData .= $products['product']['title'] . '</br >';
    }
}

echo $returnToAjaxData;
?>Code language: PHP (php)

Note for Guidance

If you don’t know how the PHP file was written, you may read this article about How To Display Shopify Products using PHP

2. Decreasing the Number of Items Being Displayed

Obviously, this works depending on a case. But if you are displaying many items which consist of its title, description, price, and its image. Then putting in a loop to display 250 products will take some time to load.

I recommend using a variable that limits the loop up to 15 items. Then use AJAX pagination system to display the rest of the items (kind of like Google search result).

3. Shopify Image Optimization

If you are going to display images of the products, then it’s best to add a system where it compresses the images before it’s about to be displayed.

I know this could block the page load but there’s a trick to this. After you compress the images, upload it to a folder then add a conditional statement asking if the compressed image exists. If it doesn’t exist, then run the image compression until it gets uploaded.

This way, your Shopify app will load fast because the file sizes of the images becomes small.

4. Use Cache

Caching is the best thing you can use to speed up your Shopify app. If you are using JavaScript, CSS, and lots of images, it is best for you to use cache as it speeds up the page load once the user visited your Shopify app. You may use the following code in your .htaccess file:

# BEGIN Expire headers  
<ifModule mod_expires.c>  
        ExpiresActive On  
        ExpiresDefault "access plus 5 seconds"  
        ExpiresByType image/x-icon "access plus 2592000 seconds"  
        ExpiresByType image/jpeg "access plus 2592000 seconds"  
        ExpiresByType image/png "access plus 2592000 seconds"  
        ExpiresByType image/gif "access plus 2592000 seconds"  
        ExpiresByType image/svg+xml "access plus 2592000 seconds"
        ExpiresByType application/x-font-ttf "access plus 2592000 seconds"
        ExpiresByType application/x-font-truetype "access plus 2592000 seconds"
        ExpiresByType application/x-font-opentype "access plus 2592000 seconds"
        ExpiresByType application/font-woff "access plus 2592000 seconds"
        ExpiresByType application/font-woff2 "access plus 2592000 seconds"
        ExpiresByType application/vnd.ms-fontobject "access plus 2592000 seconds"
        ExpiresByType application/font-sfnt "access plus 2592000 seconds"
        ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"  
        ExpiresByType text/css "access plus 604800 seconds"  
        ExpiresByType text/javascript "access plus 216000 seconds"  
        ExpiresByType application/javascript "access plus 216000 seconds"  
        ExpiresByType application/x-javascript "access plus 216000 seconds"  
        ExpiresByType text/html "access plus 600 seconds"  
        ExpiresByType application/xhtml+xml "access plus 600 seconds"  
</ifModule>  
# END Expire headers Code language: PHP (php)

Conclusion

Shopify apps are like regular websites. They need to be fast and user-friendly, especially if you’re planning on publishing it to the Shopify app store.

The tips above are just few of the things that you can try to optimize your Shopify app. If you believe that your Shopify app is too slow then utilizing at least one of the options above will surely help your app.

So go ahead! 🙂