The new site was built completely from the ground up. We developed the custom theme with primary goal to have the fastest load time while keeping all of required functionality and ability to display unique page layout for each of Bluelounge’s 30+ products. I invited Rizqi Nizamil Putra into the team to help with the front-end development as time was of the essence as well. We completed the project on time and boy, the results were better than our expectations. Thanks for Shopify’s solid infrastructure, most of the web pages loaded in less than 2 seconds. A critical factor when you are building an e-commerce site.

Bluelounge new website with Shopify

You always want to make it better and faster…

Move forward to June 2016, Bluelounge came with a very specific but interested request. In order to improve the site’s SEO even further, they asked whether it was possible to get the PageSpeed score above 90 for both Desktop and Mobile from Google’s PageSpeed Insights and an A from GTMetrix website performance tool.

To be honest, I initially considered the request quite difficult considering one of Shopify’s major limitations was that we did not have full control of the server and apps. After a bit of research on Shopify’s forums, this was a very common issue as found here, here, and here. There are many suggestions there which you could take to improve the site’s performance bit by bit, mostly were already applied on Bluelounge website, but probably not enough to make it get >90 PageSpeed score.

I took on the job nevertheless, the challenge intrigued me.

Performance analysis

When trying to improve a website’s performance, whether for SEO, load speed, or conversion rates, the first thing to do is to breakdown what have been done correctly and what’s still missing. That was exactly what I did.

Theme related items done:

1. Avoid CSS @import; except for the web fonts which are loaded from MyFonts
2. Valid HTML structure; no console errors

Content based items done:

1. Optimize images
2. Specify image dimensions
3. Serve scaled images

Important items done by Shopify by default:

1. Leverage browser caching
2. Enable gzip compression
3. Enable Keep-Alive

Critical items to improve:

1. Minify CSS
2. Minify JavaScript
3. Eliminate render-blocking JavaScript and CSS in above-the-fold content

Even with the fast load time, PageSpeed still considered the site’s performance below standard and only rated it 83/100 for Desktop and 66/100 for Mobile.

Bluelounge website PageSpeed score result before optimization

The first two items were relatively easy to do, with the right tools.

Minifying and combining CSS files

The website’s stylesheet had been built using SCSS with Bootstrap for the framework, so minifying the output file alone was not enough to make PageSpeed happy with the file sizes.  I had to improvise. Using Bootstrap for Sass, I rebuilt the CSS by hand-picking Bootstrap components that were actually used and eliminated the rest. I also carefully merged individual CSS files into a single master stylesheet for most of the pages.

After minified, the final bluelounge.v42.css  is about 123KB in size.

Minifying and combining JavaScript files

Same as CSS, minifying alone was not enough if they files were still fragmented. PageSpeed really factored in the number of calls it had to make to load a web page. This time it was a bit more tricky though, as with JavaScript a small error or wrong order could break critical shopping cart functionality. It took extensive trial and error tests to get the desired output.

Luckily PageSpeed is more forgiving when it comes to JS files and I did not have to merge everything into a single file as I had done for the CSS. I still managed to combine 7 JS files into one to reduce the number of requests.

You could use these tools to combine and minify CSS and JS files:

• JSCompress
• shrinker
• Refresh-SF

Tip: always do thorough tests after merging and/or minifying CSS or JS files. At the very minimal, make sure you could still add items to cart, view shopping cart, and proceed to checkout.

Eliminating render-blocking elements above the fold

What is render-blocking content? In my own words: files or elements that delays the HTML page to be loaded as quickly as possible. Most JavaScript and CSS files are usually inserted within the <head> . This means your browser will try to download all linked files while it tries to complete loading the rest of the page, thus creating a delay from the of first byte received until the page is rendered on your screen.

Above the fold means the initial area of your browser’s viewport before scrolling further.

The concept is simple: to get the browser to render above the fold content as quickly as possible by reducing as many unnecessary elements as possible. Unfortunately, it’s really easier to be said than done.

Eliminating render-blocking CSS

For quick and lazy approach, you could always move all your CSS calls to the bottom, before the closing </body>  tag. The problem with this is, and you probably have seen it on some sites, you would see the page shown with plain content first before it quickly shifted to the stylized version a second later. For Bluelounge, this was not an ideal solution. They did not want to sacrifice form over function, which was understandable.

The solution was to use inline CSS for essential above the fold styles within the <head>  and call the rest of the stylesheet from external CSS file at the bottom of the page. I needed to create a mini version of the CSS and only include classes used to render above the fold content.

Why not inlining the entire CSS file and save the trouble from having to rebuild an entire CSS block? Because you want to keep the HTML code light. Inline CSS is not cacheable. If I put the entire CSS inline, I would add 74KB on every web page and PageSpeed would not like it either.

At the end my inline CSS was around 21KB, mostly from Bootstrap’s grid classes.

Eliminating render-blocking JavaScript

The final part was to optimize the JavaScript calls. I had been saving the hardest part for last. Shopify’s shopping cart functionality depends on JavaScript, specifically using jQuery library. What this implies is that I could not just move all JS calls to the bottom like with CSS. With the template structure at the time, some shopping cart ability like adding an item into cart works by loading the script block within the body of the page. If the jQuery library was called after the function, it would simply not work.

I had to restructure the JavaScript calls, removing any function made inside the content and combining them into an external JS file to be loaded at the bottom of the page. Some functions still needed to be retained as inline though. They required to call dynamic variable from Shopify’s liquid language. For these, I just move them further down.

After setting the right order of the scripts to be called, my work was done.

The outcome

The numbers speak for themselves.

Bluelounge Homepage – PageSpeed score 94/100 for Mobile

Bluelounge Homepage – PageSpeed score 95/100 for Desktop

Of course PageSpeed score is different from page to page and you should not just measure the Homepage. In this case, most of the pages have the score of >85. Mission accomplished.

These steps may not be applicable to all Shopify powered sites, but hopefully you will be able to pick up a point or two. Also keep in mind that if your site uses many third party apps that add calls to external assets, it is almost impossible to control those.

Interested to optimize your Shopify website? Please do not hesitate to drop me a line.

The post Shopify PageSpeed Score: Pushing the limits on Bluelounge website appeared first on Michael Sunarlim.

Countless threads have been created asking the simple question: should I use Magento or [name other popular e-commerce application]? I can very confidently answer this now: if you never had any experience managing e-commerce site, limited budget or resources, then look elsewhere. Many other e-commerce applications will save you money and headaches, while you can build up your revenue before moving to the next level.

Do not get me wrong, as stated in the beginning, I really like Magento. It opens up new possibilities of actions and automations that I could not do with previous systems I worked with before. But until you can see the limitations of other applications in your list, then keep it with lower priority in your list.

Here are a few reasons why Magento could create more problems than solution to your business requirements:

Magento requires more time and budget to develop

Given its complex nature, you cannot turn finalized HTML pages into Magento templates overnight. It involves break them into tiny blocks and combining them again through its XML-based layout file. Tons of free and premium extensions can also be very tempting, but implementation may not be as easy as adding plugins to your WordPress blog. Conflicts will be expected and your developer needs to have full knowledge in how your e-commerce site is set up in order to be able to debug effectively.

It is much harder to find good and experienced Magento developer

Unless you have very huge budget of course, in which you can just go to the best digital agency specializing in e-commerce and/or Magento development. Many developers may offer affordable budget and can actually build the site as specified, but they might sacrifice Magento’s strict rules which lead to more problems in the future. Or you could also spend a lot of money but do not get the results you expected. Bad coding will only make your site slow and vulnerable.

Related to the next point, if your developer does not have server or networking skills at all, that is another reason to look for another one. At the very least, Magento developer should be able to recommend a good configuration and setup.

Magento needs to run on a very good server

If you are not willing to spend more than $50/month, then you should forget about it. Even VPS might not be enough, depending on the traffic and how good the server is optimized. My suggestion: go with Magento optimized hosting providers. Installing and properly configuring full page cache will also improve the performance significantly.

Magento admin has long learning curve

You want to use e-commerce platform that does not require a formal training? Then Shopify is what you are looking for. Magento settings have so many layers which you can easily get lost or forget. Google is always your best friend, but if you do not want to go through the trouble just because you want to change the contact email address, then Magento is not for you. I even feel that it is not designed to be self-managed, instead you need a dedicated person to help you manage it.

Taking The Risk

All the reasons above will be worth if you have identified the restrictions of other systems and could only find it on Magento. For me, here are some:

1. You need advanced price and marketing rules. This one is very obvious. You can create extremely complex promo rules out-of-the-box, or even extend them further if needed. This is achievable because you can create multi-level conditions and actions within Magento’s Shopping Cart Price Rules.
2. Integrations with other systems. Including accounting, warehouse, fulfillment.
3. Multi store setup. This is always one of key decision factors against other systems. Magento multi store feature is very mature and deeply integrated with everything else. It is part of the framework and very solid.

Still confused of which e-commerce platform you should use? Please share it here.

The post Things to know before choose Magento appeared first on Michael Sunarlim.

If you browse through the web, you can easily find dozens of solid e-commerce/shopping cart platforms to choose. If you look to the forums for a suggestion, you will literally get thousands of different opinions. The same case if you go to your digital agency or developer, usually each of them already set their own preferred platform. Nothing to be blamed here though, you practically need years to be able to fully understand the structure and functions of one of the platforms to be able to fully customize the templates.

My suggestion is this: before you go asking an expert’s or other people’s opinions to help in your decision, it is much better for you to define the requirements of your online business. Below are some guidelines to get this:

Business scale in short and long terms

This is something that would be easily passed through the considerations as you are in a rush to start selling. While switching platforms is a common phase as your business grows, it does require a lot of time and energy to set up a new one and migrate your existing data and assets. By anticipating the requirements beyond the present, it will help you to save time and money. Try to answer these questions, each with the a year, 3 years, and 5 years time scope:

1. How many products/SKUs do you sell?
2. What is your market segment?
3. Are you selling Internationally?
4. How do you work out your orders fulfillment

Essential features

These are always the toughest ones to compare and anyone can easily write down a separate post about this so I will try to explain it as brief as possible. If possible do not start looking or take any advise before you create your own list of features and functions that you will need. Each platform will brag about the advantages of using it and they will only confuse you more. Keep your focus by having a shortlist of must-have features, that way you can cross off ones that do not qualify without needing to look back later. While doing this, always keep in mind about scalability point above.

Here are few vital points that I always write down before I look on the options:

1. Payment gateways, make sure it supports the type of payments that you plan to accept
2. Shipping methods and carriers
3. Marketing/sales tools integration, if you have any

Note that in some cases you will not be able to find a platform has all the dream features you want. There are 3 options for situations like this:

1. Develop custom modules/functions on top of the platform that has most features you need. Most modern platforms allow you to create plugins and extensions. If you are lucky, you may find modules built by third parties that fit your needs.
2. Think of an alternate process to apply the feature in different form that works with the platform.
3. This is always the last option, but if your business process is very unique then you may need to create a custom platform for the entire store.

Resources and skills

How do you plan to develop and maintain the site, do you have an internal or external team? What is their level of expertise and experience in the platform that you prefer? If they are not specialists, then give them a chance to take a look and time to learn if needed.

In the chance you already have a good web server with good team handling it, then installing an open source platform on top of your server can be a good option to minimize costs.

Tip: if you do not have reliable resources to manage your server, then using SaaS can be a very good idea. If you are serious about your e-commerce business, then throw away the idea of using a shared hosting for your store. I would suggest of at least using a VPS (Virtual Private Server).

Design customization

Every e-commerce platform gives a different level of flexibility in terms of customization, although the good ones should allow you to customize the template design to any form you desire. Do your research thoroughly on this. The easiest way is to find examples of other sites that are built on that platform, if you find many that have similar looks to your ideal layout than it is a big plus.

Interface

Keep in mind that you and your team will be interfacing with the dashboard/admin panel for almost everyday. Imagine that you find the CMS interface is frustrating but you are forced to deal with it all the time, easily said you may not want to explore it too often and lose the interest to work on it after a while.
This is a very subjective matter though, some people may not really care much about this.

Popular recommendations compared

These are not direct suggestions. As explained on this post, you need to pick the one that fits your business best. But there are 3 big players on the market right now and I want to use them to make comparisons based on the points listed above. Because of the popularity, you would be able to find human resources that are highly familiar with either one so I will only compare the ‘resources’ related with the server.

Magento Community Edition

Magento is most ideal when you are planning to sell hundreds to thousands of products as its framework was designed based on enterprise level of e-commerce platform.
Business scale: medium to very large
Features: extensive
Resources: requires optimized VPS or dedicated server
Customization: very flexible, but more complex
Interface: good, but requires time to understand the steps to complete each process
Price: free

OpenCart

Another good option for open-source shopping cart. The strongest value with OpenCart is that it is built on MVC architecture and makes it easy to learn without worrying to break the core functions.
Business scale: small to large
Features: basic out-of the box, but highly extensible
Resources: can run on most hosting servers
Customization: easy and flexible
Interface: good
Price: free

Shopify

Shopify is the pioneer when it comes to e-commerce in SaaS. It is not the first for sure, but the first one to gain the level of popularity with very high customer satisfaction rate.
Business scale: small to large
Features: basic out-of the box, but highly extensible
Resources: stress-free maintenance as it is a SaaS
Customization: one of the easiest to create custom templates
Interface: great
Price: from $14/month

I hope after reading this, you find it a little bit easier to make your decision. If you have any opinion or question, please share it here.

The post Which E-Commerce Platform Is Right for Your Business? appeared first on Michael Sunarlim.

Sendloop is a promising email marketing service with simple and easy user interface. It is developed by the guys from Octech who created Oempro, a popular email marketing software.

If you have been wanting to promote or manage an email marketing for your website or business, I would recommend to try it. With sleek web 2.0 look & feel, you can easily adjust yourself with the system. I dare to say this because the first email marketing software I used years ago just so hard to adapt, although it worked.

A screenshot of Sendloop's clean user interface

Now with Sendloop and other similar services, everyone can create and manage their own mailing lists for regular newsletter or occasional email blast. This is a hosted service, which means you do not need to install and set it up on your own server. You just need to manage your lists, create your campaigns and send them.

They only charge you when you send email to your list(s). For 1 cent per recipient, this is quite a bargain. If you have 1,000 of subscribed email addresses, you only need to budget $10 for your monthly newsletter. Of course if you have more than 10,000 addresses and you need to send them weekly, considering to install your own newsletter system is a good idea.

One last highlight why I have been following their news recently, because they have this one feature that integrates with Shopify’s webhooks. It will enable you to automatically import your customers email addresses to Sendloop.

More information can be found their website.

The post Sendloop appeared first on Michael Sunarlim.

Website: www.shopify.com

[rating: 4.5/5]

A shop in minutes, a business for life. JadedPixel, developer of Shopify, is certainly not exaggerating its tagline, you really can set up your online store in minutes.

It all started a year ago. I had zero experience on working with e-commerce system. I always thought it had to be customized by someone who had absolute knowledge of programming that supports the system, whether it was PHP, ASP, anything. Surprisingly, it only took a few days to fully understand how the themes work and I could create a customized theme in a few days. Note, you can start building your online shop using the provided default themes.

Customization
Just like stated above, it is super easy to learn and create a new theme. It uses its own Liquid templatling system for dynamic content, but believe me it is easy to understand. Of course you still definitely need to have at least an understanding of (x)HTML, CSS and basic programming algorithm.

You only need to modify 6 or 7 theme files and one CSS file, compared to dozens on most of other similar systems. Worth to note, it is also convenient to add a customized JavaScript modules without interfering with the rest of system most of the time

Backend Admin
This is also one of the biggest point why we love it so much. The look and feel is very clean. AJAX support makes it possible to drag and drop to sort your products.

Shopify's Admin interface screenshot

Support
The first place you need to go when you are experiencing any problem or bug is their forums which can be a good or a bad thing. The good thing is there are so many nice and skilled people on the community that will gladly share their knowledge and help you out. The bad thing, you just sometimes need a direct respond and explanations from the developers and it may take a while to get their attention.

Improvement
Shopify is growing along with your business. There are countless updates and new features that have been added since the first time we use it, and they plan to keep on doing it. Although there are some features that we wish they should have added, but not yet. They listen to their customers, so I am sure one day they will be added.

Price
Shopify offers a very unique pricing. You only pay a very reasonable monthly fee plus a small percentage of your transaction fee (ranging from 0.5% to 2%). This makes sense, if you want to start your first online business you possibly do not want to spend hundreds or thousands of dollar each month. You can check their detailed pricing plans here.

Final Words
I have worked partially with other systems since then, nothing is as simple as Shopify. It really stands with its concept, to make everything as easy as possible. For a small and medium business, Shopify is perfect! But if you need more detailed features like bulk shipping update, more flexible coupon code creation options or customer membership, you might have to wait until they include them to the system.

The post Review: Shopify appeared first on Michael Sunarlim.