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.

The post Saidokā – Docked by your side appeared first on Michael Sunarlim.

Nevertheless, thank you Creative Bloq for featuring our website. It is an honor to be listed amongst other great websites.

Even though you may not be able to find a direct link to the WP part on our website, we still keep it for archive and preserve old links. You can find it here.
Please note that the content of this section is mostly outdated and no longer should be used as reference.

The post Featured on Creative Bloq appeared first on Michael Sunarlim.

[inline_media]

[/inline_media]

The post MiniDock is now available with Lightning connector appeared first on Michael Sunarlim.

If you have any comment, feel free to shout it out!

[inline_media]

[/inline_media]

The post Mika, universal stand for tablets appeared first on Michael Sunarlim.

Bluelounge

We launched 7 products this year, should be more if we consider the soft goods as multiple items! All of them are amazing too, but MiniDock and Milo got the most attention. In case you have not heard of them, then you should check them out. My personal favorite is the Bonobo iPad Sleeve. Here are the complete list:

• Nest
  
• MiniDock
  
• Kicks
  
• Milo
  
• Sumo
  
• Shell
  
• Bonobo Series
  

On top of those awesome products, we also launched EU Web Store. I cannot really provide you the link as it was designed to automatically detect your IP address and direct you to the correct store based on the region you are in. You can switch between stores from this page. Our EU Store only ships to 36 countries within Europe, while the US and Global customers will still be shipped from our LA warehouse.

Web Projects

Outside of Bluelounge, I was also given the opportunities to work on few exciting projects:

• id-connect design solutions
   
• Mario Khoe Portraiture
   

Sorry to keep this short in the end. Many stuff could be talked about here, but since this is the last day of the year I should enjoy it more instead of still stuck in front of my laptop. Next year I will try to post more often, the determination from a year before which I totally failed Happy New Year!

The post Quick Recap of 2011 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.

For the others who are also interested with this new web standard, I recommend Professional CSS: Cascading Style Sheets for Web Design as a reference book. Of all the books I’ve read about XHTML and CSS, this one gave me the best view and understanding as the writers give real life example with very detailed descriptions for implementing them. Even for non-experienced web designers or people who just started learning about web design, I would still recommend it as the first chapter explains all the basics to create a web project.

The other problem that has been holding me back to start was the supporting application. As powerful as Macromedia/Adobe Dreamweaver can be for a WYSIWYG HTML editor, it still lacks the support for full XHTML/CSS layouting. Finally, after months of searching and trying, I found West Civ’s Style Master (available for both Win and Mac). I have only tried it for a few hours, but already find almost all of the required features for the transition. Hope this is the app I’ve been looking for, or hopefully Adobe make a new breakthrough when they release the next version of Dreamweaver.

The post Switching to XHTML/CSS appeared first on Michael Sunarlim.