Optimize The Page Loading Speed For Your Online Shop

Discussion

Nowadays,  build an online shop is not a difficult thing. There are many E-Commerce platforms or free open source software can help you launch a brand new online shop fast.  Maybe you used to spend too much time on shop template/theme choosing but ignored the following 5 very important details which can be optimized for improving sales conversion rate effectively.

Many shopkeepers drive traffic with PPC or CPM advertisements such as Facebook Ads and Google Adwords, so I did the same thing before, but I wasted a lot of money on it. The CTR seems not low, I was not sure how many visitors were truly reached on the landing page, but I knew some of them closed the page impatiently before it was completely loaded, because I was noticed there are some rendering-blocked resources slow down the page loading speed, such as a dead link, too many javascript files and so on.

Combine CSS/JS Files

All and all is start from the fast page loading speed. Now, let’s check your website and I will let you know some basic tips on how to optimize the page loading speed. First of all, test your website on Tools.pingdom.com. As the following screenshot, you will get some general suggestions such as combine resources, enable browser cache, reduce the image file size and so on.

Please note the first three issues, they are very common issues in some pre-built templates. If possible, combine all CSS files and JS files into one or just import them as inline scripts, be careful the order of javascript importing. Combine the script files can reduce the number of HTTP connections to achieve the fast response speed. If your online shop is based on WordPress + WooCommerce, there are plenty of cache plugin can help you do it quickly,  Autoptimize and WP Fastest Cache plugin are good choices.

Besides scripts combination, enable Gzip to compress the page and HTML is also necessary,  please refer to the following screenshot, the source codes is optimized.

Look at the last line, all javascript files are combined into autoptimize_d4eb94f96cb1dcbca5077436c0d5bc57.js file. Additionally, you can asynchronously load the script files to avoid the rendering-block issue, it’s not only good for page loading speed, but also for SEO. You can learn more about removing the rendering-block issue from Google Insight.

Optimize Pictures

In the past 5 years, I found many of our clients use to upload the original pictures to their website directly. They exported the photos from their camera, the file size of those photos are almost reached 3-4Mb, and the photo size is bigger than 4000px,  it’s too large for the web. Actually,  1000px is enough for the product images.

So please reduce the photo size first, and you’d better export those photos as web format picture with Photoshop. After you did that, the EXIF information of this photo will be thrown away, it’s unuseful for the web page. If the file size of the original picture is 4M, now it should be reduced to hundreds Kb, don’t worry about the quality of the photo, it won’t be lost too much.

Enable Browser Cache

Back to the first screenshot above, let’s check the first issue “Leverage Browser Caching“. The benefit of enabling browser cache is that load the pictures and the other resources fast when visiting your website for the second time. All resources were being cached in the user’s browser, they will not charge additional time and traffic to load those resources again.

If your web server is based on Apache, just edit .htaccess file of your site and add the following rules:

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"

## EXPIRES HEADER CACHING ##

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"

## EXPIRES HEADER CACHING ##

If using Nginx as the web server, just add the following rules into your site configuration file (the file is located at /etc/nginx/sites-availables/your-site-configuration-file).

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}

Additionally, using CDN service is also a good solution for that. If your online shop is running on Shopify platform, you don’t need to worry about this issue, because Shopify is already enabled CDN for your online shop. If you check the page source code, you will see some pictures and JS/CSS files are hosted on the CDN server like this:

If you have to do it by yourself, Max CDN is a good option which we are using.

 

Make Your Site Mobile Friendly

According to the statements of Facebook Ads, almost 80% traffic is generated from mobile devices. So make your mobile site fast is very important. The popular solution for mobile compatibility is using responsive web design. It means when you visit your website on the mobile devices, the layout will be automatically resized for reading friendly on the mobile devices.

However,  we have noticed that although the responsive website is a good low-cost solution, it’s not perfect. For example, it only resizes the page container to fix the basic reading experience, but some of bigger E-Commerce sites are heavily-resources on desktop version as well as the responsive version. How to fix?

So, beyond the responsive website, Mofect is working on Single Page App(SPA) for the mobile site, we hope to use SPA to instead of the responsive website in some cases. Now I just list the benefits of a good designed Mobile SPA below.

The Native APP like Experience

As Single Page APP name,  all pages will be redirected and loaded in the single page, just like using a Native APP, you don’t have to wait for the page refresh process. The fast and smooth page transition will improve the user experience a lot, and it’s much better than the responsive website.

Say Good Bye To Heavily Resources

We handcraft the codes, optimize the resources loading, get rid of the useless scripts for the mobile version. If you have coding knowledge, you know some scripts are also imported into the responsive website, many redundancy codes will make the responsive website slow. In the mobile web APP, this issue can be fixed perfectly. Of course, it highly depends on the coding level, we are doing our best to make it close to perfect.

Flexibility Deploying

The file of mobile SPA is the static HTML file and all data interactive is based on REST API, so it’s completely separated from your existing website, it means you can deploy the SPA to anywhere, even the local hosting.  For example, if your website domain name is https://abc.com, you could separately deploy the mobile web APP under a subdomain like https://mobile.abc.com or subfolder like https://abc.com/mobile, it will not influence the existing responsive website. So we think Mobile Web APP is a good additional solution for the mobile compatibility.

If your website was designed very earlier, even it’s not fully responsive, in this case, deploy a Mobile Web APP directly is better than spend a lot of money and time to rebuild a responsive website, isn’t it?

Mofect is making this magic thing happen, we focus on build such a service to seamlessly connect your online shop to our amazing mobile web APP with the low cost. If you are looking forward to becoming the earlier user of Mofect, please stay tuned through our newsletter and you will enjoy a big discount after the platform is online.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.