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.

Google is not only polishing the interface on their mobile OS platform, but streamlining most of their wonderful and indispensable web applications with a unified look and style. Material Design is the latest design/visual language developed by Google and announced at the Google I/O conference in June 2014. As with latest UI design philosophy, Google went with flat look and focused on the details. While the direction is open for personal’s opinions, in overall I think Google has done a remarkable job.

If you love Material Design, there is no reason why you should not try to use it as the DNA of your next project. Luckily a bunch of talented people took very little time to make things easier for their fellow designers and developers to be able to take make use the framework to their site’s design.

Materialize

This one goes on the top of my list because it feels like most polished and actively developed. The framework homepage shows a clear example how you can create nice look on your websites using their components.

Bootstrap Material

If you are already in love with Bootstrap and do not want to fool around with another framework, there is a solution for that too through this project by applying Material Design as a Bootstrap theme. Note that as the time of writing, this theme is not ready for production.

Material UI

Last but not least, if you use React for your JavaScript library, this framework is definitely for you.

There you go. Hopefully the list is useful for you. If you know other front-end frameworks that are based on Material Design, please share them by replying to this post. I would love to check and possibly add them here.

The post Front End Frameworks Based on Google’s Material Design appeared first on Michael Sunarlim.

All you need is some basic knowledge of (X)HTML and CSS and the rest is very well explained on the tutorial. Do not let that long and very detailed steps discourage you, it is actually very easy to do!

Create a fancy signature for your Apple Mail

Read the tutorial (by All Forces)

The post Custom CSS Signatures in Apple Mail appeared first on Michael Sunarlim.

• Listmatic – Using CSS and a simple list to create radically different list options
• CSS Table Gallery – A showcase of how CSS and data tables can work together to create usable and pretty results
• Position Is Everything – Explain some obtuse CSS bugs in modern browsers, provide demo examples of interesting CSS behaviors, and show how to “make it work” without using tables for layout purposes
• A List Apart – Explores the design, development, and meaning of web content, with a special focus on web standards and best practices
• CSS tests and experiments

You can share yours too..

The post CSS Reference appeared first on Michael Sunarlim.

We can use something called Safari bookmarklets to solve this. Here’s how:

1. From Safari, CMD+right click then choose ‘Copy Link’ this link.
2. Add the previously copied link as one of your bookmark, you may name it ‘Toggle Linked CSS’ or anything.
3. Now, everytime you browse just click on that bookmark during a visit of a page and you can see it with its CSS disabled.
4. Confused? Just try to test it by clicking on the link above or the added bookmark on this site first then.

Note that this trick does not work 100% on every site, but more than enough as an alternative.

The post Disabling CSS on Safari 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.