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.

…think of it as “anything that isn’t bulk“. Basically, it is email sent to an individual based on some action.

In my own words related to e-commerce, transaction emails are all notification emails sent out by your e-commerce/shopping cart platform related with a customer’s account or order activities such as:

• Account creation welcome email
• Password reminder/reset instructions
• Order confirmation/invoice
• Order status update
• Shipping tracking number
• Order review request, etc

By default, if you host your e-commerce platform on your own server, most likely these emails are sent directly using the server’s built-in mail application like sendmail on Apache/PHP environment. If you have this running then all is good, but what if you can make it even better? By using 3rd-party transaction email provider, you send out these emails through their server. Usually communication between your server and theirs is done through APIs or SMTP.

Benefits

Why is it better? There are additional features that you can gain from using a separate server/service to send our your transactional email:

Higher rate of deliverability

Even if you have a very good and clean server, there is still a possibility that your server’s IP to get rejected by certain ISPs (Gmail, Yahoo, Hotmail, etc) when they feel that too many emails coming from the same origin. Like email SaaS, transactional email services most likely have a farm of servers with multiple IPs that has been optimized to get maximum acceptability across different ISPs.

Additional insights of your email activities

You now have the options to track the numbers of bounced emails, open rates and click rates just like when you are sending your newsletter email campaigns. While the accuracy of this not 100%, you can only track open rate if the customers’ email readers supports HTML, it is still a valuable additional insight. Let’s say you see that the open rate for your invoice emails is very low, probably the subject is not clear enough and you can make an improvement on it.

Create additional rules

Customers occasionally enter wrong email address in their order details which may result the notification emails never get delivered to them. By setting a simple rule like to notify you when an email gets bounced, you can then check the cause and email address, and if possible correct it before the customer contacts you regarding his order.

Services Compared

There are few services that offer to send transactional emails. There are typically 2 types of pricing:

1. Monthly plan
   You pay a flat monthly fee and you will be given a quota of number of emails that can be sent within that cycle.
2. Pay-as-you-go
   You pay based on the number of emails or credits that you have sent out within that month.
3. Buy bulk credits
   You buy a bundle of credits where it will be subtracted every time you send out an email.

Honestly I cannot rate each of the services’ quality and features, as in the context of e-commerce applications we are not using the features or APIs too extensively. For now, I only compare them based on pricing and compatibility with most popular self-hosted shopping cart platforms, Magento and OpenCart.

Price starts from	$9.95 per month – 40,000 credits	$1.50 per 10,000 emails	Free for first 12,000 emails in a month	Free for first 6,000 emails in a month
Magento integration	documented	plugin	MagentoConnect extension	plugin
OpenCart integration	via SMTP	via SMTP or PHP class	extension ($10)	via SMTP
Website	sendgrid.com	postmarkapp.com	mandrill.com	mailjet.com

If you have experience using different transactional email services for your online store, please share it here.

The post Using Transactional Email Service for Your E-Commerce Platform appeared first on Michael Sunarlim.

Great tool to benchmark your web page performance and load time.

The post WebPagetest – Website Performance and Optimization Test appeared first on Michael Sunarlim.

If you already do the regular backup then you can probably restore everything with the cost of your time, or the hosting support team may assist you to restore their daily backup. Then again, there is a possibility their backup is on the same node that is having the problem.

Having a remote backup is one of the most simple precaution you can do to add another layer to your disaster recovery plan. One of the reasons web/IT people hesitate to do this is because it means doubling the cost of the web server since you need to host a new one in preferably different location. Well, in my case this obstacle has been solved as I managed to find a couple of companies that offer special product only for this purpose.

How Does It Work?

Unlike most web hosting providers that offer complete tunning services that include web server, email, database, etc,  a backup only plan will only offer a large disk space that you can access via FTP. To do the automatic backup, you can use Rsync which is a great Unix tool to do increment copies of your server files. That combined with cronjob setting, you get an automatic, regular, secure, and efficient backup of your server.

Who Offers This Kind of Service?

When I did my research, I found two companies with good reputation that can provide FTP backup plan with very reasonable pricing. They are not big players in the hosting industry, but they offer excellent service and I am very happy with the results they one of them so far. Here are the links to those ompanies you need to check:

• Hostigation
• WebbyCart

There you go, hopefully this little tip can help you to sleep better at nights knowing your server files are backed up and you have a complete backup of your files on different server.

The post Remote Backup your VPS/Dedicated Server appeared first on Michael Sunarlim.

By the way, ScribeFire works in Firefox, Chrome and Safari.

The post ScribeFire: Fire up your blogging appeared first on Michael Sunarlim.

Panic Coda

I have to admit it, Coda by Panic is really one of the best Mac apps ever. Not only it has finally given me the better direction in developing HTML/CSS correctly, it also makes it more fun! It is quite a shame that Panic has not been updating it for a few months now, but that does not make it less powerful.

Why? Because Coda supports third-party plug-ins to enable you add more functions on top on the ones that come with the application itself. No, those plug-ins will not automatically create a website for you.. Consider them like as WordPress plug-ins or widgets, simple and small functions but if collected and used properly can save you hours of development time.

You can get a long list of the officially supported plugin-ins on Panic’s Developer section. To help you in choosing the right ones, here are my favorites:

• Lorem Ipsum
  Generate 1 to 5 paragraphs of Lorem Ipsum placeholder text.
• Remove Trailing Whitespace
  Trims whitespace from the ends of lines.
• Replace Special Characters
  Converts almost all special symbols and characters into HTML entities.
• TEA for Coda (not listed on Panic’s website)
  Text Editor Actions for Coda (formerly “Textmate Emulation Actions”, and always TEA for short) is a plugin that emulates some of my favorite Textmate HTML.bundle actions.
• CSS Tools
  Performs automatic reformatting of CSS.

If you have your own favorites, please feel free to share them below.

The post My Favorite Coda Plug-Ins appeared first on Michael Sunarlim.

Few web developers hesitate to include one because they think it will take too much time or effort to make it work, specially if they do not have any server-side programming basics. That is no longer the case, these tools will help you build nice contact form for any project quickly:

Contactable

Contactable is a jQuery plugin designed to make contact/feedback forms simpler and more accessible. This plugin will enable you to create a contact form on any page of a site with minimal effort. I also made a small modification of this great plugin to appear on the right side of the page instead the left, you can check it here.

Wufoo

Wufoo is one of the easiest form builder around. It helps you create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code. Its free account is more than enough to create basic online forms, but you can easily upgrade to premium plans to fit your needs.

pForm

Similar with Wufoo, pForm comes with an online form builder with simple interface that will help you build forms of any kind. Integration with your existing web page might be a bit more complicated than Wufoo, but still more simple than building a custom form yourself.

MachForm

MachForm is developed by the same company as pForm. It is the server installable version. You have more options like: receive submission and save to database, send entries to email, send autoresponder email, validate inputs, and lot more.

The post Tools to Build Your Contact Form in Less Than 5 Minutes appeared first on Michael Sunarlim.

Wrong. If you have the principle that a web project does not end after you launch a website and get the final payment, you should realize the extra work you need to do if you chose or suggested wrong hosting provider. You want your client to be happy with the website you built, not to get frustrated because it goes down every now and then while you can do nothing about it.

So, what makes the differences between the right providers with the rest? To me it would be quality, support and transparency. Put prices in consideration after you are confident with those three first. Remember, web hosting is a very competitive business. It is rarely a company is trying to overcharge you unless it has much better quality than the rest.

Now to the most important question: what type of server that you need?

Shared Hosting

Most companies and developers usually put this as the first option for a very reasonable reason: price. Nowadays, you can get the good shared hosting plans from $5-20/month. Are there differences between one with another that costs 4-5 times more? Most of the time, yes. Usually providers that offer more economical plans gain the profit by trying to sell more with the same server resources, this might mean they put more restrictions for the account like outgoing email and databases limitations.

When you are researching for a shared hosting plan, be sure to check on the limits for those. The next thing you might also want to know is SSH support.

The good things

• Economical
• Best money for disk capacity offered
• Can be set with minimal web server knowledge
• Easy to upgrade, although mostly only for space and bandwidth

What you might miss

• Limited resources
• Limited access

Things to check

• Disk space capacity
• Email, database, etc limitations
• SSH access support

Ideal for…

• Websites with minimal or no plan of expansion
• Static websites
• Companies or clients that plan to host many email accounts so require a big disk space

Recommendation

• BlueHost
• MediaTemple*

*Note: recently MT has been having stability and security issues on their gs (shared) plans, but I cannot overlook the fact that it has the nicest interface. This is important because it encourages the clients to browse through their control panel and do not get overwhelmed by it.

Virtual Private Server

This is the next upgrade for regular hosting, above this then it means you are developing a website in a very huge scale. Virtual Private Server gives you much more flexibility when it comes to resources and access. You can practically install anything that you can do on your local computer/server. It can easily be an overkill you opt for this if you only plan to host a simple company profile without any server-side processes.

When do you need to upgrade to dedicated virtual? When your blog is listed as the top 10 blogs to follow by Smashing Magazine, kidding. You should start considering it if you are developing a web project or installing a web app that requires more than average resources, like a newsletter system with thousands of subscribers or e-commerce system with many customers.

The good things

• Better flexibility
• Installable with almost any type of web based applications
• Can be reselled
• Guaranteed resources

What you might miss

• Cost more than shared hosting, usually with less disk space
• Simple access, more knowledge is needed

Things to check

• Type of server: unmanaged/semi-managed/managed
• Control Panel system: CPanel/Plesk/etc
• Disk space, actual memory, server processor

Ideal for…

• Websites with few applications installed
• Dynamic websites and blogs with very high daily traffic
• Companies or clients who are planning to expand the website with new sections and features
• If you want to host the projects from your clients yourself

Recommendation

• Linode (unmanaged)
• WiredTree (managed)

At the end, when comes the time to choose one, look for direct references and do your research to find the most suitable plan for. It is worth to mention about WebHostingTalk as one of the best source to find web hosting reviews and coupon codes and promotion!

I am sure you have your own opinions and suggestions about this, please feel free to post your comments.

The post Choosing The Right Web Hosting 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.

Not only it provides a few dozens of animated GIF image for your loader, you can even customize it background and foreground colors. Nice!

The post Ajax Loader Image Generator appeared first on Michael Sunarlim.